Skip to content

Commit ac277e9

Browse files
rajjitlairajjitlai
committed
added-09
1 parent 2fdc2ab commit ac277e9

File tree

2 files changed

+127
-0
lines changed

2 files changed

+127
-0
lines changed

‎09-translucent-profile-card/css/style.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: "Poppins", sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
.container {
9+
width: 100%;
10+
height: 100vh;
11+
background: linear-gradient(45deg, #5dfff2, #405DE6);
12+
background-position: center;
13+
background-size: cover;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
}
18+
19+
.card {
20+
width: 100%;
21+
max-width: 440px;
22+
color: #000;
23+
text-align: center;
24+
padding: 50px 35px;
25+
border: 1px solid rgba(255, 255, 255, 0.3);
26+
background: rgba(255, 255, 255, 0.2);
27+
border-radius: 20px;
28+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
29+
backdrop-filter: blur(5px);
30+
}
31+
32+
.card img {
33+
margin-top: 20px;
34+
width: 140px;
35+
border-radius: 50%;
36+
}
37+
38+
.card h2 {
39+
font-size: 40px;
40+
font-weight: 600;
41+
margin-top: 20px;
42+
}
43+
44+
.card p {
45+
font-size: 20px;
46+
font-weight: 500;
47+
}
48+
49+
.card .links i {
50+
margin: 10px 20px;
51+
margin-top: 30px;
52+
font-size: 40px;
53+
}
54+
55+
.card .links a {
56+
text-decoration: none;
57+
}
58+
59+
.card .links {
60+
margin-top: 20px;
61+
}
62+
63+
.links .link-items:nth-child(1) i {
64+
color: #ff0000;
65+
}
66+
67+
.link-items:nth-child(2) i {
68+
background: -webkit-linear-gradient(45deg, #405DE6, #E4405F 80%);
69+
-webkit-background-clip: text;
70+
-webkit-text-fill-color: transparent;
71+
}
72+
73+
74+
.button {
75+
text-decoration: none;
76+
display: inline-block;
77+
font-size: 18px;
78+
font-weight: 500;
79+
background: #356bff;
80+
color: #fff;
81+
padding: 10px 30px;
82+
border-radius: 30px;
83+
margin: 30px 10px;
84+
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
85+
cursor: pointer;
86+
}
87+
88+
.button:hover {
89+
background: #5381ff;
90+
color: #000;
91+
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.5);
92+
}

‎09-translucent-profile-card/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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>Translucent Profile Card Design</title>
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css">
9+
<link rel="stylesheet" href="css/style.css">
10+
<link rel="shortcut icon" href="img/profile.png" type="image/x-icon">
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
<div class="card">
16+
<img src="img/profile.png" alt="profile">
17+
<h2>RJ Coding Tips</h2>
18+
<p>We provide Web Development and Programming Tutorials on
19+
YouTube</p>
20+
<div class="links">
21+
<a href="" target="_blank" class="link-items">
22+
<i class="ri-youtube-fill"></i>
23+
</a>
24+
<a href="" target="_blank" class="link-items">
25+
<i class="ri-instagram-line"></i>
26+
</a>
27+
</div>
28+
<a href="" class="button" target="_blank">
29+
Visit now
30+
</a>
31+
</div>
32+
</div>
33+
</body>
34+
35+
</html>

0 commit comments

Comments
 (0)