-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (151 loc) · 9.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acubens</title>
<link rel="stylesheet" href="./style/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:700|Montserrat|Source+Sans+Pro:400,600,600i,700|Titillium+Web:400,600,700" rel="stylesheet">
</head>
<body>
<header>
<div class="overlay">
<div class="container clearfix">
<nav>
<a href="#" class="brand">
<div class="brand__logo"></div>
<span class="brand__name">Acubens</span>
</a>
<!-- responsive -->
<span class="burger mobile-menu"><i class="fa fa-bars" aria-hidden="true"></i></span>
<ul class="menu">
<a href="#" class="menu__item">about</a>
<a href="#" class="menu__item">gallery</a>
<a href="#" class="menu__item">features</a>
<a href="#" class="menu__item">testimonials</a>
<a href="#" class="menu__item">download</a>
</ul>
</nav>
<div class="hero">
<h1>Acubens is pure brilliance</h1>
<h3>Learn more and see what we mean by brilliance.</h3>
<button class="btn btn--big btn--download">download now</button>
</div>
</div>
</div>
</header>
<section id="about">
<div class="container">
<h2 class="purple-text">so what's acubens?</h2>
<h4><span class="purple-text bold">Acubens</span> is a PSD website template. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nulla dolorum saepe dolores laborum natus accusamus quaerat nisi voluptate</h4>
<p>Lorem ipsum dolor sit amet, consectetur <span class="bold">adipisicing elit</span class="bold"> taque. Reiciendis similique, consequuntur ipsa delectus ad nemo possimus mollitia nam quo ratione eum natus expedita in facere at voluptas consectetur dignissimos. <span class="bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span class="bold"> Explicabo labore temporibus possimus iure.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, voluptates. Incidunt, voluptatem molestias! Eius laudantium impedit repudiandae vel aut fugiat vitae laboriosam.</p>
</div>
</section>
<section id="gallery">
<div class="container">
<div class="gallery__left">
<img src="img/1st.jpg" alt="laptop">
</div>
<div class="gallery__right">
<img src="img/2nd.jpg" alt="stars">
<img src="img/3rd.jpg" alt="lake">
<img src="img/4th.jpg" alt="road">
<img src="img/5th.jpg" alt="tablet">
</div>
</div>
</section>
<section id="features">
<div class="container">
<h2 class="purple-text">Stunning looks & functionality</h2>
<h4>Eliminate the stress of <span class="cursive">building a website</span> with <span class="bold purple-text">Acubens</span></h4>
<div class="features-container">
<div class="features-container__item">
<img src="img/heart.png" alt="heart" class="features-container__item__icon">
<h4 class="features-container__item__title">true love</h4>
<p class="features-container__item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit quisquam magnam.</p>
</div>
<div class="features-container__item">
<img src="img/compass2.png" alt="" class="features-container__item__icon">
<h4 class="features-container__item__title">user friendly</h4>
<p class="features-container__item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit quisquam magnam.</p>
</div>
<div class="features-container__item">
<img src="img/rocket.png" alt="" class="features-container__item__icon">
<h4 class="features-container__item__title">easy setup</h4>
<p class="features-container__item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit quisquam magnam.</p>
</div>
<div class="features-container__item">
<img src="img/cog.png" alt="" class="features-container__item__icon">
<h4 class="features-container__item__title">clean code</h4>
<p class="features-container__item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit quisquam magnam.</p>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="testimonial-container">
<div class="testimonial-container__item">
<div class="testimonial-container__item__content">
<img src="img/quote-mark.png" class="testimonial-container__item__content__quote-icon">
<p class="testimonial-container__item__content__text">Bresaola <span class="bold">ball tip frankfurter</span>, proident nulla irure cupidatat commodo ground round velit culpa. Velit spare ribs corned beef est beef ribs.</p>
</div>
<div class="testimonial-container__item__author">
<img src="img/profile.jpg" alt="Zak Island" class="testimonial-container__item__author__picture">
<p class="testimonial-container__item__author__name">Zak Island</p>
<p class="testimonial-container__item__author__role">game designer</p>
</div>
</div>
<div class="testimonial-container__item">
<div class="testimonial-container__item__content">
<img src="img/quote-mark.png" class="testimonial-container__item__content__quote-icon">
<p class="testimonial-container__item__content__text">Bresaola ball tip frankfurter, proident nulla irure cupidatat commodo ground round velit culpa. Velit spare <span class="bold">ribs corned beef</span> est beef ribs.</p>
</div>
<div class="testimonial-container__item__author">
<img src="img/profile.jpg" alt="Aura Brooks" class="testimonial-container__item__author__picture">
<p class="testimonial-container__item__author__name">Aura Brooks</p>
<p class="testimonial-container__item__author__role">graphic desginer</p>
</div>
</div>
<div class="testimonial-container__item">
<div class="testimonial-container__item__content">
<img src="img/quote-mark.png" class="testimonial-container__item__content__quote-icon">
<p class="testimonial-container__item__content__text">Bresaola <span class="bold">ball tip frankfurter</span>, proident nulla irure cupidatat commodo ground round velit culpa. Velit spare ribs corned beef est beef ribs.</p>
</div>
<div class="testimonial-container__item__author">
<img src="img/profile.jpg" alt="Peppa George" class="testimonial-container__item__author__picture">
<p class="testimonial-container__item__author__name">Peppa George</p>
<p class="testimonial-container__item__author__role">lead architect</p>
</div>
</div>
</div>
</div>
</section>
<section id="download">
<div class="overlay">
<div class="container">
<div class="download__title">
<div class="download__title__line"></div>
<h2 class="download__title__text">Experience acubens</h2>
<div class="download__title__line"></div>
</div>
<h3 class="download__subtitle">Get started with tomorrow's platform today!</h3>
<button class="btn btn--big btn--download">download now</button>
</div>
</div>
</section>
<footer>
<div class="container clearfix">
<span class="copyright">Copyright © 2016 PSDchat. All Rights Reserved</span>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</ul>
</div>
</footer>
</body>
</html>