Merge pull request #376 from perveen-neha/perveen-neha-chrome-logo-using-css

Ayushparikh-code · web-flow · commit 1f2ec68551f9 · 2021-09-15T21:44:30.000+05:30
chrome logo using css added
diff --git a/chrome-logo-using-css/README.md b/chrome-logo-using-css/README.md
@@ -0,0 +1,33 @@
+# Welcome 🖐 to Neon-Light based icons
+It is a simple and resonsive Website made using bootstrap.
+
+## Desktop View
+![Default View](img/chromelogo.png)
+
+
+## 💻Tech Stack
+<br>
+
+![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
+![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
+
+
+<br>
+
+### How to use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the index.html file
+
+
+<br>
+
+## Coding is fun, So enjoy :) 
diff --git a/chrome-logo-using-css/img/chromelogo.png b/chrome-logo-using-css/img/chromelogo.png
diff --git a/chrome-logo-using-css/index.html b/chrome-logo-using-css/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Google Chrome logo</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="circle"></div>
+        <div class="yellow"></div>
+        <div class="green"></div>
+    </div>
+</body>
+</html>
diff --git a/chrome-logo-using-css/style.css b/chrome-logo-using-css/style.css
@@ -0,0 +1,78 @@
+body{
+    margin: 0;
+    padding: 0;
+    background-color: rgb(235, 209, 209);
+}
+.container{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 420px;
+    height: 420px;
+    background:rgb(235, 49, 49);
+    border-radius: 50%;
+    overflow: hidden;
+    filter: drop-shadow(0 0 2em rgb(151, 160, 211));
+    
+}
+
+.circle{
+    position: absolute;
+    top: 50%; 
+    left: 50%;
+    /* transform: translate(-50%,-50%);  */
+    right: 50%;
+    bottom: 50%;
+    transform: translate(-50%, -50%);
+    width: 150px;
+    height: 150px;
+    background-color: rgb(101, 101, 247);
+    border-radius: 50%;
+    border: 20px solid white;
+    z-index: 3;
+}
+.yellow{
+    background: rgb(219, 219, 68);
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    /* border-radius: 50%; */
+    transform: skewX(-42deg);
+    left: 76.3%;
+    z-index: 2;
+}
+.yellow:before
+{
+    content: '';
+    height: 150%;
+    width: 100%;
+    /* border: 2px solid black; */
+    transform: skew(50deg);
+    position: absolute;
+    background: rgb(219, 219,68);
+    top: 28%;
+    left: 39%;
+}
+.green{
+    background: rgb(78, 235, 31);
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    /* border-radius: 50%; */
+    transform: skewX(27deg);
+    left: -75.3%;
+    z-index: 1;
+}
+.green:before
+{
+    content: '';
+    height: 150%;
+    width: 100%;
+    /* border: 2px solid black; */
+    transform: skew(57deg);
+    position: absolute;
+    background: rgb(35, 231, 51);
+    top: 5%;
+    left: 34%;
+}
