Html ve Css ile İsviçre Bayrağı

Bugünkü yazımızda, HTML ve CSS’yi kullanarak İsviçre bayrağı dizaynı yapmayı öğreneceğiz. Hemen başlayalım!

İsviçre bayrağı, kırmızı bir zemin üzerine beyaz bir haç içerir.

Öncelikle, bayrağın genel yapısını oluşturmak için bir div elementi oluşturuyoruz:

<div class="swiss-flag">
<div class="cross-horizontal"></div>
<div class="cross-vertical"></div>
</div>

</div>

Bu div elementine “swiss-flag” sınıfı veriyorum. İçindeki iki div elementi ise beyaz haçı oluşturur.

CSS’te bu bayrağı oluşturmak için, aşağıdaki kodu yazıyoruz:

<style>
.swiss-flag {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
width: 200px;
height: 200px;
position: relative;
}
.cross-horizontal,
.cross-vertical {
background-color: white;
position: absolute;
}
.cross-horizontal {
height: 20%;
width: 60%;
top: 40%;
}
.cross-vertical {
height: 60%;
width: 20%;
left: 40%;
}
</style>

<style>

.swiss-flag {

display: flex;

justify-content: center;

align-items: center;

background-color: red;

width: 200px;

height: 200px;

position: relative;

}

.cross-horizontal,

.cross-vertical {

background-color: white;

position: absolute;

}

.cross-horizontal {

height: 20%;

width: 60%;

top: 40%;

}

.cross-vertical {

height: 60%;

width: 20%;

left: 40%;

}

</style>

İşte bu kadar!

Şu yazılarda ilginizi çekebilir.

Html ve Css ile Fransa Bayrağı

Html ve Css ile Almanya Bayrağı

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Happy coding!

Html ve Css ile İsviçre Bayrağı

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın