-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (186 loc) · 7.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nurpais – Front-End Developer</title>
<meta
name="description"
content="Hey there, my name is Nurpais, a freelance Front-End developer based in Bishkek."
/>
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/locomotive-scroll.min.css" />
<link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<!-- Custom cursos -->
<div class="cursor"></div>
<div class="overlay"></div>
<!-- Scroll content -->
<div data-scroll-container>
<div class="container">
<!-- Navbar -->
<nav class="navbar" data-animation-opacity data-delay=".5">
<!-- Logo -->
<a href="index.html" class="logo">nur.</a>
<!-- Navbar menu -->
<ul class="navbar__menu mt-1 mt-md-0">
<li class="navbar__menu-item">
<a class="link-border-in" href="https://portf-d27c5.web.app/about/">about</a>
</li>
</ul>
</nav>
<!-- Header -->
<header class="header">
<div class="header__block">
<img class="header-wave" src="images/waves.gif" alt="Waves" data-animation-opacity data-delay=".7" />
<h1 class="heading-primary mt-1 mt-md-2">
<span class="hide-text">
Hey there *waves*, <br />
my name is Nurpais, <br />
a freelance Front-End <br />
developer based in Bishkek.
</span>
</h1>
<p class="mt-1 mt-md-2">
<span class="hide-text d-block">
I craft high-quality, bespoke digital solutions <br class="d-none d-sm-inline-block" />
for forward-thinking brands, like yours.</span
>
</p>
<div class="hide-text">
<a class="link-border-out mt-3 mt-md-5" href="about.html">learn more</a>
</div>
</div>
</header>
<!-- Header end -->
<!-- Main -->
<main class="main">
<!-- Pixel section -->
<section class="section-pixel">
<div
class="section-pixel__text-block mt-2"
data-scroll
data-scroll-speed="-3"
data-scroll-target=".container"
>
<h2 class="heading-secondary" data-animation-opacity>
I build pixel-perfect web solutions for all devices.
</h2>
<a class="link-border-out mt-2" href="#">view my work</a>
</div>
<div class="pixel-img-wrapper mt-4">
<img
loading="lazy"
data-scroll
data-scroll-speed="0"
data-scroll-target=".container"
class="pixel-img"
src="images/pixel-1.webp"
alt="Pixel"
/>
<img
loading="lazy"
data-scroll
data-scroll-speed="2"
data-scroll-target=".section-pixel"
class="pixel-img"
src="images/pixel-2.webp"
alt="Pixel"
/>
</div>
</section>
<!-- Pixel section end -->
<!-- Services section -->
<section class="section-services">
<h2 class="heading-secondary" data-animation-y>
I can take responsibility for one part <br class="d-none d-md-block" />
of your project, or deliver the whole solution.
</h2>
<!-- Services -->
<div class="services mt-3 mt-md-6">
<!-- Service item -->
<div class="service" data-animation-y>
<h3 class="service__heading">Web Design & Development</h3>
<p class="service__desc">
I build bespoke, scalable web applications using modern web technologies and tools. I ensure all
websites adhere to insustry standards and deliver the best possible user experience.
</p>
</div>
<!-- Service item -->
<div class="service" data-animation-y data-delay=".3">
<h3 class="service__heading">Responsive Design</h3>
<p class="service__desc">
Mobile phones now account for more than half of all internet traffic which is why I ensure that all
websites I develop are responsive; this means that the website can adjust to any screen size or
device.
</p>
</div>
<!-- Service item -->
<div class="service" data-animation-y>
<h3 class="service__heading">E-Commerce</h3>
<p class="service__desc">
I utilize powerfull platforms and tools to build scalable, purpose-driven e-Commerce solutions. Your
bespoke online store will provide a seamless user experience, that turns leads in to customers.
</p>
</div>
<!-- Service item -->
<div class="service" data-animation-y data-delay=".3">
<h3 class="service__heading">Content Management</h3>
<p class="service__desc">
It's important that you're able to self-manage your website from any place at any time, which is why I
develop content management systems that give you control over your website data.
</p>
</div>
<!-- Service item -->
<div class="service" data-animation-y>
<h3 class="service__heading">Website Management</h3>
<p class="service__desc">
I provide various website management options which include - updating content, backing-up important
data, monitoring and security/software updates.
</p>
</div>
<!-- Service item -->
<div class="service" data-animation-y data-delay=".3">
<h3 class="service__heading">SEO</h3>
<p class="service__desc">
Standard on-page SEO practices are included with every website I develop. This allows your website to
rank higher in search engine results and potentially drive more traffic to your site.
</p>
</div>
</div>
</section>
<!-- Services section end -->
</main>
<!-- Main end -->
<!-- Section contact -->
<section class="contact" data-animation-y>
<h2 class="heading-secondary">Let's build something great together.</h2>
<p class="contact__subtitle mt-1">
If you'd like to start a new project, need help with an existing project or have any other enquiry, please
get in touch.
</p>
<a class="link-border-out mt-3" href="mailto:[email protected]">[email protected]</a>
</section>
<!-- Section contact end -->
<!-- Footer -->
<footer class="footer" data-animation-y>
<a class="logo" href="index.html">nur.</a>
<p class="mt-1 mt-md-0">Bishkek, Kyrgyzstan</p>
<ul class="footer__nav mt-1 mt-md-0">
<li class="footer__nav-item">
<a class="link-border-in" href="https://github.com/nurpais">github</a>
</li>
<li class="footer__nav-item">
<a class="link-border-in" href="https://www.linkedin.com/in/nurpais/">linkedin</a>
</li>
</ul>
</footer>
<!-- Footer end -->
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="scripts/locomotive-scroll.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>