Hello guys today we will learn How to make facebook logo using html and css
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Facebook logo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="logo-outer"> <div class="facebook-logo"></div> </div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
}
body {
background: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.facebook-logo {
background: #4661b0;
width: 100px;
height: 110px;
border-radius: 3px;
position: relative;
overflow: hidden;
border: 15px solid #4661b0;
border-bottom: 0;
}
.facebook-logo:before {
content: "";
position: absolute;
background: #4661b0;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #fff;
border-radius: 25px;
}
.facebook-logo:after {
content: "";
position: absolute;
background: #fff;
width: 55px;
height: 20px;
top: 50px;
right: 5px;
}
I am interested in html coding
We will definitely help you learn HTML coding.
I am interested in html coding
How can we help you?
I am interested to learn coding and I will definitely need your help. Thanks