<!DOCTYPE html>
<html lang="en">
<head>
<title>Lập trình từ đầu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Tạo kiểu cho tiêu đề */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Tạo kiểu cho thanh điều hướng */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Tạo kiểu cho liên kết */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* đổi màu khi di chuột qua */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Tạo ba cột  nằm cạnh nhau */
.column {
  float: left;
}
/* cột trái và phải */
.column.side {
  width: 25%;
}

/* cột giữa */
.column.middle {
  width: 50%;
}

/* xóa các phần tử nổi sau các cột */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Bố cục đáp ứng - các cột xếp chồng lên nhau thay vì xếp cạnh nhau */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
/*Tạo kiểu cho chân trang*/
.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
  
  <div class="column middle">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>
  <div class="footer">
  <p>Footer</p>
</div>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.