-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
74 lines (62 loc) · 3.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!--Responsive-->
<div class="red">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos nihil, omnis voluptates esse placeat ad quasi natus incidunt consequuntur odio maiores officia, quidem, commodi nam? Quia mollitia numquam sed, tempora dolore facilis officia. Dicta inventore quod earum aliquid quam eum expedita voluptatem? Facere provident hic inventore quo! Corporis officiis, sequi voluptas delectus iste saepe neque vero ipsa. Quasi veritatis iste neque sequi, perspiciatis maiores voluptatibus unde exercitationem enim blanditiis libero id quibusdam dolore facilis laboriosam eaque illo. Dolorum laborum expedita dolor, quisquam inventore non neque adipisci aliquid minus eveniet ipsam in quo minima sequi facere fugit earum error asperiores libero, voluptatem illo vitae? Perferendis exercitationem doloremque repellendus sed porro dolorem vel dolore totam reiciendis nobis dolorum at, vero non qui amet dolores iste accusamus assumenda libero nemo alias? Veritatis ipsam, harum saepe fugit nostrum aspernatur reiciendis quia sit, provident quod doloribus alias at! Provident voluptas officia vel et blanditiis voluptatibus, nisi eum, veritatis quia consequuntur assumenda veniam vitae ullam ducimus distinctio obcaecati. Rerum esse optio nisi blanditiis quia veritatis hic recusandae corrupti non. Minima esse officiis omnis corporis aspernatur consequatur debitis voluptatibus dolor illo dolore! Reiciendis repudiandae magnam facilis maxime officia ipsa, repellendus saepe dolore culpa quas assumenda illo nisi?</div>
<!--Buttons-->
<section class="container">
<div class="row btn-list">
<div class="btn btn-yellow btn-big">Click me</div>
<div class="btn btn-yellow">Click me</div>
<div class="btn btn-yellow btn-small">Click me</div>
</div>
<div class="row btn-list">
<a href="#" class="btn btn-green btn-big">Click me</a>
<a href="#" class="btn btn-green">Click me</a>
<a href="#" class="btn btn-green btn-small">Click me</a>
</div>
<div class="row btn-list">
<button class="btn btn-big">Click me</button>
<button class="btn">Click me</button>
<button class="btn btn-small">Click me</button>
</div>
<div class="row btn-list">
<button class="btn btn-squar btn-big">Click me</button>
<button class="btn btn-squar">Click me</button>
<button class="btn btn-squar btn-small">Click me</button>
</div>
<div class="row btn-list">
<button class="btn btn-rounder btn-big">Click me</button>
<button class="btn btn-rounder">Click me</button>
<button class="btn btn-rounder btn-small">Click me</button>
</div>
<div class="row btn-list">
<button class="btn btn-stadium btn-big">Click me</button>
<button class="btn btn-stadium">Click me</button>
<button class="btn btn-stadium btn-small">Click me</button>
</div>
</section>
<br><br>
<!--Animation-->
<div class="toggle-switch"></div>
<div class="circle"></div>
<!--Position-->
<div class="parent-element">
<div class="sibling-element">
I'm the other sibling element.
</div>
<div class="main-element">
All eyes on me. I am the main element.
</div>
<div class="sibling-element">
I'm the other sibling element.
</div>
</div>
</body>
</html>