-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·154 lines (152 loc) · 7.16 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,500,600"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Playfair+Display:100,300,400,500,600,900"
/>
<title>Responsive Layout Practice</title>
</head>
<body>
<header>
<div class="container">
<h1 class="logo">Responsive Layout Practice</h1>
<div class="logo-text">
<p>
Click on <em>Number 1</em> ... <em>Number 2</em> or <em>Number 3</em> ... etc. to see
the websites.
</p>
</div>
</div>
</header>
<div class="flex-container">
<!-- Number 1 -->
<div class="web-element">
<h1><a href="./number1/index.html">Number 1</a></h1>
<picture>
<source srcset="./img/number01.webp" type="image/webp" />
<img src="./img/number01.png" alt="first layout design linked" size />
</picture>
</div>
<!-- Number 2 -->
<div class="web-element">
<h1><a href="./number2/index.html">Number 2</a></h1>
<picture>
<source srcset="./img/number02.webp" type="image/webp" />
<img src="./img/number02.png" alt="second layout design linked" size />
</picture>
</div>
<!-- Number 3 -->
<div class="web-element">
<h1><a href="./number3/index.html">Number 3</a></h1>
<picture>
<source srcset="./img/number03.webp" type="image/webp" />
<img src="./img/number03.png" alt="third layout design linked" size />
</picture>
</div>
<!-- Number 4 -->
<div class="web-element">
<h1><a href="./number4/index.html">Number 4</a></h1>
<picture>
<source srcset="./img/number04_2.webp" type="image/webp" />
<img src="./img/number04_2.png" alt="fourth layout design linked" size />
</picture>
</div>
<!-- Number 5 -->
<div class="web-element">
<h1><a href="./number5/index.html">Number 5</a></h1>
<picture>
<source srcset="./img/number05.webp" type="image/webp" />
<img src="./img/number05.png" alt="fifth layout design linked" size />
</picture>
</div>
<!-- Number 6 -->
<div class="web-element">
<h1><a href="./number6/index.html">Number 6</a></h1>
<picture>
<source srcset="./img/number06.webp" type="image/webp" />
<img src="./img/number06.png" alt="sixth layout design linked" size />
</picture>
</div>
<!-- Number 7 -->
<div class="web-element">
<h1><a href="./number7/index.html">Number 7</a></h1>
<picture>
<source srcset="./img/number07.webp" type="image/webp" />
<img src="./img/number07.png" alt="seventh layout design linked" size />
</picture>
</div>
<!-- Number 8 -->
<div class="web-element">
<h1><a href="./number8/index.html">Number 8</a></h1>
<picture>
<source srcset="./img/number8.webp" type="image/webp" />
<img src="./img/number8.png" alt="Eigth layout design linked" size />
</picture>
</div>
<!-- Number 9 -->
<div class="web-element">
<h1><a href="./number9/index.html">Number 9</a></h1>
<h2>(api work in progress)</h2>
<picture>
<source srcset="./img/number9.webp" type="image/webp" />
<img src="./img/number9.png" alt="Nineth layout design linked" size />
</picture>
</div>
<!-- Number 10 -->
<div class="web-element">
<h1><a href="./number10/index.html">Number 10</a></h1>
<h2>(work in progress)</h2>
<picture>
<source srcset="./img/number10.webp" type="image/webp" />
<img src="./img/number10.png" alt="tenth layout design linked" size />
</picture>
</div>
</div>
<footer>
<div class="footer-container">
<div class="footer-content">
<div>
<a class="btn-social" href="https://github.com/bdlowery"
><svg
class="footer-svg"
id="Bold"
enable-background="new 0 0 24 24"
height="512"
viewbox="0 0 24 24"
width="512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z"
/></svg
></a>
</div>
<div>
<a class="btn-social" href="https://twitter.com/bdlowery2"
><svg
class="footer-svg"
height="512pt"
viewbox="0 0 512 512"
width="512pt"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m256 0c-141.363281 0-256 114.636719-256 256s114.636719 256 256 256 256-114.636719 256-256-114.636719-256-256-256zm116.886719 199.601562c.113281 2.519532.167969 5.050782.167969 7.59375 0 77.644532-59.101563 167.179688-167.183594 167.183594h.003906-.003906c-33.183594 0-64.0625-9.726562-90.066406-26.394531 4.597656.542969 9.277343.8125 14.015624.8125 27.53125 0 52.867188-9.390625 72.980469-25.152344-25.722656-.476562-47.410156-17.464843-54.894531-40.8125 3.582031.6875 7.265625 1.0625 11.042969 1.0625 5.363281 0 10.558593-.722656 15.496093-2.070312-26.886718-5.382813-47.140624-29.144531-47.140624-57.597657 0-.265624 0-.503906.007812-.75 7.917969 4.402344 16.972656 7.050782 26.613281 7.347657-15.777343-10.527344-26.148437-28.523438-26.148437-48.910157 0-10.765624 2.910156-20.851562 7.957031-29.535156 28.976563 35.554688 72.28125 58.9375 121.117187 61.394532-1.007812-4.304688-1.527343-8.789063-1.527343-13.398438 0-32.4375 26.316406-58.753906 58.765625-58.753906 16.902344 0 32.167968 7.144531 42.890625 18.566406 13.386719-2.640625 25.957031-7.53125 37.3125-14.261719-4.394531 13.714844-13.707031 25.222657-25.839844 32.5 11.886719-1.421875 23.214844-4.574219 33.742187-9.253906-7.863281 11.785156-17.835937 22.136719-29.308593 30.429687zm0 0"
/></svg
></a>
</div>
</div>
</div>
</footer>
</body>
</html>