Skip to main content

how to create a Google logo using html and css

How to create a Google logo using html and css 😎
FOLLOW OUR  INSTAGRAM PAGE  FOR MORE : - CODING.BATCH






<!DOCTYPE html>
<html>
<head>
    <title>CSS Only Logos</title>
    <style>
        body{
    background-color: #ED1B24;
}

.container{
  width500px;
  height300px;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 250px);
  border5px #FEF200 solid;
    z-index2;
}

.half-elipse1{
    display: inline-block;
    clip: rect(0px,90px,190px,0px);
    position: absolute;
    left167px;
    top60px;

    width90px;
    height380px;
    background-color: #FEF200;

    border-radius50% 50% 0 0;
}

.half-elipse2{
    display: inline-block;
    clip: rect(0px,90px,190px,0px);
    position: absolute;
    right167px;
    top60px;

    width90px;
    height380px;
    background-color: #FEF200;

    border-radius50% 50% 0 0;
}

.half-elipse3{
    display: inline-block;
    clip: rect(0px,90px,190px,0px);
    position: absolute;
    left182px;
    top80px;

    width60px;
    height380px;
    background-color: #ED1B24;

    border-radius50% 50% 0 0;
}

.half-elipse4{
    display: inline-block;
    clip: rect(0px,90px,190px,0px);
    position: absolute;
    right182px;
    top80px;

    width60px;
    height380px;
    background-color: #ED1B24;

    border-radius50% 50% 0 0;
}

.cut{
    width50px;
    height30px;
    position: absolute;
    left225px;
    top225px;
    background-color: #ED1B24;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="half-elipse1"></div>
        <div class="half-elipse2"></div>
        <div class="half-elipse3"></div>
        <div class="half-elipse4"></div>
        <div class="cut"></div>
    </div>
</body>
</html>


FOLLOW ME ON INSTAGRAM PAGE : - CODING.BATCH


Comments

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

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 By :- coding.batch HTML CODE :-     <body>     <div class="logo"></div>     </body> css code :-       * {         padding: 0;         margin: 0;         box-sizing: border-box;     }     body {         height: 100vh;         width: 100vw;         display: flex;         justify-content: center;         align-items: center;     }  ...

NEON TEXT EFFECT USING HTML AND CSS

NEON TEXT EFFECT USING HTML AND  CSS FOLLOW ON INSTAGRAM FOR MORE  @CODING.BATCH CLICK TO DOWNLOAD