Giới thiệu dự án Landing Page

Bài viết này giới thiệu dự án thiết kế Landing Page “Intense” từ A-Z sử dụng Bootstrap là CSS Framework chính. Sau khi theo dõi và thực hành dự án này, các bạn sẽ có một trang Landing Page với đầy đủ các chức năng cơ bản.

Xem demo

Các bài viết cần tham khảo

Cần chuẩn bị

Đã cài đặt localhost.
Phần mềm lập trình: Sublime Text hoặc Brackets.
Kiến thức HTML/CSS, JavaScript, Bootstrap căn bản.
Theo sát bài viết.
Thời gian và sự kiên nhẫn.

Bắt đầu

Tạo thư mục intense trong htdocs với cấu trúc như sau.

intense/
├── css/
│   ├── main.css
├── img/
│   ├── partners
│       ├── partner-01.png
│       ├── partner-02.png
│       ├── partner-03.png
│       ├── partner-04.png
│       ├── partner-05.png
│       ├── partner-06.png
│       ├── partner-07.png
│       ├── partner-08.png
│   ├── bg-01.jpg
│   ├── bg-02.jpg
│   ├── favicon.ico
│   ├── logo-dark.png
│   ├── logo-light.png
│   ├── slide-01.gif
│   ├── slide-02.png
│   ├── slide-03.png
├── js/
│   ├── main.js
│   ├── parallax.min.js
├── index.html

Mình sẽ cung cấp cây thư mục này ở cuối bài.

Nội dung `main.css`

/* Cơ bản */
body {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #9b9b9b;
    line-height: 1.6;
}

Nội dung `main.js`

$(document).ready(function() {
    // JS ở đây
});

Nội dung `index.html`

<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta charset="utf-8">
<title>Intense | Startup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=vietnamese">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dest/tilt.jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Nội dung trên đã có Bootstrap 3, jQuery, Tilt.js, Parallax, Font Awesome, Google Font Roboto…

Tải về

Các bài viết sau, chúng ta sẽ bắt đầu thực hành từng phần của Landing Page này.

5/5 (1 bình chọn)

Bình Luận