Skip to content

Commit c474d43

Browse files
HuXn-WebDevHuXn-WebDev
committed
CSS Instagram Logo
1 parent b19189a commit c474d43

File tree

2 files changed

+80
-0
lines changed

2 files changed

+80
-0
lines changed

‎20. Instagram Logo/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Instagram Logo</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="logo">
11+
<div class="logo-bg">
12+
<div class="logo-icon"></div>
13+
</div>
14+
</section>
15+
</body>
16+
</html>

‎20. Instagram Logo/style.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
background: #121212;
13+
}
14+
15+
.logo .logo-bg {
16+
position: relative;
17+
width: 275px;
18+
height: 275px;
19+
border-radius: 65px;
20+
background: linear-gradient(
21+
45deg,
22+
#ffcc00,
23+
0%,
24+
#fe6104 32%,
25+
#ff0c5a 50%,
26+
#fc03bb 62%,
27+
#7d0cfd 100%
28+
);
29+
}
30+
31+
.logo .logo-icon {
32+
position: absolute;
33+
top: 50%;
34+
left: 50%;
35+
width: 100px;
36+
height: 100px;
37+
border: 18px solid #fff;
38+
border-radius: 50%;
39+
transform: translate(-50%, -50%);
40+
}
41+
42+
.logo .logo-icon::before {
43+
content: "";
44+
position: absolute;
45+
top: 50%;
46+
left: 50%;
47+
width: 170px;
48+
height: 170px;
49+
border: 18px solid #fff;
50+
border-radius: 30%;
51+
transform: translate(-50%, -50%);
52+
}
53+
54+
.logo .logo-icon::after {
55+
content: "";
56+
position: absolute;
57+
top: -35px;
58+
right: -35px;
59+
width: 24px;
60+
height: 24px;
61+
background: #fff;
62+
border-radius: 50%;
63+
transform: translate(-50%, -50%);
64+
}

0 commit comments

Comments
 (0)