-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
221 lines (145 loc) · 7.87 KB
/
index.html
File metadata and controls
221 lines (145 loc) · 7.87 KB
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
213
214
215
216
217
218
219
220
221
<!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>Muhammad Zohaib</title>
<link rel="stylesheet" href="CSS/style.css">
<link rel="shortcut icon" href="IMAGES/a.png" type="image/x-icon" class="fevicon">
</head>
<body>
<header class="header">
<img src="IMAGES/logo.png" alt="Main Logo" class="logo">
<!-- =======================================================================
NAVBAR SECTION STARTS FROM HERE
============================================================================ -->
<nav class="navbar">
<ul class="navbar-lists">
<li><a href="#hireme" class="navbar-link home-link">Home</a></li>
<li><a href="#" class="navbar-link about-link">About</a></li>
<li><a href="#" class="navbar-link service-link">Service</a></li>
<li><a href="#cv" class="navbar-link home-link">Portfolio</a></li>
<li><a href="#hireme" class="navbar-link contact-link">Contact</a></li>
</ul>
</nav>
</header>
<!-- =======================================================================
MAIN SECTION STARTS FROM HERE
============================================================================ -->
<main>
<marquee class="marquee-header" behavior="scroll" direction="left" scrolldelay ="20">Hello, I am a frontend developer and this is my portfolio website. Please scroll till end to explore more about me. </marquee>
<section class="section-hero section" id="hireme">
<div class="container grid grid-two-column">
<div class="section-hero-data">
<p class="hero-top-data">
This is me :)
</p>
<h1 class="hero-heading">
Muhammad Zohaib
</h1>
<p class="hero-paragraph">
Welcome to my portfolio website! My name is Muhammad Zohaib and I am a Frontend developer. I have always been passionate about Responsive and attractive websites and have dedicated my career to eye catching websites. On this website, you will find a selection of my previous work and projects that showcase my skills and experience in (Pure HTML, Pure CSS and Vanilla JS). I am constantly learning and evolving my craft, and I am always open to new opportunities and challenges. Thank you for visiting and please feel free to contact me with any questions or inquiries. I hope you enjoy exploring my portfolio.
</p>
<a href="" class="btn hireme-btn" id="hire-me-button" >Hire Me</a>
</div>
<!-- HERO SECTION RIGHT SIDE -->
<div class="section-hero-image">
<img src="IMAGES/a.png" alt="This is me Muhammad Zohaib" class="hero-img">
</div>
</div>
</section>
</main>
<!-- =======================================================================
ABOUT SECTION STARTS FROM HERE
============================================================================ -->
<section class="section-biodata section" >
<div class="container grid grid-two-column">
<div class="bio-image">
<img class="bio-img" src="IMAGES/aa.jpg" alt="Bio Data ">
</div>
<!-- BIO RIGHT SIDE DATA -->
<div class="bio-data">
<h2 class="common-heading " id="cv"> My Bio Data</h2>
<h3 class="bio-heading" >Education and Qualification:</h3>
<p class="hero-paragraph ">
<ul class="bio-lists bio-border eoqq">
<li class="bio-lists tmh-link">THE MONTESSORI HOME- Matriculation (2017)</li>
<li class="bio-lists college-link">Government Degree College, SRE MAJEED- Intermediate (2019)</li>
<li class="bio-lists uni-link">Sindh Madressatul Islam University- BSCS (2020 - 2024)</li>
</ul>
</p>
<h3 class="bio-heading saa" >Skills and Abilities:</h3>
<div class="bio-data-stats">
<div class="bio-stats">
<h2>Design</h2>
<div class="bio-progress-bar">
<span>80%</span>
</div>
</div>
<div class="bio-stats">
<h2>HTML5</h2>
<div class="bio-progress-bar bio-progress-2">
<span>90%</span>
</div>
</div>
<div class="bio-stats">
<h2>CSS</h2>
<div class="bio-progress-bar bio-progress-3">
<span>86%</span>
</div>
</div>
<div class="bio-stats">
<h2>Creativity</h2>
<div class="bio-progress-bar bio-progress-4">
<span>100%</span>
</div>
</div>
</div><br>
<div class="bio-data-btnDownloadCv">
<a href="" class="btnDownloadCv" id="download-button">Download CV </a>
</div>
</div>
</div>
</section>
<!-- =======================================================================
PORTFOLIO SECTION STARTS FROM HERE
============================================================================ -->
<!-- <section class="section section-portfolio" id="portfolio-section">
<div class="container">
<h2 class="common-heading">
Latest Work
</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias similique neque repudiandae, quod quae sapiente quam expedita magni laudantium odit. Facilis ex hic consequatur qui eos repudiandae, nam delectus dicta.</p>
</div>
<div class="p-btns">
<div class="btn p-btn" data-btn-num="1"></div>
<div class="btn p-btn" data-btn-num="2"></div>
<div class="btn p-btn" data-btn-num="3"></div>
</div>
<div class="container grid grid-three-column portfolio-images">
<div class="img-overlay p-btn--1">
<img src="IMAGES/a.png" alt="My works">
<div class="overlay">
<a href="http://www.google.com" class="common-heading">Project 1</a>
</div>
</div>
<div class="img-overlay p-btn--2">
<img src="IMAGES/a.png" alt="My works">
<div class="overlay">
<a href="http://www.google.com" class="common-heading">Project 2</a>
</div>
</div>
<div class="img-overlay p-btn--3">
<img src="IMAGES/a.png" alt="My works">
<div class="overlay">
<a href="http://www.google.com" class="common-heading">Project 3</a>
</div>
</div>
</div>
</section>
<script src="JS/index.js"></script>
<script src=""></script>
</body>
</html>
-->