-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (210 loc) · 8.49 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
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio-Mohd Shoaib</title>
<link rel="icon" type="image/x-icon" href="shoaib4.png" />
<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=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"/>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
/>
<script src="script.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
</head>
<body>
<!-- Navbar -->
<section class="container">
<div class="navbar">
<div class="logo">
<h1>Portfolio</h1>
</div>
<div class="nav_container">
<div class="nav">
<a href="#home" style="--i: 1" class="content">Home</a>
<a href="#about" style="--i: 2" class="content">About</a>
<a href="#project" style="--i: 3" class="content">Projects</a>
<a href="#contact" style="--i: 4" class="content">Contact</a>
</div>
</div>
</div>
</section>
<!-- Home-Section -->
<section class="home">
<div class="home-content">
<h3>Hello,It's Me</h3>
<h1>Mohd Shoaib</h1>
<h3>And I'm a <span>Frontend Developer!</span></h3>
<p>
I'm a web Designer with extensive experience for over 1 year.
<br />and expertise is to create website design,Frontend design, and
<br />many more...
</p>
<div class="home-sci">
<a href="#" style="--i: 1"><i class="bx bxl-facebook-circle"></i></a>
<a href="#" style="--i: 2"><i class="bx bxl-twitter"></i></a>
<a href="https://github.com/Shoaib-Navi" style="--i: 3"><i class="bx bxl-github"></i></a>
<a href="https://www.linkedin.com/in/shoaib-navi-a6672a207/" style="--i: 4"><i class="bx bxl-linkedin"></i></a>
</div>
<a href="#about" class="btn-box">More About Me</a>
</div>
<div class="portfolio-img">
<img src="shoaib3-removebg-preview.png" alt="shoaib">
<!-- home-image -->
</div>
</section>
<!-- About-Section -->
<section class="about" id="about">
<div class="about-img">
<!-- about-image -->
<img src="shoaib4.png" alt="shoaib4">
</div>
<div class="about-text">
<h2>About <span>Me</span></h2>
<h4>Frontened Developer!</h4>
<p>
Hi, I’m Mohd Shoaib, a passionate frontend developer with a strong foundation in building dynamic, user-centered web applications. Currently pursuing my BTech degree at ABES Engineering College, I’m skilled in crafting interactive and responsive user interfaces that focus on delivering smooth user experiences. I enjoy transforming creative ideas into functional code and continuously learning new technologies to stay updated with the latest industry trends.
</p><h3>Skills</h3>
<p>
Languages: HTML, CSS, JavaScript <br>
Frameworks & Libraries: React, Bootstrap, Tailwind CSS<br>
Tools: Git, GitHub (GitHub username: shoaibNavi), VS Code <br>
Other Skills: Responsive Design, Cross-Browser Compatibility, Performance Optimization<br></p>
<h3>Education</h3><p>
BTech in Computer Science<br>
From ABES Engineering College<br>
</p>
</div>
</section>
<section>
<div class="services" id="services">
<div class="service-container">
<h1 class="sub-title">My <span>Services</span></h1>
<div class="services-list">
<div>
<i class="bx bx-code" style="color: #00eeff"></i>
<h2>Service-1</h2>
<p>
web designer
</p>
<a href="#" class="read">learn more...</a>
</div>
<div>
<i class="bx bx-crop" style="color: #00eeff"></i>
<h2>Service-2</h2>
<p>
figma design
</p>
<a href="#" class="read">learn more</a>
</div>
<div>
<i class="bx bxl-apple" style="color: #00eeff"></i>
<h2>Service-3</h2>
<p>
website using React
</p>
<a href="#" class="read">learn more</a>
</div>
</div>
</div>
</div>
</section>
<section >
<div id="portfolio" id="project">
<div class="main-text" id="project">
<h2>Latest <span>Project</span></h2>
<div class="portfolio-content">
<div class="row">
<img src="project1.png" />
<div class="layer">
<h5>Rest Countries API Project</h5>
<p>
A simple web application that fetches and displays country-related information using the Rest Countries API.
</p>
<a href="#"
><i class="bx bx-link-external" style="color: blue"></i
></a>
</div>
</div>
<div class="row">
<img src="project2.png" />
<div class="layer">
<h5>Radient Recipe</h5>
<p>
Radient Recipe – A web platform developed during a hackathon, designed to promote healthy eating through curated recipes. Built with a user-friendly interface, it helps users easily discover nutritious recipes, complete with ingredients and step-by-step instructions.
</p>
<a href="#"
><i class="bx bx-link-external" style="color: blue"></i
></a>
</div>
</div>
<div class="row">
<img src="project3.png" />
<div class="layer">
<h5>Focus On Today</h5>
<p>
"Focus On Today" is a web page built with HTML, CSS, and
JavaScript to inspire mindfulness, prioritize goals, and
boost daily focus.
</p>
<a href="#"
><i class="bx bx-link-external" style="color: blue"></i
></a>
</div>
</div>
<div class="row">
<img src="project4.png" />
<div class="layer">
<h5>Calculator</h5>
<p>
A simple, responsive calculator application built using HTML, CSS, and JavaScript. It performs basic arithmetic operations such as addition, subtraction, multiplication, and division.
</p>
<a href="#"
><i class="bx bx-link-external" style="color: blue"></i
></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="contact-text">
<h2>Contact <span>Me</span></h2>
<h4>Let's work together!</h4>
<p>
I’d love to hear about your project! Whether you’re starting fresh or need enhancements, let’s connect to create something impactful. Reach out, and let’s bring your vision to life!
</p>
<div class="contact-list">
<li><i class="bx bxs-send"></i>[email protected]</li>
<li><i class="bx bxs-phone"></i>0123456789</li>
</div>
<div class="contact-icons">
<a href=""><i class="bx bxl-facebook-circle"></i></a>
<a href=""><i class="bx bxl-twitter"></i></a>
<a href=""><i class="bx bxl-instagram"></i></a>
<a href="https://www.linkedin.com/in/shoaib-navi-a6672a207/"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
<div class="contact-form">
<form action="">
<input type="text" placeholder="Enter Your Name" required>
<input type="email" placeholder="Enter Your Email" required>
<input type="text" placeholder="Enter Your Subject">
<textarea name="" id="" cols="40" rows="10" placeholder="Enter Your Message"></textarea>
<input type="submit" value="submit" class="send">
</form>
</div>
</section>
<div class="last-text">
<p>Developed by Shaoib Navi@2024</p>
</div>
<a href="#" class="top"><i class="bx bx-up-arrow-alt"></i></a>
</body>
</html>