-
Notifications
You must be signed in to change notification settings - Fork 123
/
index.html
162 lines (124 loc) · 7.56 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!-- JOHN DOE’S PAGE - https://github.com/cadars/john-doe/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Site title</title>
<meta name="description" content="Site description">
<!-- Recommended minimum -->
<meta property="og:title" content="Site title">
<meta property="og:description" content="Site description">
<meta property="og:image" content="img/site-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<!-- You could also inline the stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>
<a href="#home">Site title</a>
</h1>
<nav>
<a href="#about">About</a>
<a href="#news">News</a>
<a href="#photos">Photos</a>
<a href="#portfolio">Portfolio</a>
</nav>
</header>
<main>
<section id="home"> <!-- HOME -->
<p>This is the homepage, displayed by default.</p>
</section>
<section id="about"> <!-- ABOUT -->
<p>This is the about page. <a href="#another-page">This is a link to another page</a>.</p>
<figure>
<a href="#img-about">
<img loading="lazy" alt="" src="//dummyimage.com/1200x600/ddd/bbb" width="1200" height="600">
</a>
<figcaption>Example of an image with a link to a larger version.</figcaption>
</figure>
</section>
<section id="news"> <!-- NEWS -->
<article>
<h2>Blogging with Joe Bloggs <time datetime="2020-10-10">10.10.2020</time></h2>
<p> One <em>could</em> use this setup to write <s>a blog</s> short updates. For images make sure to use the <code>loading="lazy"</code> attribute, so they get loaded only when needed.<label for="lazy">1</label><input type="checkbox" id="lazy"><small>
You might be able to use it for <code>iframe</code> embeds too(?), but maybe just write a link to the Youtube video instead.
</small></p>
</article>
<article>
<h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="2004-12-12">12.12.2004</time></h2>
<p>Honestly you don't want to know.</p>
</article>
</section>
<section id="photos"> <!-- PHOTOS -->
<p>An example of a photo gallery with a lightbox.</p>
<!-- You can use this grid of images in any page -->
<div class="grid">
<a href="#img-01"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-02"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-03"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
<a href="#img-04"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-05"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-06"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
<a href="#img-07"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-08"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-09"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
<a href="#img-10"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-11"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-12"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
<a href="#img-13"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
<a href="#img-14"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
<a href="#img-15"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
</div>
</section>
<section id="portfolio"> <!-- PORTFOLIO -->
<div class="slides">
<figure><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></figure>
<figure><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></figure>
<figure><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></figure>
<figure>
<p>You could also have text over here…</p>
</figure>
<figure>
<img loading="lazy" alt="" src="//dummyimage.com/1000x1000/ddd/bbb">
<figcaption>…or image captions</figcaption>
</figure>
<figure style="background:#fdcb39">
<img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb">
<figcaption>add a solid background</figcaption>
</figure>
<figure class="cover">
<img loading="lazy" alt="" src="https://64.media.tumblr.com/7904066936b9324571738bbbeeb082e9/tumblr_myopxy8uJI1qz4vi0o1_1280.jpg">
<p style="color:#fff">or go full bleed</p>
</figure>
</div>
</section>
<section id="another-page"> <!-- ANOTHER PAGE -->
<p>This page is not referenced in the menu, yet it exists.</p>
<p><a href="#about">← back</a></p>
</section>
</main>
<!-- ----------
LIGHTBOX IMAGES
----------- -->
<!-- PHOTOS grid -->
<a href="#photos" class="lightbox" id="img-01"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-02"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-03"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-04"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-05"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-06"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-07"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-08"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-09"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-10"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-11"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-12"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-13"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-14"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
<a href="#photos" class="lightbox" id="img-15"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
<!-- Other images -->
<a href="#about" class="lightbox" id="img-about"><img loading="lazy" alt="" src="//dummyimage.com/2400x1200/ddd/bbb"></a>
</body>
</html>