WhatsApp Logo Using HTML & CSS Code

WhatsApp Logo/Icon Using HTML & CSS Code

WhatsApp Logo/Icon 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.

50+ HTML, CSS & JavaScript Projects With Source Code

Code byMd Aman
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYES
ResponsiveYES
WhatsApp Logo Table

Html Code For WhatsApp Logo

<!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.

Portfolio Website using HTML and CSS (Source Code)

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.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

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

Which code editor do you use for this WhatsApp Logo coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

YES! this is a responsive project

Do you use any external links to create this project?

Yes!



Tags: , , ,

Leave a Reply