-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
282 lines (250 loc) · 9.81 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html>
<head>
<title>example.com</title>
<style>
* {
margin: 0; padding: 0;
box-sizing: border-box;
font-weight: bold;
}
.clearfix {
clear: both;
overflow: hidden;
}
#container {
width: 1300px; height: 1110px;
margin: 20px auto;
position: relative;
}
#header {
width: 100%; height: 70px;
position: absolute;
top: 0; left: 0;
}
#header h2 {
width: 300px;
float: left;
line-height: 70px;
}
#header h2 a {
display: block;
width: 300px;
text-align: center;
text-decoration: none;
color: #000;
}
#header nav {
width: 700px;
position: absolute;
right: 10px;
}
#header nav ul li {
list-style: none;
float: left;
padding: 18px;
border: 2px in black;
}
#contents {
width: 100%; height: 1200px;
position: relative;
top: 70px;
}
.card-container{
width: 850px;
float: left;
}
.card {
width: 400px;
min-height: 330px;
float: left;
margin: 16px 0 0 16px;
padding: 7px;
border: thick double black;
}
.popup {
width: 400px; height: 997px;
float: left;
}
.desc {
padding: 10px;
}
.pop-up {
position: relative;
width: 370px; height: 120px;
margin: 10px auto;
border: 3px solid black;
border-radius: 20px;
}
.pop-up p {
text-align: center;
padding: 10px;
}
.pop-up .button{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, 60%);
color: #000;
padding: 5px 20px;
border: 1px solid black;
border-radius: 10px;
}
.col1 {
background-color: #00ff00;
}
.col2 {
background-color: #0000ff;
}
.col3 {
background-color: #d900ff;
}
.col4 {
background-color: #ff0044;
}
.col5 {
background-color: #ffff00;
}
.col6 {
background-color: #00ff88;
}
.col7 {
background-color: #00ddff;
}
.col8 {
background-color: #ff0000;
}
.fon-col1 {
color: #ff0000;
}
.fon-col2 {
color: #ffff00;
}
.fon-col3 {
color: #ff0000;
}
.fon-col4 {
color: #00ff88;
}
.fon-col5 {
color: #00ddff;
}
.fon-col6 {
color: #0000ff;
}
.fon-col7 {
color: #d900ff;
}
.fon-col8 {
color: #00ff00;
}
#img-list {
width: 100%;
margin-top: 200px;
display: flex;
justify-content: space-around;
align-content: space-around;
flex-wrap:wrap;
}
#img-list .img-card {
width: 550px;
}
#img-list .img-card img {
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<header id="header">
<h2><a href="#">Example Site</a></h2>
<nav>
<ul>
<li class="col1 fon-col1"><a>Code</a></li>
<li class="col2 fon-col2"><a>icons</a></li>
<li class="col3 fon-col3"><a>hello</a></li>
<li class="col4 fon-col4"><a>world</a></li>
<li class="col5 fon-col5"><a>dummy</a></li>
<li class="col6 fon-col6"><a>mermaid</a></li>
<li class="col8 fon-col8"><a>Contest</a></li>
</ul>
</nav>
</header>
<section id="contents">
<div class="card-container clearfix" >
<div class="card desc fon-col2">
<img src="https://cdn.pixabay.com/photo/2012/04/25/00/44/dolphin-41436__340.png" alt="" style="width: 150px; height: 200px; display: inline; float: left; margin: 5px;">
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a> Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac.
</p>
</div>
<div class="card desc fon-col3">
<a>Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin.</a> Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum posuere urna nec tincidunt praesent. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Elementum nibh tellus molestie nunc. Et magnis dis parturient montes nascetur. Est placerat in egestas erat imperdiet. Consequat interdum varius sit amet mattis vulputate enim.
</div>
<div class="card desc fon-col4">
<a>Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.</a> Et malesuada fames ac turpis egestas sed. Sit amet nisl suscipit adipiscing bibendum est ultricies. Arcu ac tortor dignissim convallis aenean et tortor at. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio tempor orci dapibus ultrices.
</div>
<div class="card desc fon-col5">
<a>Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat.</a> Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ut sem nulla pharetra diam. Fames ac turpis egestas maecenas. Bibendum neque egestas congue quisque egestas diam. Laoreet id donec ultrices tincidunt arcu non sodales neque. Eget felis eget nunc lobortis mattis aliquam faucibus purus. Faucibus interdum posuere lorem ipsum dolor sit.
</div>
<div class="card desc fon-col8">
<a>Et netus et malesuada fames ac. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan.</a> Sodales neque sodales ut etiam sit amet nisl purus in. Maecenas volutpat blandit aliquam etiam. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Egestas purus viverra accumsan in nisl. Semper feugiat nibh sed pulvinar proin. Duis convallis convallis tellus id interdum velit laoreet. Ante in nibh mauris cursus mattis molestie. Ut etiam sit amet nisl purus in mollis nunc. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</div>
<div class="card desc fon-col7">
Tellus at urna condimentum mattis pellentesque id nibh tortor id. Tristique magna sit amet purus gravida quis blandit turpis cursus. Dolor sit amet consectetur adipiscing. Consequat ac felis donec et odio pellentesque diam volutpat. Nunc sed augue lacus viverra vitae congue. Mauris in aliquam sem fringilla ut morbi tincidunt augue.
</div>
</div>
<aside class="popup">
<div class="pop-up">
<p>Lorem ipsum dolor si ip</p>
<div class="button col8">enter</div>
</div>
<div class="pop-up">
<p>Volutpat odio facilisis mauris sit amet massa.</p>
<div class="button col7">enter</div>
</div>
<div class="pop-up">
<p>Mauris in aliquam sem fringilla ut morbi tincidunt augue.</p>
<div class="button col6">enter</div>
</div>
<div class="pop-up">
<p>Ut etiam sit amet nisl purus in mollis nunc. Feugiat sed lectus</p>
<div class="button col5">enter</div>
</div>
<div class="pop-up">
<p>In tellus integer feugiat scelerisque. Feugiat in fermentum posuere urna nec tincidunt praesent.</p>
<div class="button col4">enter</div>
</div>
<div class="pop-up">
<p> Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit.</p>
<div class="button col3">enter</div>
</div>
<div class="pop-up">
<p>Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan.</p>
<div class="button col1">enter</div>
</div>
</aside>
</section>
<section id="img-list">
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2019/08/19/07/45/corgi-4415649__340.jpg" alt="">
</div>
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2018/05/07/10/48/husky-3380548__480.jpg" alt="">
</div>
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2019/11/07/08/40/puppy-4608266__340.jpg" alt="">
</div>
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg" alt="">
</div>
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2017/02/15/12/12/cat-2068462__340.jpg" alt="">
</div>
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2016/11/29/10/07/tiger-1868911__340.jpg" alt="">
</div>
</section>
<footer id="footer">
</footer>
</div>
</body>
</html>