Skip to content

Commit a2f8c18

Browse files
perveen-nehaperveen-neha
committed
google-logo-using-pure-css
1 parent c7e3afd commit a2f8c18

File tree

3 files changed

+139
-0
lines changed

3 files changed

+139
-0
lines changed

‎google-logo-using-css/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+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Google logo</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="outer">
13+
<div class="inner"></div>
14+
</div>
15+
<div class="yellow"></div>
16+
<div class="green"></div>
17+
<div class="blue"></div>
18+
</div>
19+
<!-- <div class="black"></div> -->
20+
</body>
21+
</html>

‎google-logo-using-css/readme.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Welcome 🖐 to Google logo using css
2+
3+
4+
5+
6+
## 💻Tech Stack
7+
<br>
8+
9+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
10+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
11+
12+
13+
<br>
14+
15+
### How to use:
16+
17+
---
18+
19+
- Download or clone the repository
20+
21+
```
22+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
23+
```
24+
25+
- Go to the directory
26+
- Run the index.html file
27+
28+
29+
<br>
30+
31+
## Coding is fun, So enjoy :)

‎google-logo-using-css/style.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
body {
6+
background: rgb(255, 255, 255);
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
height: 100vh;
11+
width: 100%;
12+
}
13+
.container {
14+
height: 620px;
15+
width: 620px;
16+
background: rgb(218, 40, 40);
17+
border-radius: 50%;
18+
position: absolute;
19+
/* border: 2px solid white;
20+
left: 50%;
21+
right: 50%; */
22+
border-top-color: yellow;
23+
/* filter: drop-shadow(0 0 3em red);
24+
z-index: 9; */
25+
overflow: hidden;
26+
border: 1px solid white;
27+
}
28+
29+
.outer {
30+
width: 400px;
31+
height: 400px;
32+
background: rgb(255, 244, 244);
33+
border-radius: 50%;
34+
position: absolute;
35+
left: 50%;
36+
top: 50%;
37+
transform: translate(-50%, -50%);
38+
z-index: 1;
39+
}
40+
.outer:before {
41+
content: "";
42+
background: rgb(250, 250, 250);
43+
width: 431px;
44+
height: 399px;
45+
transform: skew(141deg);
46+
position: absolute;
47+
left: 81%;
48+
top: -32%;
49+
}
50+
.inner {
51+
height: 100px;
52+
width: 303px;
53+
background: rgb(29, 41, 207);
54+
position: relative;
55+
top: 30.5%;
56+
left: 14%;
57+
transform: translate(50%, 50%);
58+
/* z-index: 10; */
59+
}
60+
.yellow {
61+
width: 301px;
62+
height: 370px;
63+
background-color: rgb(238, 238, 42);
64+
left: -30%;
65+
top: 30%;
66+
position: absolute;
67+
transform: rotate(36deg);
68+
}
69+
.green {
70+
width: 400px;
71+
height: 355px;
72+
background-color: rgb(96, 236, 31);
73+
left: 6%;
74+
top: 65%;
75+
position: absolute;
76+
transform: rotate(-140deg);
77+
}
78+
.blue {
79+
width: 231px;
80+
height: 232px;
81+
background-color: rgb(36, 46, 192);
82+
left: 62%;
83+
top: 49%;
84+
position: absolute;
85+
transform: rotate(-230deg);
86+
}
87+

0 commit comments

Comments
 (0)