-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
228 lines (219 loc) · 13.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="nav-header">
<p class="logo">BisLite</p>
<nav class="nav">
<ul class="first menu">
<li class="item"><a class="nav-item" href="#">Home</a></li><!--
--><li class="item"><a class="nav-item " href="#">About Us</a></li><!--
--><li class="item"><a class="nav-item menu" href="#">Services </a>
<ul class="down-menu">
<li class="line"><a class="down-links" href="#">Web Design</a></li>
<li class="line"><a class="down-links" href="#">Wordpress Design</a></li>
<li class="line"><a class="down-links" href="#">Mobile App Devplopment</a></li>
<li class="line"><a class="down-links" href="#">Internet Marketing</a></li>
<li class="line"><a class="down-links" href="#">Social Media Management</a></li>
</ul>
</li><!--
--><li class="item"><a class="nav-item menu" href="#">Portfolio </a></li><!--
--><li class="item"><a class="nav-item" href="#">Blog</a></li><!--
--><li class="item"><a class="nav-item none" href="#">Contact Us</a></li>
</ul>
</nav>
<div class="clearfix"></div>
</div>
</div>
</header>
<main>
<div class="splash-screen">
<div class="container main-picture">
<p class="tagline">We design clean, crisp & memorable icons</p>
<img class="coffee" src="img/кофе.png" alt="coffee">
</div>
<div class="dots">
<img class="dot" src="img/tochka.png" alt="dot" >
<img class="dot" src="img/tochka.png" alt="dot" >
<img class="dot" src="img/dot_white94.png" alt="dot" >
<img class="dot" src="img/tochka.png" alt="dot" >
<img class="dot" src="img/tochka.png" alt="dot" >
</div>
</div>
<div class="services-menu">
<div class="container services">
<div class="description">
<div class="description-icon"></div>
<h2 class="description-title">Clean Theme</h2>
<p class="description-paragraph">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi.</p>
<p class="descripton-footer">Read More</p>
</div><!--
--><div class="description">
<div class="description-icon responsive"></div>
<h2 class="description-title">Responsive Design</h2>
<p class="description-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod placerat dui et tincidunt. Sed sollicitudin posuere auctor. Phasellus at ultricies nisl. Integer at leo eros.</p>
<p class="descripton-footer">Read More</p>
</div><!--
--><div class="description">
<div class="description-icon fully"></div>
<h2 class="description-title">Fully layerd PSD</h2>
<p class="description-paragraph">Phasellus lobortis metus non augue sodales volutpat. Vestibulum sit amet nibh eros, hendrerit venenatis est. In vitae nulla nec purus cursus pretium sed id magna.</p>
<p class="descripton-footer">Read More</p>
</div><!--
--><div class="description">
<div class="description-icon ready"></div>
<h2 class="description-title">Ready for coding</h2>
<p class="description-paragraph">Vivamus convallis feugiat mauris sed posuere. Nam rutrum, quam quis euismod commodo, elit est porta quam, non placerat eros neque porta ante. Fusce quis odio urna.</p>
<p class="descripton-footer">Read More</p>
</div>
</div>
</div>
<div class="latest-works">
<div class="container">
<div class=" latest-work-nav">
<h2 class="latest-works-title">Latest works</h2>
<div class="button">
<button class="button-icone left"></button>
<button class="button-icone right"></button>
</div>
<div class="clearfix"></div>
</div>
<div class="latest-img">
<div class="latest-work-div">
<div class="hover-clic">
<div class="click">
<button class="left-button"><img src="img/hover blue1.png"></button>
<button class="left-button right"><img src="img/hover_blue2.png"></button>
</div>
</div>
</div><!--
--><div class="latest-work-div lemon">
<div class="hover-clic">
<div class="click">
<button class="left-button"><img src="img/hover blue1.png"></button>
<button class="left-button right"><img src="img/hover_blue2.png"></button>
</div>
</div>
</div><!--
--><div class="latest-work-div pyramids">
<div class="hover-clic">
<div class="click">
<button class="left-button"><img src="img/hover blue1.png"></button>
<button class="left-button right"><img src="img/hover_blue2.png"></button>
</div>
</div>
</div><!--
--><div class="latest-work-div darts">
<div class="hover-clic">
<div class="click">
<button class="left-button"><img src="img/hover blue1.png"></button>
<button class="left-button right"><img src="img/hover_blue2.png"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Testimonials-Our-Clients">
<div class="container">
<div class="Testimonials">
<h1 class="title-testimonials">Testimonials</h1>
<p class="pragraph-testimonials">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nulla sapien, at aliquam erat. Sed vitae massa tellus. Aliquam commodo aliquam metus, sed iaculis nibh tempus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam nec nisi in nisl euismod fringilla.</p>
<p class="testimonials-footer">John Travis, CEO, DomainName.com</p>
</div>
<div class="our-clients">
<h1 class="title-our-clients">Our Clients</h1>
<table class="table-clients">
<tr>
<td class="cell"><img src="img/logo1_175.png" alt=""></td>
<td class="cell"><img src="img/logo2_177.png" alt=""></td>
<td class="cell"><img src="img/logo3_176.png" alt=""></td>
</tr>
<tr>
<td class="cell"><img src="img/logo4_178.png" alt=""></td>
<td class="cell"><img src="img/logo5_182.png" alt=""></td>
<td class="cell"><img src="img/logo6_181.png" alt=""></td>
</tr>
</table>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="download">
<div class="container download">
<p class="download-paragraph">
This is a clean and modern, four column website PSD template. You can code it into a Wordpress website, HTML5 responsive website for your personal or client works. So ahead and download this wonderful PSD template!
</p>
<button class="download-button"><span class="PSD">Download PSD</span></button>
<div class="clearfix"></div>
</div>
</div>
</main>
<footer class="footer">
<div class="container ">
<div class="footer-menu">
<div class="about-ass">
<h2 class="footer-title about-ass-tittle">About us</h2>
<p class="about-ass-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod placerat dui et tincidunt. Sed sollicitudin posuere auctor. Phasellus at ultricies nisl. Integer at leo eros. Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. </p>
</div><!--
--><div class="explore">
<h2 class="footer-title explore-title">Explore</h2>
<ul class="explore-list">
<li class="explore-click"><a class="explore-link" href="#">Home</a></li>
<li class="explore-click"><a class="explore-link" href="#">About Us</a></li>
<li class="explore-click"><a class="explore-link" href="#">Services</a></li>
<li class="explore-click"><a class="explore-link" href="#">Portfolio</a></li>
<li class="explore-click"><a class="explore-link" href="#">Blog</a></li>
</ul>
</div><!--
--><div class="explore">
<h2 class="footer-title explore-title">Browse</h2>
<ul class="explore-list">
<li class="explore-click"><a class="explore-link" href="#">Careers</a></li>
<li class="explore-click"><a class="explore-link" href="#">Press & Media</a></li>
<li class="explore-click"><a class="explore-link" href="#">Contact Us</a></li>
<li class="explore-click"><a class="explore-link" href="#">Terms of Service</a></li>
<li class="explore-click"><a class="explore-link" href="#">Privacy Policy</a></li>
</ul>
</div><!--
--><div class="explore none-margine">
<h2 class="footer-title explore-title">Contact us</h2>
<p class="Contact-us-adress">BisLite Inc. Always Street 265 0X-125-Canada</p>
<ul>
<li><a class="link-contact-us" href="tel:987-6543-210">Phone: 987-6543-210</a></li>
<li><a class="link-contact-us" href="#">Fax: 987-6543-210</a></li>
</ul>
</div><!--
--><div class="connect-with-us">
<h2 class="footer-title connect-with-us">Connect with us</h2>
<table class="connect-with-us-list">
<tr>
<td class="connect-with-us-click"><img src="img/facebook_189.png" alt="iconlogo"></td>
<td class="connect-with-us-click"><img src="img/dribbble_188.png" alt="iconlogo"></td>
<td class="connect-with-us-click"><img src="img/pinterest_187.png" alt="iconlogo"></td>
</tr>
<tr>
<td class="connect-with-us-click"><img src="img/linkedin_186.png" alt="iconlogo"></td>
<td class="connect-with-us-click"><img src="img/skype_185.png" alt="iconlogo"></td>
<td class="connect-with-us-click"><img src="img/share_184.png" alt="iconlogo"></td>
</tr>
</table>
</div>
</div>
<div class="copyright">
<p class="copyright-description">© Copyright 2012 - BisLite Inc. All rights reserved. Some free icons used here are created by Brankic1979.com.Client Logos are copyright and trademark of the respective owners / companies.</p>
<p class="logo last">BisLite</p>
<div class="clearfix"></div>
</div>
</div>
</footer>
</body>
</html>