-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (171 loc) · 11.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Interactive Resume</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="light" id="main-container" >
<div class="sidebar">
<div class="toggle-btn-mode">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2">
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
</svg>
</div>
<div class="profile-info bdr-bot">
<div class="pic-name">
<img src="./images/pic.jpg" alt="Muhammad Shoaib">
<h1 class="name"><span>Muhammad</span> Shoaib</h1>
<p class="title text-gray">Web Developer</p>
</div>
<div class="contact">
<p class="phone"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
</svg>
</span> <a href="tel:03452249577">0345-2249577</a></p>
<p class="email"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>
</span> <a href="#">[email protected]</a></p>
<p class="address"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</span> Karachi, Pakistan</p>
</div>
</div>
<div class="education bdr-bot">
<h2>Education</h2>
<ul>
<li class="leftline">
<h3>Computer Science</h3>
<p class="text-light">University of Karachi</p>
<p class="text-gray">2018-2022</p>
</li>
<li class="leftline">
<h3>Data analysis</h3>
<p class="text-light">University of Karachi</p>
<p class="text-gray">2018-2022</p>
</li>
</ul>
</div>
<div class="skills bdr-bot">
<h2>Skills</h2>
<div class="skillbox">
<span class="skill-name">HTML</span>
<span class="skill-name">CSS</span>
<span class="skill-name">JavaScript</span>
<span class="skill-name">TypeScript</span>
<span class="skill-name">React</span>
<span class="skill-name">Next.js</span>
<span class="skill-name">Node.js</span>
<span class="skill-name">Python</span>
<span class="skill-name">Tailwind</span>
<span class="skill-name">Bootstrap</span>
<span class="skill-name">PHP</span>
<span class="skill-name">MongoDB</span>
<span class="skill-name">MySQL</span>
<span class="skill-name">Git</span>
</div>
</div>
<div class="social-info bdr-bot">
<h2>Social</h2>
<div class="icons">
<p>
<a href="#"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-2"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
<a href="#">LinkedIn</a>
</p>
<p>
<a href="#"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-2"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
<a href="#">GitHub</a>
</p>
<p>
<a href="#"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-2"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg></a>
<a href="#">Twitter</a>
</p>
</div>
</div>
<!-- <div class="hobbies bdr-bot">
<h2>Hobbies</h2>
<ul class="list">
<li>Gaming</li>
<li>workout</li>
<li>Watching movies</li>
<li>Travelling</li>
</ul>
</div> -->
<div class="languages bdr-bot">
<h2>Languages</h2>
<ul class="list">
<li>English</li>
<li>Urdu</li>
</ul>
</div>
</div>
<div class="content">
<div class="about">
<h1>About</h1>
<p class="text-gray">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, maxime eum deleniti ipsum voluptates quisquam nulla quo, nihil sequi dolorum ex. Neque, optio enim quibusdam iste fugiat vitae quod perspiciatis suscipit? Placeat ullam nobis porro earum obcaecati cum, facere, eligendi blanditiis ducimus excepturi ea quibusdam neque, dignissimos sed ex voluptatum. Consequatur fuga aspernatur alias sint vel, sed sunt, eaque ab impedit culpa nobis aut rerum odio corporis vero, ex possimus tempora. Enim dolor dolorem quasi. Sed, mollitia repellat. Ducimus mollitia aliquid ex alias laborum possimus, officiis quo voluptates molestias eaque nam, architecto, unde quibusdam voluptas totam. Facilis nisi ex laboriosam.</p>
</div>
<div class="box">
<h1>Expericence</h1>
<div class="expericence">
<ul>
<li class="leftline">
<h3>web developer</h3>
<p class="text-light">company</p>
<p class="text-gray">2018-2022</p>
<p class="text-gray">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas voluptate assumenda illum cupiditate mollitia eos corporis dolorem molestias totam amet?</p>
</li>
<li class="leftline">
<h3>Full-stack developer</h3>
<p class="text-light">company</p>
<p class="text-gray">2023-2024</p>
<p class="text-gray">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas voluptate assumenda illum cupiditate mollitia eos corporis dolorem molestias totam amet?</p>
</li>
</ul>
<ul>
<li class="leftline">
<h3>web designer</h3>
<p class="text-light">company</p>
<p class="text-gray">2016-2020</p>
<p class="text-gray">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas voluptate assumenda illum cupiditate mollitia eos corporis dolorem molestias totam amet?</p>
</li>
<li class="leftline">
<h3>web developer</h3>
<p class="text-light">company</p>
<p class="text-gray">2023-2024</p>
<p class="text-gray">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas voluptate assumenda illum cupiditate mollitia eos corporis dolorem molestias totam amet?</p>
</li>
</ul>
</div>
</div>
<div class="box">
<h1>Certification</h1>
<div class="certification">
<div>
<h3>Lorem ipsum dolor sit amet.(2023)</h3>
<p class="text-gray">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas voluptate assumenda illum cupiditate mollitia eos corporis dolorem molestias totam amet?</p>
</div>
<div>
<h3>Lorem ipsum dolor sit amet.(2023)</h3>
<p class="text-gray">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas voluptate assumenda illum cupiditate mollitia eos corporis dolorem molestias totam amet?</p>
</div>
</div>
</div>
<div class="bdr-bot"></div>
<br>
<div class="hobbies">
<h2>Hobbies</h2>
<ul class="list">
<li>Gaming</li>
<li>workout</li>
<li>Watching movies</li>
<li>Travelling</li>
</ul>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>