<div class="container">
<div class="USA-flag">
<div class="USA-stars">
<div class="star-row">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
<div class="star-row star-row--five">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
<div class="star-row">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
<div class="star-row star-row--five">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
<div class="star-row">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
<div class="star-row star-row--five">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
<div class="star-row">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
<div class="star-row star-row--five">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
<div class="star-row">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
</div>
<div class="USA-stripes">
<div class="stripe"></div>
<div class="stripe stripe--white"></div>
<div class="stripe"></div>
<div class="stripe stripe--white"></div>
<div class="stripe"></div>
<div class="stripe stripe--white"></div>
<div class="stripe"></div>
<div class="stripe stripe--white"></div>
<div class="stripe"></div>
<div class="stripe stripe--white"></div>
<div class="stripe"></div>
<div class="stripe stripe--white"></div>
<div class="stripe"></div>
</div>
</div>
</div>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
background: linear-gradient(90deg, #041E42 20%, #9b1c2c 100%);
}
.USA-flag {
width: 900px;
min-width: 900px;
height: 450px;
box-shadow: 0px 20px 80px 10px rgba(0,0,0,.25);
position: relative;
}
.stripe {
background-color: #9b1c2c;
width: 100%;
height: calc(450px / 13);
}
.stripe--white {
background-color: white;
}
.USA-stars {
position: absolute;
top: 0;
left: 0;
width: 378px;
height: calc((450px / 13) * 7);
background-color: #041E42;
z-index: 1;
padding: 12px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.star-row {
display: flex;
justify-content: space-between;
}
.star-row--five {
padding: 0px 33px;
}
.star {
font-size: 20px;
color: white;
display: flex;
justify-content: center;
margin-top: -4px;
}
@media (max-width: 1000px) {
.USA-flag {
transform: scale(.75);
}
}
@media (max-width: 725px) {
.USA-flag {
transform: scale(.5);
}
}
@media (max-width: 475px) {
.USA-flag {
transform: scale(.375);
}
}
@media (max-width: 340px) {
.USA-flag {
transform: scale(.325);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.