-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (110 loc) · 9.11 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Responsive Site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1"/>
<link rel="stylesheet" href="./styles.css">
<!-- <meta name="keywords" content="[ -- Site keywords here -- ]"/> -->
<!-- <meta name="description" content="[ -- Site description here -- ]"/> -->
<!-- <link rel="icon" href="./images/favicon.png" sizes="512x512"> -->
<!-- <link rel="apple-touch-icon" href="./images/ios_site_icon_here.png"> -->
<!-- <link rel="mask-icon" href="./images/site_svg_icon_here.svg" color="#000000"> -->
<!-- OR: https://realfavicongenerator.net/ -->
<!-- <meta property="og:title" content="[ -- Site or related title here -- ]"> -->
<!-- <meta property="og:description" content="[ -- Site description here -- ]"> -->
<!-- <meta property="og:site_name" content="[ -- Site name here -- ]"> -->
<!-- <meta property="og:url" content="https://www.site_domain_here.com/"> -->
<!-- <meta property="og:image" content="https://www.site_domain_here.com/images/open_graph_logo_here.png"> -->
<!-- <meta property="og:type" content="website"> -->
<!-- OR: https://metatags.io/ -->
</head>
<body>
<header class="page-header" role="banner">
<div class="header-inner">
<div id="logo">
<img src="./images/logo.png" alt="Site logo">
</div>
<input type="checkbox" id="nav-toggle" name="nav-toggle">
<label for="nav-toggle" class="nav-toggle-icon"></label>
<nav class="main-nav" role="navigation" aria-label="Main menu">
<ul>
<li><a href="#replace-with-a-link">Nav Item</a></li>
<li><a href="#replace-with-a-link">Nav Item</a></li>
<li><a href="#replace-with-a-link">Nav Item</a></li>
<li><a href="#replace-with-a-link">Nav Item</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<picture>
<source srcset="./images/hero-smallest.png"
media="(max-width: 799px)">
<source srcset="./images/hero-small.png"
media="(min-width: 800px) and (max-width: 1199px)">
<source srcset="./images/hero-default.png"
media="(min-width: 1200px)">
<!-- fallback for unsupported browsers -->
<img src="./images/hero-default.png" alt="Hero Image">
</picture>
</section>
<main id="content" class="main-content" role="main">
<h1>Heading Text - h1</h1>
<h2>Heading Text - h2</h2>
<h3>Heading Text - h3</h3>
<h4>Heading Text - h4</h4>
<h5>Heading Text - h5</h5>
<h6>Heading Text - h6</h6>
<button class="btn" type="button">This is a button</button>
<p><a href="javascript:void(0)">This is a link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Ultrices dui sapien eget mi proin. Porttitor eget dolor morbi non. Consequat interdum varius sit amet mattis vulputate enim. Posuere sollicitudin aliquam ultrices sagittis. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Dui sapien eget mi proin sed. Senectus et netus et malesuada. <a href="javascript:void(0)">This is a link within a paragraph</a>. Libero volutpat sed cras ornare arcu dui. Purus viverra accumsan in nisl nisi. Risus nullam eget felis eget nunc. Tempus egestas sed sed risus pretium. Ac auctor augue mauris augue neque. Varius duis at consectetur lorem donec massa.</p>
<p>Eu volutpat odio facilisis mauris sit. Faucibus purus in massa tempor. Nunc mattis enim ut tellus elementum sagittis. Consequat nisl vel pretium lectus quam id leo. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Mi sit amet mauris commodo quis imperdiet massa. Proin sed libero enim sed faucibus turpis in eu mi. Quis eleifend quam adipiscing vitae. Egestas sed tempus urna et pharetra pharetra massa. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Quam pellentesque nec nam aliquam. In tellus integer feugiat scelerisque varius morbi enim nunc. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan.</p>
<section class="text-over-image">
<div class="text-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Ultrices dui sapien eget mi proin aliquet bibendum.</p>
<p>Porttitor eget dolor morbi non. Consequat interdum varius sit amet mattis vulputate enim pharetra sit amet.</p>
</div>
<picture>
<source srcset="./images/wide-smallest.png"
media="(max-width: 799px)">
<source srcset="./images/wide-small.png"
media="(min-width: 800px) and (max-width: 1199px)">
<source srcset="./images/wide-default.png"
media="(min-width: 1200px)">
<!-- fallback for unsupported browsers -->
<img src="./images/wide-default.png" alt="Hero Image">
</picture>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Ultrices dui sapien eget mi proin. Porttitor eget dolor morbi non. Consequat interdum varius sit amet mattis vulputate enim. Posuere sollicitudin aliquam ultrices sagittis. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Dui sapien eget mi proin sed. Senectus et netus et malesuada. <a href="javascript:void(0)">This is a link within a paragraph</a>. Libero volutpat sed cras ornare arcu dui. Purus viverra accumsan in nisl nisi. Risus nullam eget felis eget nunc. Tempus egestas sed sed risus pretium. Ac auctor augue mauris augue neque. Varius duis at consectetur lorem donec massa.</p>
<p>Eu volutpat odio facilisis mauris sit. Faucibus purus in massa tempor. Nunc mattis enim ut tellus elementum sagittis. Consequat nisl vel pretium lectus quam id leo. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Mi sit amet mauris commodo quis imperdiet massa. Proin sed libero enim sed faucibus turpis in eu mi. Quis eleifend quam adipiscing vitae. Egestas sed tempus urna et pharetra pharetra massa. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Quam pellentesque nec nam aliquam. In tellus integer feugiat scelerisque varius morbi enim nunc. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan.</p>
<section class="text-over-image tall-image">
<div class="text-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Ultrices dui sapien eget mi proin aliquet bibendum.</p>
<p>Porttitor eget dolor morbi non. Consequat interdum varius sit amet mattis vulputate enim pharetra sit amet.</p>
<p>Posuere sollicitudin aliquam ultrices sagittis. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat.</p>
</div>
<picture>
<source srcset="./images/tall-smallest.png"
media="(max-width: 499px)">
<source srcset="./images/tall-small.png"
media="(min-width: 500px) and (max-width: 799px)">
<source srcset="./images/tall-default.png"
media="(min-width: 800px)">
<!-- fallback for unsupported browsers -->
<img src="./images/wide-default.png" alt="Hero Image">
</picture>
</section>
<p>Eu volutpat odio facilisis mauris sit. Faucibus purus in massa tempor. Nunc mattis enim ut tellus elementum sagittis. Consequat nisl vel pretium lectus quam id leo. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Mi sit amet mauris commodo quis imperdiet massa. Proin sed libero enim sed faucibus turpis in eu mi. Quis eleifend quam adipiscing vitae. Egestas sed tempus urna et pharetra pharetra massa. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Quam pellentesque nec nam aliquam. In tellus integer feugiat scelerisque varius morbi enim nunc. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan.</p>
</main>
<footer class="footer">
<div class="inner-footer">
<p>Footer content</p>
<a href="#link-here">Footer Link</a>
</div>
</footer>
</body>
</html>