Arşiv Aralık 19, 2021

Bu içerikte HTML CSS kullanarak bir sitenin şablon tasarımını göreceksiniz. Sitemizde daha önce yayınlanan HTML CSS Sayfa Div Örnekleri yazılarından farklı olarak bu yazıda CSS FLEX özelliği de tasarıma eklenmiştir.Uygulamanın tasarımı aşağıdaki gibidir.HTML CSS Sayfa ÖrnekleriUygulama HTML CSS Kodları: Tasarım Kodlama *{ box-sizing: border-box; } html{ font-size:62.5%;/*1rem = 10px*/ } body,h1,h2,ul{ margin:0; padding:0; } ul{ list-style: none; } /*******************/ body{ font-family: 'Nunito Sans', sans-serif; } .arkaplan{ background-color: #25373D; } .kapsayici{ width: 960px; margin:0 auto; } .ust{ display: flex; justify-content: space-between; align-items: center; min-height: 200px; } .ust .logo{ text-align: center; color:#fff; } .ust .logo h1{ font-size:4rem; letter-spacing: .5rem; } .ust .logo h1::first-letter{ color:#FCB941; } .ust .logo h1:hover::first-letter{ background-color: #FCB941; color:#25373D; } .ust .logo h2{ font-size:2.4rem; } .ust .menu ul{ display: flex; } .ust .menu ul li{ margin:0 1rem; } .ust .menu ul a{ color:#fff; text-decoration: none; font-size:1.8rem; padding:0 2rem; } .ust .menu ul a:hover{ color:#FCB941; } .orta .bolum1{ margin-top:20px; border:10px solid #25373D; padding:20px; } .orta .bolum1 img{ display: block; width: 100%; } .orta .bolum2{ margin-top:20px; display: flex; justify-content: space-between; } .orta .bolum2 .kutu{ flex-basis: 290px; } .orta .bolum2 .kutu h2{ font-size: 2rem; } .orta .bolum2 .kutu p{ font-size: 1.6rem; } .orta .bolum3{ display: flex; justify-content: space-between; gap:20px; } .orta .bolum3 h1{ font-size:2.5rem; } .orta .bolum3 p{ font-size:1.6rem; } .alt{ margin-top:20px; padding:20px 0; display: flex; gap:20px; } .alt .baglanti{ flex-grow: 1; } .alt .baglanti ul li{ border-bottom:dotted 1px #FCB941; margin:5px 0; } .alt .baglanti a{ font-size:1.6rem; text-decoration: none; color:#FCB941; } .cizgi{ border-top:dotted 1px #FCB941; margin:20px 0; } .alt-kenar-10{ border-bottom:10px solid #FCB941; } Web Tasarım www.tasarimkodlama.com Ana Sayfa Sayfa Sayfa Sayfa Sayfa Lorem Ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus praesentium iure

Lorem Ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus praesentium iure

Lorem Ipsum Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum atque ullam provident, adipisci quaerat delectus repudiandae voluptatem quo odit consequuntur modi. Ipsa sint quam corrupti vitae dolorem dicta, quia corporis.

Esse, nulla neque soluta ipsa, voluptates aliquid tempora sequi nisi mollitia quod porro ipsum ratione dolores, ad ullam. Culpa numquam animi dolor architecto maiores ad saepe soluta minima eum totam.

Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Sayfa Uygulama Yapılış Videosu:Diğer CSS Div Örnekleri için Tıklayın