-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (90 loc) · 4.27 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
<!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>My Grids</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 id="1">GRIDS display: contents</h2>
<div class="container grid1">
<article class="article">
<h3>This is a heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p>Footer stuff</p>
</article>
<article class="article">
<h3>This is a really really really super duper loooong heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum non expedita nobis deleniti assumenda rerum.</p>
<p>Footer stuff</p>
</article>
</div>
<h2 id="2">GRIDS grid-areas</h2>
<div class="container grid2">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam corporis laborum est corrupti voluptas tempora, et rem, dolore iste sunt fugiat repellendus error dolorem officia veritatis doloremque ad reiciendis ea consequuntur voluptatibus. In nobis commodi nisi, natus voluptatum, quis ea. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cupiditate temporibus dolores odio, explicabo modi neque quidem beatae aliquid praesentium at laudantium, veniam mollitia iste eius quas repellat reiciendis, excepturi repellendus minima. Amet eos ipsum reprehenderit quia soluta possimus iusto.</div>
<img src="media/400x250.png" class="image"/>
<div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto veritatis autem doloremque necessitatibus facilis suscipit iure dolor voluptatum, natus error.</div>
</div>
<h2 id="3">GRIDS Stacked boxes via z-index</h2>
<div class="container grid3">
<div class="box1">One</div>
<div class="box2">Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
<h2 id="4">GRIDS Negative space</h2>
<div class="container grid4">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non quos repellat hic consequuntur incidunt voluptates accusantium! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat molestias ducimus tempora unde impedit, iure laborum ipsam, ipsa sapiente consectetur.</div>
</div>
<h2 id="5">GRIDS Flexible grids via auto-fit</h2>
<div class="container">
<div class="subscribe-form">
<h3 class="heading">Subscribe</h3>
<div class="grid5 grid--auto-sizing">
<div class="grid__item">
<label for="firstName">First name</label>
<input id="firstName" placeholder="Den" class="input" type="text" />
</div>
<div class="grid__item">
<label for="lastName">Last name</label>
<input id="lastName" placeholder="O'Prie" class="input" type="text" />
</div>
<div class="grid__item">
<label for="email">Email address</label>
<input id="email" placeholder="Denoprie@whenever.com" class="input" type="text" />
</div>
<div class="grid__item">
<label class="hidden">Button</label>
<button type="button" class="button">Subscribe</button>
</div>
</div>
</div>
</div>
<h2 id="6">GRIDS Some complicated layout</h2>
<div class="container">
<article class="grid6">
<h3 class="grid__heading">Some Very Very Large Heading</h3>
<div class="grid__image"></div>
<p class="grid__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eligendi voluptas aliquid fugit vitae repellat nesciunt nobis temporibus mollitia officia!</p>
</article>
</div>
<h2 id="7">GRIDS Animation with grid layout</h2>
<div class="container grid7">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>GRIDS MINSK-CSS Workshop#2</h2>
<div class="container grid8">
<div class="item1">Header</div>
<div class="item2">Sidebar</div>
<div class="item3">Content</div>
<div class="item4">Other</div>
<div class="item5">Footer</div>
</div5
</body5
</html>