Coding About Section - Phần 1

Dẫn nhập

Ở những bài trước, chúng ta hoàn thành phần HEADER CHO WEB LANDINGPAGE .

Trong bài học này chúng ta sẽ cùng nhau đi vào phần About Section trong Web Landing Page.

---

Nội dung 

Để đọc hiểu bài này tốt nhất, bạn nên xem qua các nội dung: 

• TỔNG QUAN HTML CƠ BẢN
• TỔNG QUAN CSS CƠ BẢN
• CẤU TRÚC MODEL BOX TRONG CSS
• SET UP FILE HTML & CSS
• CODING HEADER – PHẦN 1
• CODING HEADER – PHẦN 2
• CODING HEADER – PHẦN 3

Trong bài này, Kteam sẽ cùng bạn tìm hiểu nội dung: 

• Sử dụng grid
• Code HTML
• Code CSS 

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

---

Sử dung grid

Cú pháp:

<element class=”row”>
       <element_con class=”col  span-a-of-b”> </element_con>

        <!--a và b là số 1 đến 12  -->
</element>

Ví dụ muốn tạo ra 3 cột:

<div=”row”>
       <div class=”col span-1-of-3”> column 1</div>
       <div class=”col span-1-of-3”> column 2</div>
       <div class=”col span-1-of-3”> column 3</div>
</div>

Hoặc 2 cột mà 1 cột to gấp đôi cột còn lại

<div=”row”>

       <div class=”col span-2-of-3”> column 1</div>

       <div class=”col span-1-of-3”> column 2</div>
</div>

---

Code HTML

<section class="about-section">
    <div class="row">
        <h2>About Us</h2>
        <p class="p-long">
        We are people that are studying English by ourselves, we believe that you don’t need to pay so much money for being good at English, we’re here to help you 
        </p>
    </div>
    <div class="row">
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities1.jpeg" alt="activities1">
              <p class="picture-title">
                  Team Working
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities2.jpeg" alt="activities2">
              <p class="picture-title">
                  Funny class
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities3.jpeg" alt="activities3">
              <p class="picture-title">
                 Be confident
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities4.jpeg" alt="activities4">
              <p class="picture-title">
                All our friends
              </p>
          </div>
    </div>
</section>

---

Code CSS

REUSABLE COMPONENT

h1, h2{
  text-transform: uppercase;
  letter-spacing: 1px;
}

h1{
  font-size: 300%;
  font-weight: 400;
  word-spacing: 5px;
  color: white;
  line-height: 135%;
  margin-bottom: 50px;
}

h2{
  color: #e67e22;
  font-size: 180%;
  font-weight: 700;
  text-align: center;
}

h2:after{
  content: " ";
  display: block;
  width: 150px;
  height: 3px;
  background-color: rgba(230, 126, 34,0.5);
  margin: 0 auto;
  margin-top: 5px;
}

.p-long{
  text-align: center;
  color: #265077;
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 70%;
  margin-left: 15%;
  line-height: 140%;
}

section{
  padding: 50px;
}

ABOUT SECTION

/* ---------------------------- */
/* ---------ABOUT SECTION--------- */
/* ------------------------------------- */
.about-picture img{
  width: 90%;
}

---

Kết luận

Ở bài này chúng ta đã cùng nhau hoàn thiện xong 1 phần HTML, và 1 số các thuộc tính CSS của phần About section.

Trong bài học sau chúng ta sẽ cùng nhau HOÀN THIỆN ABOUT SECTION này.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập - Thử thách - Không ngại khó". 

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.