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

Pawfect🐾








instagram viewer







 Háziállat-ápolási szolgáltatás Észak-Karolinában




 Kifutni az időből? Ne mondj többet. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo makesnda facere?

Kimenet:

Itt az ideje, hogy stílust alakítson ki a navigációs menüben és a hős részben.

Általános CSS

Adja hozzá az általános CSS-stílust az oldal tetejére stílus.css fájlt. A hős résznek van egy háttérképe. tudsz elérheti a teljes kódot, beleértve a képeket a GitHubon, vagy használja a saját képét.

* {
 margó: 0;
 párnázás: 0;
 box-sizing: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 betűméret: 62,5%;
 túlcsordulás-x: rejtett;
 scroll-behavior: sima;
}
body {
 font-család: 'Rubik', sans-serif;
 vonalmagasság: 1,5;
 betűméret: 1,5 rem;
 betűsúly: 400;
 túlcsordulás-x: rejtett;
 szín: #523414;
 háttérszín: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
 betűsúly: 700;
 szín: #523414;
 betűköz: -0,5 képpont;
}
.heading-primary {
 betűméret: 5,2 rem;
 vonalmagasság: 1,05;
 margó-alsó: 3,2rem;
}
.heading-secondary {
 betűméret: 4,4 rem;
 vonalmagasság: 1,2;
 margó-alsó: 5,6 rem;
 szöveg igazítása: középre;
}
.heading-tertiary {
 betűméret: 3 rem;
 vonalmagasság: 1,2;
 margó: 1,2 rem;
}
a {
 szöveg-dekoráció: nincs;
}
.first-fold {
 háttérkép: url(img/Pawfect-bg.png);
 min-magasság: 80 rem;
}

A navigációs sáv stílusának beállítása

Használat CSS flexbox a logó és a navigációs menük egymás utáni beállításához. Készlet háttérszín átlátszóra és megadni a határ-sugár nak,-nek 9 képpont a Cselekvésre ösztönző (CTA) gombra.

CSS navigációs sáv

/* ****************** */
/* Logo */
/* ****************** */
.fejléc {
 kijelző: flex;
 indokol-tartalom: szóköz-között;
 align-ites: center;
 háttérszín: átlátszó;
 magasság: 9,6 rem;
 párnázás: 0 4,8rem;
}
.logo {
 magasság: 2,2 rem;
 betűméret: 3,6 rem;
 szöveg-dekoráció: nincs;
 szöveg igazítása: középre;
 betűsúly: félkövér;
 szín: #462d12;
}
/* ****************** */
/* Navigáció */
/* ****************** */
.main-nav-list {
 lista-stílus: nincs;
 kijelző: flex;
 align-ites: center;
 rés: 4,8 rem;
}
.main-nav-link {
 kijelző: inline-block;
 szöveg-dekoráció: nincs;
 szín: #462d12;
 betűsúly: 400;
 betűméret: 1,8 rem;
}
.main-nav-link.nav-cta {
 párnázás: 1.2rem 2.4rem;
 határsugár: 9 képpont;
 szín: #fff;
 háttérszín: #523414;
}

Kimenet:

Összefüggő: Hogyan készítsünk érzékeny navigációs sávot HTML és CSS használatával

A Hero Section stílusának kialakítása

Állítsa be a max szélesség az elsődleges címsort és leírást beágyazó hős osztályon. Ellenkező esetben kinyúlik a végéig, ahelyett, hogy a bal oldalon maradna. Állítsa be a betűméret és párnázás az Ön igényei szerint.

Hero Section CSS

/* ****************** */
/* Hős szekció */
/* ****************** */
.section-hero {
 párnázás: 15rem 0 9,6rem;
}
.hero {
 maximális szélesség: 75 rem;
 párnázás: 0 9,6rem;
 align-ites: balra;
}
.hero-description {
 betűméret: 2rem;
 vonalmagasság: 1,6;
 margó: 4,8rem 0;
}

Kimenet:

Szolgáltatási részleg kiépítése

Az oldal négy szolgáltatást kínál: teljes körű ápolás, önkiszolgáló kutyamosás, mosás és szárítás, valamint test- és mancsmasszázs.

Szolgáltatások szakasz HTML

Hozzon létre egy szülőt class=”hálózati szolgáltatások” és adja hozzá mind a négy szolgáltatást a használatával. Adja hozzá a képet, a szolgáltatás nevét és egy kis leírását.

Szolgáltatásaink






Teljes ápolás

Lorem ipsum consectetur adipisicing elit.







Önkiszolgáló kutyamosó

Odit aliquam dolor ex doloremque sed itaque.







Mosás és szárítás

Voluptatem suscipit ut omnis quas saepe.







Test- és mancsmasszázs

Sapiente quos qui hic porro voluptatibus impedit.

Szolgáltatások szakasz CSS

Hozzon létre egy rácsot két egyenlő oszlopból, és állítsa be a rés nak nek 4rem. Állítsa be az összes rács-elemek középen, és állítsa be a képet szélesség az eredeti méret 80%-ára.

/* ****************** */
/* Szolgáltatásaink */
/* ****************** */
.Szolgáltatásaink {
 párnázás: 9,6rem 0;
}
.container {
 maximális szélesség: 120 rem;
 margó: 0 auto;
 párnázás: 1,5rem 3,2rem;
}
.grid {
 kijelző: rács;
 rács-sablon-oszlopok: 1fr 1fr;
 rés: 4 rem;
 align-ites: center;
 indokol-tartalom: center;
 szöveg igazítása: középre;
}
.services img {
 szélesség: 80%;
 határsugár: 9 képpont;
}

Kimenet:

A Névjegy rész felépítése

A Névjegy részben lesz egy kép és egy szövegdoboz néhány rövid információval a csapatról.

A HTML szakaszról

Hozzon létre egy 
 és helyezze el benne a képet és a szöveget. 








Rólunk


 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 guessnda
 dicta!

A CSS szakaszról

Stílusozza a képet és a szövegdobozt a CSS-rács segítségével, és adja hozzá a árnyék hogy vonzóbbá tegye. Használj negatív árrés a kép feletti szövegmező beállításához.

/* ****************** */
/* Rólunk */
/* ****************** */
.grid-about {
 rács-sablon-oszlopok: 1,2 fr 0,8 fr;
 rés: 0;
}
.ról ről {
 párnázás: 2rem 0 7rem 0;
}
.about img {
 szélesség: 98%;
 igazolni-önmagát: vége;
 határsugár: 9 képpont;
}
.about p {
 betűméret: 2,2 rem;
}
.text {
 maximális szélesség: 45 rem;
 háttérszín: #e7ac21;
 párnázás: 10rem 5rem;
 margó-bal: -5rem;
 határsugár: 9 képpont;
}
.text h2 {
 margó-alsó: 4,5 rem;
 szöveg igazítása: középre;
}

Kimenet:

A webhely lábléce maradandó benyomást hagy a látogatók elméjében, ezért ügyeljen arra, hogy tiszta és jól szervezett legyen.

Adjon hozzá egy elsődleges címsort, amely köszönetet mond a látogatóknak. © egy HTML-entitás a © szimbólum.

Stílusozd a láblécet úgy, hogy mást adsz neki háttérszín és megfelelő beállítást párnázás.

/* ****************** */
/* Lábléc */
/* ****************** */
lábléc {
 szöveg igazítása: középre;
 háttérszín: #e7ac21;
 párnázás: 2,5 rem;
}

Kimenet:

Megtekintheti a végső Pawfect webhelyet ezt a linket követve.

Tegye közzé webhelyét

Gratulálunk, egy teljes webhelyet hozott létre a semmiből HTML és CSS használatával! Itt az ideje, hogy közzétegye webhelyét, és visszajelzést kapjon a közösségtől. Reméljük, hogy tetszett az oldal elkészítésének folyamata. Ha még nem ismeri a tárhelyszolgáltatást, vessen egy pillantást arra, hogyan lehet webhelyet ingyenesen tárolni a GitHub Pages használatával.

Naincy Mourya (19 cikk megjelent)

A Naincy rendkívül reszponzív webhelyek és hatékony tartalomstratégia, valamint webes másolatok készítésére specializálódott. Ő egy szabadúszó technológiai író, aki élesen figyeli a felkapott technológiákat.

Továbbiak Naincy Mouryától