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

Pawfect🐾








instagram viewer







 Lemmikkieläinten kotihoitopalvelu Pohjois-Carolinassa




 Aika loppuu? Älä sano enempää. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo makesnda facere?

Lähtö:

Nyt on aika muokata navigointivalikon ja sankariosion tyyliä.

Yleinen CSS

Lisää yleinen CSS-tyyli sivun yläosaan tyyli.css tiedosto. Sankariosiossa on taustakuva. Sinä pystyt päästä koko koodiin, mukaan lukien kuvat GitHubissatai käytä omaa kuvaasi.

* {
 marginaali: 0;
 pehmuste: 0;
 laatikon koko: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 kirjasinkoko: 62,5 %;
 ylivuoto-x: piilotettu;
 vierityskäyttäytyminen: tasainen;
}
body {
 kirjasinperhe: 'Rubik', sans-serif;
 linjan korkeus: 1,5;
 fontin koko: 1,5 rem;
 fontin paino: 400;
 ylivuoto-x: piilotettu;
 väri: #523414;
 taustaväri: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
 fontin paino: 700;
 väri: #523414;
 kirjainväli: -0,5 pikseliä;
}
.heading-primary {
 kirjasinkoko: 5.2rem;
 rivin korkeus: 1,05;
 marginaali-ala: 3,2rem;
}
.heading-secondary {
 fonttikoko: 4.4rem;
 linjan korkeus: 1,2;
 marginaali-ala: 5,6 rem;
 tekstin tasaus: keskellä;
}
.heading-tertiary {
 fontin koko: 3rem;
 linjan korkeus: 1,2;
 marginaali: 1,2 rem;
}
a {
 teksti-koriste: ei mitään;
}
.first-fold {
 taustakuva: url(img/Pawfect-bg.png);
 min-korkeus: 80rem;
}

Navigointipalkin tyylin muokkaaminen

Käyttää CSS flexbox säätääksesi logoa ja navigointivalikoita peräkkäin. Aseta taustaväri läpinäkyväksi ja antaa a raja-säde / 9px toimintakehotus (CTA) -painikkeeseen.

Navigointipalkki CSS

/* ****************** */
/* Logo */
/* ****************** */
.header {
 näyttö: flex;
 perustella-sisältö: välilyönti;
 kohdista kohteet: keskellä;
 taustaväri: läpinäkyvä;
 korkeus: 9,6 rem;
 pehmuste: 0 4.8rem;
}
.logo {
 korkeus: 2,2rem;
 fonttikoko: 3,6 rem;
 teksti-koriste: ei mitään;
 tekstin tasaus: keskellä;
 fontin paino: lihavoitu;
 väri: #462d12;
}
/* ****************** */
/* Navigointi */
/* ****************** */
.main-nav-list {
 listatyyli: ei mitään;
 näyttö: flex;
 kohdista kohteet: keskellä;
 rako: 4,8 rem;
}
.main-nav-link {
 näyttö: inline-block;
 teksti-koriste: ei mitään;
 väri: #462d12;
 fontin paino: 400;
 fonttikoko: 1.8rem;
}
.main-nav-link.nav-cta {
 pehmuste: 1.2rem 2.4rem;
 reunan säde: 9px;
 väri: #fff;
 taustaväri: #523414;
}

Lähtö:

Liittyvät: Responsiivisen navigointipalkin rakentaminen HTML: n ja CSS: n avulla

Hero-osion muotoilu

Aseta a max-leveys sankariluokassa, joka sisältää ensisijaisen otsikon ja kuvauksen. Muuten se ulottuu loppuun asti sen sijaan, että pysyisi vasemmalla puolella. Aseta Fonttikoko ja pehmuste vaatimuksesi mukaan.

Hero Section CSS

/* ****************** */
/* Hero-osio */
/* ****************** */
.section-hero {
 pehmuste: 15rem 0 9.6rem;
}
.sankari {
 suurin leveys: 75 rem;
 pehmuste: 0 9,6 rem;
 kohdista kohteet: vasen;
}
.hero-description {
 fontin koko: 2rem;
 linjan korkeus: 1,6;
 marginaali: 4,8rem 0;
}

Lähtö:

Palveluosaston rakentaminen

Sivusto tarjoaa neljä palvelua: täydellinen hoito, itsepalvelu koiran pesu, pesu & föönaus sekä vartalo- ja tassuhieronta.

Palvelut-osio HTML

Luo vanhempi class=”verkkopalvelut” ja lisää kaikki neljä palvelua käyttämällä. Lisää kuva, palvelun nimi ja pieni kuvaus siitä.

palvelumme






Täysi hoito

Lorem ipsum consectetur adipisicing elit.







Itsepalvelukoiranpesu

Odit aliquam dolor ex doloremque sed itaque.







Pese & Föönaa

Voluptatem suscipit ut omnis quas saepe.







Vartalo- ja tassuhieronta

Sapiente quos qui hic porro voluptatibus impedit.

Palvelut-osio CSS

Luo ruudukko kahdella yhtä suurella sarakkeella ja aseta aukko kohtaan 4rem. Säädä kaikki ruudukkokohteet keskelle ja aseta kuva leveys 80 % alkuperäisestä koosta.

/* ****************** */
/* Palvelumme */
/* ****************** */
.palvelumme {
 pehmuste: 9,6 rem 0;
}
.container {
 suurin leveys: 120 rem;
 marginaali: 0 auto;
 pehmuste: 1.5rem 3.2rem;
}
.grid {
 näyttö: ruudukko;
 ruudukko-malli-sarakkeet: 1fr 1fr;
 rako: 4 rem;
 kohdista kohteet: keskellä;
 perustella-sisältö: keskus;
 tekstin tasaus: keskellä;
}
.services img {
 leveys: 80 %;
 reunan säde: 9px;
}

Lähtö:

Tietoja-osion rakentaminen

Tietoja-osiossa on kuva ja tekstiruutu, jossa on lyhyttä tietoa joukkueesta.

Tietoja osiosta HTML

Luo 
 ja aseta kuva ja teksti sen sisään. 








Meistä


 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 eeldanda
 sanele!

Tietoja osiosta CSS

Muotoile kuva ja tekstiruutu CSS-ruudukon avulla ja lisää a varjo tehdäkseen siitä houkuttelevamman. Käytä negatiivinen marginaali asettaaksesi tekstikentän kuvan yläpuolelle.

/* ****************** */
/* Meistä */
/* ****************** */
.grid-about {
 ruudukko-malli-sarakkeet: 1,2fr 0,8fr;
 väli: 0;
}
.about {
 pehmuste: 2rem 0 7rem 0;
}
.about img {
 leveys: 98 %;
 perustella itseään: loppu;
 reunan säde: 9px;
}
.about p {
 kirjasinkoko: 2.2rem;
}
.text {
 suurin leveys: 45 rem;
 taustaväri: #e7ac21;
 pehmuste: 10rem 5rem;
 marginaali vasen: -5rem;
 reunan säde: 9px;
}
.text h2 {
 marginaali-ala: 4,5 rem;
 tekstin tasaus: keskellä;
}

Lähtö:

Sivuston alatunniste jättää pysyvän jäljen vierailijoiden mieliin, joten varmista, että se on puhdas ja hyvin järjestetty.

Lisää ensisijainen otsikko, jossa sanotaan kiitos vierailijoille. © on HTML-entiteetti © symboli.

Muotoile alatunnistetta antamalla sille erilainen tyyli taustaväri ja sopiva asetus pehmuste.

/* ****************** */
/* Alatunniste */
/* ****************** */
alatunniste {
 tekstin tasaus: keskellä;
 taustaväri: #e7ac21;
 pehmuste: 2,5 rem;
}

Lähtö:

Voit tarkastella lopullista Pawfect-verkkosivustoa seuraamalla tätä linkkiä.

Julkaise Web-sivustosi

Onnittelut, loit täydellisen verkkosivuston tyhjästä HTML: n ja CSS: n avulla! On aika julkaista verkkosivustosi ja saada palautetta yhteisöltä. Toivomme, että pidit sivuston tekemisestä. Jos olet uusi isännöinnissä, katso kuinka voit isännöidä verkkosivustoa ilmaiseksi GitHub-sivujen avulla.

Naincy Mourya (19 artikkelia julkaistu)

Naincy on erikoistunut erittäin responsiivisten verkkosivustojen ja tehokkaan sisältöstrategian sekä verkkokopioiden rakentamiseen. Hän on freelance-tekniikan kirjoittaja, joka pitää silmällä trendikkäitä teknologioita.

Lisää Naincy Mouryalta