href=" https://fonts.googleapis.com/css2?family=Rubik: wght@400;500;600;700&display=swap"
 rel="φύλλο στυλ"
 />

Pawfect🐾










 Υπηρεσία περιποίησης κατοικίδιων ζώων στη Βόρεια Καρολίνα




 Μας τελειώνει ο χρόνος? Μην πεις τίποτε άλλο. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere;

Παραγωγή:

Τώρα ήρθε η ώρα να διαμορφώσετε το στυλ του μενού πλοήγησης και την ενότητα του ήρωα.

Γενικό CSS

Προσθέστε το γενικό στυλ CSS στο επάνω μέρος σας στυλ.css αρχείο. Η ενότητα του ήρωα έχει μια εικόνα φόντου. Μπορείς πρόσβαση στον πλήρη κώδικα συμπεριλαμβανομένων των εικόνων στο GitHubή χρησιμοποιήστε τη δική σας εικόνα.

* {
 περιθώριο: 0;
 γέμιση: 0;
 box-sizing: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 μέγεθος γραμματοσειράς: 62,5%;
 υπερχείλιση-x: κρυφό;
 κύλιση-συμπεριφορά: ομαλή;
}
σώμα {
 font-family: 'Rubik', sans-serif;
 Ύψος γραμμής: 1,5;
 μέγεθος γραμματοσειράς: 1,5 rem;
 βάρος γραμματοσειράς: 400;
 υπερχείλιση-x: κρυφό;
 χρώμα: #523414;
 χρώμα φόντου: #e9be5a;
}
.επικεφαλίδα-κύριος,
.επικεφαλίδα-δευτερεύον,
.heading-tertiary {
 βάρος γραμματοσειράς: 700;
 χρώμα: #523414;
 Διάστιχο γραμμάτων: -0,5 px;
}
.heading-primary {
 μέγεθος γραμματοσειράς: 5,2 rem;
 Ύψος γραμμής: 1,05;
 margin-bottom: 3,2rem;
}
.heading-secondary {
 μέγεθος γραμματοσειράς: 4,4 rem;
 Ύψος γραμμής: 1,2;
 περιθώριο-κάτω: 5,6 εκ.
 text-align: κέντρο;
}
.heading-tertiary {
 μέγεθος γραμματοσειράς: 3rem;
 Ύψος γραμμής: 1,2;
 περιθώριο: 1,2 rem;
}
ένα {
 κείμενο-διακόσμηση: κανένα;
}
.πρώτο πάσο {
 φόντο-εικόνα: url(img/Pawfect-bg.png);
 ελάχ. ύψος: 80 εκ.
}

Διαμόρφωση της γραμμής πλοήγησης

Χρήση CSS flexbox για να προσαρμόσετε το λογότυπο και τα μενού πλοήγησης στη σειρά. Σειρά χρώμα του φόντου να διαφανή και να δώσει α συνοριακή ακτίνα του 9 εικονοστοιχεία στο κουμπί Call-to-Action (CTA).

Γραμμή πλοήγησης CSS

/* ****************** */
/* Λογότυπο */
/* ****************** */
.κεφαλίδα {
 οθόνη: flex;
 justify-content: space-mes?
 στοίχιση-στοιχεία: κέντρο;
 Χρώμα φόντου: διαφανές.
 ύψος: 9,6 εκ.
 padding: 0 4,8rem;
}
.λογότυπο {
 ύψος: 2,2 εκ.
 μέγεθος γραμματοσειράς: 3,6 rem;
 κείμενο-διακόσμηση: κανένα;
 text-align: κέντρο;
 βάρος γραμματοσειράς: έντονη γραφή;
 χρώμα: #462d12;
}
/* ****************** */
/* Πλοήγηση */
/* ****************** */
.main-nav-list {
 στιλ λίστας: κανένας;
 οθόνη: flex;
 στοίχιση-στοιχεία: κέντρο;
 κενό: 4,8 εκ.
}
.main-nav-link {
 οθόνη: inline-block;
 κείμενο-διακόσμηση: κανένα;
 χρώμα: #462d12;
 βάρος γραμματοσειράς: 400;
 μέγεθος γραμματοσειράς: 1,8 rem;
}
.main-nav-link.nav-cta {
 padding: 1,2rem 2,4rem;
 περίγραμμα-ακτίνα: 9px;
 χρώμα: #fff;
 χρώμα φόντου: #523414;
}

Παραγωγή:

Σχετίζεται με: Πώς να δημιουργήσετε μια αποκριτική γραμμή πλοήγησης χρησιμοποιώντας HTML και CSS

Styling the Hero Section

Ορίστε α μέγιστο πλάτος στην τάξη ήρωα που φωλιάζει την κύρια επικεφαλίδα και την περιγραφή. Διαφορετικά, θα επεκταθεί μέχρι το τέλος αντί να παραμείνει στην αριστερή πλευρά. Ρυθμίστε το μέγεθος γραμματοσειράς και υλικό παραγεμίσματος σύμφωνα με τις απαιτήσεις σας.

Ηρώο τμήμα CSS

/* ****************** */
/* Τμήμα ήρωα */
/* ****************** */
.section-hero {
 padding: 15rem 0 9,6rem;
}
.ήρωας {
 μέγιστο πλάτος: 75 εκ.
 padding: 0 9,6rem;
 στοίχιση-στοιχεία: αριστερά;
}
.hero-description {
 μέγεθος γραμματοσειράς: 2rem;
 Ύψος γραμμής: 1,6;
 περιθώριο: 4,8 εκ. 0;
}

Παραγωγή:

Δημιουργία Τμήματος Υπηρεσιών

Ο ιστότοπος παρέχει τέσσερις υπηρεσίες: πλήρη περιποίηση, πλύσιμο σκύλων self-service, πλύσιμο και στέγνωμα με πιστολάκι και μασάζ σώματος και ποδιών.

Ενότητα HTML υπηρεσιών

Δημιουργήστε έναν γονέα class=”υπηρεσίες δικτύου” και προσθέστε και τις τέσσερις υπηρεσίες χρησιμοποιώντας. Προσθέστε την εικόνα, το όνομα της υπηρεσίας και μια μικρή περιγραφή της.

Οι Υπηρεσίες μας






Πλήρης περιποίηση

Lorem ipsum consectetur adipisicing elit.







Self Serve Dog Wash

Odit aliquam dolor ex doloremque sed itaque.







Πλύσιμο και στέγνωμα με πιστολάκι

Voluptatem suscipit ut omnis quas saepe.







Μασάζ σώματος και ποδιών

Sapiente quos qui hic porro voluptatatibus impedit.

Τμήμα Υπηρεσιών CSS

Δημιουργήστε ένα πλέγμα με δύο ίσες στήλες και ορίστε το χάσμα προς το 4 εκ. Ρυθμίστε όλα τα πλέγμα-στοιχεία στο κέντρο και ορίστε την εικόνα πλάτος στο 80% του αρχικού μεγέθους.

/* ****************** */
/* Οι Υπηρεσίες μας */
/* ****************** */
.Οι Υπηρεσίες μας {
 padding: 9,6rem 0;
}
.container {
 μέγιστο πλάτος: 120 εκ.
 περιθώριο: 0 αυτόματο;
 padding: 1,5rem 3,2rem;
}
.πλέγμα {
 οθόνη: πλέγμα;
 πλέγμα-πρότυπο-στήλες: 1fr 1fr;
 κενό: 4 εκ.
 στοίχιση-στοιχεία: κέντρο;
 justify-content: κέντρο;
 text-align: κέντρο;
}
.services img {
 πλάτος: 80%;
 περίγραμμα-ακτίνα: 9px;
}

Παραγωγή:

Δημιουργία της ενότητας Πληροφορίες

Η ενότητα Πληροφορίες θα έχει μια εικόνα και ένα πλαίσιο κειμένου με ορισμένες σύντομες πληροφορίες για την ομάδα.

Σχετικά με την ενότητα HTML

Δημιουργώ ένα 
 και τοποθετήστε την εικόνα και το κείμενο μέσα σε αυτό. 








Σχετικά με εμάς


 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 assumenda
 δικτά!

Σχετικά με την ενότητα CSS

Δώστε στυλ στην εικόνα και το πλαίσιο κειμένου χρησιμοποιώντας το Πλέγμα CSS και προσθέστε ένα σκίαση για να γίνει πιο ελκυστικό. Χρησιμοποίησε ένα αρνητικό περιθώριο για να ορίσετε το πλαίσιο κειμένου πάνω από την εικόνα.

/* ****************** */
/* Σχετικά με εμάς */
/* ****************** */
.grid-about {
 πλέγμα-πρότυπο-στήλες: 1,2fr 0,8fr;
 κενό: 0;
}
.σχετικά με {
 padding: 2rem 0 7rem 0;
}
.σχετικά με το img {
 πλάτος: 98%;
 justify-self: end;
 περίγραμμα-ακτίνα: 9px;
}
.περίπου p {
 μέγεθος γραμματοσειράς: 2,2 rem;
}
.text {
 μέγιστο πλάτος: 45 εκ.
 χρώμα φόντου: #e7ac21;
 padding: 10rem 5rem;
 margin-αριστερά: -5rem;
 περίγραμμα-ακτίνα: 9px;
}
.text h2 {
 περιθώριο-κάτω: 4,5 εκ.
 text-align: κέντρο;
}

Παραγωγή:

Το υποσέλιδο ενός ιστότοπου αφήνει μια μόνιμη εντύπωση στο μυαλό των επισκεπτών, επομένως βεβαιωθείτε ότι είναι καθαρό και καλά οργανωμένο.

Προσθέστε μια κύρια επικεφαλίδα λέγοντας ευχαριστώ στους επισκέπτες. © είναι μια οντότητα HTML για το © σύμβολο.

Δώστε στυλ στο υποσέλιδο δίνοντάς του ένα διαφορετικό χρώμα του φόντου και κατάλληλη ρύθμιση υλικό παραγεμίσματος.

/* ****************** */
/* Υποσέλιδο */
/* ****************** */
υποσέλιδο {
 text-align: κέντρο;
 χρώμα φόντου: #e7ac21;
 padding: 2,5rem;
}

Παραγωγή:

Μπορείτε να δείτε τον τελικό ιστότοπο του Pawfect ακολουθώντας αυτόν τον σύνδεσμο.

Δημοσιεύστε τον Ιστότοπό σας

Συγχαρητήρια, δημιουργήσατε έναν πλήρη ιστότοπο από την αρχή χρησιμοποιώντας HTML και CSS! Ήρθε η ώρα να δημοσιεύσετε τον ιστότοπό σας και να λάβετε σχόλια από την κοινότητα. Ελπίζουμε να σας άρεσε η διαδικασία δημιουργίας του ιστότοπου. Εάν είστε νέοι στη φιλοξενία, ρίξτε μια ματιά στο πώς να φιλοξενήσετε έναν ιστότοπο δωρεάν χρησιμοποιώντας τις Σελίδες GitHub.

Naincy Mourya (Δημοσιεύτηκαν 19 άρθρα)

Η Naincy ειδικεύεται στη δημιουργία ιστοσελίδων υψηλής απόκρισης και αποτελεσματικής στρατηγικής περιεχομένου μαζί με αντίγραφα ιστού. Είναι μια ανεξάρτητη συγγραφέας τεχνολογίας που παρακολουθεί προσεκτικά τις τάσεις της τεχνολογίας.

Περισσότερα από τη Naincy Mourya