awesome Netscape design using only css

First, I highly recommend you to watch the video and then look for the code and try to do it by yourself. And use the code for reference.

Create a Payoneer Account & Earn 25$:→ https://www.payoneer.com/raf/?rid=75EACA0E-2937-4D6B-A225-4255EB9B758A
Create a Fiverr Account & Earn 100$:→ http://www.fiverr.com/s2/83f49a18f7

😍😍 Check Others Programming Video👇

➡️ css image hover animation effects | pure css hover animation: https://www.youtube.com/watch?v=AUQQ5WBXtPw

➡️ how to create css gradient box shadow: https://www.youtube.com/watch?v=8oaLBBhLNi0

➡️ Sticky Navigation Bar On Scroll Using Vanilla Javascript: https://www.youtube.com/watch?v=XQJSc–XgO8

➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART2Jc3yw&t=3s

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLkyrkoS_w&t=69s

➡️ Plane animation only html css: https://www.youtube.com/watch?v=XcYlfp8sFX0

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5PdX7Ag&t=14s

➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF-efdJQ&t=102s

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuVB6B5KQ&t=0s

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6HpxMmfX4&t=0s

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR6ailIk&t=28s

➡️ Scroll top button : https://www.youtube.com/watch?v=9fDEJkXQIIs&t=77s

Here is all Source code ( awesome Netscape design using only css ). You can follow this steps:

Create 1 folder
create 1 HTML file: index.html
create 1 CSS file: style.css
See Full video and write HTML code and copy CSS code and past CSS file
Now give a smile and jump out loud. 😍😍

<!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>Netscape using only css</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="logo"></div>
</body>

</html>

* {
  margin: 0;
  padding: 0;
}

/* clip-path: polygon(
      0px 0px,
      100% 0px,
      95.45% 70.09%,
      64.6% 68.83%,
      69.49% 100%,
      0px 100%
    ); */

body {
  height: 100vh;
  display: grid;
  place-content: center;
}

.logo {
  width: 90vmin;
  aspect-ratio: 1;
  background-image: linear-gradient(to bottom, #10616a, #38a9af 60%);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.logo::before {
  content: "N";
  color: #fff;
  font-size: 70vmin;
  z-index: 2;
  position: relative;
  clip-path: polygon(
    0px 0px,
    100% 0px,
    95.45% 70.09%,
    64.6% 68.83%,
    69.49% 100%,
    0px 100%
  );
}

.logo::after {
  content: "";
  position: absolute;
  width: 400%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #000;
  left: -150%;
  top: 60%;
  z-index: 1;
  border: 1vmin solid white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/c/CodingBD

Facebook Page: https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat8383

GitHub: https://github.com/cgsaleh8383

You can see How to create Magic Card using html and CSS