-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (153 loc) · 9.3 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
<!DOCTYPE html>
<!-- Last Published: Sat Feb 03 2024 15:43:27 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-domain="rehan's-portfolio-website" data-wf-page="65bb171455e5eaeb8523bd1d"
data-wf-site="65bb171455e5eaeb8523bd19">
<head>
<meta charset="utf-8" />
<title>REHAN KHAN</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<!-- <meta content="Webflow" name="generator" /> -->
<link
href="style.css"
rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous" />
<script src="index.js" type="text/javascript"></script>
<script
type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic", "Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic", "PT Serif:400,400italic,700,700italic", "Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic", "Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic"] } });</script>
<script
type="text/javascript">!function (o, c) { var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch") }(window, document);</script>
<link href="icons8-r-avantgarde-32.png" rel="shortcut icon" type="image/x-icon" />
<link href="https://assets-global.website-files.com/img/webclip.png" rel="apple-touch-icon" />
</head>
<body class="body">
<section class="long-section">
<div class="nav">
<div class="container-w1 gutter-outside">
<div class="header-inner">
<div class="header-left">
<div class="header-button-wrapper"><a href="#" class="header-button">HOME</a></div>
<div class="header-button-wrapper"><a href="#aboutStart"
class="header-button secondary">ABOUT</a></div>
<div class="header-button-wrapper"><a href="#contactStart"
class="header-button secondary">CONTACT</a></div>
</div>
</div>
</div>
</div>
<h1 class="heading-9"> a<span class="n">N</span>ytHINg <br />w<span class="gradient-o">O</span>rth h<span
class="a">A</span>ving<br />ta<span class="k">k</span>es ti<span class="gradient-m">M</span>E </h1>
<!-- <div class="div-block-4">
<h1 class="heading-10"><span class="change-date" id="current-time">2024</span></h1>
</div> -->
<div class="herp-top">
<div class="align-to-bottom">
<h1 data-w-id="a86c22e2-9b71-fdf8-46ae-785c28d136d8" class="heading-6">rehan</h1>
<h1 data-w-id="bb92d2ac-041f-eb4b-01f7-e52e7336e0e4" class="heading-7">KhAn</h1>
</div>
</div>
<div class="text-div1" id="aboutStart">
<h1 class="heading-11">I'M REHAN A WEB DEVELOPER</h1>
<h1 class="heading-12">AND A WEB DESIGNER</h1>
<h1 class="heading-13">I'M REHAN A WEB DEVELOPER</h1>
<h1 class="heading-14">AND A WEB DESIGNER</h1>
</div>
<div class="image-div"><img
src="https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic.jpg"
loading="lazy" sizes="(max-width: 991px) 100vw, 799.34375px"
srcset="https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic-p-500.jpg 500w, https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic-p-800.jpg 800w, https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic-p-1080.jpg 1080w, https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic-p-1600.jpg 1600w, https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic-p-2000.jpg 2000w, https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic-p-2600.jpg 2600w, https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic-p-3200.jpg 3200w, https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65bce8860e899b83ecba97b6_cityPic.jpg 3262w"
alt="" class="image-2" /></div>
</section>
<div class="page">
<div class="w-embed">
<style>
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 1rem));
}
}
.scroll {
animation: scroll 10s linear infinite;
}
.reverse {
animation-direction: reverse;
}
.marquee-image {
-webkit-transform: translateZ(0);
}
</style>
</div>
<div class="heading-wrap"></div>
<div class="marquee">
<div class="marquee-content scroll">
<div class="text-block-4">LETS BUILD together.</div>
</div>
<div class="marquee-content scroll">
<div class="text-block-4">LETS BUILD TOGETHER.</div>
</div>
</div>
<div class="div-block-6">
<div class="cta-link text-grey">Scroll Down</div>
</div>
<div class="section-text-gradient-effect-3">
<div data-w-id="78c33597-63d2-1726-633a-e89efd416a06" class="text-effect-wrapper-2">
<div class="text-effect-sticky-element-3">
<div class="container-w3 gutter-outside">
<div class="text-effect-overflow-hidden">
<div class="text-effect-inner">
<div class="text-effect-gradient">
<div class="text-overlap-end"></div>
</div>
<p class="text-effect-text">I'm a dedicated and creative web developer based in
Hyderabad with a fervour for crafting seamless digital experiences. With a
background in Computer science Engineering, I bring a unique blend of skills and
expertise to every project I undertake.</p>
<p>I believe in the power of clean and efficient code. Whether it's front-end
development, back-end logic, or the delicate balance of both, I strive for
excellence in every line. I take pride in creating websites that not only meet
functional requirements but also provide a delightful user experience.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-w-id="b34c667e-ef0d-9a5e-ae54-205ea9852ec7" class="section-typo-zoom-in">
<div class="typo-zoom-sticky">
<div class="typo-zoom-sticky-inner">
<div class="typo-zoom-text-wrapper">
<div class="typo-zoom-text">MacBook Air</div><img
src="https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/65be2cce8db36593bac0f76e_CONTACT%20(2).svg"
loading="lazy" alt="" class="typo-zoom-text-image" />
</div>
</div>
</div>
</div>
<div id="tutorial" class="section-tutorial-2">
<div class="global-padding">
<div class="container-w3-2">
<div class="text-center" id="contactStart">
<h2 data-w-id="a17d11c5-28b8-dcaa-3b99-55d55adb3fe7" style="opacity:0" class="title2-2">Wanna
discuss about your new project?</h2>
<div class="p-xs-end"></div>
<p data-w-id="a17d11c5-28b8-dcaa-3b99-55d55adb3fea" style="opacity:0" class="title4">Mail me on:
<span class="text-span">[email protected]<br />OR<br />Click on the below button 👇</span>
</p>
<div class="header-button-wrapper"><a href="mailto: [email protected]" class="header-button">MAIL</a></div>
<div class="p-xl-end"></div>
</div>
</div>
</div>
<div class="container-w2"></div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=65bb171455e5eaeb8523bd19"
type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://assets-global.website-files.com/65bb171455e5eaeb8523bd19/js/webflow.5e52c9225.js"
type="text/javascript"></script>
</body>
</html>