Skip to content

Commit a73e95b

Browse files
OsuraHansajaOsuraHansaja
committed
Added profile card with hover effects
1 parent 89f2e7c commit a73e95b

File tree

2 files changed

+201
-0
lines changed

2 files changed

+201
-0
lines changed

‎ProfileCards/Card7/card7.css

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/* Applies Poppins font to all elements except the signature */
2+
* {
3+
font-family: 'Poppins', sans-serif;
4+
}
5+
6+
/* Profile Card Styling */
7+
.profile-card {
8+
background-color: #fff;
9+
border-radius: 20px;
10+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
11+
padding: 20px;
12+
max-width: 400px;
13+
margin: 20px auto;
14+
text-align: center;
15+
transition: all 0.3s ease;
16+
}
17+
18+
/* Profile Picture with hover pop-out effect */
19+
.profile-pic {
20+
width: 120px;
21+
height: 120px;
22+
border-radius: 50%;
23+
margin-bottom: 15px;
24+
transition: transform 0.3s ease;
25+
}
26+
27+
.profile-pic:hover {
28+
transform: scale(1.1);
29+
}
30+
31+
/* Categories Design (Badges) */
32+
.badge {
33+
display: inline-block;
34+
background-color: #e0e0e0;
35+
color: #333;
36+
font-size: 14px;
37+
padding: 5px 12px;
38+
border-radius: 30px;
39+
margin: 5px;
40+
font-weight: 500;
41+
transition: background-color 0.3s ease, color 0.3s ease;
42+
}
43+
44+
.badge:hover {
45+
background-color: #ff9f43;
46+
color: white;
47+
}
48+
49+
/* Signature Text */
50+
.signature-text {
51+
font-family: 'Pacifico', cursive;
52+
font-size: 22px;
53+
margin-top: 10px;
54+
color: #333;
55+
transition: color 0.3s ease;
56+
}
57+
58+
.signature-text:hover {
59+
color: orange;
60+
}
61+
62+
/* Profile Footer */
63+
.profile-footer {
64+
margin-top: 20px;
65+
}
66+
67+
/* Action Buttons: Follow and Message */
68+
.action-btn {
69+
background-color: #FE793D;
70+
color: white;
71+
border: none;
72+
padding: 10px 30px;
73+
border-radius: 30px;
74+
font-size: 16px;
75+
cursor: pointer;
76+
transition: background-color 0.3s ease;
77+
margin-right: 10px;
78+
}
79+
80+
.action-btn:hover {
81+
background-color: #944500;
82+
}
83+
84+
85+
.follow-btn, .message-btn {
86+
display: inline-block;
87+
margin-top: 10px;
88+
padding: 12px 40px;
89+
}
90+
91+
/* Follower and Following Info */
92+
.follower-info {
93+
margin-top: 10px;
94+
}
95+
96+
.follower-info span {
97+
display: inline-block;
98+
margin: 0 10px;
99+
font-weight: 500;
100+
}
101+
102+
/* Responsive Media Queries */
103+
104+
/* Small screens (up to 600px) */
105+
@media (max-width: 600px) {
106+
.profile-card {
107+
max-width: 100%;
108+
padding: 15px;
109+
}
110+
111+
.profile-pic {
112+
width: 100px;
113+
height: 100px;
114+
}
115+
116+
.badge {
117+
font-size: 12px;
118+
padding: 4px 8px;
119+
}
120+
121+
.signature-text {
122+
font-size: 18px;
123+
}
124+
125+
.action-btn {
126+
padding: 8px 20px;
127+
font-size: 14px;
128+
}
129+
130+
.follower-info span {
131+
margin: 0 5px;
132+
font-size: 14px;
133+
}
134+
}
135+
136+
/* Tablets (up to 768px) */
137+
@media (max-width: 768px) {
138+
.profile-card {
139+
max-width: 90%;
140+
}
141+
142+
.profile-pic {
143+
width: 110px;
144+
height: 110px;
145+
}
146+
147+
.action-btn {
148+
padding: 10px 25px;
149+
}
150+
151+
.signature-text {
152+
font-size: 20px;
153+
}
154+
}

‎ProfileCards/Card7/card7.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="card7.css" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:wght@500&display=swap"
10+
rel="stylesheet"
11+
/>
12+
</head>
13+
<body>
14+
<div class="profile-card">
15+
<div class="profile-header">
16+
<img
17+
src="https://i.postimg.cc/6qWNGrHS/pfpanimeboy.jpg"
18+
alt="Profile Picture"
19+
class="profile-pic"
20+
/>
21+
<h2>Osura De Silva</h2>
22+
<p>@osu_han</p>
23+
</div>
24+
<div class="profile-body">
25+
<p>
26+
I am a passionate web developer getting into contributing to open
27+
source code.
28+
</p>
29+
<div class="categories">
30+
<span class="badge">Games</span>
31+
<span class="badge">Music</span>
32+
<span class="badge">Movies</span>
33+
<span class="badge">Football</span>
34+
</div>
35+
<div class="signature-text">Osura Hansaja De Silva</div>
36+
</div>
37+
<div class="profile-footer">
38+
<button class="action-btn follow-btn">Follow</button>
39+
<button class="action-btn message-btn">Message</button>
40+
<div class="follower-info">
41+
<span>278 Following</span>
42+
<span>345 Followers</span>
43+
</div>
44+
</div>
45+
</div>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)