-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (230 loc) · 7.55 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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waxom</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="container">
<header>
<div>
<div class="menu">
<div class="logo">
<img src="image/header/Logo.png" alt="Логотип">
</div>
<div>
<nav>
<ul class="main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Shortcodes</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div>
<a href="#"><img src="image/icons/icon-cart.png" alt="cart"></a>
<a href="#"><img src="image/icons/icon-search.png" alt="search"></a>
</div>
<div class="menu-minimized invisible">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
<div class="menu-flow invisible">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Shortcodes</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="slider">
<div class="slide-list">
<div class="slide-wrap">
<div class="slide-item">
<h3>Unique and Modern Design</h3>
<h2>Portfolio PSD Template</h2>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div class="slide-item">
<h3>New slide</h3>
<h2>This is two slide</h2>
<p>jkljrkljkalj tkgladfj gkljdklagnfkdanfadklfaklfklasfkladklfadklfdklakdsfkfkdsf kdsakfdkfk dsfkd dskaaf.</p>
</div>
</div>
<div class="clear"></div>
<button class="auto play">GET STARTED</button>
</div>
<div class="header-bottom">
<div class="indicate-slider">
<span class="span-active indicate-first"></span>
<span></span>
<span></span>
<span></span>
<span class="indicate-end"></span>
</div>
</div>
</div>
<div class="navy prev-slide"></div>
<div class="navy next-slide"></div>
</div>
</header>
<main>
<div class="main-header">
<h1>Our Latest Projects</h1>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.</p>
</div>
<div class="filtr">
<button class='active' data-projects="all">All</button>
<button data-projects="web-desing">Web Desing</button>
<button data-projects="mobile-app"> Mobile App</button>
<button data-projects="illustration">Illustration</button>
<button data-projects="photograhy">Photograhy</button>
</div>
<section class="projects">
<div class="photograhy">
<img src="image/main/photo1.jpg" alt="Photography, Nature">
<div class="description">
<div></div>
<h3>Claritas Etiam Processus</h3>
<p>Photography, Nature</p>
</div>
</div>
<div class="illustration">
<img src="image/main/photo2.jpg" alt="Graphic Design">
<div class="description">
<div></div>
<h3>Quam Nutamus Farum</h3>
<p>Graphic Design, Mock-Up</p>
</div>
</div>
<div class="illustration">
<img src="image/main/photo3.jpg" alt="Photography, Holiday">
<div class="description">
<div></div>
<h3>Usus Legentis Videntur</h3>
<p>Photography, Holiday</p>
</div>
</div>
<div class="web-desing">
<img src="image/main/photo4.jpg" alt="Nature">
<div class="description">
<div></div>
<h3>Claritas Etiam Processus</h3>
<p>Photography, Nature</p>
</div>
</div>
<div class="web-desing">
<img src="image/main/photo5.jpg" alt="Farum">
<div class="description">
<div></div>
<h3>Quam Nutamus Farum</h3>
<p>Graphic Design, Mock-Up</p>
</div>
</div>
<div class="mobile-app">
<img src="image/main/photo6.jpg" alt="Videntur">
<div class="description">
<div></div>
<h3>Usus Legentis Videntur</h3>
<p>Photography, Holiday</p>
</div>
</div>
</section>
<div>
<button id="load-more">LOAD MORE</button>
</div>
</main>
<footer>
<div>
<div class="footer-top-container">
<div class="footer-top">
<div>
<p class="footer-logo"><img src="image/header/Logo.png" alt="logo"></p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci suscipit lobortis claritatem.
</p>
<div>
Read More ►
</div>
</div>
<div>
<h4>Resent Post</h4>
<div class="post-res">
<p class="post-date">September 08, 2015</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<div class="post-res">
<p class="post-date">September 08, 2015</p>
<p>Diam nonummy nibh euismod tincidunt ut laoreet dolore magna</p>
</div>
<div class="post-res">
<p class="post-date">September 08, 2015</p>
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem per seacula quarta decima</p>
</div>
</div>
<div>
<h4>Oure Twitter</h4>
<div>
<p>@waxom Cum soluta nobis eleifend option congue nihil imperdiet</p>
<p class="ago-date">3 mins ago</p>
</div>
<div>
<p>Mirum est #envato notare quam littera gothica, quam nunc putamus parum anteposuerit litterarum</p>
<p class="ago-date">5 hours ago</p>
</div>
<div>
<p>Soluta nobis option bit.ly/1Hniso7</p>
<p class="ago-date">20 days ago</p>
</div>
</div>
<div>
<h4>Dribbble Widget</h4>
<div class="footer-imges">
<img src="image/footer/photo1.jpg" alt="image">
<img src="image/footer/photo2.jpg" alt="image">
</div>
<div class="footer-imges">
<img src="image/footer/photo3.jpg" alt="image">
<img src="image/footer/photo4.jpg" alt="image">
</div>
</div>
</div>
</div>
</div>
<div>
<div class="footer-bottom-container">
<div class="footer-bottom">
<div>
<div>Copyright © 2015 <span>Waxom</span></div>
<div>Privacy Policy </div>
<div><span>FAQ</span></div>
<div>Support</div>
</div>
<div>
<div>Designed by <span>ThemeFire</span></div>
<div>Only on Envato <span>Market</span></div>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/index.js"></script>
<!--<script src="js/1.js"></script>-->
<script src="js/slider.js"></script>
</body>
</html>