href=" https://fonts.googleapis.com/css2?family=Rubik: peso@400;500;600;700&display=scambio"
 rel="foglio di stile"
 />

Pawfect🐾










 Servizio di toelettatura per animali domestici in North Carolina




 Tempo scaduto? Non dire più niente. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

Produzione:

Ora è il momento di dare uno stile al menu di navigazione e alla sezione degli eroi.

CSS generale

Aggiungi lo stile CSS generale nella parte superiore del tuo stile.css file. La sezione degli eroi ha un'immagine di sfondo. Puoi accedi al codice completo comprese le immagini su GitHubo usa la tua immagine.

* {
 margine: 0;
 imbottitura: 0;
 box-size: border-box;
}
html {
/* 10 pixel / 16 pixel = 0,625 = 62,5*/
 dimensione del carattere: 62,5%;
 overflow-x: nascosto;
 comportamento di scorrimento: liscio;
}
corpo {
 font-family: 'Rubik', sans-serif;
 altezza della linea: 1,5;
 dimensione del carattere: 1,5 rem;
 peso del carattere: 400;
 overflow-x: nascosto;
 colore: #523414;
 colore di sfondo: #e9be5a;
}
.intestazione-primaria,
.intestazione-secondaria,
.intestazione-terziario {
 peso del carattere: 700;
 colore: #523414;
 spaziatura tra lettere: -0,5 px;
}
.heading-primary {
 dimensione del carattere: 5.2rem;
 altezza della linea: 1,05;
 margine inferiore: 3.2rem;
}
.intestazione-secondaria {
 dimensione del carattere: 4.4rem;
 altezza della linea: 1.2;
 margine inferiore: 5.6rem;
 allineamento del testo: centro;
}
.intestazione-terziario {
 dimensione del carattere: 3rem;
 altezza della linea: 1.2;
 margine: 1.2rem;
}
un {
 decorazione del testo: nessuna;
}
.prima piega {
 immagine di sfondo: url(img/Pawfect-bg.png);
 altezza minima: 80rem;
}

Disegnare la barra di navigazione

Uso Flexbox CSS per regolare il logo e i menu di navigazione di seguito. Impostato colore di sfondo trasparente e dare un raggio di confine di 9px al pulsante Call-To-Action (CTA).

Barra di navigazione CSS

/* ****************** */
/* Logo */
/* ****************** */
.intestazione {
 display: flessibile;
 giustificare-contenuto: spazio-tra;
 allinea-oggetti: centro;
 colore di sfondo: trasparente;
 altezza: 9.6rem;
 imbottitura: 0 4.8rem;
}
.logo {
 altezza: 2.2rem;
 dimensione del carattere: 3.6rem;
 decorazione del testo: nessuna;
 allineamento del testo: centro;
 font-weight: grassetto;
 colore: #462d12;
}
/* ****************** */
/* Navigazione */
/* ****************** */
.main-nav-list {
 stile elenco: nessuno;
 display: flessibile;
 allinea-oggetti: centro;
 distanza: 4.8rem;
}
.main-nav-link {
 display: blocco in linea;
 decorazione del testo: nessuna;
 colore: #462d12;
 peso del carattere: 400;
 dimensione del carattere: 1,8 rem;
}
.main-nav-link.nav-cta {
 imbottitura: 1.2rem 2.4rem;
 raggio di confine: 9px;
 colore: #fff;
 colore di sfondo: #523414;
}

Produzione:

Imparentato: Come costruire una barra di navigazione reattiva usando HTML e CSS

Disegnare la sezione Eroe

Imposta un larghezza massima sulla classe dell'eroe annidando l'intestazione e la descrizione primarie. Altrimenti, si estenderà fino alla fine invece di rimanere sul lato sinistro. Impostare il dimensione del font e imbottitura secondo il vostro requisito.

Sezione Eroe CSS

/* ****************** */
/* Sezione Eroi */
/* ****************** */
.sezione-eroe {
 imbottitura: 15rem 0 9.6rem;
}
.eroe {
 larghezza massima: 75 rem;
 imbottitura: 0 9.6rem;
 allinea-oggetti: sinistra;
}
.descrizione-eroe {
 dimensione del carattere: 2rem;
 altezza della linea: 1.6;
 margine: 4.8rem 0;
}

Produzione:

Costruire la Sezione Servizi

Il sito offre quattro servizi: toelettatura completa, lavaggio del cane self-service, lavaggio e asciugatura e massaggio del corpo e delle zampe.

Sezione Servizi HTML

Crea un genitore class=”servizi di rete” e aggiungi tutti e quattro i servizi usando. Aggiungi l'immagine, il nome del servizio e una piccola descrizione.

I nostri servizi






Toelettatura completa

Lorem ipsum consectetur adipisicing elit.







Lavaggio per cani self-service

Odit aliquam dolor ex doloremque sed itaque.







Lava e asciuga con il phon

Voluptatem suscipit ut omnis quas saepe.







Massaggio corpo e zampe

Sapiente quos qui hic porro voluptatibus impedit.

Sezione Servizi CSS

Crea una griglia con due colonne uguali e imposta il spacco a 4rem. Regola tutti i elementi della griglia al centro e imposta l'immagine larghezza all'80% della dimensione originale.

/* ****************** */
/* I nostri servizi */
/* ****************** */
.I nostri servizi {
 imbottitura: 9.6rem 0;
}
.contenitore {
 larghezza massima: 120rem;
 margine: 0 automatico;
 imbottitura: 1.5rem 3.2rem;
}
.griglia {
 visualizzazione: griglia;
 colonne-modello-griglia: 1fr 1fr;
 distanza: 4rem;
 allinea-oggetti: centro;
 giustificare-contenuto: centro;
 allineamento del testo: centro;
}
.servizi img {
 larghezza: 80%;
 raggio di confine: 9px;
}

Produzione:

Costruire la sezione Informazioni

La sezione Informazioni avrà un'immagine e una casella di testo con alcune brevi informazioni sulla squadra.

Informazioni sulla sezione HTML

Creare un 
 e posizionare l'immagine e il testo al suo interno. 








Chi siamo


 Lorem ipsum dolor sit amet consectetur adipisicing elit. quasi
 officiis, perferendis iure possimus dolor aspernatur incidunt rem
 ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
 dolor perspiciatis aspernatur incidunt rem placeat quis assumenda
 detta!

Informazioni sulla sezione CSS

Stile l'immagine e la casella di testo utilizzando Griglia CSS e aggiungi a ombra per renderlo più attraente. Usare un margine negativo per impostare la casella di testo sopra l'immagine.

/* ****************** */
/* Chi siamo */
/* ****************** */
.grid-about {
 colonne-modello-griglia: 1.2fr 0.8fr;
 distanza: 0;
}
.di {
 imbottitura: 2rem 0 7rem 0;
}
.a proposito di img {
 larghezza: 98%;
 giustificarsi: fine;
 raggio di confine: 9px;
}
.circa p {
 dimensione del carattere: 2.2rem;
}
.testo {
 larghezza massima: 45 rem;
 colore di sfondo: #e7ac21;
 imbottitura: 10rem 5rem;
 margine sinistro: -5rem;
 raggio di confine: 9px;
}
.testo h2 {
 margine inferiore: 4.5rem;
 allineamento del testo: centro;
}

Produzione:

Il piè di pagina di un sito Web lascia un'impressione duratura nella mente dei visitatori, quindi assicurati che sia pulito e ben organizzato.

Aggiungi un'intestazione principale che dica grazie ai visitatori. © è un'entità HTML per il © simbolo.

Dai uno stile al piè di pagina dandogli un tocco diverso colore di sfondo e impostazione appropriata imbottitura.

/* ****************** */
/* Piè di pagina */
/* ****************** */
piè di pagina {
 allineamento del testo: centro;
 colore di sfondo: #e7ac21;
 imbottitura: 2.5rem;
}

Produzione:

Puoi visualizzare il sito web finale di Pawfect seguendo questo link.

Pubblica il tuo sito web

Congratulazioni, hai creato un sito Web completo da zero utilizzando HTML e CSS! È tempo di pubblicare il tuo sito web e ricevere feedback dalla community. Ci auguriamo che il processo di creazione del sito ti sia piaciuto. Se non conosci l'hosting, dai un'occhiata a come ospitare un sito Web gratuitamente utilizzando GitHub Pages.

Naincy Mourya (19 Articoli Pubblicati)

Naincy è specializzata nella creazione di siti Web altamente reattivi e in una strategia di contenuto efficiente insieme a copie Web. È una scrittrice tecnologica freelance che tiene d'occhio le tecnologie di tendenza.

Altro da Naincy Mourya