Odpowiedź :
Odpowiedź:
<!DOCTYPE html>
<html lang="pl">
<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">
<title>Flagi</title>
<style>
body {
font-family: "Segoe UI", Arial, sans-serif;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
h1 {
font-weight: 300;
}
.flaga {
display: grid;
width: 300px;
height: 200px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.az {
grid-auto-rows: 33.3333%
}
.az .rectangle:nth-child(1) {
background-color: #00b5e2;
}
.az .rectangle:nth-child(2) {
background-color: #ef3340;
color: #fff;
text-align: center;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
}
.az .rectangle:nth-child(3) {
background-color: #509e2f;
}
.az .moon {
font-size: 66px;
}
.az .star {
font-size: 25px;
}
.bd {
background-color: #2d6a4c;
align-items: center;
}
.bd .circle {
background-color: #e22f3f;
border-radius: 50%;
height: 120px;
width: 120px;
margin-left: 20%;
}
.to {
background-color: #e22f3f;
width: 400px;
}
.to .rectangle {
background-color: #fff;
height: 50%;
width: 40%;
display: flex;
justify-content: center;
}
.to .plus {
color: #e22f3f;
font-size: 100px;
font-weight: 900;
line-height: 80px;
}
.nr {
background-color: #1b2783;
align-items: center;
width: 400px;
}
.nr .rectangle {
background-color: #f5c800;
height: 10%;
position: relative;
}
.nr .rectangle .star {
color: #fff;
position: absolute;
top: 100%;
left: 15%;
font-size: 60px;
}
.cl {
background-color: #c72f16;
grid-template-columns: 1fr 2fr;
}
.cl .square {
background-color: #2434ab;
color: #fff;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
height: 50%;
}
.cl .rectangle {
height: 50%;
background-color: #fff;
}
.pe {
background-color: #c81a1e;
justify-items: center;
}
.pe .rectangle {
background-color: #fff;
width: 33%;
height: 100%;
}
</style>
</head>
<body>
<div class="item">
<h1>Azerbejdżan</h1>
<div class="flaga az">
<div class="rectangle"></div>
<div class="rectangle">
<span class="moon">☾</span>
<span class="star">✸</span>
</div>
<div class="rectangle"></div>
</div>
</div>
<div class="item">
<h1>Bangladesz</h1>
<div class="flaga bd">
<div class="circle"></div>
</div>
</div>
<div class="item">
<h1>Tonga</h1>
<div class="flaga to">
<div class="rectangle"><span class="plus">+</span></div>
</div>
</div>
<div class="item">
<h1>Nauru</h1>
<div class="flaga nr">
<div class="rectangle">
<span class="star">✹</span>
</div>
</div>
</div>
<div class="item">
<h1>Chile</h1>
<div class="flaga cl">
<div class="square">
<span class="star">★</span>
</div>
<div class="rectangle"></div>
</div>
</div>
<div class="item">
<h1>Peru</h1>
<div class="flaga pe">
<div class="rectangle"></div>
</div>
</div>
</body>
</html>
Wyjaśnienie:
Niektóre elementy są zrobione za pomocą znaków unicode, nie daję gwarancji że będą działać na każdym systemie operacyjnym. Zapisana strona powinna powinna wyglądać tak jak na skrinie w załączniku.
