-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (193 loc) · 9.33 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
<!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>Personal Portfolio | Responsive Website Design</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css"
integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
</head>
<body>
<header>
<a href="#" class="logo">Portfolio</a>
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a href="#home" onclick="toggleMenu();">Home</a></li>
<li><a href="#about" onclick="toggleMenu();">About</a></li>
<li><a href="#services" onclick="toggleMenu();">Services</a></li>
<li><a href="#work" onclick="toggleMenu();">Work</a></li>
<li><a href="#testimonials" onclick="toggleMenu();">Testimonials</a></li>
<li><a href="#contact" onclick="toggleMenu();">Contact</a></li>
</ul>
</header>
<section class="banner" id="home">
<dev class="textBx">
<h2>Hello, I'm <br><span>Arpit Kumar Singh</span></h2>
<h3>I'm a Web Developer</h3>
<a href="#about" class="btn">About Me</a>
</dev>
</section>
<section class="about" id="about">
<div class="heading">
<h2>About Me</h2>
</div>
<div class="content">
<div class="contentBx w50">
<h3>I'm a Web Developer</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa possimus vitae facere maxime, commodi
minima, delectus et quibusdam dolorem amet incidunt vel modi. Ad obcaecati accusantium eum explicabo
culpa architecto recusandae inventore.
Sequi tenetur iste, sit fugiat quod aliquid nobis! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nihil quod animi, corporis assumenda eveniet vel quo adipisci, ipsum unde soluta
atque provident dolor exercitationem sunt
quasi? Ipsa magni repellendus quis pariatur nulla aut rerum, voluptatem, blanditiis, totam debitis
labore quibusdam. <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
incidunt? Dolores laborum neque quis
quod nobis aliquam, distinctio architecto est perspiciatis nostrum debitis! Architecto perspiciatis
blanditiis illum voluptatum libero ipsum, quisquam necessitatibus quae dignissimos neque nostrum.
Ducimus laboriosam nostrum suscipit?</p>
</div>
<div class="w50">
<img src="/My Portfolio (wd)/images/img1.jpg" class="img">
</div>
</div>
</section>
<section class="services" id="services">
<div class="heading">
<h2 class="white">Our Services</h2>
<p class="white">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut, deserunt.</p>
</div>
<dev class="content">
<dev class="servicesBx">
<img src="/My Portfolio (wd)/images/icon1.png">
<h2>Web Design</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, corrupti dolores. Officiis hic ad
aliquid doloribus excepturi amet deleniti corporis!</p>
</dev>
<dev class="servicesBx">
<img src="/My Portfolio (wd)/images/icon2.png">
<h2>Web Development</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, corrupti dolores. Officiis hic ad
aliquid doloribus excepturi amet deleniti corporis!</p>
</dev>
<dev class="servicesBx">
<img src="/My Portfolio (wd)/images/icon3.png">
<h2>Content Writing</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, corrupti dolores. Officiis hic ad
aliquid doloribus excepturi amet deleniti corporis!</p>
</dev>
<dev class="servicesBx">
<img src="/My Portfolio (wd)/images/icon4.png">
<h2>Photo Editing</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, corrupti dolores. Officiis hic ad
aliquid doloribus excepturi amet deleniti corporis!</p>
</dev>
</dev>
</section>
<section class="work" id="work">
<div class="heading">
<h2>Our Latest Work</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut, deserunt.</p>
</div>
<div class="content">
<div class="workBx">
<img src="/My Portfolio (wd)/images/product1.jpg" alt="">
</div>
<div class="workBx">
<img src="/My Portfolio (wd)/images/product2.jpg" alt="">
</div>
<div class="workBx">
<img src="/My Portfolio (wd)/images/product3.jpg" alt="">
</div>
<div class="workBx">
<img src="/My Portfolio (wd)/images/product4.jpg" alt="">
</div>
</div>
<div class="heading">
<a href="#" class="btn">View More</a>
</div>
</section>
<section class="testimonial" id="testimonials">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut, deserunt.</p>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At neque modi eaque veniam labore officia
expedita illum, a maxime quos animi doloribus saepe soluta omnis. Voluptatem, ipsum vitae, beatae
minus suscipit perspiciatis expedita autem
ratione ut maxime, possimus dolor officiis. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla, blanditiis?</p>
<h3>Someone Famous<br><span>Creative Designer</span></h3>
</div>
<div class="testimonialBx">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At neque modi eaque veniam labore officia
expedita illum, a maxime quos animi doloribus saepe soluta omnis. Voluptatem, ipsum vitae, beatae
minus suscipit perspiciatis expedita autem
ratione ut maxime, possimus dolor officiis. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla, blanditiis?</p>
<h3>Someone Famous<br><span>Creative Designer</span></h3>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="heading">
<h2 class="white">Contact US</h2>
<p class="white">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut, deserunt.</p>
</div>
<div class="content">
<div class="contactInfo">
<h3>Contact Info</h3>
<div class="contactInfoBx">
<div class="box">
<div class="text">
<h3>Address</h3>
<p>H. No. 145/3,<br>Vayusenavihar, New Delhi,<br>110044</p>
</div>
</div>
<div class="box">
<div class="text">
<h3>Phone</h3>
<p>8847xxxxx3</p>
</div>
</div>
<div class="box">
<div class="text">
<h3>Email</h3>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
<div class="formBx">
<form>
<h3>Message Me</h3>
<input type="text" name="" placeholder="Full Name">
<input type="text" name="" placeholder="Email">
<textarea placeholder="Your Message"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
<div class="copyright">
<p>Copyright © 2021 My X-Portfolio. All rights reserved</p>
</div>
<script type="text/javascript">
window.addEventListener('scroll', function () {
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
function toggleMenu() {
var menuToggle = document.querySelector('.toggle');
var menu = document.querySelector('.menu');
menuToggle.classList.toggle('active');
menu.classList.toggle('active');
}
</script>
</body>
</html>