-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (115 loc) · 5.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kelvin</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/media.css">
<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:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header class="header">
<div class="container">
<div class="header-nav">
<a href="#!" class="logo">Kelvin</a>
<nav id="nav" class="nav">
<ul class="nav-list">
<li class="nav-item"><a href="#!" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#!" class="nav-link">Works</a></li>
<li class="nav-item"><a href="#!" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#!" class="nav-link">About</a></li>
<li class="nav-item"><a href="#!" class="nav-link">Contact</a></li>
</ul>
<button id="nav-btn" class="nav-button">
<img id="nav-btn-img" src="./image/icons/nav-open.svg" alt="Nav button">
</button>
</nav>
</div>
<div class="header-row">
<div class="header-content">
<h1 class="header-heading">Kelvin Kramer<br> <span>Designer & Developer</span></h1>
<p>I'm a portrait, fashion and lifestyle photographer living In New York City. During my thirteen year tenure here.</p>
</div>
<div class="header-img">
<source media="(max-width: 799px)" srcset="./image/header/hero-mobile.png">
<picture>
<img src="./image/header/hero.png" alt="">
</picture>
</div>
</div>
</div>
</header>
<main>
<section class="services">
<div class="container">
<ul class="services-row">
<li class="service-card" data-aos="fade-down">
<img class="service-card-img" src="./image/services/01.svg" alt="UI/UX Design">
<h3 class="services-card-title">UI/UX Design</h3>
<p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
</li>
<li class="service-card" data-aos="fade-down">
<img class="service-card-img" src="./image/services/02.svg" alt="UI/UX Design">
<h3 class="services-card-title">Development</h3>
<p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
</li>
<li class="service-card" data-aos="fade-down">
<img class="service-card-img" src="./image/services/03.svg" alt="UI/UX Design">
<h3 class="services-card-title">software testing</h3>
<p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
</li>
</ul>
</div>
</section>
<section class="portfolio">
<div class="container">
<div class="portfolio-title">
<h2 class="title-1">Portfolio</h2>
</div>
<div class="project" data-aos="flip-up">
<img src="./image/portfolio/01.jpg" alt="Online fashion store" class="project-img">
<h3 class="project-title"><a href="#!">Online fashion store - Homepage</a></h3>
</div>
<div class="project" data-aos="flip-up">
<img src="./image/portfolio/02.jpg" alt="Reebok Store" class="project-img">
<h3 class="project-title"><a href="#!">Reebok Store - Concept</a></h3>
</div>
<div class="project" data-aos="flip-up">
<img src="./image/portfolio/03.jpg" alt="Braun Landing Page" class="project-img">
<h3 class="project-title"><a href="#!">Braun Landing Page - Concept</a></h3>
</div>
</div>
</section>
</main>
<footer class="contacts">
<div class="container">
<div class="contacts-title">
<h2 class="title-1">Contacts</h2>
</div>
<div class="contacts-content" data-aos="fade-down">
<p>Want to know more or just chat?<br> You are welcome!</p>
</div>
<div class="contacts-button" data-aos="fade-down">
<a href="#!" class="btn">Send message</a>
</div>
<div class="contacts-social" data-aos="fade-down">
<a href="#!"><img src="./image/socials/LinkedIn.svg" alt="LinkedIn"></a>
<a href="#!"><img src="./image/socials/Instargam.svg" alt="Instargam"></a>
<a href="#!"><img src="./image/socials/Behance.svg" alt="Behance"></a>
<a href="#!"><img src="./image/socials/Dribble.svg" alt="Dribble"></a>
</div>
<div class="contacts-footer" data-aos="fade-down">
Like me on <br> LinkedIn, Instagram, Behance, Dribble
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./js/main.js"></script>
</body>
</html>