Bu yazıda HTML ve CSS kullanarak bir web sitesinin bir bölümünü yapacağız. Uygulamada temel CSS komutlarının yanı sıra son zamanlarda sık sık karşımıza çıkan FLEX, CSS variable(CSS Değişkenler) gibi kavramlarıda tasarımın bir kısmında kullanacağız.
Tasarımda güncel CSS kodlarının yanı sıra HTML5 ile hayatımıza giren yeni HTML etiketlerine de yer verilmektedir. Uygulamanın yapılış videosu ve kaynak kodlarına yazının devamından ulaşabilirsiniz.
Sayfayı hazırladığımızda aşağıdaki gibi görünecektir.
Tasarımda kullanılan görselleri web tasarım ve arkaplan bağlantılarına tıklayarak indirebilirsiniz.
Uygulamanın yapılış videosu
HTML Kodu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="tasarim.css"> <title>TasarimKodlama</title> </head> <body> <div class="sayfa"> <header> <div id="logo"> <a href="index.html"> <img src="gorsel/web.png" alt="logo"> </a> </div> <nav id="ust-menu"> <ul> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a> <ul> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> </ul> </li> <li><a href="#">Sayfa</a></li> <li><a href="#">Sayfa</a></li> </ul> </nav> </header> <main> <article> <h2> Word Rastgele Başlık </h2> <p> Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. Belgenize en iyi uyan videoyu çevrimiçi olarak aramak için bir anahtar sözcük de yazabilirsiniz. </p> <p> Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin. </p> </article> <div class="yatay-cizgi"></div> <article> <h2> Word Rastgele Başlık </h2> <p> Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. </p> <p> Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin. </p> </article> <div class="yatay-cizgi"></div> <article> <h2> Word Rastgele Başlık </h2> <p> Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. </p> </article> </main> <footer> <p>Tüm Telif Hakları Saklıdır</p> </footer> </div> </body> </html> |
CSS: (tasarim.css)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | *{ box-sizing: border-box; } /*CSS Değişken Kullanımı*/ /*değişken tanımlama ve değer atama*/ :root{ --yazi-renk:#fff; --bg-renk:#ff6b81; --bg-aktif-renk:#ff4757; } h1, h2, p, ul, li, body{ margin:0; padding:0; } body{ background: url(gorsel/bg2.jpg) fixed; /*fixed arkaplanı sabitler*/ font-family: 'Montserrat', sans-serif; } .sayfa{ width: 960px; margin:10px auto; background: var(--yazi-renk); border:3px solid var(--bg-renk); border-radius: 15px; overflow: hidden;/*taşan kısımlar temizleniyor*/ } #logo img{ width: 100%; vertical-align: middle; } #ust-menu > ul{ position: relative; list-style: none; display: flex; background: var(--bg-renk); justify-content: space-around; } #ust-menu > ul > li{ position: relative; flex-grow: 1; } #ust-menu > ul ul{ display: none; list-style: none; position: absolute; background: var(--bg-renk); width: 100%; border-radius: 0 0 10px 10px; overflow: hidden; } #ust-menu > ul > li:hover ul{ /*display: block; yada flex kullanılabilir*/ display: flex; flex-direction: column; } #ust-menu ul li:hover{ background:var(--bg-aktif-renk); } #ust-menu ul li a{ text-align: center; display: block; /*bulunduğu alanın içinde 100% olarak duracak*/ height: 40px; line-height: 40px; color:var(--yazi-renk); text-decoration: none; font-size: 1.2em;; } main{ padding:20px;/*margin de kullanılabilir*/ } main p{ margin:5px 0; } footer{ background:var(--bg-renk); padding:15px; text-align: center; color:var(--yazi-renk); } /*diğer css kodları*/ .yatay-cizgi{ border-bottom:1px solid #a4b0be; margin:10px 0; } |
Yorum Yap