The United States flag is a symbol of freedom, unity, and history. In this tutorial, you will learn how to create a simple representation of the US flag using HTML and CSS. This project is beginner-friendly and helps you understand HTML structure and CSS styling.
For more flag designs and resources, you can visit allworldflags.com.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.flag {
width: 300px;
height: 160px;
border: 2px solid #000;
display: flex;
}
.blue-star {
width: 40%;
background-color: #3c3b6e;
}
.stripes {
width: 60%;
display: flex;
flex-direction: column;
}
.stripe {
flex: 1;
}
.red {
background-color: #b22234;
}
.white {
background-color: #ffffff;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.flag {
width: 300px;
height: 160px;
border: 2px solid #000;
display: flex;
}
.blue-star {
width: 40%;
background-color: #3c3b6e;
}
.stripes {
width: 60%;
display: flex;
flex-direction: column;
}
.stripe {
flex: 1;
}
.red {
background-color: #b22234;
}
.white {
background-color: #ffffff;
}