Skip to content

Commit 920b48e

Browse files
sahilataharsahilatahar
committed
Git logo added
1 parent f484e7a commit 920b48e

File tree

3 files changed

+99
-0
lines changed

3 files changed

+99
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
| 26 | [Twitter Sidebar](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/twitter-sidebar) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/twitter-sidebar/) |
3434
| 27 | [Typing Effect](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/typing-effect) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/typing-effect/) |
3535
| 28 | [Word Counter](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/word-counter) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/word-counter/) |
36+
| 29 | [Git Logo](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/git-logo) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/git-logo/) |
3637

3738

3839

‎git-logo/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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.0">
8+
<title>Git Logo</title>
9+
<style>
10+
11+
</style>
12+
<link rel="stylesheet" href="style.css">
13+
</head>
14+
15+
<body>
16+
<div class="logo">
17+
<span></span>
18+
</div>
19+
</body>
20+
21+
</html>

‎git-logo/style.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
}
13+
14+
.logo {
15+
width: 100px;
16+
height: 100px;
17+
background-color: #e84e31;
18+
transform: rotate(45deg);
19+
border-radius: 5px;
20+
position: relative;
21+
display: flex;
22+
}
23+
24+
.logo::before {
25+
content: '';
26+
position: absolute;
27+
width: 70%;
28+
height: 10%;
29+
background-color: white;
30+
top: 20%;
31+
left: -1px;
32+
}
33+
34+
.logo:after {
35+
content: '';
36+
position: absolute;
37+
width: 22%;
38+
height: 22%;
39+
border-radius: 50%;
40+
background-color: white;
41+
top: 14%;
42+
left: 60%;
43+
}
44+
45+
.logo>span {
46+
display: inline-block;
47+
width: 70%;
48+
height: 10%;
49+
position: absolute;
50+
top: 43%;
51+
left: 10%;
52+
background-color: white;
53+
transform: rotate(45deg);
54+
position: relative;
55+
}
56+
57+
span::before {
58+
content: '';
59+
position: absolute;
60+
width: 30%;
61+
aspect-ratio: 1;
62+
border-radius: 50%;
63+
background-color: white;
64+
top: -45%;
65+
left: 80%;
66+
}
67+
68+
span::after {
69+
content: '';
70+
position: absolute;
71+
width: 30%;
72+
aspect-ratio: 1;
73+
border-radius: 50%;
74+
background-color: white;
75+
bottom: -45%;
76+
right: 80%;
77+
}

0 commit comments

Comments
 (0)