class="our-services" id="services">

     
class="container">

       
class="heading-secondary">Our Services</h2>

       
class="grid services">

         
class="first-service">

           <img src="img/Full Grooming.jpg" />

           
class="heading-tertiary">Full Grooming</h3>

           <p>Lorem ipsum consectetur adipisicing elit.p>

         div>

         
class="second-service">

           <img src="img/Self Serve Dog Wash.jpg" />

           
class="heading-tertiary">Self Serve Dog Wash</h3>

           <p>Odit aliquam dolor ex doloremque sed itaque.p>

         div>

         
class="thrid-service">

           <img src="img/Wash & Blow Dry.jpg" />

           
class="heading-tertiary">Wash & Blow Dry</h3>

           <p>Voluptatem suscipit ut omnis quas saepe.p>

         div>

         
class="fourth-service">

           <img src="img/Body and Paw Massage.jpg" />

           
class="heading-tertiary">Body and Paw Massage</h3>

           <p>Sapiente quos qui hic porro voluptatibus impedit.p>

         div>

       div>

     div>

   section>


 

CSS Phần Dịch vụ

Tạo lưới có hai cột bằng nhau và đặt khoảng cách thành 4rem. Điều chỉnh tất cả các mục lưới ở trung tâm và đặt chiều rộng hình ảnh thành 80% kích thước ban đầu

 /* ****************** */

/* Our Services */

/* ****************** */

.our-services {

 padding: 9.6rem 0;

}



.container {

 max-width: 120rem;

 margin: 0 auto;

 padding: 1.5rem 3.2rem;

}

.grid {

 display: grid;

 grid-template-columns: 1fr 1fr;

 gap: 4rem;

 align-items: center;

 justify-content: center;

 text-align: center;

}

.services img {

 width: 80%;

 border-radius: 9px;

}

 

đầu ra

Xây dựng phần Giới thiệu

Phần Giới thiệu sẽ có một hình ảnh và một hộp văn bản với một số thông tin ngắn gọn về nhóm

Giới thiệu về phần HTML

 Create a <div> and place the image and the text inside it. 

   
class="about" id="about">

     
class="container">

       
class="grid grid-about about">

         <img src="img/About.jpg" />

         
class="text">

           
class="heading-secondary">About Us</h2>

           <p>

             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

             dicta!

           p>

         div>

       div>

     div>

   section>


 

Giới thiệu về phần CSS

Tạo kiểu cho hình ảnh và hộp văn bản bằng CSS Grid và thêm bóng đổ để làm cho nó hấp dẫn hơn. Sử dụng lề âm để đặt hộp văn bản phía trên hình ảnh

    <footer>

     
class="heading-primary">Thank You For Visiting Pawfect🐾!</h1>

     <p>© Copyright 2022 Pawfect🐾p>

   footer>