google-logo-using-pure-css

perveen-neha · perveen-neha · commit a2f8c185a48d · 2021-10-20T20:31:10.000+05:30
diff --git a/google-logo-using-css/index.html b/google-logo-using-css/index.html
@@ -0,0 +1,21 @@
+<!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 logo</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="outer">
+            <div class="inner"></div>
+        </div>
+        <div class="yellow"></div>
+        <div class="green"></div>
+        <div class="blue"></div>
+    </div>
+    <!-- <div class="black"></div> -->
+</body>
+</html>
diff --git a/google-logo-using-css/readme.md b/google-logo-using-css/readme.md
@@ -0,0 +1,31 @@
+# Welcome 🖐 to Google logo using css
+
+
+
+
+## 💻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/google-logo-using-css/style.css b/google-logo-using-css/style.css
@@ -0,0 +1,87 @@
+* {
+    padding: 0;
+    margin: 0;
+  }
+  body {
+    background: rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100%;
+  }
+  .container {
+    height: 620px;
+    width: 620px;
+    background: rgb(218, 40, 40);
+    border-radius: 50%;
+    position: absolute;
+    /* border: 2px solid white;
+      left: 50%;
+      right: 50%; */
+    border-top-color: yellow;
+    /* filter: drop-shadow(0 0 3em red);
+      z-index: 9; */
+    overflow: hidden;
+    border: 1px solid white;
+  }
+  
+  .outer {
+    width: 400px;
+    height: 400px;
+    background: rgb(255, 244, 244);
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+  .outer:before {
+    content: "";
+    background: rgb(250, 250, 250);
+    width: 431px;
+    height: 399px;
+    transform: skew(141deg);
+    position: absolute;
+    left: 81%;
+    top: -32%;
+  }
+  .inner {
+    height: 100px;
+    width: 303px;
+    background: rgb(29, 41, 207);
+    position: relative;
+    top: 30.5%;
+    left: 14%;
+    transform: translate(50%, 50%);
+    /* z-index: 10; */
+  }
+  .yellow {
+    width: 301px;
+    height: 370px;
+    background-color: rgb(238, 238, 42);
+    left: -30%;
+    top: 30%;
+    position: absolute;
+    transform: rotate(36deg);
+  }
+  .green {
+    width: 400px;
+    height: 355px;
+    background-color: rgb(96, 236, 31);
+    left: 6%;
+    top: 65%;
+    position: absolute;
+    transform: rotate(-140deg);
+  }
+  .blue {
+    width: 231px;
+    height: 232px;
+    background-color: rgb(36, 46, 192);
+    left: 62%;
+    top: 49%;
+    position: absolute;
+    transform: rotate(-230deg);
+  }
+  
