Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Trang Landing Page Bằng HTML CSS

Tạo Trang Landing Page Bằng HTML CSS


Ngày 25 Tháng 11 Năm 2020

Bài này mình sẽ giới thiệu đến bạn cách tạo landing page bằng HTML CSS cho trang web nhé!

Tạo Cấu Trúc Cho Landing Page

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Font Awesome v4.7 và Google Font thông qua đoạn mã dưới đây nhé:

HTML:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tạo Trang Landing Page</title>
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
</body>
</html>

Tạo Header Cho Landing Page

Trong phần này chúng ta sẽ đi vào tạo header cho landing page nha. Nó sẽ được chia thành hai mục chính là navbar(thanh tiêu đề) và banner(giới thiệu dịch vụ). Bây giờ chúng ta sẽ thêm các phần tử cho nó nhé:

HTML

<div class="header">
    <!--Bắt Đầu Navbar-->
    <div class="navbar">
        <div class="logo">
            <a href="#"><img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/xay_dung_website_template/rsz_ni%E1%BB%81m_vui_l%E1%BA%ADp_tr%C3%ACnh_1.png" width="200" alt="logo"></a>
        </div>
        <div class="menu">
            <ul>
                <li>Trang Chủ</li>
                <li>Về Chúng Tôi</li>
                <li>Dịch Vụ</li>
                <li>Liên Hệ</li>
            </ul>
        </div>
        <div class="login-btn">Đăng Nhập</div>
    </div>
    <!--Kết Thúc Navbar-->
        <!--Bắt Đầu Banner-->
    <div class="banner">
        <div class="noi-dung">
            <h1>Mong muốn chia sẻ kiến thức về lập trình đến mọi người.</h1>
            <h3>Niềm Vui Lập Trình</h3>
            <p>Lorem ipsum dolor ...</p>
        </div>
        <div class="btn-group">
            <div class="signup-btn">Đăng Ký</div>
            <div class="play-btn">
                <div class="play-btn-inner">
                    <i class="fa fa-play"></i>
                </div>
                <span>Xem Tiện Ích Dịch Vụ</span>
            </div>
        </div>
    </div>
    <div class="hinh-anh">
        <img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/xay_dung_website_template/rsz_1hinh_minh_hoa_1.jpg" alt="">
    </div>
        <!--Kết Thúc Banner-->
</div>

Và kết quả bạn xem hình ảnh dưới đây nha:

Landing page 1

Thiết lập style cho navbar

Trong phần này chúng ta sẽ đi vào thiết kế lại thanh tiêu đề cũng như tạo hiệu ứng hover cho các đường dẫn trong navbar thông qua đoạn code sau nhé:

CSS

/*Thiết lập font và xóa padding margin mặc định*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
/*Chỉnh vị trí, độ rộng, độ cao... cho navbar*/
.header .navbar{
    width: 100%;
    height: 80px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    margin-top: 30px;
}
.logo img{
    margin-left: 100px;
}
.menu ul li {
    display: inline-block;
    padding: 0 25px;
    cursor: pointer;
    font-size: 19px;
    font-weight: 500;
    line-height: 80px;
    align-items: center;
}
/*Tạo hiệu ứng hover cho đường dẫn*/
.menu ul li:hover{
    background-color: #f3ef51;
}
/*Thiết lập style cho nút đăng nhập*/
.login-btn{
    display: block;
    font-size: 19px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 30px;
    background-color: #f3ef51;
    padding: 8px 40px;
    margin-right: 100px;
}

Do mình sử dụng dụng vị trí position:absoluate nên bây giờ sẽ rất khó thấy được thanh tiêu đề vì nó đã bị banner che mất. Do đó chúng ta sẽ đi vào thiết lập style cho banner và xem kết quả của header luôn nhé.

Thiết lập style cho banner

CSS

.banner{
    width: 80%;
    height: 70%;
    position: absolute;
    top: 25%;
    left: 150px;
    color: #fff;
}
.noi-dung{
    width: 50%;
    float: left;
    padding-left: 50px;
}
.noi-dung h1{
    margin-top: 100px;
    font-size: 16px;
    color: #000;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.noi-dung h3{
    font-size: 51px;
    position: relative;
    color: #000;
    margin-top: 30px;
    font-weight: 500;
    line-height: 1;
}
.noi-dung p {
    font-size: 16px;
    margin: 30px 30px 30px 0;
    letter-spacing: 1px;
    color: #000;
    padding-right: 100px;
}
.hinh-anh{
    margin-top: 150px;
    float: right;
    padding-right: 50px;
}
.hinh-anh img{
    width: 90%;
    height: auto;
}

Và kết quả bạn xem hình ảnh đưới đây nhé:

Landing page 2

Trong phần banner này chúng ta còn phải thực hiện một nhiệm vụ hết sức quan trọng mà một trang landing page nào cũng nên có đó chính là nút kêu gọi(call to action). Và trong đoạn mã tiếp theo chúng ta sẽ đi vào thiết lập style cho các nút này nhé:

CSS

.btn-group{
    display: flex;
    width: 100%;
    position: relative;
    padding-left: 50px;
}
.btn-group .signup-btn{
    cursor: pointer;
    display: block;
    color: #000;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    border-radius: 32px;
    background-color: #ffa037;
    padding: 15px 50px;
}
.btn-group .play-btn{
    margin-left: 40px;
    display: inline-flex;
}
.btn-group span{
    color: #000;
    font-size: 15px;
    font-weight: 500;
    margin: auto 20px;
    cursor: pointer;
}
.play-btn-inner{
    height: 50px;
    width: 50px;
    border: 2px solid transparent;
    border-radius: 50%;
    background-color: #000;
}
.play-btn-inner i{
    padding: 15px 19px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
}

Và kết quả bạn xem dưới đây nhé:

Landing page 3

Tạo Phần Giới Thiệu Dịch Vụ

Trong phần này chúng ta sẽ đi vào tạo phần giới thiệu các dịch vụ mà công ty cung cấp để giúp người dùng hiểu rõ hơn về sản phẩm nhé!

HTML

<!--Header-->
<div class="header">...</div>
<!--Header-->
<!--Dịch Vụ-->
<div class="dich-vu">
    <ul>
        <li>
            <img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/xay_dung_website_template/digital-services.png">
            <h1>Dịch Vụ 1</h1>
            <p>Lorem ipsum dolor, sit amet consectetur...</p>
        </li>
        <li>
            <img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/xay_dung_website_template/open-24-hours.png">
            <h1>Dịch Vụ 2</h1>
            <p>Lorem ipsum dolor, sit amet consectetur...</p>
        </li>
        <li>
            <img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/xay_dung_website_template/consultant.png"alt="">
            <h1>Dịch Vụ 3</h1>
            <p>Lorem ipsum dolor, sit amet consectetur...</p>
        </li>
    </ul>
</div>
<!--Dịch Vụ-->

CSS

.dich-vu{
    position: absolute;
    top: 80%;
    width: 100%;
    text-align: center;
    margin-top: 50px;
    padding: 0 300px;
}
.dich-vu ul {
    display: inline-flex;
    margin: 30px auto;
    text-align: center;
}
.dich-vu ul li{
    margin: 0 50px;
    cursor: pointer;
}
.dich-vu ul li p{
    font-size: 16px;
    margin-top: 20px;
    font-weight: 500;
}

Và kết quả cuối cùng bạn xem dưới đây nha:

Landing page 4

Tạo Nút Chia Sẻ Cho Landing Page

Trong phần cuối cùng này chúng ta sẽ đi vào tạo nút chia sẻ mạng xã hội cho trang landing page thông qua đoạn mã dưới đây nha:

HTML

<!--Header-->
<div class="header">...</div>

<!--Dịch Vụ-->
<div class="dich-vu">...</div>

<!--Nút Chia Sẻ Mạng Xã Hội-->
<div class="social-icon">
    <ul>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
    </ul>
</div>

CSS

.social-icon{
    position: fixed;
    right: 30px;
    top:30%;
}
.social-icon ul li{
    margin-top: 5px;
    text-align: center;
}
.social-icon ul li a{
    color: #000;
    padding: 10px;
    display: block;
    font-size: 26px;
}
.social-icon ul li a:hover{
    background-color: #f3ef51;
}

Và kết quả cuối cùng trang landing page bạn xem dưới đây nhé:

Landing page 5

Nếu bạn muốn xem dự án trên Codepen có thể truy cập ở đường dẫn bên dưới nhé!

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những nơi cung cấp kiến thức tạo trang landing page hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!