How to create the Bangladesh flag using HTML and CSS
You know the basics of HTML and CSS, and now you want to create the Bangladesh flag using HTML and CSS. You can easily create the Bangladesh flag using HTML and CSS.
In this article, I will show you how you can do that. Just follow my steps and you will find yourself with a Bangladesh flag created using HTML and CSS.
Draw Bangladesh Flag Using HTML & CSS
1. Create an HTML file
First, you have to create an HTML file. You can do this however you want. If you know the basics of HTML, it should be very easy to do for you.
Read More: Vim on Sublime Text 3
2. Write the HTML Code
Now, we will write the HTML code in the HTML file. You can copy-paste the following code writer by me, otherwise, you can also write the whole code yourself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tech View 71</title>
</head>
<body>
<div class="bangladesh"></div>
</body>
</html>
Here we created a div with a class name. The class name is “bangladesh”. You can give any name. It’s on to you.
3. Write the CSS Code
Now, we will write the CSS code. You can copy and paste the following code or you can write the code.
.flag {
height: 300px;
width: 500px;
background-color: #006a4e;
position: relative;
}
.circle {
height: 150px;
width: 150px;
background-color: #f42a41;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.line {
height: 25px;
width: 500px;
background-color: #f42a41;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
Save the CSS file with any name you like, for example, “style.css”.
4. Link the CSS file to the HTML file
Link the CSS file to the HTML file by adding the following code to the head section of the HTML file:
<link rel="stylesheet" type="text/css" href="style.css">
Open the HTML file in your web browser to see the Bangladesh flag.
The Result
What is your reaction?
