Code Products Section

Dẫn nhập

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

Trong bài học này chúng ta sẽ cùng nhau đi tiếp phần Products 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
• CODING ABOUT SECTION CHO WEB LANDINGPAGE - PHẦN 1
• CODING ABOUT SECTION CHO WEB LANDINGPAGE - PHẦN 2

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

• Sử dụng font-awesome
• 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ử dụng FONT-AWESOME

Vào trang chủ font-awesome tại đường dẫn: https://fontawesome.com và chọn Icons để tra những icons muốn sử dụng 

---

Code HTML

<section class="products-section">
    <h2>Products</h2>
    <div class="row">
        <div class="col span-1-of-3">
            <div class="product-box">
                <h3>Pronunciation class</h3>
                <p class="product-price">19$ <span>/ month</span></p>
                <ul>
                    <li><i class="fas fa-check small-icon"></i>Native voices</li>
                    <li><i class="fas fa-check small-icon"></i>Master IPA</li>
                </ul>
                <a href="#" class="btn">JOIN US</a>
            </div>
        </div>
        <div class="col span-1-of-3">
            <div class="product-box">
                <h3>Speaking class</h3>
                <p class="product-price">25$ <span>/ month</span></p>
                <ul>
                    <li><i class="fas fa-check small-icon"></i>Native speaking</li>
                    <li><i class="fas fa-check small-icon"></i>Speaing naturally</li>
                </ul>
                <a href="#" class="btn">JOIN US</a>
            </div>
        </div>
        <div class="col span-1-of-3">
            <div class="product-box">
                <h3>Listening class</h3>
                <p class="product-price">25$ <span>/ month</span></p>
                <ul>
                    <li><i class="fas fa-check small-icon"></i>Native speech</li>
                    <li><i class="fas fa-check small-icon"></i>Hearing English clearly</li>
                </ul>
                <a href="#" class="btn">JOIN US</a>
            </div>
        </div>
    </div>
</section>

---

Code CSS

Code Small Icons

.small-icon{
    color: #305679;
    font-size: 130%;
    margin-right: 10px;
}

 Code Tiêu đề của Products

h3{
    text-transform: uppercase;
    letter-spacing: 1px;
}
 
h3{
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #265077;
    color: white;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin-bottom: 15px;
}

Code Products Section

/* ------------------------- */
/* -----PRODUCT-SECTIOn-------- */
/* ----------------------------- */
.products-section{
    background-color: #f4f4f4;
}
 
.products-section h2{
    margin-bottom: 60px;
}
 
.product-box{
    background-color: #eeefff;
    box-shadow: 3px 5px 10px #e0e0e0;
    width: 90%;
    height: 350px;
}
 
.product-price{
    color: #265077;
    font-size: 250%;
    font-weight: 300;
    text-align: center;
}
 
.product-price span {
    font-size: 80%;
}
 
.product-box ul li{
    margin-left: 20%;
    list-style: none;
    margin-top: 20px;
    margin-bottom: 20px;
}
 
.product-box .btn{
    margin-left: 20%;
}

---

Kết luận

Trong bài này chúng ta đã cùng nhau hoàn thiện xong phần Products Section

Ở bài sau chúng ta sẽ cùng nhau đi vào phần tiếp theo đó chính là TESTIMONIALS SECTION.

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.