-
Notifications
You must be signed in to change notification settings - Fork 156
/
index.html
79 lines (65 loc) · 4.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your Name Goes Here</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/forms.css">
</head>
<body>
<header>
<h1>Your Name Goes Here</h1>
<nav class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="#" target="_blank">Name of project goes here</a>
<a href="#" target="_blank">Name of project goes here</a>
<a href="#" target="_blank">GitHub</a>
<a href="#" target="_blank">LinkedIn</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</nav>
</header>
<main class="wrapper">
<picture class="profile">
<source media="(min-width: 1200px)" srcset="images/desktop.jpg">
<source media="(min-width: 501px)" srcset="images/tablet.jpg">
<img src="images/phone.jpg" alt="That's me!">
</picture>
<h2 class="subheader">About Me</h2>
<p>We'll use this page as a place for links to the work you've done, and stand as an example of how to build a <a href="https://www.liferay.com/resources/l/web-portal" target="_blank">portal</a> page to show our projects.</p>
<p>Watch this video, <a href="https://www.youtube.com/watch?v=ecw_ugVd81k" target="_blank">How to write a short professional bio</a> and write a few paragraphs that identify your background, skills, goals and accomplishments.</p>
<p>Replace the pictures named <b>desktop.jpg</b>, <b>tablet.jpg</b> and <b>phone.jpg</b> in the <b>images</b> folder with pictures of yourself, or pictures that represent you.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit nec purus non vestibulum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ipsum odio, lacinia congue varius in, iaculis eget felis. Proin facilisis dui nec purus viverra, sed tempus risus sollicitudin.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce malesuada felis ac dapibus tempus. Nulla in purus id leo finibus consequat quis eget mi. In gravida maximus risus eget scelerisque. In placerat diam ut tellus ullamcorper, eu elementum augue vulputate. Cras ut pretium ante. Sed porta eros vel lobortis gravida. Nullam ultrices justo eget felis pharetra aliquam. Maecenas hendrerit hendrerit facilisis.</p>
<h3>Page Origin</h3>
<p>The HTML/CSS comes from Sara Newman's Web Fundamentals class as taught at Seattle Central. This page provides a basis for students to build a responsive portal page.</p>
<p>Study how this page is built, with the <a href="https://www.youtube.com/watch?v=151NXMk0a2c" target="_blank">DOM Inspector</a> and use it as a foundation for your portal or other sites!</p>
<footer>
<p><small>© 2023-<span id="this-year"></span> by
YOUR NAME HERE, All Rights Reserved ~
<a id="html-checker" href="#" target="_blank">Check HTML</a> ~
<a id="css-checker" href="#" target="_blank">Check CSS</a></small>
</p>
</footer>
</main>
<!-- Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon -->
<script>
//https://tinyurl.com/dynamic-html-css-checkers
document.getElementById("html-checker").setAttribute("href","https://validator.w3.org/nu/?doc=" + location.href);
document.getElementById("css-checker").setAttribute("href","https://jigsaw.w3.org/css-validator/validator?uri=" + location.href);
//set current year in span with id of this-year
let d = new Date(); let thisYear = d.getFullYear();
document.getElementById("this-year").innerHTML = thisYear;
//manages mobile nav
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>