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