Skip to content

Commit 83f75b8

Browse files
RakibRahmanRakibRahman
committed
Profile Card With Flexbox
1 parent 649a9b9 commit 83f75b8

File tree

4 files changed

+101
-0
lines changed

4 files changed

+101
-0
lines changed

‎CSS Flexbox/Projects/profile-card-flexbox/img/demo.jpg

171 KB
Loading

‎CSS Flexbox/Projects/profile-card-flexbox/img/pp.png

89.5 KB
Loading

‎CSS Flexbox/Projects/profile-card-flexbox/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Profile Card With Flexbox</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="flex-wrap">
13+
<div class="card">
14+
<div class="bg-img"></div>
15+
<img class="profile-img" src="img/pp.png" alt="">
16+
<h1 class="name">Jojo</h1>
17+
<p class="description">Hi there! My name is James and I am a pc lover, traveler and professional blogger.
18+
Follow me to
19+
stay connected!</p>
20+
<button class='btn'>Follow</button>
21+
</div>
22+
<div class="card">
23+
<div class="bg-img"></div>
24+
<img class="profile-img" src="img/pp.png" alt="">
25+
<h1 class="name">Pain</h1>
26+
<p class="description">Hi there! My name is James and I am a pc lover, traveler and professional blogger.
27+
Follow me to
28+
stay connected!</p>
29+
<button class='btn'>Follow</button>
30+
</div>
31+
<div class="card">
32+
<div class="bg-img"></div>
33+
<img class="profile-img" src="img/pp.png" alt="">
34+
<h1 class="name">Minato</h1>
35+
<p class="description">Hi there! My name is James and I am a pc lover, traveler and professional blogger.
36+
Follow me to
37+
stay connected!</p>
38+
<button class='btn'>Follow</button>
39+
</div>
40+
</div>
41+
</body>
42+
43+
</html>

‎CSS Flexbox/Projects/profile-card-flexbox/style.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
background: cadetblue;
8+
}
9+
.flex-wrap {
10+
display: flex;
11+
flex-wrap: wrap;
12+
justify-content: center;
13+
}
14+
.card {
15+
width: 280px;
16+
text-align: center;
17+
border-radius: 1rem;
18+
overflow: hidden;
19+
background: darkcyan;
20+
color: whitesmoke;
21+
margin-left: 0.5rem;
22+
margin-bottom: 0.5rem;
23+
box-shadow: 0px 2px 8px 0px rebeccapurple;
24+
position: relative;
25+
}
26+
27+
.card .bg-img {
28+
position: absolute;
29+
background-image: url("img/demo.jpg");
30+
height: 10rem;
31+
width: 100%;
32+
background-repeat: no-repeat;
33+
background-size: cover;
34+
background-position: center;
35+
}
36+
.card .profile-img {
37+
width: 8rem;
38+
clip-path: circle(50px at center);
39+
margin-top: 6.5rem;
40+
filter: hue-rotate(190deg);
41+
}
42+
.card h1 {
43+
color: greenyellow;
44+
}
45+
.card p {
46+
margin: 1rem 2rem;
47+
font-size: 0.9rem;
48+
line-height: 1.5;
49+
}
50+
.card button {
51+
width: 100%;
52+
padding: 5px;
53+
background: hotpink;
54+
color: aliceblue;
55+
font-weight: 800;
56+
letter-spacing: 0.3rem;
57+
border: none;
58+
}

0 commit comments

Comments
 (0)