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

Pawfect🐾










 Layanan Perawatan Rumah Hewan Peliharaan di Carolina Utara




 Kehabisan waktu? Jangan katakan lagi. Veniome Pawfect ea fugiat itique, aut unde ratione veniam ipsum temporibus cumque sunt nemo asumsinda facere?

Keluaran:

Sekarang saatnya untuk menata menu navigasi dan bagian pahlawan.

CSS Umum

Tambahkan gaya CSS umum di bagian atas. Anda style.css mengajukan. Bagian pahlawan memiliki gambar latar belakang. Kamu bisa akses kode lengkap termasuk gambar di GitHub, atau gunakan gambar Anda sendiri.

* {
 margin: 0;
 bantalan: 0;
 ukuran kotak: kotak perbatasan;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 ukuran font: 62,5%;
 overflow-x: tersembunyi;
 gulir-perilaku: halus;
}
tubuh {
 font-family: 'Rubik', sans-serif;
 tinggi garis: 1,5;
 ukuran font: 1.5rem;
 font-berat: 400;
 overflow-x: tersembunyi;
 warna: #523414;
 warna latar: #e9be5a;
}
.heading-primer,
.heading-sekunder,
.heading-tersier {
 font-berat: 700;
 warna: #523414;
 spasi huruf: -0.5px;
}
.heading-primer {
 ukuran font: 5.2rem;
 tinggi garis: 1,05;
 margin-bawah: 3.2rem;
}
.heading-sekunder {
 ukuran font: 4.4rem;
 tinggi garis: 1.2;
 margin-bawah: 5.6rem;
 perataan teks: tengah;
}
.heading-tersier {
 ukuran font: 3rem;
 tinggi garis: 1.2;
 margin: 1.2rem;
}
sebuah {
 dekorasi teks: tidak ada;
}
.lipatan pertama {
 gambar latar: url(img/Pawfect-bg.png);
 min-tinggi: 80rem;
}

Menata Bilah Navigasi

Menggunakan kotak fleksibel CSS untuk mengatur logo dan menu navigasi secara berurutan. Mengatur warna latar belakang untuk transparan dan memberikan radius batas dari 9px ke tombol Ajakan Bertindak (CTA).

CSS Bilah Navigasi

/* ****************** */
/* Logo */
/* ****************** */
.header {
 tampilan: fleksibel;
 justify-content: ruang-antara;
 align-item: tengah;
 warna latar: transparan;
 tinggi: 9,6rem;
 bantalan: 0 4.8rem;
}
.logo {
 tinggi: 2.2rem;
 ukuran font: 3.6rem;
 dekorasi teks: tidak ada;
 perataan teks: tengah;
 font-berat: tebal;
 warna: #462d12;
}
/* ****************** */
/* Navigasi */
/* ****************** */
.main-nav-list {
 gaya daftar: tidak ada;
 tampilan: fleksibel;
 align-item: tengah;
 celah: 4.8rem;
}
.main-nav-link {
 tampilan: blok sebaris;
 dekorasi teks: tidak ada;
 warna: #462d12;
 font-berat: 400;
 ukuran font: 1.8rem;
}
.main-nav-link.nav-cta {
 bantalan: 1.2rem 2.4rem;
 batas-radius: 9px;
 warna: #ff;
 warna latar: #523414;
}

Keluaran:

Terkait: Cara Membuat Bilah Navigasi Responsif Menggunakan HTML dan CSS

Menata Bagian Pahlawan

Setel a lebar maksimum pada kelas pahlawan yang menyarangkan judul dan deskripsi utama. Jika tidak, itu akan meluas ke ujung alih-alih tetap di sisi kiri. Mengatur ukuran huruf dan lapisan sesuai dengan kebutuhan Anda.

CSS Bagian Pahlawan

/* ****************** */
/* Bagian Pahlawan */
/* ****************** */
.bagian-pahlawan {
 bantalan: 15rem 0 9.6rem;
}
.pahlawan {
 lebar maksimum: 75rem;
 bantalan: 0 9.6rem;
 align-item: kiri;
}
.hero-deskripsi {
 ukuran font: 2rem;
 tinggi garis: 1.6;
 margin: 4.8rem 0;
}

Keluaran:

Membangun Bagian Layanan

Situs ini menyediakan empat layanan: perawatan lengkap, cuci anjing mandiri, cuci & keringkan, dan pijat tubuh dan kaki.

Bagian Layanan HTML

Buat orang tua class="layanan jaringan" dan tambahkan keempat layanan menggunakan. Tambahkan gambar, nama layanan, dan sedikit deskripsi tentangnya.

pelayanan kami






Perawatan Lengkap

Lorem ipsum consectetur adipisicing elit.







Pencucian Anjing Layanan Mandiri

Odit aliquam dolor ex doloremque sed itique.







Cuci & Keringkan

Voluptatem suscipit ut omnis quas saepe.







Pijat Tubuh dan Kaki

Sapiente quos qui hic porro voluptatibus impedit.

CSS Bagian Layanan

Buat kisi dengan dua kolom yang sama dan atur celah ke 4 rem. Sesuaikan semua grid-item di tengah dan atur gambar lebar hingga 80% dari ukuran aslinya.

/* ****************** */
/* Pelayanan kami */
/* ****************** */
.pelayanan kami {
 bantalan: 9,6rem 0;
}
.wadah {
 lebar maks: 120rem;
 margin: 0 otomatis;
 bantalan: 1.5rem 3.2rem;
}
.kisi {
 tampilan: kisi;
 grid-templat-kolom: 1fr 1fr;
 celah: 4rem;
 align-item: tengah;
 justify-content: pusat;
 perataan teks: tengah;
}
.layanan img {
 lebar: 80%;
 batas-radius: 9px;
}

Keluaran:

Membangun Bagian Tentang

Bagian Tentang akan memiliki gambar dan kotak teks dengan beberapa informasi singkat tentang tim.

Tentang Bagian HTML

Membuat 
 dan tempatkan gambar dan teks di dalamnya. 








Tentang kami


 Lorem ipsum dolor sit amet consectetur adipisicing elit. semu
 officis, perferendis iure possimus dolor aspernatur insiden rem
 ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
 dolor perspiciatis aspernatur insiden rem placeat quis asumsinda
 dikte!

Tentang Bagian CSS

Gaya gambar dan kotak teks menggunakan CSS Grid dan tambahkan a bayangan untuk membuatnya lebih menarik. Gunakan margin negatif untuk mengatur kotak teks di atas gambar.

/* ****************** */
/* Tentang kami */
/* ****************** */
.kisi-tentang {
 grid-templat-kolom: 1.2fr 0.8fr;
 celah: 0;
}
.tentang {
 bantalan: 2rem 0 7rem 0;
}
.tentang img {
 lebar: 98%;
 membenarkan-diri: akhir;
 batas-radius: 9px;
}
.tentang p {
 ukuran font: 2.2rem;
}
.teks {
 lebar maksimum: 45rem;
 warna latar: #e7ac21;
 bantalan: 10rem 5rem;
 margin-kiri: -5rem;
 batas-radius: 9px;
}
.teks h2 {
 margin-bawah: 4,5rem;
 perataan teks: tengah;
}

Keluaran:

Footer situs web meninggalkan kesan abadi di benak pengunjung, jadi pastikan itu bersih dan tertata dengan baik.

Tambahkan judul utama yang mengucapkan terima kasih kepada pengunjung. © adalah entitas HTML untuk © simbol.

Gaya footer dengan memberikan yang berbeda warna latar belakang dan pengaturan yang sesuai lapisan.

/* ****************** */
/* Footer */
/* ****************** */
catatan kaki {
 perataan teks: tengah;
 warna latar: #e7ac21;
 bantalan: 2.5rem;
}

Keluaran:

Anda dapat melihat situs web Pawfect terakhir dengan mengikuti tautan ini.

Publikasikan Situs Web Anda

Selamat, Anda telah membuat situs web lengkap dari awal menggunakan HTML dan CSS! Saatnya untuk mempublikasikan situs web Anda dan mendapatkan umpan balik dari komunitas. Kami harap Anda menikmati proses pembuatan situs ini. Jika Anda baru mengenal hosting, lihat cara menghosting situs web secara gratis menggunakan GitHub Pages.

Naincy Mourya (19 Artikel Diterbitkan)

Naincy mengkhususkan diri dalam membangun situs web yang sangat responsif dan strategi konten yang efisien bersama dengan salinan web. Dia adalah seorang penulis teknologi lepas yang mengawasi dengan tajam teknologi yang sedang tren.

More From Naincy Mourya