/
Index.html
268 lines (259 loc) · 10.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
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="Image/favicon.ico">
<script src="https://kit.fontawesome.com/ee688b146b.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="header-color">
<div class="menu">
<div class="impressive">
<div class="logo"><a href="#"><img src="Image/mt-0249-home-logo.png" alt="Photo"></a></div>
<div class="name"><a href="#">Impressive</a></div>
</div>
<nav>
<ul class="first-list">
<li><a href="#">Home</a></li>
<li><a href="About.html">About</a>
<ul class="second-list">
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="News.html">News</a>
<ul class="third-list">
<li><a href="Projects.html">Projects</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Photographers.html">Photographers</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="News.html">News</a></li>
<li><a href="Contacts.html">Contacts</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!--------------------------------------------->
<main>
<!-- Slider -->
<section class="slider">
<div class="slide1">
<img src="Image/Slider/slider01.jpg" alt="slide_1">
<div class="slider-text">
<p>Creating quality photos with professional touch</p>
</div>
</div>
<input type="radio" name="switch" id="btn1" checked="checked">
<input type="radio" name="switch" id="btn2">
<input type="radio" name="switch" id="btn3">
<input type="radio" name="switch" id="btn4">
<input type="radio" name="switch" id="btn5">
<input type="radio" name="switch" id="btn6">
<input type="radio" name="switch" id="btn7">
<div class="slides">
<div class="slide slide2">
<img src="Image/Slider/slider02.jpg" alt="slide_2">
<div class="slider-text">
<p>We can help you make photos of any place!</p>
</div>
</div>
<div class="slide slide3">
<img src="Image/Slider/slider03.jpg" alt="slide_3">
<div class="slider-text">
<p>The highest quality works preserving life’s special moments</p>
</div>
</div>
<div class="slide slide4">
<img src="Image/Slider/slider04.jpg" alt="slide_4">
<div class="slider-text">
<p>Making something special to save your memories</p>
</div>
</div>
<div class="slide slide5">
<img src="Image/Slider/slider05.jpg" alt="slide_5">
<div class="slider-text">
<p>Our works are able to stir a wide range of emotions</p>
</div>
</div>
<div class="slide slide6">
<img src="Image/Slider/slider06.jpg" alt="slide_6">
<div class="slider-text">
<p>Delivering artistically styled stunning images</p>
</div>
</div>
<div class="slide slide7">
<img src="Image/Slider/slider07.jpg" alt="slide_7">
<div class="slider-text">
<p>Taking into consideration all aspects of visual presentation</p>
</div>
</div>
</div>
<div class="controls">
<label id="switcher1" for="btn1"></label>
<label id="switcher2" for="btn2"></label>
<label id="switcher3" for="btn3"></label>
<label id="switcher4" for="btn4"></label>
<label id="switcher5" for="btn5"></label>
<label id="switcher6" for="btn6"></label>
<label id="switcher7" for="btn7"></label>
</div>
</section>
<!------------>
<section class="welcome">
<div class="container">
<h2>Welcome to our Website</h2>
<span>A photo can reveal more about a person than you might have thought. Just like looking in the eyes, photography can reveal your soul. What's more, a picture can bear different meanings. Photography can provide not only a sense of place, but also have a historical and educational meaning.</span>
</div>
</section>
<section class="links">
<div class="container flex_recovery">
<div class="link">
<a class="image" href="About.html"><img src="Image/Links/about_us.png" alt="About"></a>
<h3>About Us</h3>
<span>We are a creative team passionate about photography.</span>
<a class="texta" href="About.html">Read more</a>
</div>
<div class="link">
<a class="image" href=""><img src="Image/Links/facebook.png" alt="Facebook"></a>
<h3>Facebook</h3>
<span>Enjoy the emotions transmitted through every shot.</span>
<a class="texta" href="More.html">Read more</a>
</div>
<div class="link">
<a class="image" href=""><img src="Image/Links/twitter.png" alt="Twitter"></a>
<h3>Twitter</h3>
<span>Bringing together the best shots from all over the world.</span>
<a class="texta" href="More.html">Read more</a>
</div>
<div class="link">
<a class="image" href="Contacts.html"><img src="Image/Links/contacts.png" alt="Contacts"></a>
<h3>Contact Us</h3>
<span>You can always contact us to discuss any questions.</span>
<a class="texta" href="Contacts.html">Read more</a>
</div>
</div>
</section>
<section class="portfolio">
<div class="container">
<h2>Portfolio</h2>
<span>Having a passion for creating static and dynamic images, we have made up a truly rich photo gallery.</span>
<div class="photos">
<a class="mounts_link" href="">
<img src="Image/Portfolio/home-portfolio01-bg.jpg" alt="Mounts">
<div class="capture">
<p>Nature</p>
</div>
</a>
</div>
<div class="photos">
<a class="buildings_link" href="">
<img src="Image/Portfolio/home-portfolio02-bg.jpg" alt="Buildings">
<div class="capture">
<p>City</p>
</div>
</a>
</div>
<div class="photos">
<a class="people_link" href="">
<img src="Image/Portfolio/home-portfolio03-bg.jpg" alt="Girl">
<div class="capture">
<p>People</p>
</div>
</a>
</div>
</div>
</section>
<section class="recent_news">
<div class="container">
<h2>Recent News</h2>
<span>Photography is more than just a moment captured by a camera. This is a special form of art with its own history and philosophy.</span>
<div class="info_news">
<div class="import_news">
<img src="Image/News/home-news01.jpg" alt="">
<p>Things that stay with you</p>
<span>Photography is a thing that always stays with you. Every once in a while we take a shot or a set of pictures that.</span>
<div class="date_link">
<p>29 Jan 2015</p>
<a href="More.html">Read more</a>
</div>
</div>
<div class="import_news">
<img src="Image/News/home-news02.jpg" alt="">
<p>The importance of lighting</p>
<span>Just like colors, lighting is very important in creating your perfect shot. What is better – ISO light or low? How much.</span>
<div class="date_link">
<p>29 Jan 2015</p>
<a href="More.html">Read more</a>
</div>
</div>
<div class="import_news">
<img src="Image/News/home-news03.jpg" alt="">
<p>Investigationes demonstraver</p>
<span>As the time passes by, we get older and more experienced with every new day.</span>
<div class="date_link">
<p>29 Jan 2015</p>
<a href="More.html">Read more</a>
</div>
</div>
</div>
<a class="see_all" href="News.html">See all news</a>
</div>
</section>
<section class="photographers">
<div class="container">
<div class="photo_flex">
<div class="masters">
<h2>Photographers</h2>
<span>Great photographer - is the one who completely expresses what he feels for what he photographs.</span>
<div class="pg_info">
<div class="xp">
<img src="Image/Photographers/Gloria Mann.jpg" alt="Gloria Mann">
<p>Gloria Mann</p>
<span>5 years experience</span>
</div>
<div class="xp">
<img src="Image/Photographers/Mark Johnson.jpg" alt="Mark Johnson">
<p>Mark Johnson</p>
<span>7 years experience</span>
</div>
<div class="xp">
<img src="Image/Photographers/Alan Smith.jpg" alt="Alan Smith">
<p>Alan Smith</p>
<span>3 years experience</span>
</div>
</div>
</div>
<div class="secrets">
<h2>Some Secrets</h2>
<span>Every shot – a separate story</span>
<a class="photography" href="Index.html">
<p>Travel photography</p>
<i class="fas fa-plus"></i>
</a>
<a class="photography" href="Index.html">
<p>Fashion photography</p>
<i class="fas fa-plus"></i>
</a>
<a class="photography" href="Index.html">
<p>Nature photography</p>
<i class="fas fa-plus"></i>
</a>
<a class="photography" href="Index.html">
<p>Family photography</p>
<i class="fas fa-plus"></i>
</a>
</div>
</div>
</div>
</section>
</main>
<!--------------------------------------------->
<footer>
<span>Impressive © 2015 • <a class="policy" href="Privacy policy.html">Privacy policy</a></span>
</footer>
</body>
</html>