Skip to main content

How to create a instagram logo using html & css

Learn How to create a instagram logo using html & css
source code of How to create a instagram logo using html & css




HTML CODE :-

  1.     <body>
  2.     <div class="logo"></div>
  3.     </body>


css code :-


  1.     * {
  2.         padding: 0;
  3.         margin: 0;
  4.         box-sizing: border-box;
  5.     }

  7.     body {
  8.         height: 100vh;
  9.         width: 100vw;
  10.         display: flex;
  11.         justify-content: center;
  12.         align-items: center;
  13.     }

  15.     .logo {
  16.         width: 300px;
  17.         height: 300px;
  18.         position: relative;
  19.         border-radius: 60px;
  20.         background:
  21.             linear-gradient(350deg,
  22.                 rgba(255, 255, 255, 0) 0,
  23.                 rgba(244, 48, 109, 0) 36%,
  24.                 #f4306d 48%,
  25.                 #d53592 63%,
  26.                 #4258f5 100%),
  27.             radial-gradient(circle farthest-corner at 28% 142%,
  28.                 rgba(255, 104, 177, 0.1) 0,
  29.                 #ffffff 9%,
  30.                 #fbe18a 32%,
  31.                 #fbbb45 37%,
  32.                 #f88330 43%,
  33.                 #f86737 52%,
  34.                 #f8443e 57%,
  35.                 #f4306d 70%,
  36.                 #d53592 85%,
  37.                 #4258f5 100%);
  38.         box-shadow: 2px 10px 35px #9e9c9c;
  39.     }

  41.     .logo::before {
  42.         content: '';
  43.         position: absolute;
  44.         top: 50%;
  45.         transform: translate(-50%, -50%);
  46.         left: 50%;
  47.         border-radius: 50%;
  48.         border: 20px solid #fff;
  49.         height: 70px;
  50.         width: 70px;
  51.     }

  53.     .logo::after {
  54.         content: '\26AA';
  55.         content: '\2B24 \00A0';
  56.         position: absolute;
  57.         font-size: 50px;
  58.         text-align: right;
  59.         color: #fff;
  60.         width: 200px;
  61.         height: 200px;
  62.         border-radius: 50px;
  63.         border: 20px solid #fff;
  64.         top: 50%;
  65.         left: 50%;
  66.         transform: translate(-50%, -50%);

  68.     }




Labels:

Comments

Post a Comment

Popular posts from this blog

HOW TO MAKE A WINDOW-10-LOGO USING HTML AND CSS

HOW TO MAKE A WINDOW-10-LOGO USING HTML AND CSS FOLLOW ON INSTAGRAM FOR MORE @CODING.BATCH CLICK TO DOWNLOAD
Post a Comment
Read more

NEON TEXT EFFECT USING HTML AND CSS

NEON TEXT EFFECT USING HTML AND  CSS FOLLOW ON INSTAGRAM FOR MORE  @CODING.BATCH CLICK TO DOWNLOAD
Post a Comment
Read more