Skip to content

Commit 1f2ec68

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #376 from perveen-neha/perveen-neha-chrome-logo-using-css
chrome logo using css added
2 parents 6ba4334 + bb97a5e commit 1f2ec68

4 files changed

Lines changed: 128 additions & 0 deletions

File tree

‎chrome-logo-using-css/README.md‎

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

‎chrome-logo-using-css/img/chromelogo.png‎

151 KB
Loading

‎chrome-logo-using-css/index.html‎

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

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
background-color: rgb(235, 209, 209);
5+
}
6+
.container{
7+
position: absolute;
8+
top: 50%;
9+
left: 50%;
10+
transform: translate(-50%, -50%);
11+
width: 420px;
12+
height: 420px;
13+
background:rgb(235, 49, 49);
14+
border-radius: 50%;
15+
overflow: hidden;
16+
filter: drop-shadow(0 0 2em rgb(151, 160, 211));
17+
18+
}
19+
20+
.circle{
21+
position: absolute;
22+
top: 50%;
23+
left: 50%;
24+
/* transform: translate(-50%,-50%); */
25+
right: 50%;
26+
bottom: 50%;
27+
transform: translate(-50%, -50%);
28+
width: 150px;
29+
height: 150px;
30+
background-color: rgb(101, 101, 247);
31+
border-radius: 50%;
32+
border: 20px solid white;
33+
z-index: 3;
34+
}
35+
.yellow{
36+
background: rgb(219, 219, 68);
37+
position: absolute;
38+
height: 100%;
39+
width: 100%;
40+
/* border-radius: 50%; */
41+
transform: skewX(-42deg);
42+
left: 76.3%;
43+
z-index: 2;
44+
}
45+
.yellow:before
46+
{
47+
content: '';
48+
height: 150%;
49+
width: 100%;
50+
/* border: 2px solid black; */
51+
transform: skew(50deg);
52+
position: absolute;
53+
background: rgb(219, 219,68);
54+
top: 28%;
55+
left: 39%;
56+
}
57+
.green{
58+
background: rgb(78, 235, 31);
59+
position: absolute;
60+
height: 100%;
61+
width: 100%;
62+
/* border-radius: 50%; */
63+
transform: skewX(27deg);
64+
left: -75.3%;
65+
z-index: 1;
66+
}
67+
.green:before
68+
{
69+
content: '';
70+
height: 150%;
71+
width: 100%;
72+
/* border: 2px solid black; */
73+
transform: skew(57deg);
74+
position: absolute;
75+
background: rgb(35, 231, 51);
76+
top: 5%;
77+
left: 34%;
78+
}

0 commit comments

Comments
 (0)