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 by | Md Aman |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | YES |
| Responsive | YES |
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
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
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
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!
