Skip to content

Commit 7a6d091

Browse files
abdulraufdevabdulraufdev
committed
added contact-sec
1 parent 3997080 commit 7a6d091

6 files changed

Lines changed: 242 additions & 119 deletions

File tree

‎contact.css‎

Lines changed: 70 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,76 @@
1-
/*Contact.html*/
2-
input {
3-
background-color: var(--white-07);
4-
width: 40ch;
5-
border: none;
6-
color: var(--black);
7-
font-family: var(--primary-font);
8-
font-weight: 700;
9-
font-size: 14px;
10-
outline: none;
11-
padding: 14px 40px 14px 14px;
12-
margin: 4px 12px;
13-
transition: all 0.4s ease;
14-
}
15-
input::placeholder {
16-
font-weight: 700;
17-
font-size: 14px;
18-
text-transform: uppercase;
19-
}
20-
input:focus {
21-
background-color: var(--white-06);
22-
}
23-
.submit-cta {
1+
.contact-sec{
2+
display: grid;
3+
grid-template-areas:
4+
'email-box email-box linkedin-box linkedin-box'
5+
'email-box email-box linkedin-box linkedin-box'
6+
'github-box github-box linkedin-box linkedin-box'
7+
'github-box github-box linkedin-box linkedin-box';
8+
gap: 1rem;
9+
min-height: 300px;
10+
>div{
2411
display: flex;
2512
align-items: center;
26-
margin-top: 2rem;
27-
}
28-
.submit-cta span {
29-
display: inline-block;
30-
height: 4px;
31-
width: 2em;
32-
color: var(--black);
33-
background-color: var(--black);
34-
transition: width 0.4s ease;
35-
}
36-
.submit-cta:hover span,
37-
.submit-cta:active span {
38-
width: 0.4em;
39-
}
40-
input[type="submit"] {
41-
width: auto;
42-
padding: 0;
43-
background-color: transparent;
44-
color: var(--black);
45-
border: none;
46-
cursor: pointer;
47-
font-size: 18px;
48-
font-family: var(--primary-font);
49-
font-weight: 600;
50-
}
51-
.wrapper1 {
52-
height: 100vh;
53-
margin: auto;
54-
/* padding: 0px 12rem; */
55-
display: flex;
5613
justify-content: center;
57-
align-items: center;
58-
}
59-
.devinfo1 {
60-
width: 100%;
61-
display: flex;
62-
gap: 3rem;
63-
}
64-
.wrapper2 {
65-
width: auto;
66-
}
67-
h1.contact {
14+
flex-direction: column;
15+
cursor: pointer;
16+
padding: 1rem;
17+
border-radius: 8px;
18+
border: 1px solid var(--white-08);
19+
background-color: var(--white-09);
6820
color: var(--black);
69-
width: 100%;
70-
font-size: 3.5rem;
71-
line-height: 100%;
72-
font-family: var(--primary-font);
73-
-webkit-user-select: none;
74-
user-select: none;
21+
align-self: stretch;
22+
>h2{
23+
margin-top: 1rem;
24+
}
25+
&:hover{
26+
background-color: var(--white-08);
27+
transition: background-color 0.3s ease-in-out;
28+
}
29+
7530
}
76-
77-
p.contact-p {
78-
color: var(--black);
79-
font-weight: 600;
80-
font-size: 32px;
81-
line-height: 160%;
31+
}
32+
33+
.email-box{
34+
grid-area: email-box;
35+
>span:hover{
36+
opacity: 0.8;
8237
}
83-
38+
}
39+
.linkedin-box{
40+
grid-area: linkedin-box;
41+
}
42+
.github-box{
43+
grid-area: github-box;
44+
}
45+
46+
.contact-h1 {
47+
color: var(--black);
48+
width: 100%;
49+
font-size: 3.5rem;
50+
line-height: 100%;
51+
font-family: var(--primary-font);
52+
-webkit-user-select: none;
53+
user-select: none;
54+
}
55+
56+
.square-cta{
57+
width: 100px;
58+
height: 100px;
59+
display: flex;
60+
align-items: flex-start;
61+
flex-direction: column;
62+
justify-content: flex-end;
63+
gap: 4px;
64+
font-weight: 600;
65+
border-radius: 8px;
66+
padding: 1rem;
67+
border: 1px solid var(--white-08);
68+
}
69+
70+
.sm-links{
71+
display: flex;
72+
align-items: center;
73+
flex-wrap: wrap;
74+
gap: 1rem;
75+
margin-top: 1rem;
76+
}

‎contact.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="description"
9+
content="Hey there, it's Abdul Rauf; a Full-Stack developer. Let's have a look at my Portfolio!">
10+
<title>Contact Me</title>
11+
<link rel="stylesheet" href="style.css">
12+
<link rel="stylesheet" href="contact.css">
13+
<link rel="stylesheet" href="responsive.css">
14+
<link rel="icon" type="image/favicon" href="https://ik.imagekit.io/abduledits5/myavi.jpeg">
15+
</head>
16+
17+
<body>
18+
<span class="tab-bar">
19+
<a href="/">Home</a>
20+
<a href="/about">About</a>
21+
<a href="/my-projects">Projects</a>
22+
<a href="/contact.html" style="background-color: var(--white-08);">Contact</a>
23+
</span>
24+
<!-- hero sec -->
25+
<div class="container">
26+
<div class="contact-sec">
27+
<div class="email-box">
28+
<span
29+
style="display: flex; gap: 8px; align-items: center; padding: 8px 16px; background-color: var(--white-08); border-radius: 100px; border: 1px solid var(--white-07);">
30+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
31+
<path
32+
d="M1.75 3h20.5c.966 0 1.75.784 1.75 1.75v14a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 18.75v-14C0 3.784.784 3 1.75 3ZM1.5 7.412V18.75c0 .138.112.25.25.25h20.5a.25.25 0 0 0 .25-.25V7.412l-9.52 6.433c-.592.4-1.368.4-1.96 0Zm0-2.662v.852l10.36 7a.25.25 0 0 0 .28 0l10.36-7V4.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z">
33+
</path>
34+
</svg>
35+
<a href="mailto:abdulrauf.design@outlook.com" style="font-weight: 600;">
36+
abdulrauf.design@outlook.com
37+
</a>
38+
</span>
39+
</div>
40+
<div class="github-box" onclick="document.location.assign('https:\/\/github.com/abdulraufdesign')">
41+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
42+
style="transform: scale(1.7)">
43+
<path
44+
d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z">
45+
</path>
46+
</svg>
47+
<h2>GitHub</h2>
48+
<p class="faded-p">Explore more repositories</p>
49+
</div>
50+
<div class="linkedin-box" onclick="document.location.assign('https:\/\/linkedin.com/in/abdulraufdesign')">
51+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="transform: scale(2);"
52+
fill="currentColor" viewBox="0 0 16 16">
53+
<path
54+
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
55+
</svg>
56+
<h2>LinkedIn</h2>
57+
<p class="faded-p">Let's connect</p>
58+
</div>
59+
60+
</div>
61+
<!-- project sec -->
62+
<main class="sm-sec">
63+
<h1 class="proj-h1">Socials</h1>
64+
<p>Got an idea? Let's dive in and create—or just enjoy a chat about how awesome it could be, drop a Hi. 👋</p>
65+
<div class="sm-links">
66+
<a href="https://www.instagram.com/abdulrauf.design" class="cta square-cta"
67+
style="background-color: rgba(253, 29, 29, 0.05); color: #fd1d1d; border: 1px solid rgba(253, 29, 29, 0.2);">
68+
<svg xmlns="http://www.w3.org/2000/svg" style="transform: scale(1.8); transform-origin: bottom left;" width="16" height="16" fill="currentColor"
69+
viewBox="0 0 16 16">
70+
<defs>
71+
<linearGradient id="Gradient2" x1="1" x2="0" y1="0" y2="0">
72+
<stop offset="0%" stop-color="#833ab4" />
73+
<stop offset="50%" stop-color="#fd1d1d" />
74+
<stop offset="100%" stop-color="#fcb045" />
75+
</linearGradient>
76+
</defs>
77+
<path fill="url(#Gradient2)"
78+
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
79+
</svg>
80+
Instagram</a>
81+
<a href="https://www.x.com/abdulraufdesign" class="cta square-cta"
82+
style="background-color: var(--white-09); color: var(--black); border: 1px solid var(--white-07)">
83+
<svg xmlns="http://www.w3.org/2000/svg" style="transform: scale(1.8); transform-origin: bottom left;" width="16" height="16" fill="var(--black)"
84+
viewBox="0 0 16 16">
85+
<path
86+
d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
87+
</svg>
88+
X (Twitter)</a>
89+
<a href="https://behance.net/abdulraufdesign" class="cta square-cta"
90+
style="background-color: rgba(5, 83, 239,0.08); color: #0553ef; border: 1px solid rgba(5, 83, 239,0.2)">
91+
<svg xmlns="http://www.w3.org/2000/svg" style="transform: scale(1.8); transform-origin: bottom left;" width="16" height="16" fill="currentColor" class="bi bi-behance" viewBox="0 0 16 16">
92+
<path d="M4.654 3c.461 0 .887.035 1.278.14.39.07.711.216.996.391s.497.426.641.747c.14.32.216.711.216 1.137 0 .496-.106.922-.356 1.242-.215.32-.566.606-.997.817.606.176 1.067.496 1.348.922s.461.957.461 1.563c0 .496-.105.922-.285 1.278a2.3 2.3 0 0 1-.782.887c-.32.215-.711.39-1.137.496a5.3 5.3 0 0 1-1.278.176L0 12.803V3zm-.285 3.978c.39 0 .71-.105.957-.285.246-.18.355-.497.355-.887 0-.216-.035-.426-.105-.567a1 1 0 0 0-.32-.355 1.8 1.8 0 0 0-.461-.176c-.176-.035-.356-.035-.567-.035H2.17v2.31c0-.005 2.2-.005 2.2-.005zm.105 4.193c.215 0 .426-.035.606-.07.176-.035.356-.106.496-.216s.25-.215.356-.39c.07-.176.14-.391.14-.641 0-.496-.14-.852-.426-1.102-.285-.215-.676-.32-1.137-.32H2.17v2.734h2.305zm6.858-.035q.428.427 1.278.426c.39 0 .746-.106 1.032-.286q.426-.32.53-.64h1.74c-.286.851-.712 1.457-1.278 1.848-.566.355-1.243.566-2.06.566a4.1 4.1 0 0 1-1.527-.285 2.8 2.8 0 0 1-1.137-.782 2.85 2.85 0 0 1-.712-1.172c-.175-.461-.25-.957-.25-1.528 0-.531.07-1.032.25-1.493.18-.46.426-.852.747-1.207.32-.32.711-.606 1.137-.782a4 4 0 0 1 1.493-.285c.606 0 1.137.105 1.598.355.46.25.817.532 1.102.958.285.39.496.851.641 1.348.07.496.105.996.07 1.563h-5.15c0 .58.21 1.11.496 1.396m2.24-3.732c-.25-.25-.642-.391-1.103-.391-.32 0-.566.07-.781.176s-.356.25-.496.39a.96.96 0 0 0-.25.497c-.036.175-.07.32-.07.46h3.196c-.07-.526-.25-.882-.497-1.132zm-3.127-3.728h3.978v.957h-3.978z"/>
93+
</svg>
94+
Behance</a>
95+
<a href="https://dribbble.com/abdulraufdesign" class="cta square-cta"
96+
style="background-color: rgba(234, 76, 137,0.08); color: #ea4c89; border: 1px solid rgba(234, 76, 137,0.2)">
97+
<svg xmlns="http://www.w3.org/2000/svg" style="transform: scale(1.8); transform-origin: bottom left;" width="16" height="16" fill="currentColor" class="bi bi-dribbble" viewBox="0 0 16 16">
98+
<path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z"/>
99+
</svg>
100+
Dribbble</a>
101+
</div>
102+
</main>
103+
</div>
104+
<script src="script.js"></script>
105+
</body>
106+
107+
</html>

0 commit comments

Comments
 (0)