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.

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

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.

Series: Dự án Landing Page