Merge pull request #412 from perveen-neha/perveen-neha-youtube-logo-using-css

Ayushparikh-code · web-flow · commit 144dcacf65c9 · 2021-10-28T15:12:32.000+05:30
youtube logo using pure css
diff --git a/Youtube-Logo/README.md b/Youtube-Logo/README.md
@@ -0,0 +1,29 @@
+# Welcome 🖐 to Youtube Logo using pure 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
+- CNavigate the website in different modes(desktop or mobile)
+
+<br>
+
+## Happy Coding!
diff --git a/Youtube-Logo/index.html b/Youtube-Logo/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">
+    <title>Youtube Logo</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="triangle"></div>
+    </div>
+</body>
+</html>
diff --git a/Youtube-Logo/style.css b/Youtube-Logo/style.css
@@ -0,0 +1,29 @@
+body{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: black;
+}
+.container{
+    height: 276px;
+    width: 424px;
+    background: #ec1717;
+    border-radius: 20%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: drop-shadow(0 0 1em red);
+
+}
+.triangle{
+    width: 0;
+    height: 0;
+    border-top: 50px solid transparent;
+    border-bottom: 50px solid transparent;
+    border-left: 100px solid rgb(255, 255, 255);
+}
