You are currently viewing WhatsApp Logo Using HTML & CSS Code

WhatsApp Logo Using HTML & CSS Code

WhatsApp Logo Using HTML & CSS Code

 

Welcome to the CodeWithRandom blog. In This Article, We learn how to create a WhatsApp Logo. We use HTML & CSS Code for Creating WhatsApp Logo.

Hope you enjoy our blog so let’s start with a basic HTML structure for the WhatsApp Logo.

Html Code For WhatsApp Logo

Table of Contents

<!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">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
    <title>WhatsApp Logo</title>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
  <div class="white">
      <div>
        <i class="fas fa-phone"></i>
      </div>
    </div>
</body>
</html>

There is all the HTML Code for the WhatsApp Logo. Now, you can see output without CSS. Then we write CSS Code for the WhatsApp Logo.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Output

WhatsApp Logo Using HTML & CSS Code
WhatsApp Logo Using HTML & CSS Code

 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

CSS Code For WhatsApp Logo

body{
    margin: 0;
    padding: 0;
    background: lightblue;
}
div{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #3AC371;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.white{
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 2px 2px 3px 2px rgba(0,0,0,.3);
}
.white::before{
    content: "";
    top: 65px;
    left: -15px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    transform: rotate(-50deg) rotateX(-55deg);
}
.white::after{
    content: "";
    top: 63px;
    left: -4px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #3AC371 transparent transparent;
    position: absolute;
    transform: rotate(-51deg) rotateX(-50deg);
}
.fas{
    left: 17px;
    top: 18px;
    position: absolute;
    font-size: 35px;
    color: #fff;
    transform: rotate(90deg);
}

We have completed our CSS Code Section For WhatsApp Logo.  Here is our final updated output with HTML And  CSS Code.

Final Output Of  WhatsApp Logo Using HTML And CSS

WhatsApp Logo Using HTML & CSS Code
WhatsApp Logo Using HTML & CSS Code

 

We have completed our CSS Code Section.  Here is our updated output with HTML & CSS. Hope you like the WhatsApp Logo, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you

This post teaches us to create a WhatsApp Logo using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – Md Aman

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3.Notes App Using Html Css Javascript

Leave a Reply