[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-responsive-baslangic-sayfasi-html-ve-css-ile-5-mini-ornek":3},{"dataItem":4,"heading":35,"metaData":37,"schema":80},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":7,"seo_description":10,"seo_keywords":11,"slug":12,"createdAt":13,"updatedAt":13,"blog_categories":14,"authors":18,"image":23,"thumb":24,"image_webp":25,"thumb_webp":26,"rating":27,"heading_title":7,"heading_sub_title":16,"readingTime":28,"url":33,"comments":34,"meta_cover":23},21158,"Responsive Başlangıç Sayfası: HTML ve CSS ile 5 Mini Örnek","Bu rehber, mobil-öncelikli (mobile-first) yaklaşımla responsive bir başlangıç sayfası oluşturmanız için 5 mini HTML/CSS örneği verir: hero alanı, kart ızgarası, basit navigasyon, form düzeni ve responsive görsel. Ayrıca viewport etiketi, Flexbox ve CSS Grid kullanımını pratik bir şablonla birleştirir.","\u003Ch2>Bu rehberde ne yapacağız?\u003C/h2>\n\u003Cp>Bu yazı, tek bir “responsive başlangıç sayfası” mantığını 5 küçük parçaya bölerek öğretir. Her parça bağımsız kullanılabilir; isterseniz hepsini birleştirip küçük bir landing page iskeleti çıkarabilirsiniz. Odak noktamız \u003Cstrong>kopyalayıp düzenleyebileceğiniz\u003C/strong> kadar minimal örnekler.\u003C/p>\n\u003Cp>Teknik dayanaklar:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Viewport\u003C/strong> ayarı\u003C/li>\n\u003Cli>\u003Cstrong>Mobil-öncelikli\u003C/strong> (mobile-first) CSS ve \u003Cstrong>medya sorguları\u003C/strong>\u003C/li>\n\u003Cli>\u003Cstrong>Flexbox\u003C/strong> (tek boyutlu hizalama/dizilim)\u003C/li>\n\u003Cli>\u003Cstrong>CSS Grid\u003C/strong> (iki boyutlu ızgaralar)\u003C/li>\n\u003Cli>\u003Cstrong>Responsive görseller\u003C/strong> (CSS ile ölçeklendirme + gerektiğinde \u003Cem>srcset\u003C/em>)\u003C/li>\n\u003C/ul>\n\u003Cp>Referans olarak MDN dokümantasyonunu baz alıyoruz: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design\">MDN Responsive Design\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag\">MDN Meta Viewport\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\">MDN Flexbox\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\">MDN CSS Grid\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">MDN Responsive Images\u003C/a>.\u003C/p>\n\u003Cp>\u003Cstrong>Not:\u003C/strong> Kod örneklerinde geçen \u003Cem>https://your-domain.example\u003C/em> ve benzeri adresler yer tutucudur; kendi URL’nizle değiştirin.\u003C/p>\n\u003Chr>\n\u003Ch2>Temel kurulum: responsive davranışın “zemini”\u003C/h2>\n\u003Ch3>1) HTML: Meta viewport ekleyin\u003C/h3>\n\u003Cp>Mobil cihazların sayfayı cihaz genişliğine göre ölçeklemesi için, \u003Cstrong>meta viewport\u003C/strong> etiketi pratikte temel bir adımdır (detay: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag\">MDN Meta viewport\u003C/a>).\u003C/p>\n\u003Cblockquote>\n\u003Cstrong>index.html (head içine)\u003C/strong>\u003Cbr>\n<meta name="viewport" content="width=device-width, initial-scale=1">\n\u003C/blockquote>\n\u003Ch3>2) CSS: Mobil-öncelikli yazın\u003C/h3>\n\u003Cp>Mobil-öncelikli yaklaşımda önce küçük ekranlar için temel stilleri yazarsınız; daha geniş ekranlar için \u003Cstrong>@media (min-width: ...)\u003C/strong> ile eklemeler yaparsınız (genel yaklaşım için: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design\">MDN Responsive Design\u003C/a>).\u003C/p>\n\u003Cblockquote>\n\u003Cstrong>styles.css (başlangıç)\u003C/strong>\u003Cbr>\n:root {\u003Cbr>\n  --max: 1100px;\u003Cbr>\n  --gap: 16px;\u003Cbr>\n  --radius: 14px;\u003Cbr>\n  --text: #111;\u003Cbr>\n  --muted: #555;\u003Cbr>\n  --bg: #fff;\u003Cbr>\n  --surface: #f5f5f7;\u003Cbr>\n  --accent: #2f6fed;\u003Cbr>\n}\u003Cbr>\n* { box-sizing: border-box; }\u003Cbr>\nbody {\u003Cbr>\n  margin: 0;\u003Cbr>\n  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\u003Cbr>\n  line-height: 1.5;\u003Cbr>\n  color: var(--text);\u003Cbr>\n  background: var(--bg);\u003Cbr>\n}\u003Cbr>\nimg { max-width: 100%; height: auto; display: block; }\u003Cbr>\n.container {\u003Cbr>\n  max-width: var(--max);\u003Cbr>\n  margin: 0 auto;\u003Cbr>\n  padding: 0 16px;\u003Cbr>\n}\n\u003C/blockquote>\n\u003Ch3>Flexbox mı Grid mi? Hızlı karar tablosu\u003C/h3>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Kullanım\u003C/th>\n\u003Cth>Önerilen\u003C/th>\n\u003Cth>Neden\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Tek sıra/tek kolon hizalama (dikey ya da yatay)\u003C/td>\n\u003Ctd>Flexbox\u003C/td>\n\u003Ctd>Tek boyutlu düzenlerde hizalama ve boşluk yönetimi pratiktir. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\">MDN Flexbox\u003C/a>)\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Kart ızgarası gibi hem satır hem sütun kontrolü\u003C/td>\n\u003Ctd>CSS Grid\u003C/td>\n\u003Ctd>İki boyutlu yerleşimlerde daha öngörülebilir kontrol sağlar. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\">MDN Grid\u003C/a>)\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\n\u003Chr>\n\u003Ch2>Mini Örnek 1: Hero (Başlık + Açıklama + Çağrı)\u003C/h2>\n\u003Cp>Landing page’lerin en üst bölümü genelde bir “hero” alanıdır: değer önerisi, kısa açıklama ve bir çağrı linki. Burada \u003Cstrong>Flexbox\u003C/strong> ile küçük ekranda tek kolon, geniş ekranda iki sütuna doğru bir düzen kuracağız (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\">MDN Flexbox\u003C/a>).\u003C/p>\n\u003Cblockquote>\n\u003Cstrong>HTML\u003C/strong>\u003Cbr>\n<div class="hero">\u003Cbr>\n  <div class="container hero__inner">\u003Cbr>\n    <div class="hero__copy">\u003Cbr>\n      <h1>Ürününüz için sade ve responsive bir başlangıç sayfası</h1>\u003Cbr>\n      <p>Bu şablon, mobil-öncelikli CSS ile hızlıca düzen kurmanıza yardımcı olur.</p>\u003Cbr>\n      <a class="btn" href="https://your-domain.example">Daha fazla bilgi</a>\u003Cbr>\n    </div>\u003Cbr>\n    <img class="hero__img" src="hero.jpg" alt="Ürün ekran görüntüsü">\u003Cbr>\n  </div>\u003Cbr>\n</div>\n\u003C/blockquote>\n\u003Cblockquote>\n\u003Cstrong>CSS\u003C/strong>\u003Cbr>\n.hero { padding: 40px 0; background: var(--surface); }\u003Cbr>\n.hero__inner { display: flex; flex-direction: column; gap: 20px; }\u003Cbr>\n.hero__copy h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }\u003Cbr>\n.hero__copy p { margin: 10px 0 0; color: var(--muted); }\u003Cbr>\n.btn {\u003Cbr>\n  display: inline-block;\u003Cbr>\n  margin-top: 16px;\u003Cbr>\n  padding: 10px 14px;\u003Cbr>\n  background: var(--accent);\u003Cbr>\n  color: #fff;\u003Cbr>\n  text-decoration: none;\u003Cbr>\n  border-radius: 999px;\u003Cbr>\n}\u003Cbr>\n.hero__img { border-radius: var(--radius); }\u003Cbr>\n@media (min-width: 900px) {\u003Cbr>\n  .hero__inner { flex-direction: row; align-items: center; }\u003Cbr>\n  .hero__copy { flex: 1; }\u003Cbr>\n  .hero__img { flex: 1; }\u003Cbr>\n}\n\u003C/blockquote>\n\u003Ch4>Hızlı kontrol listesi\u003C/h4>\n\u003Cul>\n\u003Cli>CTA metni açıklayıcı mı? (Örn. “Teklif al” / “Demo iste” gibi.)\u003C/li>\n\u003Cli>Görsel için anlamlı \u003Cstrong>alt\u003C/strong> metni var mı?\u003C/li>\n\u003Cli>Küçük ekranda metin/CTA önce geliyor mu? Bu düzen sıklıkla okunabilirliği artırır.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Mini Örnek 2: Kart ızgarası (CSS Grid ile)\u003C/h2>\n\u003Cp>Özellikleri, kullanım senaryolarını veya içerikleri göstermek için kart ızgarası çok kullanılır. Burada \u003Cstrong>CSS Grid\u003C/strong> ile “ekran genişledikçe kendini düzenleyen” bir ızgara kuracağız (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\">MDN CSS Grid\u003C/a>).\u003C/p>\n\u003Cblockquote>\n\u003Cstrong>HTML\u003C/strong>\u003Cbr>\n<div class="container">\u003Cbr>\n  <h2>Öne çıkanlar</h2>\u003Cbr>\n  <div class="grid">\u003Cbr>\n    <div class="card"><h3>Hızlı kurulum</h3><p>Minimum HTML/CSS ile başlayın.</p></div>\u003Cbr>\n    <div class="card"><h3>Responsive düzen</h3><p>Mobil-öncelikli medya sorguları.</p></div>\u003Cbr>\n    <div class="card"><h3>Temiz tipografi</h3><p>Okunabilir aralıklar ve boyutlar.</p></div>\u003Cbr>\n  </div>\u003Cbr>\n</div>\n\u003C/blockquote>\n\u003Cblockquote>\n\u003Cstrong>CSS\u003C/strong>\u003Cbr>\n.grid {\u003Cbr>\n  display: grid;\u003Cbr>\n  grid-template-columns: 1fr;\u003Cbr>\n  gap: var(--gap);\u003Cbr>\n  margin: 16px 0 40px;\u003Cbr>\n}\u003Cbr>\n.card {\u003Cbr>\n  background: var(--surface);\u003Cbr>\n  border-radius: var(--radius);\u003Cbr>\n  padding: 16px;\u003Cbr>\n}\u003Cbr>\n.card h3 { margin: 0; }\u003Cbr>\n.card p { margin: 10px 0 0; color: var(--muted); }\u003Cbr>\n@media (min-width: 700px) {\u003Cbr>\n  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\u003Cbr>\n}\u003Cbr>\n@media (min-width: 1000px) {\u003Cbr>\n  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\u003Cbr>\n}\n\u003C/blockquote>\n\u003Ch4>Hızlı kontrol listesi\u003C/h4>\n\u003Cul>\n\u003Cli>Başlık hiyerarşisi tutarlı mı? (Sayfa başlığı h1 ise bölüm h2, kart h3 gibi.)\u003C/li>\n\u003Cli>Metinler uzadığında kart yüksekliği ve taşma davranışı kabul edilebilir mi?\u003C/li>\n\u003Cli>Küçük ekranda boşluklar çok sıkışık geliyorsa \u003Cem>--gap\u003C/em> değerini azaltıp artırmayı deneyin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Mini Örnek 3: Basit responsive navigasyon (JS olmadan)\u003C/h2>\n\u003Cp>Bu mini örnekte hedefimiz “tam açılır-kapanır hamburger menü” değil; JavaScript olmadan, küçük ekranda satıra sığmadığında kendini düzgünce saran, büyük ekranda tek satırda hizalanan bir menü kurmak. Böylece bakım basit kalır.\u003C/p>\n\u003Cp>Bu örnekte temel yapı taşı olarak Flexbox kullanıyoruz (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\">MDN Flexbox\u003C/a>).\u003C/p>\n\u003Cblockquote>\n\u003Cstrong>HTML\u003C/strong>\u003Cbr>\n<div class="topbar">\u003Cbr>\n  <div class="container topbar__inner">\u003Cbr>\n    <a class="brand" href="#">Marka</a>\u003Cbr>\n    <div class="menu">\u003Cbr>\n      <a href="#ozellikler">Özellikler</a>\u003Cbr>\n      <a href="#fiyat">Fiyat</a>\u003Cbr>\n      <a href="#sss">SSS</a>\u003Cbr>\n    </div>\u003Cbr>\n  </div>\u003Cbr>\n</div>\n\u003C/blockquote>\n\u003Cblockquote>\n\u003Cstrong>CSS\u003C/strong>\u003Cbr>\n.topbar { border-bottom: 1px solid #e6e6ea; background: #fff; }\u003Cbr>\n.topbar__inner {\u003Cbr>\n  display: flex;\u003Cbr>\n  align-items: center;\u003Cbr>\n  justify-content: space-between;\u003Cbr>\n  gap: 12px;\u003Cbr>\n  padding: 12px 16px;\u003Cbr>\n}\u003Cbr>\n.brand { color: var(--text); text-decoration: none; font-weight: 700; }\u003Cbr>\n.menu { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }\u003Cbr>\n.menu a { color: var(--muted); text-decoration: none; }\u003Cbr>\n.menu a:hover { text-decoration: underline; }\u003Cbr>\n@media (min-width: 900px) {\u003Cbr>\n  .menu { gap: 16px; }\u003Cbr>\n}\n\u003C/blockquote>\n\u003Ch4>Hızlı kontrol listesi\u003C/h4>\n\u003Cul>\n\u003Cli>Link metinleri anlaşılır mı?\u003C/li>\n\u003Cli>Küçük ekranda linkler ikinci satıra geçtiğinde hâlâ rahat okunuyor mu?\u003C/li>\n\u003Cli>Klavye ile gezinme ve odak görünürlüğü, birçok projede önemli kabul edilir; kendi tasarımınızda bunu ayrıca kontrol edin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Mini Örnek 4: Responsive form düzeni (stacked → two-column)\u003C/h2>\n\u003Cp>İletişim veya kayıt gibi formlar, küçük ekranda tek sütun; geniş ekranda iki sütun olduğunda daha rahat kullanılabilir. Bu örnekte Grid ile “label + input” düzenini geniş ekranda iki kolona çeviriyoruz (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\">MDN CSS Grid\u003C/a>).\u003C/p>\n\u003Cp>\u003Cem>Not:\u003C/em> Gerçek bir formu yayına almadan önce doğrulama, hata mesajları ve gizlilik gereksinimlerini proje kapsamınıza göre ayrıca ele alın.\u003C/p>\n\u003Cblockquote>\n\u003Cstrong>HTML\u003C/strong>\u003Cbr>\n<div class="container">\u003Cbr>\n  <h2>İletişim</h2>\u003Cbr>\n  <form class="form" action="/contact" method="post">\u003Cbr>\n    <div class="field">\u003Cbr>\n      <label for="name">Ad Soyad</label>\u003Cbr>\n      <input id="name" name="name" autocomplete="name" required>\u003Cbr>\n    </div>\u003Cbr>\n    <div class="field">\u003Cbr>\n      <label for="email">E-posta</label>\u003Cbr>\n      <input id="email" name="email" type="email" autocomplete="email" required>\u003Cbr>\n    </div>\u003Cbr>\n    <div class="field field--full">\u003Cbr>\n      <label for="msg">Mesaj</label>\u003Cbr>\n      <textarea id="msg" name="message" rows="5" required></textarea>\u003Cbr>\n    </div>\u003Cbr>\n    <button class="btn" type="submit">Gönder</button>\u003Cbr>\n  </form>\u003Cbr>\n</div>\n\u003C/blockquote>\n\u003Cblockquote>\n\u003Cstrong>CSS\u003C/strong>\u003Cbr>\n.form { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin: 16px 0 40px; }\u003Cbr>\n.field { display: grid; gap: 6px; }\u003Cbr>\nlabel { font-weight: 600; }\u003Cbr>\ninput, textarea {\u003Cbr>\n  font: inherit;\u003Cbr>\n  padding: 10px 12px;\u003Cbr>\n  border-radius: 10px;\u003Cbr>\n  border: 1px solid #d9d9e0;\u003Cbr>\n}\u003Cbr>\n@media (min-width: 900px) {\u003Cbr>\n  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }\u003Cbr>\n  .field--full { grid-column: 1 / -1; }\u003Cbr>\n}\n\u003C/blockquote>\n\u003Ch4>Hızlı kontrol listesi\u003C/h4>\n\u003Cul>\n\u003Cli>Her input’un bir \u003Cstrong>label\u003C/strong> bağlantısı var mı? (for/id eşleşmesi.)\u003C/li>\n\u003Cli>Mobilde tek sütun akış rahat mı? Alanlar arasında yeterli boşluk var mı?\u003C/li>\n\u003Cli>Hata/başarı mesajları ekleyecekseniz, kullanıcıya açık ve tutarlı bir dil kullanın.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Mini Örnek 5: Responsive görsel (CSS + srcset)\u003C/h2>\n\u003Cp>En temel responsive görsel yaklaşımı, görselin taşmasını engellemek için CSS’te \u003Cstrong>max-width: 100%\u003C/strong> ve \u003Cstrong>height: auto\u003C/strong> kullanmaktır. Daha uygun dosya seçimi için HTML’de \u003Cstrong>srcset\u003C/strong>/\u003Cstrong>sizes\u003C/strong> eklemek çoğu senaryoda faydalıdır (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">MDN Responsive images\u003C/a>).\u003C/p>\n\u003Cblockquote>\n\u003Cstrong>HTML (srcset/sizes örneği)\u003C/strong>\u003Cbr>\n<img\u003Cbr>\n  src="hero-800.jpg"\u003Cbr>\n  srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"\u003Cbr>\n  sizes="(min-width: 900px) 50vw, 100vw"\u003Cbr>\n  alt="Uygulama ekranı örneği"\u003Cbr>\n  loading="lazy"\u003Cbr>\n>\n\u003C/blockquote>\n\u003Cblockquote>\n\u003Cstrong>CSS (kırpma gereken kaplar için)\u003C/strong>\u003Cbr>\n.media { border-radius: var(--radius); overflow: hidden; }\u003Cbr>\n.media img { width: 100%; height: 100%; object-fit: cover; }\n\u003C/blockquote>\n\u003Ch4>Hızlı kontrol listesi\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cem>alt\u003C/em> metni, görselin işlevini anlatıyor mu?\u003C/li>\n\u003Cli>Görsel gerçek boyutundan çok büyük mü servis ediliyor? (Gerekirse \u003Cem>srcset\u003C/em> seçeneklerini artırın.)\u003C/li>\n\u003Cli>Görselin içine gömülü metin varsa küçük ekranda okunabilirliği kontrol edin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Hepsini birleştirme: küçük bir başlangıç sayfası akışı\u003C/h2>\n\u003Cp>Bu 5 parçayı bir sayfada birleştirdiğinizde tipik akış şöyle olur: üstte menü, altında hero, sonra kart ızgarası, ardından form ve uygun yerlerde görseller. Mobil-öncelikli yazdığınızda, sayfa küçük ekranda “doğal bir tek kolon akış” gibi çalışır; geniş ekranda medya sorguları ile düzeni açarsınız (yaklaşım için: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design\">MDN Responsive Design\u003C/a>).\u003C/p>\n\u003Cp>Pratik notlar:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Breakpoints\u003C/strong> (ör. 700px, 900px, 1000px) kesin kurallar değildir; proje içeriğinize göre farklılaşabilir.\u003C/li>\n\u003Cli>Renk/kontrast ve font boyutlarını farklı cihazlarda kontrol etmek çoğu tasarımda faydalıdır.\u003C/li>\n\u003Cli>Önce parçaları çalışır hale getirip sonra iyileştirmek, sık kullanılan bir ilerleme biçimidir.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Son kontrol: yayın öncesi hızlı test listesi\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Viewport\u003C/strong>: Meta viewport satırı var mı? (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag\">MDN viewport\u003C/a>)\u003C/li>\n\u003Cli>\u003Cstrong>Dar ekran\u003C/strong>: 320–400px civarında yatay kaydırma var mı?\u003C/li>\n\u003Cli>\u003Cstrong>Görseller\u003C/strong>: Görsel ölçekleniyor mu ve önemli kısımlar kırpılıyorsa \u003Cem>object-fit\u003C/em> ihtiyacı var mı?\u003C/li>\n\u003Cli>\u003Cstrong>Metin taşması\u003C/strong>: Uzun başlıklar kartlarda/hero’da taşma yapıyor mu?\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Kopyala/yapıştır başlangıç: tek sayfada çalışan minimal şablon\u003C/h2>\n\u003Cp>Aşağıdaki iki dosya, bu yazıdaki 5 parçayı “tek sayfada” birleştiren minimal bir başlangıç verir. Görselleri ve metinleri projenize göre değiştirin.\u003C/p>\n\u003Ch3>index.html\u003C/h3>\n\u003Cblockquote>\n<!doctype html>\u003Cbr>\n<html lang="tr">\u003Cbr>\n<head>\u003Cbr>\n  <meta charset="utf-8">\u003Cbr>\n  <meta name="viewport" content="width=device-width, initial-scale=1">\u003Cbr>\n  <title>Responsive Başlangıç Sayfası</title>\u003Cbr>\n  <link rel="stylesheet" href="styles.css">\u003Cbr>\n</head>\u003Cbr>\n<body>\u003Cbr>\n  <div class="topbar">\u003Cbr>\n    <div class="container topbar__inner">\u003Cbr>\n      <a class="brand" href="#">Marka</a>\u003Cbr>\n      <div class="menu">\u003Cbr>\n        <a href="#ozellikler">Özellikler</a>\u003Cbr>\n        <a href="#iletisim">İletişim</a>\u003Cbr>\n      </div>\u003Cbr>\n    </div>\u003Cbr>\n  </div>\u003Cbr>\n\u003Cbr>\n  <div class="hero">\u003Cbr>\n    <div class="container hero__inner">\u003Cbr>\n      <div class="hero__copy">\u003Cbr>\n        <h1>Sade ve responsive landing page</h1>\u003Cbr>\n        <p>Mobile-first CSS ile hızlı bir başlangıç.</p>\u003Cbr>\n        <a class="btn" href="https://your-domain.example">Daha fazla bilgi</a>\u003Cbr>\n      </div>\u003Cbr>\n      <div class="media">\u003Cbr>\n        <img src="hero-800.jpg"\u003Cbr>\n          srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"\u003Cbr>\n          sizes="(min-width: 900px) 50vw, 100vw"\u003Cbr>\n          alt="Ürün görseli" loading="lazy">\u003Cbr>\n      </div>\u003Cbr>\n    </div>\u003Cbr>\n  </div>\u003Cbr>\n\u003Cbr>\n  <div class="container" id="ozellikler">\u003Cbr>\n    <h2>Öne çıkanlar</h2>\u003Cbr>\n    <div class="grid">\u003Cbr>\n      <div class="card"><h3>Hızlı kurulum</h3><p>Minimal HTML/CSS.</p></div>\u003Cbr>\n      <div class="card"><h3>Grid düzen</h3><p>Kart ızgarası.</p></div>\u003Cbr>\n      <div class="card"><h3>Görseller</h3><p>srcset ile esnek.</p></div>\u003Cbr>\n    </div>\u003Cbr>\n  </div>\u003Cbr>\n\u003Cbr>\n  <div class="container" id="iletisim">\u003Cbr>\n    <h2>İletişim</h2>\u003Cbr>\n    <form class="form" action="/contact" method="post">\u003Cbr>\n      <div class="field">\u003Cbr>\n        <label for="name">Ad Soyad</label>\u003Cbr>\n        <input id="name" name="name" autocomplete="name" required>\u003Cbr>\n      </div>\u003Cbr>\n      <div class="field">\u003Cbr>\n        <label for="email">E-posta</label>\u003Cbr>\n        <input id="email" name="email" type="email" autocomplete="email" required>\u003Cbr>\n      </div>\u003Cbr>\n      <div class="field field--full">\u003Cbr>\n        <label for="msg">Mesaj</label>\u003Cbr>\n        <textarea id="msg" name="message" rows="5" required></textarea>\u003Cbr>\n      </div>\u003Cbr>\n      <button class="btn" type="submit">Gönder</button>\u003Cbr>\n    </form>\u003Cbr>\n  </div>\u003Cbr>\n</body>\u003Cbr>\n</html>\n\u003C/blockquote>\n\u003Ch3>styles.css\u003C/h3>\n\u003Cblockquote>\n:root {\u003Cbr>\n  --max: 1100px;\u003Cbr>\n  --gap: 16px;\u003Cbr>\n  --radius: 14px;\u003Cbr>\n  --text: #111;\u003Cbr>\n  --muted: #555;\u003Cbr>\n  --bg: #fff;\u003Cbr>\n  --surface: #f5f5f7;\u003Cbr>\n  --accent: #2f6fed;\u003Cbr>\n}\u003Cbr>\n* { box-sizing: border-box; }\u003Cbr>\nbody { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.5; color: var(--text); background: var(--bg); }\u003Cbr>\nimg { max-width: 100%; height: auto; display: block; }\u003Cbr>\n.container { max-width: var(--max); margin: 0 auto; padding: 0 16px; }\u003Cbr>\n\u003Cbr>\n.topbar { border-bottom: 1px solid #e6e6ea; background: #fff; }\u003Cbr>\n.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }\u003Cbr>\n.brand { color: var(--text); text-decoration: none; font-weight: 700; }\u003Cbr>\n.menu { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }\u003Cbr>\n.menu a { color: var(--muted); text-decoration: none; }\u003Cbr>\n.menu a:hover { text-decoration: underline; }\u003Cbr>\n\u003Cbr>\n.hero { padding: 40px 0; background: var(--surface); }\u003Cbr>\n.hero__inner { display: flex; flex-direction: column; gap: 20px; }\u003Cbr>\n.hero__copy h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }\u003Cbr>\n.hero__copy p { margin: 10px 0 0; color: var(--muted); }\u003Cbr>\n.btn { display: inline-block; margin-top: 16px; padding: 10px 14px; background: var(--accent); color: #fff; text-decoration: none; border-radius: 999px; border: 0; font: inherit; }\u003Cbr>\n.media { border-radius: var(--radius); overflow: hidden; }\u003Cbr>\n.media img { width: 100%; height: 100%; object-fit: cover; }\u003Cbr>\n\u003Cbr>\n.grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin: 16px 0 40px; }\u003Cbr>\n.card { background: var(--surface); border-radius: var(--radius); padding: 16px; }\u003Cbr>\n.card h3 { margin: 0; }\u003Cbr>\n.card p { margin: 10px 0 0; color: var(--muted); }\u003Cbr>\n\u003Cbr>\n.form { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin: 16px 0 40px; }\u003Cbr>\n.field { display: grid; gap: 6px; }\u003Cbr>\nlabel { font-weight: 600; }\u003Cbr>\ninput, textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid #d9d9e0; }\u003Cbr>\n\u003Cbr>\n@media (min-width: 700px) {\u003Cbr>\n  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\u003Cbr>\n}\u003Cbr>\n@media (min-width: 900px) {\u003Cbr>\n  .hero__inner { flex-direction: row; align-items: center; }\u003Cbr>\n  .menu { gap: 16px; }\u003Cbr>\n  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }\u003Cbr>\n  .field--full { grid-column: 1 / -1; }\u003Cbr>\n}\u003Cbr>\n@media (min-width: 1000px) {\u003Cbr>\n  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\u003Cbr>\n}\n\u003C/blockquote>\n\u003Cp>Bu şablonu temel alıp içeriklerinizi, renklerinizi ve kırılma noktalarınızı ihtiyacınıza göre güncelleyebilirsiniz.\u003C/p>","HTML ve CSS ile mobile-first responsive başlangıç sayfası oluşturun: meta viewport, Flexbox, Grid, hero alanı, kart ızgarası, navigasyon, form ve görseller.","responsive başlangıç sayfası, HTML CSS responsive, mobile-first, meta viewport, Flexbox örnek, CSS Grid örnek, kart ızgarası, responsive navigasyon, responsive form, responsive images, srcset sizes","responsive-baslangic-sayfasi-html-ve-css-ile-5-mini-ornek","2026-03-09T09:53:42.000Z",{"id":15,"title":16,"slug":17},203,"HTML & CSS Mini Örnekleri","html-css-mini-ornekleri",{"id":19,"name":20,"nickname":21,"slug":22},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/62d6ed1b4c8841735f0ccc9b5f8ce1bc.jpg","/media/blog/62d6ed1b4c8841735f0ccc9b5f8ce1bc_thumb.jpg","/media/blog/62d6ed1b4c8841735f0ccc9b5f8ce1bc.webp","/media/blog/62d6ed1b4c8841735f0ccc9b5f8ce1bc_thumb.webp",null,{"minutes":29,"wordCount":30,"imageCount":31,"formatted":32},16,3147,0,"16 dk okuma süresi","/blog/html-css-mini-ornekleri/responsive-baslangic-sayfasi-html-ve-css-ile-5-mini-ornek",[],["Reactive",36],{"title":7,"subTitle":16,"image":23},["Reactive",38],{"title":7,"meta":39,"link":74},[40,42,44,47,50,53,56,59,62,65,68,70,72],{"hid":41,"name":41,"content":10},"description",{"hid":43,"name":43,"content":11},"keywords",{"hid":45,"name":45,"content":46},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":48,"name":48,"content":49},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":51,"property":51,"content":52},"og:type","website",{"hid":54,"property":54,"content":55},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":57,"property":57,"content":58},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":60,"property":60,"content":61},"og:image","https://kodogreniyorum.com/media/blog/62d6ed1b4c8841735f0ccc9b5f8ce1bc.jpg",{"hid":63,"property":63,"content":64},"og:url","https://kodogreniyorum.com/blog/html-css-mini-ornekleri/responsive-baslangic-sayfasi-html-ve-css-ile-5-mini-ornek",{"hid":66,"name":66,"content":67},"twitter:card","summary_large_image",{"hid":69,"name":69,"content":55},"twitter:title",{"hid":71,"name":71,"content":58},"twitter:description",{"hid":73,"name":73,"content":61},"twitter:image",[75,77],{"rel":76,"href":64},"canonical",{"rel":78,"href":79},"amphtml","https://amp.kodogreniyorum.com/blog/html-css-mini-ornekleri/responsive-baslangic-sayfasi-html-ve-css-ile-5-mini-ornek",["Reactive",81],{"@context":82,"@graph":83},"https://schema.org",[84,97],{"@type":85,"headline":7,"image":61,"author":86,"publisher":89,"datePublished":13,"dateModified":13,"mainEntityOfPage":95,"description":10},"BlogPosting",{"@type":87,"name":20,"url":88},"Person","https://kodogreniyorum.com/yazarlar/mert-kilicoglu",{"@type":90,"name":46,"logo":91},"Organization",{"@type":92,"url":93,"width":94,"height":94},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":96,"@id":64},"WebPage",{"@type":98,"itemListElement":99},"BreadcrumbList",[100,105,109,112],{"@type":101,"position":102,"name":103,"item":104},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":101,"position":106,"name":107,"item":108},2,"Blog","https://kodogreniyorum.com/blog",{"@type":101,"position":110,"name":16,"item":111},3,"https://kodogreniyorum.com/blog/html-css-mini-ornekleri",{"@type":101,"position":113,"name":7,"item":64},4]