Site icon Init HTML

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

Admin
Dự án Landing Page

Xem demo

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

Cần chuẩn bị

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/tilt.js@1.1.20/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.

Exit mobile version