-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (121 loc) · 6.7 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
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100i,400,700|Oxygen:300" rel="stylesheet">
<title></title>
</head>
<body>
<header>
<div class="transparent-box">
<div class="navigation-bar">
<p><b>CASCADE</b> BY DAVID</p>
<button class="site-menu-trigger">MENU ☰</button>
<div class="site-menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Generic</a></li>
<li><a href="">Elements</a></li>
</ul>
<ol>
<li><a href="">SIGN UP</a></li>
<li><a href="">LOG IN</a></li>
</ol>
</div>
</div>
<div class="position-of-elements-in-header">
<h1>LOREM <br>IPSUM DOLOR <br>SIT AMET</h1>
<p>Dolor sit amet nullam pede semper est, vitae luctus metus libero eu augue. Morbi purus sed libero, faucibus adipiscing, commodo.</p>
<button>GET STARTED</button>
</div>
</div>
</header>
<main>
<div class="left-box-for-h2">
<h2 >INTEGIS<br> VITAE UNON<br> LIBETUE</h2>
</div>
<div class="right-box-for-image right-image-man">
<article >
<h3>Morbi purus sed libero faucibus adipiscing</h3>
<p>Sed egestas, ante et vulputate lorem ipsum dolor sit amet nullam pede semper est, vitae luctus metus libero eu augue. Morbi purus sed libero, faucibus adipiscing, gravida lorem ipsum.</p>
<button>LEARN MORE</button>
</article>
</div>
<div class="left-box-for-image">
<article class="exception">
<h3>Sed etiam adipiscing magna gravida</h3>
<p>Sed egestas, ante et vulputate lorem ipsum dolor sit amet nullam pede semper est, vitae luctus metus libero eu augue. Morbi purus sed libero, faucibus adipiscing, gravida lorem ipsum.</p>
<button>LEARN MORE</button>
</article>
</div>
<div class="right-box-for-h2">
<h2 >LOREM<br> FAUCIBUS ET<br> ALIQUAM</h2>
</div>
<div class="left-box-for-h2 different-color-h2">
<h2 >ANTE SED <br> COMMODO <br> LIBERO</h2>
</div>
<div class="right-box-for-image right-image-car">
<article >
<h3>Libero sed magna et amet commodo</h3>
<p>Sed egestas, ante et vulputate lorem ipsum dolor sit amet nullam pede semper est, vitae luctus metus libero eu augue. Morbi purus sed libero, faucibus adipiscing, gravida lorem ipsum.</p>
<button>LEARN MORE</button>
</article>
</div>
<div class="gallery">
<div class="gallery-previous"><a href=""><div class="arrow left"></div></a></div>
<div class="gallery-container">
<h2>SED ADIPISCING</h2>
<div class="gallery-image">
<img src="img/pic04.jpg">
</div>
<div class="gallery-description">
<h3>Magna libero faucibus adipiscing</h3>
<p>Sed egestas, ante et vulputate lorem ipsum dolor sit amet nullam pede semper est, vitae luctus metus libero eu augue. Morbi purus sed libero, faucibus adipiscing, commodo quis, gravida lorem ipsum.</p>
<button>LEARN MORE</button>
</div>
</div>
<div class="gallery-next"><a href=""><div class="arrow right"></div></a></div>
</div>
<section>
<h2>ANTE LIBERO</h2>
<div class="container-for-articles">
<div class="four">
<img src="img/pic07.jpg" alt="">
<h3>Sed faucibus</h3>
<p>Sed egestas, ante et vulputate lorem ipsum sed dolor sit amet Morbi purus sed libero, faucibus adipiscing, commodo quis. Lorem ipsum dolor sit amet nullam sed adipiscing.</p>
<button>LEARN MORE</button>
</div>
<div class="four">
<img src="img/pic08.jpg" alt="">
<h3>Morbi commodo</h3>
<p>Sed egestas, ante et vulputate lorem ipsum sed dolor sit amet Morbi purus sed libero, faucibus adipiscing, commodo quis. Lorem ipsum dolor sit amet nullam sed adipiscing.</p>
<button>LEARN MORE</button>
</div>
<div class="four">
<img src="img/pic09.jpg" alt="">
<h3>Tempus lorem</h3>
<p>Sed egestas, ante et vulputate lorem ipsum sed dolor sit amet Morbi purus sed libero, faucibus adipiscing, commodo quis. Lorem ipsum dolor sit amet nullam sed adipiscing.</p>
<button>LEARN MORE</button>
</div>
<div class="four">
<img src="img/pic10.jpg" alt="">
<h3>Libero adipiscing</h3>
<p>Sed egestas, ante et vulputate lorem ipsum sed dolor sit amet Morbi purus sed libero, faucibus adipiscing, commodo quis. Lorem ipsum dolor sit amet nullam sed adipiscing.</p>
<button>LEARN MORE</button>
</div>
</div>
</section>
<div class="contact">
<div class="elements-in-contact">
<h2>TEMPUS AMET</h2>
<p>Sed egestas, ante et vulputate lorem ipsum dolor sit amet nullam pede semper est, vitae luctus metus libero eu augue. Morbi purus sed libero, faucibus adipiscing, commodo quis, gravida lorem ipsum.</p>
<div><input type="email" placeholder="Your Email Address"><button>SUBSCRIBE</button></div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.viewportchecker.min.js"></script>
<script src="js/showingElementsDuringScrolling.js"></script>
</body>
</html>