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

Pawfect🐾










 Tierpflegedienst in North Carolina




 Die Zeit wird knapp? Sag nichts mehr. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo adoptnda facere?

Ausgabe:

Jetzt ist es an der Zeit, das Navigationsmenü und den Heldenbereich zu gestalten.

Allgemeine CSS

Fügen Sie das allgemeine CSS-Styling oben in Ihrem. hinzu style.css Datei. Der Heldenbereich hat ein Hintergrundbild. Sie können Zugriff auf den vollständigen Code inklusive Bilder auf GitHub, oder verwenden Sie Ihr eigenes Bild.

* {
 Rand: 0;
 Polsterung: 0;
 Box-Größe: Bordüre-Box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 Schriftgröße: 62,5%;
 Überlauf-x: versteckt;
 Scroll-Verhalten: glatt;
}
Karosserie {
 Schriftfamilie: 'Rubik', serifenlos;
 Zeilenhöhe: 1,5;
 Schriftgröße: 1,5rem;
 Schriftstärke: 400;
 Überlauf-x: versteckt;
 Farbe: #523414;
 Hintergrundfarbe: #e9be5a;
}
.überschrift-primär,
.Überschrift-Sekundär,
.Überschrift-Tertiär {
 Schriftstärke: 700;
 Farbe: #523414;
 Buchstabenabstand: -0.5px;
}
.überschrift-primär {
 Schriftgröße: 5.2rem;
 Zeilenhöhe: 1,05;
 Rand-unten: 3.2rem;
}
.überschrift-sekundär {
 Schriftgröße: 4.4rem;
 Zeilenhöhe: 1,2;
 Rand-unten: 5,6rem;
 Textausrichtung: Mitte;
}
.Überschrift-Tertiär {
 Schriftgröße: 3rem;
 Zeilenhöhe: 1,2;
 Rand: 1,2rem;
}
ein {
 Textdekoration: keine;
}
.erstmals {
 Hintergrundbild: URL(img/Pawfect-bg.png);
 Mindesthöhe: 80rem;
}

Die Navigationsleiste gestalten

Benutzen CSS-Flexbox um das Logo und die Navigationsmenüs nacheinander anzupassen. Satz Hintergrundfarbe transparent machen und geben Grenzradius von 9 Pixel zur Call-To-Action (CTA)-Schaltfläche.

Navigationsleiste CSS

/* ****************** */
/* Logo */
/* ****************** */
.Header {
 Anzeige: flexibel;
 rechtfertigen-Inhalt: Zwischenraum;
 Ausrichten-Elemente: Mitte;
 Hintergrundfarbe: transparent;
 Höhe: 9,6 Rem;
 Polsterung: 0 4.8rem;
}
.logo {
 Höhe: 2,2 rem;
 Schriftgröße: 3.6rem;
 Textdekoration: keine;
 Textausrichtung: Mitte;
 Schriftdicke: fett;
 Farbe: #462d12;
}
/* ****************** */
/* Navigation */
/* ****************** */
.main-nav-list {
 Listenstil: keiner;
 Anzeige: flexibel;
 Ausrichten-Elemente: Mitte;
 Lücke: 4.8rem;
}
.main-nav-link {
 Anzeige: Inline-Block;
 Textdekoration: keine;
 Farbe: #462d12;
 Schriftstärke: 400;
 Schriftgröße: 1,8rem;
}
.main-nav-link.nav-cta {
 Polsterung: 1.2rem 2.4rem;
 Randradius: 9px;
 Farbe: #fff;
 Hintergrundfarbe: #523414;
}

Ausgabe:

Verwandt: So erstellen Sie eine responsive Navigationsleiste mit HTML und CSS

Den Heldenbereich gestalten

einstellen maximale Breite auf der Heldenklasse, die die primäre Überschrift und die Beschreibung verschachtelt. Andernfalls wird es bis zum Ende verlängert, anstatt auf der linken Seite zu bleiben. Stellen Sie die Schriftgröße und Polsterung nach Ihrer Anforderung.

CSS der Heldensektion

/* ****************** */
/* Heldenabschnitt */
/* ****************** */
.sektionsheld {
 Polsterung: 15rem 0 9,6rem;
}
.held {
 maximale Breite: 75rem;
 Polsterung: 0 9.6rem;
 Ausrichten-Elemente: links;
}
.helden-beschreibung {
 Schriftgröße: 2rem;
 Zeilenhöhe: 1,6;
 Rand: 4.8rem 0;
}

Ausgabe:

Aufbau des Services-Bereichs

Die Website bietet vier Dienstleistungen: vollständige Pflege, Hundewäsche zur Selbstbedienung, Waschen und Föhnen sowie Körper- und Pfotenmassage.

Dienste Abschnitt HTML

Erstellen Sie ein Elternteil class="Netzdienste" und fügen Sie alle vier Dienste mit. hinzu. Fügen Sie das Bild, den Dienstnamen und eine kurze Beschreibung hinzu.

Unsere Dienstleistungen






Volle Pflege

Lorem ipsum consectetur adipisicing elit.







Selbstbedienungs-Hundewäsche

Odit aliquam dolor ex doloremque sed itaque.







Waschen & Föhnen

Voluptatem suscipit ut omnis quas saepe.







Körper- und Pfotenmassage

Sapiente quos qui hic porro voluptatibus impedit.

Dienstleistungsbereich CSS

Erstellen Sie ein Raster mit zwei gleichen Spalten und stellen Sie die Lücke zu 4rem. Passen Sie alle an Raster-Elemente in die Mitte und stelle das Bild ein Breite auf 80 % der Originalgröße.

/* ****************** */
/* Unsere Dienstleistungen */
/* ****************** */
.Unsere Dienstleistungen {
 Polsterung: 9,6rem 0;
}
.Behälter {
 maximale Breite: 120rem;
 Rand: 0 automatisch;
 Polsterung: 1.5rem 3.2rem;
}
.Netz {
 Anzeige: Raster;
 Raster-Vorlagen-Spalten: 1fr 1fr;
 Lücke: 4rem;
 Ausrichten-Elemente: Mitte;
 rechtfertigen-Inhalt: Mitte;
 Textausrichtung: Mitte;
}
.services img {
 Breite: 80%;
 Randradius: 9px;
}

Ausgabe:

Aufbau des About-Bereichs

Der Abschnitt About enthält ein Bild und ein Textfeld mit einigen kurzen Informationen über das Team.

Über Abschnitt HTML

Ein... kreieren 
 und platzieren Sie das Bild und den Text darin. 








Über uns


 Lorem ipsum dolor sit amet consectetur adipiscing elit. Quas
 officiis, perferendis iure possimus dolor aspernatur incidunt rem
 ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
 dolor perspiciatis aspernatur incidunt rem placeat quisassunda
 diktieren!

Über Abschnitt CSS

Gestalten Sie das Bild und das Textfeld mit CSS Grid und fügen Sie a. hinzu Schlagschatten um es attraktiver zu machen. Benutze einen negative Marge um das Textfeld über dem Bild einzustellen.

/* ****************** */
/* Über uns */
/* ****************** */
.raster-über {
 Raster-Vorlagen-Spalten: 1,2fr 0,8fr;
 Lücke: 0;
}
.etwa {
 Polsterung: 2rem 0 7rem 0;
}
.über das Bild {
 Breite: 98%;
 sich selbst rechtfertigen: Ende;
 Randradius: 9px;
}
.über p {
 Schriftgröße: 2.2rem;
}
.text {
 maximale Breite: 45rem;
 Hintergrundfarbe: #e7ac21;
 Polsterung: 10rem 5rem;
 Rand-links: -5rem;
 Randradius: 9px;
}
.text h2 {
 Rand-unten: 4.5rem;
 Textausrichtung: Mitte;
}

Ausgabe:

Die Fußzeile einer Website hinterlässt einen bleibenden Eindruck in den Köpfen der Besucher, also stellen Sie sicher, dass sie sauber und gut organisiert ist.

Fügen Sie eine Hauptüberschrift hinzu, in der Sie den Besuchern danken. © ist eine HTML-Entität für die © Symbol.

Gestalten Sie die Fußzeile, indem Sie sie anders gestalten Hintergrundfarbe und passend einstellen Polsterung.

/* ****************** */
/* Fusszeile */
/* ****************** */
Fusszeile {
 Textausrichtung: Mitte;
 Hintergrundfarbe: #e7ac21;
 Polsterung: 2.5rem;
}

Ausgabe:

Sie können die endgültige Pawfect-Website anzeigen indem Sie diesem Link folgen.

Veröffentlichen Sie Ihre Website

Herzlichen Glückwunsch, Sie haben mit HTML und CSS eine komplette Website von Grund auf neu erstellt! Es ist an der Zeit, Ihre Website zu veröffentlichen und Feedback von der Community zu erhalten. Wir hoffen, dass Ihnen die Erstellung der Website gefallen hat. Wenn Sie neu beim Hosten sind, sehen Sie sich an, wie Sie mit GitHub Pages kostenlos eine Website hosten.

Naincy Moury (19 Artikel veröffentlicht)

Naincy ist spezialisiert auf die Erstellung von Websites mit hoher Reaktionsfähigkeit und einer effizienten Inhaltsstrategie sowie auf Webkopien. Sie ist freiberufliche Tech-Autorin, die Trendtechnologien genau im Auge behält.

Mehr von Naincy Mourya