Skip to content

Commit 6c037e5

Browse files
sahilataharsahilatahar
committed
Social Media Card Added
1 parent 0156caa commit 6c037e5

File tree

3 files changed

+324
-0
lines changed

3 files changed

+324
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
| 35 | [Login Form](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/login-form) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/login-form/) |
4444
| 36 | [Skills Bar](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/skills-bar) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/skills-bar/) |
4545
| 37 | [Custom Date Input](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/custom-date-input) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/custom-date-input/) |
46+
| 38 | [Social Media Card](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/social-media-card) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/social-media-card/) |
4647

4748
### Disclaimer Regarding Ownership of this repository
4849

‎social-media-card/index.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
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">
8+
9+
<!-- Font Awesome Icon -->
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11+
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
12+
crossorigin="anonymous" referrerpolicy="no-referrer" />
13+
14+
<title>Social Media Card</title>
15+
16+
<!-- External CSS -->
17+
<link rel="stylesheet" href="style.css">
18+
19+
</head>
20+
21+
<body>
22+
<div class="container">
23+
<div class="card">
24+
<div class="front__card">
25+
<div class="front__left__section">
26+
<div class="front__icons">
27+
<a href="https://github.com/sahilatahar" target="_blank" class="icon">
28+
<i class="fa-brands fa-github-alt"></i>
29+
</a>
30+
<a href="https://linkedin.com/in/sahilatahar" target="_blank" class="icon">
31+
<i class="fa-brands fa-linkedin-in"></i>
32+
</a>
33+
<a href="https://dev.to/sahilatahar" target="_blank" class="icon">
34+
<i class="fa-brands fa-dev"></i>
35+
</a>
36+
</div>
37+
<div class="front__icons">
38+
<a href="https://instagram.com/sahilatahar" target="_blank" class="icon">
39+
<i class="fa-brands fa-instagram"></i>
40+
</a>
41+
<a href="https://twitter.com/sahilatahar" target="_blank" class="icon">
42+
<i class="fa-brands fa-twitter"></i>
43+
</a>
44+
<a href="https://stackoverflow.com/users/19264249/sahil-atahar" target="_blank" class="icon">
45+
<i class="fa-brands fa-stack-overflow"></i>
46+
</a>
47+
</div>
48+
</div>
49+
<div class="front__right__section">
50+
<div class="mini__card bg-dark">
51+
<p class="username">Sahil Atahar</p>
52+
<p class="profession">Web Developer</p>
53+
</div>
54+
</div>
55+
</div>
56+
<!-- Rear Card -->
57+
<div class="rear__card">
58+
<div class="rear__left__section">
59+
<div class="mini__card">
60+
<p class="username">Sahil Atahar</p>
61+
<p class="profession">Web Developer</p>
62+
</div>
63+
<div class="rear__icons">
64+
<a href="https://github.com/sahilatahar" target="_blank" class="icon">
65+
<i class="fa-brands fa-github-alt"></i>
66+
</a>
67+
<a href="https://linkedin.com/in/sahilatahar" target="_blank" class="icon">
68+
<i class="fa-brands fa-linkedin-in"></i>
69+
</a>
70+
<a href="https://dev.to/sahilatahar" target="_blank" class="icon">
71+
<i class="fa-brands fa-dev"></i>
72+
</a>
73+
</div>
74+
<div class="rear__icons">
75+
<a href="https://instagram.com/sahilatahar" target="_blank" class="icon">
76+
<i class="fa-brands fa-instagram"></i>
77+
</a>
78+
<a href="https://twitter.com/sahilatahar" target="_blank" class="icon">
79+
<i class="fa-brands fa-twitter"></i>
80+
</a>
81+
<a href="https://stackoverflow.com/users/19264249/sahil-atahar" class="icon" target="_blank">
82+
<i class="fa-brands fa-stack-overflow"></i>
83+
</a>
84+
</div>
85+
</div>
86+
<div class="rear__right__section">
87+
<ul class="link__list">
88+
<li class="list__item">
89+
<div class="small__icon">
90+
<i class="fa-brands fa-github-alt"></i>
91+
</div>
92+
<p>github.com</p>
93+
</li>
94+
<li class="list__item">
95+
<div class="small__icon">
96+
<i class="fa-brands fa-linkedin-in"></i>
97+
</div>
98+
<p>linked.com/in/sahilatahar</p>
99+
</li>
100+
<li class="list__item">
101+
<div class="small__icon">
102+
<i class="fa-brands fa-dev"></i>
103+
</div>
104+
<p>dev.to/sahilatahar</p>
105+
</li>
106+
<li class="list__item">
107+
<div class="small__icon">
108+
<i class="fa-brands fa-instagram"></i>
109+
</div>
110+
<p>instagram.com/sahilatahar</p>
111+
</li>
112+
<li class="list__item">
113+
<div class="small__icon">
114+
<i class="fa-brands fa-twitter"></i>
115+
</div>
116+
<p>twitter.com/sahilatahar</p>
117+
</li>
118+
<li class="list__item">
119+
<div class="small__icon">
120+
<i class="fa-brands fa-stack-overflow"></i>
121+
</div>
122+
<p>stackoverflow.com/users/19264249/sahil-atahar</p>
123+
</li>
124+
</ul>
125+
</div>
126+
</div>
127+
</div>
128+
</body>
129+
130+
</html>

‎social-media-card/style.css

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
2+
3+
:root {
4+
--clr-white: #ffffff;
5+
--clr-black: #050505;
6+
--clr-grey: #b2b2b2b;
7+
}
8+
9+
* {
10+
padding: 0;
11+
margin: 0;
12+
box-sizing: border-box;
13+
font-family: 'Poppins', sans-serif;
14+
}
15+
16+
body {
17+
min-height: 100vh;
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: space-evenly;
21+
align-items: center;
22+
overflow-x: auto;
23+
}
24+
25+
.container {
26+
perspective: 1000px;
27+
}
28+
29+
.card {
30+
min-width: 400px;
31+
aspect-ratio: 16 / 10;
32+
position: relative;
33+
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
34+
border-radius: 0.5rem;
35+
transition: transform 1s;
36+
transform-style: preserve-3d;
37+
}
38+
39+
.front__card,
40+
.rear__card {
41+
position: absolute;
42+
top: 0;
43+
left: 0;
44+
width: 100%;
45+
min-height: 100%;
46+
height: 100%;
47+
display: flex;
48+
align-items: center;
49+
justify-content: space-between;
50+
border-radius: 0.5rem;
51+
background-color: var(--clr-white);
52+
}
53+
54+
.rear__card {
55+
transform: rotateY(180deg);
56+
backface-visibility: hidden;
57+
-webkit-backface-visibility: hidden;
58+
}
59+
60+
.container:hover .card {
61+
transform: rotateY(180deg);
62+
}
63+
64+
.front__right__section,
65+
.front__left__section,
66+
.rear__right__section,
67+
.rear__left__section {
68+
width: 50%;
69+
height: 100%;
70+
}
71+
72+
.front__left__section {
73+
display: flex;
74+
align-content: center;
75+
justify-content: center;
76+
flex-direction: column;
77+
gap: 0.5rem;
78+
}
79+
80+
.front__icons,
81+
.rear__icons {
82+
display: flex;
83+
justify-content: center;
84+
gap: 0.5rem;
85+
}
86+
87+
.front__icons .icon,
88+
.rear__icons .icon {
89+
width: 21%;
90+
aspect-ratio: 1;
91+
font-size: 1.5rem;
92+
background-color: var(--clr-black);
93+
color: var(--clr-white);
94+
display: flex;
95+
justify-content: center;
96+
align-items: center;
97+
border-radius: 50%;
98+
text-decoration: none;
99+
}
100+
101+
.front__right__section {
102+
display: flex;
103+
justify-content: center;
104+
align-items: center;
105+
}
106+
107+
.front__right__section .mini__card {
108+
width: 100%;
109+
height: 40%;
110+
background-color: var(--clr-black);
111+
color: var(--clr-white);
112+
display: flex;
113+
flex-direction: column;
114+
align-items: center;
115+
justify-content: center;
116+
}
117+
118+
.username {
119+
font-size: 1.3rem;
120+
color: inherit;
121+
}
122+
123+
.profession {
124+
font-size: 0.7rem;
125+
color: var(--clr-grey);
126+
}
127+
128+
/* Rear Card CSS */
129+
130+
.rear__left__section {
131+
display: flex;
132+
align-content: center;
133+
justify-content: center;
134+
flex-direction: column;
135+
gap: 0.5rem;
136+
}
137+
138+
.rear__right__section {
139+
display: flex;
140+
justify-content: center;
141+
align-items: center;
142+
padding-right: 0.5rem;
143+
}
144+
145+
.link__list {
146+
width: 100%;
147+
list-style-type: none;
148+
display: flex;
149+
flex-direction: column;
150+
justify-content: center;
151+
align-items: center;
152+
gap: 0.3rem;
153+
}
154+
155+
.list__item {
156+
height: 1.5rem;
157+
width: 100%;
158+
display: flex;
159+
align-items: center;
160+
gap: 0.5rem;
161+
}
162+
163+
.list__item .small__icon {
164+
width: 10%;
165+
aspect-ratio: 1;
166+
font-size: 1rem;
167+
display: flex;
168+
justify-content: center;
169+
align-items: center;
170+
text-decoration: none;
171+
}
172+
173+
.list__item p {
174+
font-size: 0.6rem;
175+
overflow: hidden;
176+
word-break: break-all;
177+
text-overflow: ellipsis;
178+
display: -webkit-box;
179+
line-clamp: 2;
180+
-webkit-line-clamp: 2;
181+
-webkit-box-orient: vertical;
182+
}
183+
184+
.rear__left__section .mini__card {
185+
height: 30%;
186+
width: 100%;
187+
background-color: var(--clr-white);
188+
color: var(--clr-black);
189+
display: flex;
190+
flex-direction: column;
191+
align-items: center;
192+
justify-content: center;
193+
}

0 commit comments

Comments
 (0)