Arşiv Aralık 22, 2021

HTML ve CSS kavramlarını yeni öğrenmeye başlayanlar için tasarlanmış blok yapısına sahip olan bir şablon sayfa tasarımıdır.CSS’de olan flex konusunu öğrenmeye yardımcı olması için hazırlanmıştır. Flex ile yapılmış olan bir başka tasarım için buradaki bağlantıya tıklayabilirsiniz.Ekran Çıktısı:HTML CSS Örnek Sayfa TasarımıHTML ve CSS Kodu: Site html{ font-size:62.5%; } body { min-height: 100vh; background: url(cimen.png) bottom center repeat-x, url(bulut.png) top center fixed, #1DABB8; margin: 0; } .kapsayici { width: 1080px; margin: 200px auto 0 auto; } nav { /* min-height: 100px; */ /* background-color: #25373D; */ display: flex; justify-content: space-between; align-items: flex-end; } nav ul{ list-style: none; margin:0; padding:0; } nav ul li{ display: inline-block; } nav .menu a{ color:#fff; font-size:2rem; background-color: #25373D; padding:15px 30px; display: block; border:#D2D7D3 solid 5px; border-bottom:none; border-radius: 30px 30px 0 0; font-weight: 600; text-decoration: none; } nav .menu a:hover{ background-color:#D2D7D3; color:#25373D; } nav .sosyal a{ color:#25373D; font-size:2rem; background-color: #FEC606; width: 32px; height: 32px; line-height: 32px; text-align: center; padding:8px; display: block; border-radius: 50%; margin-bottom:5px; } .bolum1 { min-height: 300px; background-color: #D2D7D3; margin-bottom: 40px; } .bolum2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap:20px; padding:20px; background-color: #6C8784; margin-bottom: 40px; } .bolum2 .kutu{ width: 330px; height: 330px; line-height: 330px; text-align: center; font-size:4rem; background-color: #D33257; color:#fff; } .bolum3 { display: flex; justify-content: space-between; padding:10px; min-height: 200px; background-color: #E7E7E7; margin-bottom: 40px; } .bolum3 .kutu{ width: 200px; height: 200px; line-height: 200px; font-size:5rem; text-align: center; background-color: #D33257; color:#fff; } sayfa sayfa sayfa sayfa sayfa 1 2 3 4 5 6 1 2 3 4 5