-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
300 lines (281 loc) · 18.1 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
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S.klafer - Photographer</title>
<meta name="description" content="Hi, I'm Steven Klafer, I wanna help some people to get beautiful images to discover their journey or adventure. ">
<link rel="stylesheet" href="./css/style.min.css">
<link rel="icon" href="./favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header-bg">
<div class="header container">
<a href="https://stevan-klafer-portfolio.netlify.app/"><img src="./icones/S.klafer.svg" width="132" height="29" alt="logo"></a>
<nav aria-label="primaria">
<span class="hamburguer" data-btn="mobile"></span>
<ul class="header-menu cor-w font-1-m">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="home-bg" id="home">
<div class="home container">
<img src="./imgs/geral/photo.png" width="120" height="120" alt="foto"data-anime="200">
<h3 class="font-1-l cor-c1" data-anime="400">Hi, I'm Steven Klafer</h3>
<h1 class="font-1-xxl cor-w" data-anime="600">Let's take amazing pictures and build memories<span class="cor-c9">.</span></h1>
<p class="font-1-s cor-c4" data-anime="800">I wanna help some people to get beautiful images to discover their journey or adventure.
And I'm here with the goal of bringing the best photographic experience to you.</p>
<a href="#contact" class="font-1-xs cor-15 buttom-1" data-anime="1000">contact with me</a>
</div>
</main>
<section class="about-bg" id="about" aria-label="About Me">
<div class="about new-container">
<div class="photo">
<img src="./imgs/geral/paisagem-1.jpg" alt="homem tirando foto da paisagem">
</div>
<div class="content">
<h1 class="font-1-xxl cor-w ">About Me<span class="cor-c9">.</span></h1>
<h2 class="font-1-xl cor-c1">Travel itself inspires me</h2>
<p class="font-2-m cor-c5">I love to travel, so maybe you can find me laying on a beach, feeling the warm sand or hiking somewhere in the world. That's why I like to call myself an adventure elopement and Lifestyle photographer. I will capture your essence in a series of beautiful portraits. What makes me the happiest, is to capture pure love and the essence of human beings. </p>
<div class="icons">
<a target="_blank" href="https://twitter.com/?lang=en"><img width="32" height="32" src="./icones/Twitter.svg" alt="Twitter"></a>
<a target="_blank" href="https://www.facebook.com/"><img width="32" height="33" src="./icones/Facebook.svg" alt="Facebook.svg"></a>
<a target="_blank" href="https://www.instagram.com/"><img width="32" height="32" src="./icones/Instagram.svg" alt="Instagram.svg"></a>
</div>
</div>
</div>
</section>
<article class="gallery-bg" id="gallery">
<div class="gallery">
<h1 class="font-1-xxl cor-c15">My latest works<span class="cor-c9">.</span></h1>
<nav aria-label="secundaria">
<ul class="gallery-menu font-2-l cor-10" data-galleryNav>
<li>All</li>
<li>Architecture</li>
<li>Nature</li>
<li>Landscapes</li>
<li>Urban</li>
</ul>
</nav>
<div class="photos-gallery container" data-gallery>
<div class="all">
<img class="all-4" src="./imgs/gallery/all/landscape.jpg" alt="">
<img class="all-1" src="./imgs/gallery/all/Architecture-1.jpg" alt="">
<img class="all-6" src="./imgs/gallery/all/urban.jpg" alt="">
<img class="all-3" src="./imgs/gallery/all/landscape-2.jpg" alt="">
<img class="all-2" src="./imgs/gallery/all/Architecture-2.jpg" alt="">
<img class="all-5" src="./imgs/gallery/all/nature.jpg" alt="">
</div>
<div class="architecture">
<img class="all-4" src="./imgs/gallery/architecture/architecture-2.jpg" alt="">
<img class="all-6" src="./imgs/gallery/architecture/architecture-3.jpg" alt="">
<img class="all-2" src="./imgs/gallery/architecture/architecture-6.jpg" alt="">
<img class="all-1" src="./imgs/gallery/architecture/architecture-4.jpg" alt="">
<img class="all-3" src="./imgs/gallery/architecture/architecture-1.jpg" alt="">
<img class="all-5" src="./imgs/gallery/architecture/architecture-5.jpg" alt="">
</div>
<div class="nature">
<img class="all-4" src="./imgs/gallery/nature/nature-6.jpg" alt="">
<img class="all-6" src="./imgs/gallery/nature/nature-2.jpg" alt="">
<img class="all-2" src="./imgs/gallery/nature/nature-3.jpg" alt="">
<img class="all-1" src="./imgs/gallery/nature/nature-4.jpg" alt="">
<img class="all-3" src="./imgs/gallery/nature/nature-1.jpg" alt="">
<img class="all-5" src="./imgs/gallery/nature/nature-5.jpg" alt="">
</div>
<div class="landscape">
<img class="all-4" src="./imgs/gallery/landscape/landscape-1.jpg" alt="">
<img class="all-6" src="./imgs/gallery/landscape/landscape-6.jpg" alt="">
<img class="all-2" src="./imgs/gallery/landscape/landscape-4.jpg" alt="">
<img class="all-1" src="./imgs/gallery/landscape/landscape-2.jpg" alt="">
<img class="all-3" src="./imgs/gallery/landscape/landscape-3.jpg" alt="">
<img class="all-5" src="./imgs/gallery/landscape/landscape-5.jpg" alt="">
</div>
<div class="urban">
<img class="all-4" src="./imgs/gallery/urban/urban-3.jpg" alt="">
<img class="all-6" src="./imgs/gallery/urban/urban-2.jpg" alt="">
<img class="all-2" src="./imgs/gallery/urban/urban-6.jpg" alt="">
<img class="all-1" src="./imgs/gallery/urban/urban-5.jpg" alt="">
<img class="all-3" src="./imgs/gallery/urban/urban-1.jpg" alt="">
<img class="all-5" src="./imgs/gallery/urban/urban-4.jpg" alt="">
</div>
</div>
</div>
</article>
<article class="blog-bg" id="blog">
<div class="blog">
<h1 class="font-1-xxl cor-c15">Blog<span class="cor-c9">.</span></h1>
<div class="posts-blog container">
<div class="post">
<a href="#"><img src="./imgs/geral/computer.jpg" alt=""></a>
<div class="post-content">
<a href=""><h2 class="font-3-xl cor-c11">Senior Project</h2></a>
<p class="font-2-m cor-c9">For my senior project paper I plan on writing about the history of photography and cameras, it will serve as background information because I will become knowledgeable on the background of photography. I know very little about this topic, but plan to grow more knowledgeable during the course of my senior project.</p>
<div class="info">
<div class="visualization">
<img width="22" height="16" src="./icones/visibility.svg" alt="">
<p class="font-3-m cor-c9">9340</p>
</div>
<div class="date">
<p class="font-3-m cor-c9">Feb 13, 2020</p>
</div>
</div>
</div>
</div>
<div class="post order">
<div class="post-content ">
<a href="#"><h2 class="font-3-xl cor-c11">Nomad Life</h2></a>
<p class="font-2-m cor-c9">Being a nomadic entrepreneur means living life 100% on your own terms. From leaving behind the corporate life of a consistent and often capped salary, saying goodbye to cubicles, a regular work commute and the "daily grind"... to waking up to the sweet, thrilling taste of freedom.</p>
<div class="info">
<div class="visualization">
<img width="22" height="16" src="./icones/visibility.svg" alt="">
<p class="font-3-m cor-c9">12000</p>
</div>
<div class="date">
<p class="font-3-m cor-c9">Jun 31, 2020</p>
</div>
</div>
</div>
<a href=""><img src="./imgs/geral/digital-nomad.jpg" alt=""></a>
</div>
<div class="post">
<a href="#"><img src="./imgs/geral/landscape.jpg" alt=""></a>
<div class="post-content">
<a href=""><h2 class="font-3-xl cor-c11">Visit to Landscapes</h2></a>
<p class="font-2-m cor-c9">While some people are satisfied spending their vacation alongside a pool with a drink in hand, others prefer adventure and diverse spectacular landscapes. If that's you, these worldwide bucket list destinations are sure to please, so surreal that you might just think you've landed on a whole other planet.</p>
<div class="info border-bottom">
<div class="visualization">
<img width="22" height="16" src="./icones/visibility.svg" alt="">
<p class="font-3-m cor-c9">1570</p>
</div>
<div class="date">
<p class="font-3-m cor-c9">Dec 23, 2020</p>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<article class="testimonials-bg" id="testimonials">
<h1 class="font-1-xxl cor-w">Testimonials<span class="cor-c9">.</span></h1>
<div class="testimonials container">
<div class="client">
<h2 class="vanessa font-4-xl cor-c1">Vanessa Borges</h2>
<h3 class="font-4-m cor-c4">Singer</h3>
<p class="font-2-m cor-c6">"Stevan was absolutely incredible to work with. He worked with me on my proposal and took the most incredible pictures. He is a true professional well worth it! Very prompt and ensured we looked great!"</p>
</div>
<div class="client">
<h2 class="john font-4-xl cor-c1">John Stevan</h2>
<h3 class="font-4-m cor-c4">Entrepenuer</h3>
<p class="font-2-m cor-c6">"I recently had a photoshoot with Stevan and it was a GREAT experience! He is so nice, funny, and very helpful! A great person and photographer! He was so nice to help with my looks and posing! Definitely recommended and will be doing another shoot with him in the future!"</p>
</div>
<div class="client">
<h2 class="carol font-4-xl cor-c1">Carol Dousfam</h2>
<h3 class="font-4-m cor-c4">Actress</h3>
<p class="font-2-m cor-c6">"Stevan is a true artist with attention to detail. I reached out to him last minute and he more than delivered. Clean process, product photography done with photos delivered day of for editing. He provided editing options to complete the entire process within 72."</p>
</div>
<div class="client">
<h2 class="fernanda font-4-xl cor-c1">Fernada Oklaman</h2>
<h3 class="font-4-m cor-c4">Designer</h3>
<p class="font-2-m cor-c6">"I really do love your photography! You're so awesome! I'm going to work hard to get as good as you are! You're an inspiration for me now! Your pictures made me soooo happy…love them!"</p>
</div>
<div class="client">
<h2 class="stefan font-4-xl cor-c1">Stefan Kuller</h2>
<h3 class="font-4-m cor-c4">Editor</h3>
<p class="font-2-m cor-c6">"Stevan is a delight to work with! I found him quick and responsive. He was fun and charming during the shoot, and he set me at ease while I was sitting in front of the camera. He captured exactly what I wanted – photos that are professional but still have some style, character, and playfulness. Highly recommended!"</p>
</div>
<div class="client">
<h2 class="mohammad font-4-xl cor-c1">Mohammad Tammod</h2>
<h3 class="font-4-m cor-c4">Painter</h3>
<p class="font-2-m cor-c6">"Stevan was a delight to work with! He was quick to respond, crafted amazing photos, and provided a very fast turnaround for the professional headshots needed. It was a wonderful experience, and I hope we can work together again in the future! Thank you so much!"</p>
</div>
</div>
</article>
<article class="contact-bg" id="contact">
<div class="contact container">
<h1 class="font-1-xxl cor-w">Contact<span class="cor-c9">.</span></h1>
<div class="form-contact">
<h2 class="cor-c15 font-5-xl">Let's Talk!</h2>
<h3 class="cor-c10 font-3-l">Tell me about your ideia here</h3>
<form class="form" action="#">
<div>
<label class="font-2-s cor-c11" for="nome">Name</label>
<input class="font-3-s cor-c7" type="text" id="nome" name="nome" placeholder="Your name">
</div>
<div>
<label class="font-2-s cor-c11" for="email">Email</label>
<input class="font-3-s cor-c7" type="email" id="email" name="email" placeholder="contato@email.com">
</div>
<div class="message-input">
<label class="font-2-s cor-c11" for="message">Message</label>
<textarea class="font-3-s cor-c7" name="message" id="message" rows="5" cols="10" placeholder="What do you need?"></textarea>
</div>
<button class="buttom-2 font-5-m cor-w">Send a Message</button>
</form>
<ul class="font-2-s cor-10">
<li class="location-black">10 New Town Street, V2 5WN,NortLand, USA.</li>
<li class="email-black">KEVEN@PHOTO.COM</li>
<li class="phone-black">+71 9999-9999</li>
</ul>
</div>
</div>
</article>
<footer class="footer-bg">
<div class="footer container">
<div class="contacts">
<img width="132" height="29" src="./icones/S.klafer.svg" alt="logo">
<ul class="font-2-s cor-c5">
<li class="location">10 New Town Street, V2 5WN, NortLand, USA.</li>
<li class="email">KEVEN@PHOTO.COM</li>
<li class="phone">+71 9999-9999</li>
</ul>
</div>
<div class="innerLinks">
<h2 class="font-4-l cor-w">QUICK LINKS</h2>
<ul class="font-2-s cor-c5">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="flick-photos">
<h2 class="font-4-l cor-w">FLICK PHOTOS</h2>
<div class="photos">
<img src="./imgs/geral/flick-photo-1.jpg" alt="">
<img src="./imgs/geral/flick-photo-2.jpg" alt="">
<img src="./imgs/geral/flick-photo-3.jpg" alt="">
<img src="./imgs/geral/flick-photo-4.jpg" alt="">
<img src="./imgs/geral/flick-photo-5.jpg" alt="">
<img src="./imgs/geral/flick-photo-6.jpg" alt="">
</div>
</div>
<div class="socials">
<h2 class="font-4-l cor-w">FOLLOW ME</h2>
<div class="icons">
<a target="_blank" href="https://twitter.com/?lang=en"><img width="32" height="32" src="./icones/Twitter.svg" alt=""></a>
<a target="_blank" href="https://www.instagram.com/"><img width="32" height="32" src="./icones/Instagram.svg" alt=""></a>
<a target="_blank" href="https://dribbble.com/"><img width="32" height="32" src="./icones/Dribbble.svg" alt=""></a>
<a target="_blank" href="https://www.facebook.com/"><img width="32" height="33" src="./icones/Facebook.svg" alt=""></a>
</div>
</div>
</div>
<p class="footer-copy container font-2-m cor-w">Copyright © 2021. All Right Reserved by João Augusto</p>
</footer>
<script src="./js/plugin/simple-anime.js"></script>
<script type="module" src="./js/script.js"></script>
</body>
</html>