href=" https://fonts.googleapis.com/css2?family=Rubik: wght@400;500;600;700&display=swap"
 rel="stil sayfası"
 />

Pawfect🐾








instagram viewer







 Kuzey Karolina'da Evcil Hayvan Bakım Hizmeti




 Zaman tükeniyor? Daha fazla konuşma. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo varsayınnda facere?

Çıktı:

Şimdi navigasyon menüsüne ve kahraman bölümüne stil verme zamanı.

Genel CSS

Genel CSS stilini sayfanızın en üstüne ekleyin. stil.css dosya. Kahraman bölümünün bir arka plan resmi vardır. Yapabilirsiniz GitHub'daki resimler de dahil olmak üzere kodun tamamına erişinveya kendi resminizi kullanın.

* {
 kenar boşluğu: 0;
 dolgu: 0;
 kutu boyutlandırma: kenarlık kutusu;
}
html {
/* 10 piksel / 16 piksel = 0,625 =62,5*/
 yazı tipi boyutu: %62,5;
 taşma-x: gizli;
 kaydırma davranışı: pürüzsüz;
}
gövde {
 yazı tipi ailesi: 'Rubik', sans-serif;
 satır yüksekliği: 1.5;
 yazı tipi boyutu: 1.5rem;
 yazı tipi ağırlığı: 400;
 taşma-x: gizli;
 renk: #523414;
 arka plan rengi: #e9be5a;
}
.başlık-birincil,
.başlık-ikincil,
.heading-üçüncül {
 yazı tipi ağırlığı: 700;
 renk: #523414;
 harf aralığı: -0.5 piksel;
}
.heading-birincil {
 yazı tipi boyutu: 5.2rem;
 satır yüksekliği: 1.05;
 kenar boşluğu-alt: 3.2rem;
}
.heading-ikincil {
 yazı tipi boyutu: 4.4rem;
 satır yüksekliği: 1.2;
 kenar boşluğu-alt: 5.6rem;
 metin hizalama: merkez;
}
.heading-üçüncül {
 yazı tipi boyutu: 3rem;
 satır yüksekliği: 1.2;
 marj: 1.2rem;
}
a {
 metin-dekorasyon: yok;
}
.ilk kat {
 arka plan resmi: url(img/Pawfect-bg.png);
 min-yükseklik: 80rem;
}

Gezinti Çubuğunu Şekillendirme

Kullanmak CSS esnek kutusu Arka arkaya logo ve gezinme menülerini ayarlamak için. Ayarlamak arka plan rengi şeffaf hale getirmek ve bir sınır yarıçapı nın-nin 9 piksel Harekete Geçirici Mesaj (CTA) düğmesine basın.

Gezinti Çubuğu CSS'si

/* ****************** */
/* Logo */
/* ****************** */
.başlık {
 ekran: esnek;
 justify-content: boşluk-arasında;
 hizalama öğeleri: merkez;
 arka plan rengi: şeffaf;
 yükseklik: 9.6rem;
 dolgu: 0 4.8rem;
}
.logo {
 yükseklik: 2.2rem;
 yazı tipi boyutu: 3.6rem;
 metin-dekorasyon: yok;
 metin hizalama: merkez;
 yazı tipi ağırlığı: kalın;
 renk: #462d12;
}
/* ****************** */
/* Navigasyon */
/* ****************** */
.main-nav-listesi {
 liste stili: yok;
 ekran: esnek;
 hizalama öğeleri: merkez;
 boşluk: 4.8rem;
}
.main-nav-bağlantısı {
 ekran: satır içi blok;
 metin-dekorasyon: yok;
 renk: #462d12;
 yazı tipi ağırlığı: 400;
 yazı tipi boyutu: 1.8rem;
}
.main-nav-link.nav-cta {
 dolgu: 1.2rem 2.4rem;
 sınır yarıçapı: 9 piksel;
 renk: #fff;
 arka plan rengi: #523414;
}

Çıktı:

İlişkili: HTML ve CSS Kullanarak Duyarlı Gezinme Çubuğu Nasıl Oluşturulur

Kahraman Bölümünü Şekillendirme

Bir maksimum genişlik ana başlık ve açıklamanın iç içe geçtiği kahraman sınıfında. Aksi takdirde sol tarafta kalmak yerine sonuna kadar uzayacaktır. Yı kur yazı Boyutu ve dolgu malzemesi ihtiyacınıza göre.

Kahraman Bölümü CSS

/* ****************** */
/* Kahraman bölümü */
/* ****************** */
.section-kahraman {
 dolgu: 15rem 0 9.6rem;
}
.kahraman {
 maksimum genişlik: 75rem;
 dolgu: 0 9.6rem;
 hizalama öğeleri: sol;
}
.hero-açıklaması {
 yazı tipi boyutu: 2rem;
 satır yüksekliği: 1,6;
 marj: 4.8rem 0;
}

Çıktı:

Hizmetler Bölümünü Oluşturma

Site dört hizmet sunar: tam bakım, self servis köpek yıkama, yıkama ve fön ile vücut ve pençe masajı.

Hizmetler Bölümü HTML'si

Ebeveyn oluştur sınıf=”şebeke hizmetleri” ve kullanarak dört hizmeti de ekleyin. Resmi, hizmet adını ve bunun küçük bir açıklamasını ekleyin.

hizmetlerimiz






Tam Tımar

Lorem ipsum conectetur adipisicing elit.







Self Servis Köpek Yıkama

Odit aliquam dolor ex doloremque sed itaque.







Yıkayın ve Fön

Voluptatem suscipit ut omnis quas saepe.







Vücut ve Pençe Masajı

Sapiente quos qui hic porro voluptatibus impedit.

Hizmetler Bölümü CSS

İki eşit sütunlu bir ızgara oluşturun ve açıklık ile 4rem. Tümünü ayarla ızgara öğeleri merkezde ve resmi ayarlayın Genişlik orijinal boyutunun %80'ine kadar.

/* ****************** */
/* Hizmetlerimiz */
/* ****************** */
.hizmetlerimiz {
 dolgu: 9.6rem 0;
}
.konteyner {
 maksimum genişlik: 120rem;
 kenar boşluğu: 0 otomatik;
 dolgu: 1.5rem 3.2rem;
}
.Kafes {
 ekran: ızgara;
 ızgara şablonu sütunları: 1fr 1fr;
 boşluk: 4rem;
 hizalama öğeleri: merkez;
 haklı içerik: merkez;
 metin hizalama: merkez;
}
.services resmi {
 genişlik: %80;
 sınır yarıçapı: 9 piksel;
}

Çıktı:

Hakkında Bölümünü Oluşturma

Hakkında bölümünde bir resim ve ekip hakkında kısa bilgiler içeren bir metin kutusu bulunur.

Bölüm HTML'si Hakkında

Oluşturmak 
 ve resmi ve metni içine yerleştirin. 








Hakkımızda


 Lorem ipsum dolor sit amet conectetur adipisicing elit. yarı
 officiis, perferendis iure possimus dolor aspernatur incidunt rem
 ipsa, conectetur temporibus dolor ea? Tenetur nobis emek
 dolor perspiciatis aspernatur olay yerinde rem placeat quis varsaynda
 vecize!

Bölüm CSS Hakkında

Görüntüye ve metin kutusuna CSS Izgarasını kullanarak stil verin ve bir Düşen gölge daha çekici hale getirmek için. Kullanın negatif marj Resmin üstündeki metin kutusunu ayarlamak için.

/* ****************** */
/* Hakkımızda */
/* ****************** */
.grid-hakkında {
 ızgara şablonu sütunları: 1.2fr 0.8fr;
 boşluk: 0;
}
.hakkında {
 dolgu: 2rem 0 7rem 0;
}
.img hakkında {
 genişlik: %98;
 kendini haklı çıkar: son;
 sınır yarıçapı: 9 piksel;
}
.hakkında p {
 yazı tipi boyutu: 2.2rem;
}
.Metin {
 maksimum genişlik: 45rem;
 arka plan rengi: #e7ac21;
 dolgu: 10rem 5rem;
 sol kenar boşluğu: -5rem;
 sınır yarıçapı: 9 piksel;
}
.text h2 {
 kenar boşluğu-alt: 4.5rem;
 metin hizalama: merkez;
}

Çıktı:

Bir web sitesinin alt bilgisi ziyaretçilerin zihninde kalıcı bir izlenim bırakır, bu nedenle sitenin temiz ve iyi organize edilmiş olduğundan emin olun.

Ziyaretçilere teşekkür ederek birincil bir başlık ekleyin. © için bir HTML varlığıdır © sembol.

Altbilgiye farklı bir stil vererek stil verin arka plan rengi ve uygun ayar dolgu malzemesi.

/* ****************** */
/* Altbilgi */
/* ****************** */
altbilgi {
 metin hizalama: merkez;
 arka plan rengi: #e7ac21;
 dolgu: 2.5rem;
}

Çıktı:

Son Pawfect web sitesini görüntüleyebilirsiniz bu bağlantıyı takip ederek.

Web Sitenizi Yayınlayın

Tebrikler, HTML ve CSS kullanarak sıfırdan eksiksiz bir web sitesi oluşturdunuz! Web sitenizi yayınlama ve topluluktan geri bildirim alma zamanı. Umarız siteyi yapma sürecinden keyif almışsınızdır. Barındırma konusunda yeniyseniz, GitHub Sayfalarını kullanarak bir web sitesini ücretsiz olarak nasıl barındıracağınıza bir göz atın.

Naincy Mourya (19 Makale Yayınlandı)

Naincy, son derece duyarlı web siteleri ve web kopyaları ile birlikte verimli içerik stratejisi oluşturma konusunda uzmanlaşmıştır. Trend olan teknolojileri yakından takip eden serbest çalışan bir teknoloji yazarıdır.

Naincy Mourya'dan Daha Fazla