-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (133 loc) · 4.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mayank</title>
<link rel="stylesheet" href="style.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
href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css"
rel="stylesheet"
/>
</head>
<body>
<main>
<header>
<div class="navbar">
<p class="logo"><a href="">Mayank</a></p>
<nav class="navbar-left">
<ul>
<li onclick="scrollToSection('work_project')">
<a class="hide-mobile" href="#">Project</a>
</li>
<li><a class="hide-mobile" href="">About</a></li>
<li><a class="hide-mobile" href="">Contact</a></li>
<li class="menu-icon">
<a><i class="ri-menu-line"></i></a>
</li>
</ul>
</nav>
<nav class="sidebar">
<ul>
<li class="close-icon">
<a href=""><i class="ri-menu-unfold-line"></i></a>
</li>
<li onclick="scrollToSection('work_project')">
<a href="#">Project</a>
</li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</header>
<hr />
<section class="hero">
<div class="left">
<h1>Hi, I'm <span>Mayank</span></h1>
<p class="sub-heding1">
Passionate <span>Frontend Developer</span> from India.
</p>
<button class="cta" onclick="scrollToSection('work_project')">
Check out my work.
</button>
</div>
</section>
<section class="project" id="work_project">
<h2 class="section-titel">Project</h2>
<div class="project-grid">
<div class="project-card">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Architecto, tempora.
</p>
</div>
<div class="project-card">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Architecto, tempora.
</p>
</div>
<div class="project-card">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Architecto, tempora.
</p>
</div>
</div>
</section>
<section class="about">
<h2 class="section-titel">About Me</h2>
<p>
Hi, I'm Mayank, a passionate <span>Frontend Developer</span> from
India with a knack for crafting visually appealing and user-friendly
web experiences. I specialize in HTML, CSS, and JavaScript, building
clean and responsive websites that bring ideas to life.
</p>
<p>
I'm constantly seeking to improve my skills, staying updated with the
latest trends and technologies in web development. My focus is on
delivering high-quality, performant code that enhances user
experience.
</p>
<p>
Feel free to check out my projects to see what I've been working on or
get in touch if you want to collaborate!
</p>
</section>
<section class="contact">
<h2 class="section-titel">Contact Me</h2>
<div class="contact-form">
<form action="#" method="">
<input type="text" name="name" placeholder="Your Name" required />
<input
type="email"
name="email"
placeholder="Your Email"
required
/>
<input type="text" name="subject" placeholder="Subject" required />
<textarea
name="message"
rows="5"
placeholder="Your Message"
cols="30"
required
></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</section>
</main>
<script src="/script.js"></script>
</body>
</html>