insta logo using pure CSS added

perveen-neha · perveen-neha · commit 76409440d1f6 · 2021-09-03T11:50:26.000+05:30
diff --git a/Instagram-logo-using-CSS/README.md b/Instagram-logo-using-CSS/README.md
@@ -0,0 +1,32 @@
+# Welcome 🖐 to Instagram logo using pure CSS
+It is a simple and resonsive Website made using bootstrap.
+
+## Desktop View
+<img src="image/insta">
+
+## 💻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/Instagram-logo-using-CSS/image/insta.png b/Instagram-logo-using-CSS/image/insta.png
diff --git a/Instagram-logo-using-CSS/index.html b/Instagram-logo-using-CSS/index.html
@@ -0,0 +1,15 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="insta">
+        <div class="innerbox"></div>
+    </div>
+</body>
+</html>
diff --git a/Instagram-logo-using-CSS/style.css b/Instagram-logo-using-CSS/style.css
@@ -0,0 +1,69 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    /* overflow: hidden; */
+    background: rgb(32, 28, 28);
+}
+.insta{
+    width: 150px;
+    height: 150px;
+    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6749f 60%, #4067dd 92%);
+    border-radius: 35px;
+    display: grid;
+    place-items: center;
+    filter: drop-shadow(0 0mm 2em rgb(160, 144, 144));
+    animation: updown 1s infinite alternate;
+}
+@keyframes updown {
+    0%{
+        transform: translateY(0);
+    }
+    100%{
+        transform: translateY(-10px);
+    }
+    
+}
+
+
+.innerbox{
+    width: 120px;
+    height: 120px;
+    border: 10px solid #fff;
+    border-radius: 32px;
+    display: grid;
+    place-items: center;
+    position: relative;
+}
+
+.innerbox::after{
+    content: '';
+    width: 45px;
+    height: 45px;
+    border: 10px solid #fff;
+    border-radius: 50%;
+    background: transparent;
+    /* position: absolute; */
+}
+
+.innerbox::before{
+    content: '';
+    width: 10px;
+    height: 10px;
+    border: 2px solid white;
+    border-radius: 50%;
+    background:white ;
+    position:absolute;
+    top: 8px;
+    left: 75px;
+    /* right: 10px; */
+
+}
