forked from paxha/paxha.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (133 loc) · 8.29 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Abid Aslam</title>
<link href="css/tailwind.min.css" rel="stylesheet">
<style>
@font-face {
font-family: "Lato-Bold";
src: url("//db.onlinewebfonts.com/t/9d942e0ff1014c476713a855710ce309.eot");
src: url("//db.onlinewebfonts.com/t/9d942e0ff1014c476713a855710ce309.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/9d942e0ff1014c476713a855710ce309.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/9d942e0ff1014c476713a855710ce309.woff") format("woff"), url("//db.onlinewebfonts.com/t/9d942e0ff1014c476713a855710ce309.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/9d942e0ff1014c476713a855710ce309.svg#Lato") format("svg");
}
@font-face {
font-family: "Lato-Thin";
src: url("//db.onlinewebfonts.com/t/024608515afb89de6889c0c9220041f1.eot");
src: url("//db.onlinewebfonts.com/t/024608515afb89de6889c0c9220041f1.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/024608515afb89de6889c0c9220041f1.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/024608515afb89de6889c0c9220041f1.woff") format("woff"), url("//db.onlinewebfonts.com/t/024608515afb89de6889c0c9220041f1.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/024608515afb89de6889c0c9220041f1.svg#Lato Thin") format("svg");
}
@font-face {
font-family: "Lato";
src: url("//db.onlinewebfonts.com/t/e080040fab017e068ee2901a6cdb5ec4.eot");
src: url("//db.onlinewebfonts.com/t/e080040fab017e068ee2901a6cdb5ec4.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/e080040fab017e068ee2901a6cdb5ec4.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/e080040fab017e068ee2901a6cdb5ec4.woff") format("woff"), url("//db.onlinewebfonts.com/t/e080040fab017e068ee2901a6cdb5ec4.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/e080040fab017e068ee2901a6cdb5ec4.svg#Lato") format("svg");
}
.lato-bold {
font-family: "Lato-Bold";
}
.lato-thin {
font-family: "Lato-Thin";
}
.lato {
font-family: "Lato";
}
.dot {
position: absolute;
left: -9px;
}
</style>
</head>
<body class="">
<div class="container mx-auto">
<div class="flex bg-white lg:h-screen h-auto">
<div class="hidden lg:w-1/3 lg:flex lg:justify-center lg:items-center lg:bg-gray-100">
<img alt="Profile Photo" class="rounded-full shadow-lg w-56 h-56" src="images/avatar.jpg">
</div>
<div class="w-full lg:w-3/4 flex items-center relative">
<div class="lg:mx-12 w-full text-center lg:text-left">
<div class="lg:hidden flex justify-center">
<img alt="Profile Photo" class="m-4 shadow-lg rounded-full w-56 h-56" src="images/avatar.jpg">
</div>
<h1 class="leading-none">
<span class="text-4xl md:text-5xl lg:text-6xl block text-gray-700 font-thin lato-thin"></span>
<span class="text-3xl md:text-5xl lg:text-6xl block text-blue-800 break-normal lato-bold uppercase">Abid Aslam</span>
</h1>
<h2 class="mt-4 text-xl block text-gray-600 lato-thin font-serif font-medium border-t md:border-0 border-b inline-block border-blue-800">
Senior Software Engineer at <a href="https://my-glu.com" class="hover:underline">MyGlu</a>
</h2>
<div class="lg:absolute lg:inset-x-0 lg:bottom-0 lg:m-12 m-4">
<hr>
<div class="flex flex-wrap mt-2">
<div class="w-full md:w-1/2 lg:w-1/4 text-left">
<h2 class="py-3 text-xs lato-bold text-gray-700">Location</h2>
<p class="text-xs text-gray-600 lato">Lahore, Pakistan</p>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 text-left">
<h2 class="py-3 text-xs lato-bold text-gray-700">Phone</h2>
<p class="text-xs text-blue-800 lato"><a class="hover:text-gray-600"
href="tel:+92-320-4148413">+92-304-2465882</a></p>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 text-left">
<h2 class="py-3 text-xs lato-bold text-gray-700">Web</h2>
<p class="text-xs text-blue-800 lato"><a class="hover:text-gray-600"
href="https://abid.github.io">abid.github.io</a>
</p>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 text-left">
<h2 class="py-3 text-xs lato-bold text-gray-700">Email</h2>
<p class="text-xs text-blue-800 lato"><a class="hover:text-gray-600"
href="mailto:[email protected]">[email protected]</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap lg:flex-no-wrap h-auto">
<div class="mx-4 lg:m-0 lg:w-1/3 w-full lg:flex lg:justify-end bg-gray-100 lg:bg-white">
<h2 class="lato-bold m-10 text-gray-600 uppercase">Experience</h2>
</div>
<div class="w-full lg:w-3/4 flex items-center relative bg-white lg:bg-gray-100">
<div class="m-4 m-12 w-full border-l-2">
<div class="flex relative">
<div class="w-4 h-4 rounded-full bg-blue-800 dot border-4 lg:border-gray-100 border-white"></div>
<div class="pl-4">
<span class="text-xs text-gray-600 lato block leading-tight">September 2020 - Present</span>
<h3 class="text-gray-600 uppercase lato-bold">
<a href="https://my-glu.com" class="hover:underline">MyGlu (Pvt) Ltd</a>
</h3>
<h4 class="text-xs text-gray-600 lato-thin">Sr. Software Engineer</h4>
<p class="pb-10 text-xs text-gray-600 lato">Lahore, Pakistan</p>
</div>
</div>
<div class="flex relative">
<div class="w-4 h-4 rounded-full bg-blue-800 dot border-4 lg:border-gray-100 border-white"></div>
<div class="pl-4">
<span class="text-xs text-gray-600 lato block leading-tight">March 2020 - Aug 2020</span>
<h3 class="text-gray-600 uppercase lato-bold">
<a href="https://aodour.pk" class="hover:underline">Aodour (Pvt) Ltd</a>
</h3>
<h4 class="text-xs text-gray-600 lato-thin">Software Engineer</h4>
<p class="pb-10 text-xs text-gray-600 lato">Lahore, Pakistan</p>
</div>
</div>
<!-- <div class="flex relative">
<div class="w-4 h-4 rounded-full bg-blue-800 dot border-4 lg:border-gray-100 border-white"></div>
<div class="pl-4">
<span class="text-xs text-gray-600 lato block leading-tight">January 2019 - July 2019</span>
<h3 class="text-gray-600 uppercase lato-bold">
<a href="https://ctproducts.net" class="hover:underline">CT PRODUCTS (PVT) LTD</a>
</h3>
<h4 class="text-xs text-gray-600 lato-thin">Sr. Software Engineer</h4>
<p class="pb-10 text-xs text-gray-600 lato">Lahore, Pakistan</p>
</div>
</div> -->
<div class="w-4 border-t-2 absolute" style="transform: translate(-54%,0)"></div>
</div>
</div>
</div>
</div>
</body>
</html>