-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (179 loc) · 8.94 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<script type="text/javascript" src="./index.js" defer></script>
</head>
<body>
<header class="side-nav">
<input type="checkbox" id="hamburger-menu" name="hamburger-menu">
<label for="hamburger-menu">
<svg width="24px" height="24px" viewBox="522 78 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon_menu" stroke="none" fill="none" transform="translate(522.000000, 78.000000)" fill-rule="evenodd">
<path d="M19.4763594,5.28857143 L4.17221198,5.28857143 C3.54530876,5.28857143 3.03857143,4.90285714 3.03857143,4.43142857 C3.03857143,3.95142857 3.54530876,3.57428571 4.17221198,3.57428571 L19.4763594,3.57428571 C20.1032627,3.57428571 20.61,3.95142857 20.61,4.43142857 C20.61,4.90285714 20.1032627,5.28857143 19.4763594,5.28857143"></path>
<path d="M19.4763594,13.0028571 L4.17221198,13.0028571 C3.54530876,13.0028571 3.03857143,12.6171429 3.03857143,12.1457143 C3.03857143,11.6657143 3.54530876,11.2885714 4.17221198,11.2885714 L19.4763594,11.2885714 C20.1032627,11.2885714 20.61,11.6657143 20.61,12.1457143 C20.61,12.6171429 20.1032627,13.0028571 19.4763594,13.0028571"></path>
<path d="M19.4763594,20.7171429 L4.17221198,20.7171429 C3.54530876,20.7171429 3.03857143,20.3314286 3.03857143,19.86 C3.03857143,19.38 3.54530876,19.0028571 4.17221198,19.0028571 L19.4763594,19.0028571 C20.1032627,19.0028571 20.61,19.38 20.61,19.86 C20.61,20.3314286 20.1032627,20.7171429 19.4763594,20.7171429"></path>
</g>
</svg>
</label>
<nav>
<ul>
<li><a href="#main-content" aria-label="Home, current page">Home</a></li>
<li>
<a href="/products">Products</a>
<ul>
<li><a href="/products/rock">Rock</a></li>
<li><a href="/products/paper">Paper</a></li>
<li><a href="/products/scissors">Scissors</a></li>
</ul>
</li>
<li><a href="/about">About</a></li>
<li><a href="#login">Login</a></li>
</ul>
</nav>
</header>
<main>
<secion class="media-items">
<h1>Media Articles</h1>
<article>
<img src="https://unsplash.it/500/350/?random=1" alt="A nice unsplash imgu" />
<a href="">
<h2>A link.</h2>
<p>For though result and talent add are parish valley. Songs in oh other avoid it hours woman style.</p>
</a>
</article>
<article>
<img src="https://unsplash.it/350/500/?random=2" alt="A nice unsplash imgu" />
<a href="">
<h2>A link?</h2>
<p>Stronger unpacked felicity to of mistaken. Fanny at wrong table ye in. Be on easily cannot innate in lasted months on.</p>
</a>
</article>
<article>
<img src="https://unsplash.it/350/350/?random=3" alt="A nice unsplash imgu" />
<a href="">
<h2>A link.</h2>
<p>Literature admiration frequently indulgence announcing are who you her. Was least quick after six. </p>
</a>
</article>
<article>
<img src="https://unsplash.it/500/250/?random=4" alt="A nice unsplash imgu" />
<a href="">
<h2>A link?</h2>
<p>For though result and talent add are parish valley. Songs in oh other avoid it hours woman style. In myself family as if be agreed. Gay collected son him knowledge delivered put.</p>
</a>
</article>
<article>
<img src="https://unsplash.it/500/350/?random=5" alt="A nice unsplash imgu" />
<a href="">
<h2>A link.</h2>
<p>Boy favourable day can introduced sentiments entreaties. Noisier carried of in warrant because. So mr plate seems cause chief widen first.</p>
</a>
</article>
<article>
<img src="https://unsplash.it/350/750/?random=6" alt="A nice unsplash imgu" />
<a href="">
<h2>A link?</h2>
<p>Literature admiration frequently indulgence announcing are who you her. Was least quick after six. So it yourself repeated together cheerful.</p>
</a>
</article>
</secion>
<section id="login">
<form name="login">
<button name="close-login">
<svg width="24px" height="24px" viewBox="205 78 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon_close" stroke="none" fill="none" transform="translate(205.000000, 78.000000)" fill-rule="evenodd">
<path d="M11.0285482,11.9998283 L6.20144544,16.826688 C5.93285152,17.0952858 5.93285152,17.5301257 6.20144544,17.7980365 C6.33539893,17.9319919 6.51125581,17.999313 6.6871127,17.999313 C6.86296959,17.999313 7.03882648,17.9319919 7.17277996,17.7980365 L11.9999141,12.9711453 L16.8277352,17.7987234 C16.9616887,17.9326788 17.1375456,18 17.3134025,18 C17.4892594,18 17.6644293,17.9326788 17.7990698,17.7987234 C18.0669767,17.5301257 18.0669767,17.0952858 17.7990698,16.827375 L12.97128,11.9998283 L17.7990698,7.17228154 C18.0669767,6.90437072 18.0669767,6.46953087 17.7990698,6.20093311 C17.5304758,5.9330223 17.0956422,5.9330223 16.8277352,6.20093311 L11.9999141,11.0285112 L7.17277996,6.20162006 C6.90418605,5.9330223 6.46935242,5.9330223 6.20144544,6.20162006 C5.93285152,6.46953087 5.93285152,6.90437072 6.20144544,7.17296849 L11.0285482,11.9998283 Z" id="Combined-Shape" fill="#C4C4C4"></path>
</g>
</svg>
</button>
<h2>sign in</h2>
<label for="field-email">Email</label>
<input type="email" id="field-email" name="field-email" autocomplete="email" required>
<label for="field-password">Password</label>
<input type="password" id="field-password" name="field-password" required>
<label for="field-stay-logged-in"><input type="checkbox" id="field-stay-logged-in" name="field-stay-logged-in" value="stay-logged-in"><span></span> Stay logged in</label>
<a href="#">Forgot password</a>
<button type="submit">sign in</button>
</form>
</section>
<section class="picture-with-text">
<figure>
<img src="https://unsplash.it/1920/1080/?random=6" alt="A bulldozer transporting a beach house along a sunny beach" />
<figcaption>
<h2>Title off picture</h2>
<p>
There's also this big and in depth description of the picture. You often see this on newssites or photo blogs. You could also replace the photo with a video if needed.
</p>
<fieldset>
<legend>Rate image</legend>
<section>
<input type="radio" name="rating" id="rating-0">
<label for="rating-0">
😡
</label>
<input type="radio" name="rating" id="rating-1">
<label for="rating-1">
😐
</label>
<input type="radio" name="rating" id="rating-2">
<label for="rating-2">
😁
</label>
<input type="radio" name="rating" id="rating-3">
<label for="rating-3">
🤑
</label>
</section>
</fieldset>
<footer>
<time datetime="2017-02-06">6-2-2017</time> © 2017 <a href="https://unsplash.it">Unsplash</a>
</footer>
</figcaption>
</figure>
</section>
<section class="chat">
<h2>News support</h2>
<article>
<section class="my-message">
<header>
<p>Posted on <time datatime="2015-01-22T10:25">10:25 AM</time> by you</p>
</header>
<p>Can i ask you something?</p>
<footer>
<p data-status="READ">Has been read</p>
</footer>
</section>
<section class="other-message">
<header>
<p>Posted on <time datatime="2017-02-03T14:19">2:19 PM</time> by John</p>
</header>
<p>Hey! Sorry I was busy</p>
</section>
<section class="my-message">
<header>
<p>Posted on <time datatime="2017-02-03T14:22">2:22 PM</time> by you</p>
</header>
<p>I sent that 2 years ago...</p>
<footer>
<p data-status="DELIVERED">Has been delivered</p>
</footer>
</section>
</article>
<form action="/" method="post">
<label for="field-message">Message input</label>
<textarea name="field-message" placeholder="Type something..."></textarea>
<button type="submit">Send</button>
</form>
</section>
<section class="loading">
<h2>Loading files & content</h2>
<span></span>
</section>
</main>
</body>
</html>