Skip to content

Commit af6811f

Browse files
muhammad-awais-web-devmuhammad-awais-web-dev
committed
About section half done
1 parent 7aea4a3 commit af6811f

File tree

3 files changed

+155
-12
lines changed

3 files changed

+155
-12
lines changed

‎Decor.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,70 @@
5959
to {
6060
transform: rotate(360deg);
6161
}
62+
}
63+
64+
65+
/* From Uiverse.io by Sharkotech */
66+
.card {
67+
width: 190px;
68+
height: 254px;
69+
position: absolute;
70+
transition: .3s ease-in-out;
71+
cursor: pointer;
72+
border-radius: 20px;
73+
box-shadow: 0px 0px 30px -10px rgba(225, 225, 225, 0.1);
74+
}
75+
76+
#c1 {
77+
background-color: black;
78+
}
79+
80+
#c2 {
81+
background-color: blue;
82+
}
83+
84+
#c3 {
85+
background-color: red;
86+
}
87+
88+
#c4 {
89+
background-color: green;
90+
}
91+
92+
.main:hover #c1 {
93+
transform: translateX(-100px) rotate(-40deg);
94+
}
95+
96+
.main:hover #c2 {
97+
transform: translateX(-50px) rotate(-30deg);
98+
}
99+
100+
.main:hover #c3 {
101+
transform: translateX(0) rotate(-20deg);
102+
}
103+
104+
.main:hover #c4 {
105+
transform: translateX(50px) rotate(-10deg);
106+
}
107+
108+
#c1:hover {
109+
transform: translateX(-150px) rotate(0deg) !important;
110+
}
111+
112+
#c2:hover {
113+
transform: translateX(-100px) rotate(0deg) !important;
114+
}
115+
116+
#c3:hover {
117+
transform: translateX(-50px) rotate(0deg) !important;
118+
}
119+
120+
#c4:hover {
121+
transform: translateX(50px) rotate(0deg) !important;
122+
}
123+
124+
.main {
125+
display: grid;
126+
height: 50vmax;
127+
place-items: center;
62128
}

‎index.html‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<meta name="author" content="Muhammad Awais">
1313
<meta property="og:title" content="Muhammad Awais | Web Developer & UX/UI Designer">
1414
<meta property="og:description" content="Explore the portfolio of Muhammad Awais, a skilled web developer and UX/UI designer.">
15-
<meta property="og:image" content="meta-image.jpg">
15+
<meta property="og:image" content="meta-img.png">
1616
</head>
1717
<body>
1818
<nav class="navbar">
@@ -45,22 +45,22 @@ <h1>Hi, I am a Web Developer and UX/Ui Designer</h1>
4545
<a href="curriculum vitae.pdf" download ><span>Download CV</span></a>
4646
</div>
4747
<div class="social-buttons-container">
48-
<div class="social-button">
48+
<a href="#" class="social-button">
4949
<i class="fa-brands fa-linkedin-in"></i>
5050
<span class="icon-text">LinkedIn</span>
51-
</div>
52-
<div class="social-button">
51+
</a>
52+
<a href="#" class="social-button">
5353
<i class="fa-brands fa-facebook-f"></i>
5454
<span class="icon-text">Facebook</span>
55-
</div>
56-
<div class="social-button">
55+
</a>
56+
<a href="#" class="social-button">
5757
<i class="fa-brands fa-x-twitter"></i>
5858
<span class="icon-text">X (Twetter)</span>
59-
</div>
60-
<div class="social-button">
59+
</a>
60+
<a href="#" class="social-button">
6161
<i class="fa-brands fa-github"></i>
6262
<span class="icon-text">Github</span>
63-
</div>
63+
</a>
6464
</div>
6565
</div>
6666
<div class="hero-decor">
@@ -113,6 +113,36 @@ <h1>Hi, I am a Web Developer and UX/Ui Designer</h1>
113113

114114
</div>
115115
</section>
116+
<section class="about">
117+
<div class="about-info">
118+
<h2>About Me</h2>
119+
<p style="font-size: 1.4rem; font-weight: 600;padding: 10px 0;"><i class="fa-solid fa-user"></i> Personal Info</p>
120+
<p>I am a freelance <strong>Web Developer</strong> & <strong>Ux/Ui Designer</strong> based in Pakistan. I am proficient in design tools like <strong>Figma</strong> and content management systems such as <strong>WordPress</strong>. My focus is on crafting visually appealing, user-centered websites and digital experiences, with a commitment to expanding my skills and services to meet diverse client needs.</p>
121+
<table>
122+
<tr>
123+
<td><i class="fa-solid fa-user-tie"></i> Muhammad Awais</td>
124+
<td><i class="fa-solid fa-phone"></i>(+92)325-9350593</td>
125+
</tr>
126+
<tr>
127+
<td><i class="fa-solid fa-address-book"></i>Mianwali,Punjab,Pakistan</td>
128+
<td><i class="fa-solid fa-calendar"></i>24/6/2003</td>
129+
</tr>
130+
<tr>
131+
<td><i class="fa-solid fa-language"></i>English, Urdu</td>
132+
<td><i class="fa-solid fa-at"></i>[email protected]</td>
133+
</tr>
134+
</table>
135+
</div>
136+
<div class="about-pic">
137+
<!-- From Uiverse.io by Sharkotech -->
138+
<div class="main">
139+
<div class="card" id="c1"></div>
140+
<div class="card" id="c2"></div>
141+
<div class="card" id="c3"></div>
142+
<div class="card" id="c4"></div>
143+
</div>
144+
</div>
145+
</section>
116146
</main>
117147
<script src="javascript.js"></script>
118148
<script src="https://kit.fontawesome.com/4cfda748cf.js" crossorigin="anonymous"></script>

‎styles.css‎

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@ body{
149149

150150
background: white;
151151
color: black;
152+
text-decoration: none;
152153
border-radius: 40px;
153154
display: inline-flex;
154155
align-items: center;
@@ -188,12 +189,58 @@ body{
188189
padding: 0 10px;
189190
}
190191

192+
.about{
193+
display: flex;
194+
flex-direction: row;
195+
align-items: center;
196+
justify-content: center;
197+
min-height: 90vh;
198+
color: #fff;
199+
}
200+
.about-info{
201+
display: flex;
202+
flex-direction: column;
203+
flex: 6 6 60%;
204+
padding: 0 50px;
205+
text-align: left;
206+
gap: 20px;
207+
}
208+
.about-info h2{
209+
font-size: 2rem;
210+
font-weight: 600;
211+
line-height: 1.2;
212+
}
213+
.about-info p{
214+
font-size: 1.2rem;
215+
text-align: justify;
216+
color: #ccc;
217+
}
218+
.about-info table tr{
219+
display: flex;
220+
align-items: center;
221+
justify-content: flex-start;
222+
margin-bottom: 10px;
223+
}
224+
.about-info table tr td{
225+
display: flex;
226+
flex: 1 1 50%;
227+
vertical-align: middle;
228+
padding: 10px 0;
229+
}
230+
.about-info table tr td i{
231+
font-size: 1.5rem;
232+
margin-right: 10px;
233+
color: #fff;
234+
}
235+
.about-pic{
236+
flex: 4 4 40%;
237+
display: flex;
238+
justify-content: center;
239+
align-items: center;
240+
}
191241

192242

193243
@media(max-width: 880px){
194-
.navbar{
195-
backdrop-filter: none;
196-
}
197244
.navbar-container .navbar-menu{
198245
display: none;
199246
flex-direction: column;

0 commit comments

Comments
 (0)