HTML Ve CSS Kodları Ile Site Yapımı (Flex)

Có thể bạn quan tâm

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.

Uygulama HTML CSS Kodları:

<!DOCTYPE html> <html lang="tr"> <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>Tasarım Kodlama</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap" rel="stylesheet"> <style> *{ 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; } </style> </head> <body>  <div class="arkaplan alt-kenar-10"> <div class="ust kapsayici"> <div class="logo"> <h1>Web Tasarım</h1> <h2>www.tasarimkodlama.com</h2> </div> <div class="menu"> <ul> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> </ul> </div> </div> </div>  <div class="orta kapsayici"> <div class="bolum1"> <img src="https://picsum.photos/960/360" alt="Kapak resmi"> </div> <div class="bolum2"> <div class="kutu"> <img src="https://picsum.photos/290/180" alt=""> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus praesentium iure </p> </div> <div class="kutu"> <img src="https://picsum.photos/290/180" alt=""> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus praesentium iure </p> </div> <div class="kutu"> <img src="https://picsum.photos/290/180" alt=""> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus praesentium iure </p> </div> </div> <div class="cizgi"></div> <div class="bolum3"> <div class="icerik"> <h1>Lorem Ipsum</h1> <p>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.</p> <p>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.</p> </div> <div class="gorsel"> <img src="https://picsum.photos/450/250" alt="İlgili ürün bilgisi"> </div> </div> </div>  <div class="arkaplan"> <div class="alt kapsayici"> <div class="baglanti"> <ul> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> </ul> </div> <div class="baglanti"> <ul> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> </ul> </div> <div class="baglanti"> <ul> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> </ul> </div> <div class="baglanti"> <ul> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> </ul> </div> </div> </div> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269

<!DOCTYPE html><html lang="tr"><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>Tasarım Kodlama</title><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap"rel="stylesheet"> <style>*{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:0auto;}.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:01rem;} .ust .menu ul a{color:#fff;text-decoration:none;font-size:1.8rem;padding:02rem;}.ust .menu ul a:hover{color:#FCB941;} .orta .bolum1{margin-top:20px;border:10pxsolid#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:20px0;display:flex;gap:20px;}.alt .baglanti{flex-grow:1;} .alt .baglanti ul li{border-bottom:dotted1px#FCB941;margin:5px0;} .alt .baglanti a{font-size:1.6rem;text-decoration:none;color:#FCB941;} .cizgi{border-top:dotted1px#FCB941;margin:20px0;} .alt-kenar-10{border-bottom:10pxsolid#FCB941;}</style></head><body> <div class="arkaplan alt-kenar-10"><div class="ust kapsayici"><div class="logo"><h1>Web Tasarım</h1><h2>www.tasarimkodlama.com</h2></div><div class="menu"><ul><li><a href="#">Ana Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li></ul></div></div></div> <div class="orta kapsayici"><div class="bolum1"><img src="https://picsum.photos/960/360"alt="Kapak resmi"></div><div class="bolum2"><div class="kutu"><img src="https://picsum.photos/290/180"alt=""><h2>Lorem Ipsum</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus praesentium iure </p></div><div class="kutu"><img src="https://picsum.photos/290/180"alt=""><h2>Lorem Ipsum</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus praesentium iure </p></div><div class="kutu"><img src="https://picsum.photos/290/180"alt=""><h2>Lorem Ipsum</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus praesentium iure </p></div> </div><div class="cizgi"></div><div class="bolum3"><div class="icerik"><h1>Lorem Ipsum</h1><p>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.</p><p>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.</p></div><div class="gorsel"><img src="https://picsum.photos/450/250"alt="İlgili ürün bilgisi"></div></div></div> <div class="arkaplan"><div class="alt kapsayici"><div class="baglanti"><ul><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li></ul></div><div class="baglanti"><ul><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li></ul></div><div class="baglanti"><ul><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li></ul></div><div class="baglanti"><ul><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li><li><a href="#">Sayfa</a></li></ul></div></div></div></body></html>

Uygulama Yapılış Videosu:

Diğer CSS Div Örnekleri için Tıklayın