href=" https://fonts.googleapis.com/css2?family=Rubik: wght@400;500;600;700&display=zamień"
 rel="arkusz stylów"
 />

Pawfect🐾










 Usługi pielęgnacji domu dla zwierząt w Północnej Karolinie



instagram viewer



 Czas się kończy? Nie mów nic więcej. Vęże pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo zakładanda facere?

Wyjście:

Teraz nadszedł czas na stylizację menu nawigacyjnego i sekcji bohatera.

Ogólne CSS

Dodaj ogólny styl CSS u góry swojego styl.css plik. Sekcja bohatera ma obraz w tle. Możesz dostęp do pełnego kodu wraz z obrazami na GitHublub użyj własnego obrazu.

* {
 margines: 0;
 wypełnienie: 0;
 rozmiar pudełka: obramowanie-pudełko;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 rozmiar czcionki: 62,5%;
 przepełnienie-x: ukryte;
 zachowanie przewijania: gładkie;
}
ciało {
 rodzina czcionek: 'Rubik', bezszeryfowa;
 wysokość linii: 1,5;
 rozmiar czcionki: 1,5 rem;
 grubość czcionki: 400;
 przepełnienie-x: ukryte;
 kolor: #523414;
 kolor tła: #e9be5a;
}
.heading-primary,
.nagłówek-średni,
.nagłówek-trzeciorzędny {
 grubość czcionki: 700;
 kolor: #523414;
 odstępy między literami: -0,5px;
}
.heading-primary {
 rozmiar czcionki: 5.2rem;
 wysokość linii: 1,05;
 marża-dolna: 3,2 rem;
}
. nagłówek drugorzędny {
 rozmiar czcionki: 4.4rem;
 wysokość linii: 1,2;
 margines-dolny: 5,6 rem;
 wyrównanie tekstu: środek;
}
.nagłówek-trzeciorzędny {
 rozmiar czcionki: 3rem;
 wysokość linii: 1,2;
 marża: 1,2 rem;
}
a {
 dekoracja tekstu: brak;
}
.pierwsze złożenie {
 obraz w tle: url(img/Pawfect-bg.png);
 min-wysokość: 80rem;
}

Stylizacja paska nawigacyjnego

Posługiwać się Flexbox CSS aby dostosować logo i menu nawigacyjne z rzędu. Ustawić kolor tła przejrzyście i daj promień-granicy z 9px do przycisku wezwania do działania (CTA).

Pasek nawigacyjny CSS

/* ****************** */
/* Logo */
/* ****************** */
.nagłówek {
 wyświetlacz: elastyczny;
 uzasadnienie-treść: spacja-między;
 wyrównaj-elementy: środek;
 kolor tła: przezroczysty;
 wysokość: 9,6 rem;
 wypełnienie: 0 4,8rem;
}
.logo {
 wysokość: 2,2rem;
 rozmiar czcionki: 3,6 rem;
 dekoracja tekstu: brak;
 wyrównanie tekstu: środek;
 grubość czcionki: pogrubiona;
 kolor: #462d12;
}
/* ****************** */
/* Nawigacja */
/* ****************** */
.główna-lista-nawigacyjna {
 styl listy: brak;
 wyświetlacz: elastyczny;
 wyrównaj-elementy: środek;
 szczelina: 4,8 rem;
}
.główny-link-nawigacyjny {
 wyświetlacz: inline-block;
 dekoracja tekstu: brak;
 kolor: #462d12;
 grubość czcionki: 400;
 rozmiar czcionki: 1,8 rem;
}
.główny-link-nav.nav-cta {
 wyściółka: 1.2rem 2.4rem;
 promień obramowania: 9px;
 kolor: #fff;
 kolor tła: #523414;
}

Wyjście:

Związane z: Jak zbudować responsywny pasek nawigacyjny za pomocą HTML i CSS?

Stylizacja sekcji bohaterów

Ustaw maksymalna szerokość w klasie bohatera zagnieżdżającej główny nagłówek i opis. W przeciwnym razie rozciągnie się do końca, zamiast pozostawać po lewej stronie. Ustaw rozmiar czcionki oraz wyściółka zgodnie z Twoimi wymaganiami.

Sekcja bohaterów CSS

/* ****************** */
/* Sekcja bohaterów */
/* ****************** */
.sekcja-bohater {
 wypełnienie: 15rem 0 9,6rem;
}
.bohater {
 maksymalna szerokość: 75rem;
 wypełnienie: 0 9.6rem;
 wyrównaj-elementy: lewe;
}
.hero-opis {
 rozmiar czcionki: 2rem;
 wysokość linii: 1,6;
 marża: 4,8rem 0;
}

Wyjście:

Budowanie Sekcji Usług

Witryna oferuje cztery usługi: pełną pielęgnację, samoobsługowe mycie psa, pranie i suszenie oraz masaż ciała i łap.

Sekcja usług HTML

Utwórz rodzica class=”usługi sieciowe” i dodaj wszystkie cztery usługi za pomocą. Dodaj obraz, nazwę usługi i krótki jej opis.

Nasze Usługi






Pełna pielęgnacja

Lorem ipsum consectetur adipisicing elita.







Samoobsługowe mycie psów

Odit aliquam dolor ex doloremque sed itaque.







Pranie i suszenie na sucho

Voluptatem suscipit ut omnis quas saepe.







Masaż ciała i łap

Sapiente quos qui hic porro voluptatibus impedit.

Sekcja usług CSS

Utwórz siatkę z dwoma równymi kolumnami i ustaw Luka do 4rem. Dostosuj wszystkie elementy-siatki na środku i ustaw obraz szerokość do 80% oryginalnego rozmiaru.

/* ****************** */
/* Nasze Usługi */
/* ****************** */
.Nasze Usługi {
 wypełnienie: 9,6rem 0;
}
.pojemnik {
 maksymalna szerokość: 120rem;
 margines: 0 auto;
 wypełnienie: 1,5 rem 3,2 rem;
}
.krata {
 wyświetlacz: siatka;
 kolumny szablonu siatki: 1fr 1fr;
 odstęp: 4rem;
 wyrównaj-elementy: środek;
 uzasadnić-treść: centrum;
 wyrównanie tekstu: środek;
}
obraz usług. {
 szerokość: 80%;
 promień obramowania: 9px;
}

Wyjście:

Budowanie sekcji Informacje

Sekcja Informacje będzie zawierała obraz i pole tekstowe z krótkimi informacjami o zespole.

Informacje o sekcji HTML

Stwórz 
 i umieść w nim obraz i tekst. 








O nas


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
 officiis, perferendis iure possimus dolor aspernatur incidunt rem
 ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
 dolor perspiciatis aspernatur incidunt rem placeat quis zakładanda
 dyktować!

O sekcji CSS

Stylizuj obraz i pole tekstowe za pomocą CSS Grid i dodaj a cień aby była bardziej atrakcyjna. Użyć ujemna marża aby ustawić pole tekstowe nad obrazem.

/* ****************** */
/* O nas */
/* ****************** */
.siatka-o {
 kolumny szablonu siatki: 1,2 fr 0,8 fr;
 odstęp: 0;
}
.o {
 wypełnienie: 2rem 0 7rem 0;
}
.o obrazie {
 szerokość: 98%;
 uzasadnić siebie: koniec;
 promień obramowania: 9px;
}
.o p {
 rozmiar czcionki: 2,2rem;
}
.tekst {
 maksymalna szerokość: 45rem;
 kolor tła: #e7ac21;
 wypełnienie: 10rem 5rem;
 margines lewy: -5rem;
 promień obramowania: 9px;
}
.tekst h2 {
 margines-dolny: 4,5 rem;
 wyrównanie tekstu: środek;
}

Wyjście:

Stopka witryny pozostawia niezatarte wrażenie w umysłach odwiedzających, więc upewnij się, że jest czysta i dobrze zorganizowana.

Dodaj główny nagłówek z podziękowaniem dla odwiedzających. © jest encją HTML dla © symbol.

Stylizuj stopkę, nadając jej inny styl kolor tła i ustawienie odpowiednie wyściółka.

/* ****************** */
/* Stopka */
/* ****************** */
stopka {
 wyrównanie tekstu: środek;
 kolor tła: #e7ac21;
 wyściółka: 2,5rem;
}

Wyjście:

Możesz zobaczyć ostateczną stronę Pawfect klikając ten link.

Opublikuj swoją witrynę

Gratulacje, stworzyłeś kompletną stronę internetową od podstaw używając HTML i CSS! Nadszedł czas, aby opublikować swoją witrynę i uzyskać informacje zwrotne od społeczności. Mamy nadzieję, że podobał Ci się proces tworzenia strony. Jeśli dopiero zaczynasz hosting, zobacz, jak bezpłatnie hostować witrynę za pomocą GitHub Pages.

Naincy Mourya (19 opublikowanych artykułów)

Naincy specjalizuje się w budowaniu wysoce responsywnych stron internetowych oraz efektywnej strategii treści wraz z kopiami internetowymi. Jest niezależnym pisarzem technicznym, który bacznie obserwuje trendy w technologiach.

Więcej od Naincy Mouryi