By GokiSoft.com|
19:40 30/10/2023|
Học HTML5 - CSS3
Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
![GokiSoft.com [Teacher]](https://www.gravatar.com/avatar/fc6ba9324e017d540af3613b3a77dd21.jpg?s=80&d=mm&r=g){kind=avatar}
GokiSoft.com
2022-04-15 13:01:30
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tin Hoc Van Phong - Page</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
.header .banner img {
width: 100%;
}
.header .menu {
background-color: #0082c8;
}
.header .menu ul {
list-style-type: none;
display: flex;
margin: 0px;
padding: 0px;
}
.header .menu ul li {
padding: 8px;
color: white;
border-right: solid white 1px;
cursor: pointer;
}
.header .menu ul li:hover {
background-color: orange;
}
.main {
margin-top: 10px;
}
.panel {
border: solid grey 1px;
margin-bottom: 20px;
}
.panel .panel-heading {
background-color: #0082c8;
color: white;
padding: 10px;
text-align: center;
}
.panel .panel-body ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
.panel .panel-body ul li {
padding: 6px;
border-bottom: dotted grey 1px;
}
.main .main-content {
width: calc(9 * 100% / 12);
}
.main .right-menu {
width: calc(3 * 100% / 12);
padding-left: 10px;
}
.center {
display: flex;
padding-left: 15%;
padding-right: 15%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="banner">
<img src="https://csc.edu.vn/data/images/slider/Tin%20hoc%20Van%20Phong/Banner-Ung-Dung-CNTT-nang-cao-2.png">
</div>
<div class="menu">
<div class="center">
<ul>
<li>Trang Chu</li>
<li>Tin Hoc</li>
<li>Bieu Mau</li>
<li>Khoa Hoc</li>
<li>Tuyen Dung</li>
<li style="border-right: none !important;">Lien He</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="center">
<div class="main-content">
<img src="https://www.aptechvietnam.com.vn/sites/default/files/cover_facebook_4.jpg" style="width: 100%;">
<p>Bai viet</p>
</div>
<div class="right-menu">
<div class="panel">
<div class="panel-heading">
Tin Hoc Van Phong
</div>
<div class="panel-body">
<ul>
<li>Noi dung 1</li>
<li>Noi dung 2</li>
<li>Noi dung 3</li>
<li>Noi dung 4</li>
<li>Noi dung 5</li>
<li>Noi dung 6</li>
</ul>
</div>
</div>
<div class="panel">
<div class="panel-heading">
Tin Hoc Van Phong
</div>
<div class="panel-body">
<ul>
<li>Noi dung 1</li>
<li>Noi dung 2</li>
<li>Noi dung 3</li>
<li>Noi dung 4</li>
<li>Noi dung 5</li>
<li>Noi dung 6</li>
</ul>
</div>
</div>
<div class="panel">
<div class="panel-heading">
Tin Hoc Van Phong
</div>
<div class="panel-body">
<ul>
<li>Noi dung 1</li>
<li>Noi dung 2</li>
<li>Noi dung 3</li>
<li>Noi dung 4</li>
<li>Noi dung 5</li>
<li>Noi dung 6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<h1 style="text-align: center;">Welcome to learn HTML/CSS</h1>
</div>
</div>
</body>
</html>TRẦN VĂN ĐIỆP
2021-03-09 12:42:25
#img_mountains_wide.jpg
https://res.cloudinary.com/wegoup/image/upload/v1615293738/eb7opxrg9ymfnmxoyjvx.jpg#img_nature_wide.jpg
https://res.cloudinary.com/wegoup/image/upload/v1615293739/ycwt2ihb3biz6nrfge7j.jpg#img_snow_wide.jpg
https://res.cloudinary.com/wegoup/image/upload/v1615293739/lb3ft95rajffsdyjsd1f.jpg#slide.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
setInterval(function() {
slideIndex++
showSlides(slideIndex)
}, 3000)
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
TRẦN VĂN ĐIỆP
2021-03-09 12:34:05
#index.html
<!DOCTYPE html>
<html>
<head>
<title>Web Dao Tao Tin Hoc - Truc Tuyen</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<div class="align-center">
<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1587623413/qhwncq3wtjkrsyke6ayw.png">
<h1>Thanh Thao Tin Hoc Chi Trong 6 Buoi</h1>
<img src="https://androidcommunity.com/wp-content/uploads/2016/06/Microsoft-Office-logo-Android-710x307.jpg">
</div>
</div>
<div class="menu">
<div class="align-center">
<ul>
<li>Trang Chu</li>
<li>Tin Hoc</li>
<li>Bieu Mau</li>
<li>Khoa Hoc</li>
<li>Tuyen Dung</li>
<li>Lien He</li>
</ul>
<div class="search">
<input type="text" name="s" placeholder="Tim kiem ..">
<button>Search</button>
</div>
</div>
</div>
</div>
<div class="main">
<div class="align-center">
<div class="main-content">
<!-- Banner -->
<img src="https://png.pngtree.com/thumb_back/fw800/back_our/20190621/ourmid/pngtree-literary-training-institution-banner-poster-image_186257.jpg" style="width: 100%;">
<div class="row">
<div class="col-8">
<img src="https://www.aptechvietnam.com.vn/ae/images/big-banner-sm.jpg" style="width: 100%;max-height: 400px;">
</div>
<div class="col-4">
<img src="https://meetup.vn/uploads/banner/web_Open_Day_240418-03.png" style="width: 100%">
<p>Noi Dung 1</p>
<img src="https://meetup.vn/uploads/banner/web_Open_Day_240418-03.png" style="width: 100%">
<p>Noi Dung 1</p>
</div>
</div>
<h3 style="color: blue">Thiet Ke Noi Dung Tin Hoc Van Phong</h3>
<div class="row">
<div class="col-3">
<img src="https://meetup.vn/uploads/banner/web_Open_Day_240418-03.png" style="width: 100%">
</div>
<div class="col-9">
<h3 style="color: blue">Tieu De 1</h3>
<p>Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS </p>
</div>
</div>
<div class="row">
<div class="col-3">
<img src="https://meetup.vn/uploads/banner/web_Open_Day_240418-03.png" style="width: 100%">
</div>
<div class="col-9">
<h3 style="color: blue">Tieu De 1</h3>
<p>Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS </p>
</div>
</div>
<div class="row">
<div class="col-3">
<img src="https://meetup.vn/uploads/banner/web_Open_Day_240418-03.png" style="width: 100%">
</div>
<div class="col-9">
<h3 style="color: blue">Tieu De 1</h3>
<p>Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS </p>
</div>
</div>
<div class="row">
<div class="col-3">
<img src="https://meetup.vn/uploads/banner/web_Open_Day_240418-03.png" style="width: 100%">
</div>
<div class="col-9">
<h3 style="color: blue">Tieu De 1</h3>
<p>Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS </p>
</div>
</div>
<div class="row">
<div class="col-3">
<img src="https://meetup.vn/uploads/banner/web_Open_Day_240418-03.png" style="width: 100%">
</div>
<div class="col-9">
<h3 style="color: blue">Tieu De 1</h3>
<p>Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS </p>
</div>
</div>
<div class="row">
<div class="col-3">
<img src="https://meetup.vn/uploads/banner/web_Open_Day_240418-03.png" style="width: 100%">
</div>
<div class="col-9">
<h3 style="color: blue">Tieu De 1</h3>
<p>Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS </p>
</div>
</div>
</div>
<div class="menu-right">
<div class="menu-item">
<div class="menu-title">Tin Hoc GokiSoft</div>
<div class="menu-content">
<ul>
<li><label>1</label>Muc 1</li>
<li><label>2</label>Muc 1</li>
<li><label>3</label>Muc 1</li>
<li><label>4</label>Muc 1</li>
<li><label>5</label>Muc 1</li>
<li><label>6</label>Muc 1</li>
</ul>
</div>
</div>
<div class="menu-item">
<div class="menu-title">Tin Hoc GokiSoft</div>
<div class="menu-content">
<ul>
<li><label>1</label>Muc 1</li>
<li><label>2</label>Muc 1</li>
<li><label>3</label>Muc 1</li>
<li><label>4</label>Muc 1</li>
<li><label>5</label>Muc 1</li>
<li><label>6</label>Muc 1</li>
</ul>
</div>
</div>
<div class="menu-item">
<div class="menu-title">Tin Hoc GokiSoft</div>
<div class="menu-content">
<ul>
<li><label>1</label>Muc 1</li>
<li><label>2</label>Muc 1</li>
<li><label>3</label>Muc 1</li>
<li><label>4</label>Muc 1</li>
<li><label>5</label>Muc 1</li>
<li><label>6</label>Muc 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>#style.css
body {
margin: 0px;
padding: 0px;
}
.container {
display: block;
width: 100%;
}
.align-center {
width: 70%;
margin: 0px auto;
display: flex;
}
.header {
display: block;
width: 100%;
}
.header .logo {
display: flex;
width: 100%;
background-color: #75c5ea;
padding: 15px;
}
.header .logo img {
max-height: 60px;
}
.header .logo h1 {
margin-left: 25px;
margin-right: 25px;
margin-top: 5px;
margin-bottom: 5px;
}
.header .menu {
display: flex;
width: 100%;
background-color: #1274ec;
color: white;
}
.header .menu ul {
display: flex;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 75%;
}
.header .menu ul li {
padding-left: 10px;
padding-right: 10px;
border-right: solid #e4e0e0 1px;
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
}
.header .menu ul li:hover {
background-color: orange;
}
.header .search {
width: 25%;
text-align: right;
margin-top: 5px;
}
.header .search input {
max-width: 120px;
}
.main {
display: flex;
}
.main .main-content {
float: left;
width: 75%;
padding: 10px;
}
.main .menu-right {
float: left;
width: 25%;
}
.menu-item {
display: block;
border: solid #e0dede 1px;
padding: 0px;
margin: 0px;
margin-top: 10px;
}
.menu-item .menu-title {
background-color: orange;
border-radius: 3px;
color: white;
padding: 5px;
}
.menu-item .menu-content ul {
list-style-type: none;
margin: 0px;
padding: 0px;
padding-left: 5px;
}
.menu-item .menu-content ul li {
margin-bottom: 10px;
margin-top: 10px;
border-bottom: solid #f9f7f7 1px;
}
.menu-item .menu-content ul li label {
background-color: #1274ec;
padding: 6px;
color: white;
margin-right: 5px;
border-radius: 4px;
}
.row {
display: flex;
width: 100%;
border-bottom: solid #f9f7f7 1px;
}
.col-8 {
width: 66.67%;
float: left;
padding: 5px;
padding-left: 0px;
}
.col-4 {
width: 33.33%;
float: left;
padding: 5px;
}
.col-3 {
width: 25%;
}
.col-9 {
width: 75%;
padding: 10px;
}![Vũ Ngọc Văn [community,C2010L]](https://www.gravatar.com/avatar/3bec4690245af20ea34f68305e3e24b1.jpg?s=80&d=mm&r=g){kind=avatar}
Vũ Ngọc Văn
2021-03-09 02:53:24
https://vungocvan-aptech.herokuapp.com/0306/tinhocsaoviet.html
![Nguyễn Minh Hiếu [community,C2010L]](https://www.gravatar.com/avatar/cd93ed3dad5ea834fc22cba6a363c9d9.jpg?s=80&d=mm&r=g){kind=avatar}
Nguyễn Minh Hiếu
2021-03-08 12:34:53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="head">
<img src="giasu.jpg" alt="">
</div>
<div class="nav">
<ul>
<li>
<a href=""><img src="icon.png" alt=""></a>
</li>
<li><a href="">Tin Học</a></li>
<li><a href="">Biểu Mẫu</a></li>
<li><a href="">Khóa Học</a></li>
<li><a href="">Tuyển dụng</a></li>
<li><a href="">Liên Hệ</a></li>
<div class="search">
<input type="text" placeholder="Tìm kiếm">
<button><i class="fa fa-search"></i></button>
</div>
</ul>
</div>
<div class="main">
<div class="left">
<img src="1.jpg" alt="">
<div class="left-title">
<img src="3.jpg" alt="">
</div>
<div class="right-title">
<img src="4.jpg" alt="">
<a href="">
<p>gia sư tin học</p>
</a>
<a href="">Gia Sư Tin Học Biên Hòa - Đào Tạo Tin Học Cho Người Đi Làm</a>
</div>
</div>
<div class="right">
<img src="2.jpg" alt="">
<h2>Bài viết mới</h2>
<ol type="1">
<li>
<p>Tổng Hợp Bài Tập Thực Hành Vẽ AutoCad 2D Đầy Đủ Từ Cơ Bản Cho Người Mới Bắt Đầu</p>
</li>
<li>
<p>Lớp Học Vẽ Kỹ Thuật AutoCad 2D, 3D Tại Bình Dương - Dĩ An, Thuận An, Thủ Dầu Một</p>
</li>
</ol>
</div>
</div>
<div class="footer">
<div class="footer-left">
<h3>Công ty TNHH Giáo Dục Tin Học Sao Việt</h3>
<p>MST: 3603708616</p>
<p>Với hơn 10 năm thành lập và phát triển. Chúng tôi đã xây dựng được đội ngũ nòng cốt hơn 100 nhân sự chất lượng cao trong các lĩnh vực về Công nghệ thông tin. Công ty Giáo Dục Sao Việt tự hào là đơn vị hàng đầu trong lĩnh vực tư vấn và đào tạo tin học, thiết kế phần mềm, thiết kế website, Quảng cáo - Marketing online. Hơn 5000+ khách hàng đã tin tưởng và sử dụng các dịch vụ của chúng tôi liên tục trong nhiều năm qua. Tin học Sao Việt hiện nay là đối tác đào tạo quan trọng của nhiều công ty và tổ chức giáo dục tại TP.HCM, Hà Nội, Đồng Nai, Bình Dương, và các tỉnh thành trên khắp cả nước.</p>
<p>Điện thoại 24/7: 093 11 44 858</p>
<p>Email: <a href="">Trungtamtinhocsaoviet@gmail.com</a></p>
</div>
<div class="footer-right">
<p>Trung Tâm Tin Học Sao Việt</p>
<ol type="1">
<li>
<p>TP.HCM: 15C Trường Sơn, Phường 15 Quận 10 Hồ Chí Minh 70000
150000-2500000 <br>Tầng 14, tòa nhà HM Town, 412 Nguyễn Thị Minh Khai, P.05, Q.03, TP. HCM</p>
</li>
<li>
<p> Đồng Nai: Số 46B/3, KP 2, Phường Tân Mai, Thành Phố Biên Hòa</p>
</li>
<li>
<p>Bình Dương: 271 Nguyễn Thị Minh Khai, Phường Phú Hòa, Thành phố Thủ Dầu Một, Bình Dương</p>
</li>
<li>
<p>Hà Nội: 38/58/14 Xuân La, quận Tây Hồ, Hà Nội</p>
</li>
</ol>
</div>
<div class="footer-link">
<a href="">Thiết kế website ở Biên Hòa</a>
<a href=""> Cài phần mềm máy tính HCM </a>
<a href="">Cài phần mềm đồ họa HCM</a>
<a href=""> Trung tâm tin học HCM</a>
<a href=""> Tin học văn phòng</a>
<a href=""> Trung tâm Tin học Biên Hòa</a>
<a href=""> Dịch vụ sửa web </a>
<a href=""> Thuê Xe Máy Sài Gòn</a>
</div>
</div>
<div class="footer-address">
<h4>© 2021 Trung Tâm Tin Học Sao Việt</h4>
</div>
</div>
</body>
</html>body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
}
.container .head{
width: 100%;
}
.head img{
width: 100%;
}
.container .nav{
width: 100%;
background-color: #0082c8;
margin-top: -15px;
}
.nav ul{
margin-left: 210px;
}
.nav ul li{
display: inline-block;
list-style-type: none;
border-right: 1px solid #fff;
}
.nav ul li img{
vertical-align: middle;
width: 100%;
}
.nav ul li a{
display: block;
height: 50px;
line-height: 50px;
text-decoration: none;
color: #fff;
font-size: 22px;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
.nav .search{
display: inline-block;
padding-left: 150px;
}
.search input{
padding: 16px 40px 11px;
box-sizing: border-box;
border-radius: 48px 0px 0px 48px;
outline: none;
border: none;
font-size: 14px;
}
.search button{
padding: 13px 15px 11px;
border: none;
margin-left: -5px;
border-radius: 0px 48px 48px 0px;
background-color: #fff;
outline: none;
}
i.fa.fa-search{
font-size: 19px;
padding-right: 15px;
}
.main{
width: 100%;
margin-left: 200px;
}
.main .left{
width: 50%;
float: left;
}
.left img{
width: 100%;
}
.left .left-title{
width: 55%;
float: left;
margin-bottom: 10px;
}
.right-title{
width: 42%;
float: left;
margin-left: 20px;
}
.main .right{
width: 25%;
float: left;
margin-left: 40px;
text-align: center;
border: 1px solid grey;
}
.right-title a{
font-weight: bold;
text-decoration: none;
}
.right-title a p{
text-transform: uppercase;
font-size: 13px;
color: #a1a1a1;
}
.right-title a p:hover{
text-decoration: underline;
}
.right-title a{
font-size: 17px;
line-height: 1.5;
color: blue;
}
.right-title a:hover{
color: red;
}
.right img{
width: 80%;
padding-top: 30px;
}
.right h2{
font-size: 33px;
color: red;
}
.right ol{
color: red;
padding-right: 10px;
}
.right li p{
text-align: left;
margin-top: 20px;
font-size: 19px;
line-height: 1;
font-weight: normal;
color: black;
}
.footer{
width: 100%;
clear: both;
background-color: #252525;
height: 460px;
line-height: 460px;
line-height: 1.5;
}
.footer p{
color: #efe9e9ed;
font-size: 18px;
font-weight: 300;
}
.footer ol{
color: #efe9e9ed;
}
.footer .footer-left{
width: 50%;
margin-left: 200px;
}
.footer-left h3{
color: #efe9e9ed;
padding-top: 20px;
}
.footer .footer-right{
float: right;
width: 30%;
margin-top: -382px;
margin-right: 60px;
}
.footer a{
color: #efe9e9ed;
text-decoration: none;
}
.footer-link{
width: 83%;
margin-left: 200px;
}
.footer-link a{
padding-right: 10px;
border-right: 1px solid #efe9e9ed;
margin-right: 5px;
font-size: 19px;
}
.footer-link a:hover{
text-decoration: underline;
color: red;
transition: 1s;
}
.footer-address{
width: 100%;
height: 50px;
background-color: #000000e0;
margin-top: -27px;
}
.footer-address h4{
color: #efe9e9ed;
margin-left: 200px;
font-size: 20px;
padding-top: 15px;
}
TRẦN VĂN ĐIỆP
2021-03-08 02:54:54
#index.html
<!DOCTYPE html>
<html>
<head>
<title>Web Tin Hoc - Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<div class="text-center">
<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1587623413/qhwncq3wtjkrsyke6ayw.png">
<h1>Thanh Thao Tin Hoc Trong 6 Buổi</h1>
<img src="https://gravitatesolutions.com/refresh/wp-content/uploads/2015/09/connector-excel-logo.png">
</div>
</div>
<div class="menu">
<div class="text-center">
<ul>
<li>Home</li>
<li>Tin Hoc</li>
<li>Bieu Mau</li>
<li>Khoa Hoc</li>
<li>Tuyen Dung</li>
<li>Lien He</li>
</ul>
<div class="search">
<input type="text" name="s" placeholder="Tim kiem">
<button>Search</button>
</div>
</div>
</div>
</div>
<div class="main">
<div class="text-center">
<div class="main-content">
<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1584677107/piu7hovjcwyy5evcgtfb.png" style="width: 100%; height: 300px;">
<div class="row">
<div class="col-8">
<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1583834689/vf4gyxt7gmthx4eykvlp.jpg" style="width: 100%">
</div>
<div class="col-4">
<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1583834689/vf4gyxt7gmthx4eykvlp.jpg" style="width: 100%">
<p>Bai viet 1</p>
<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1583834689/vf4gyxt7gmthx4eykvlp.jpg" style="width: 100%">
<p>Bai viet 2</p>
</div>
</div>
</div>
<div class="menu-right">
<div class="menu-content">
<h1>Tin Hoc</h1>
<ol>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
</ol>
</div>
<div class="menu-content">
<h1>Tin Hoc</h1>
<ol>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
</ol>
</div>
<div class="menu-content">
<h1>Tin Hoc</h1>
<ol>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
</ol>
</div>
<div class="menu-content">
<h1>Tin Hoc</h1>
<ol>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
</ol>
</div>
<div class="menu-content">
<h1>Tin Hoc</h1>
<ol>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
<li>Dang ki 1</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</body>
</html>#style.css
body {
padding: 0px;
margin: 0px;
}
.container {
width: 100%;
display: block;
}
.header {
width: 100%;
display: block;
}
.header .logo {
display: flex;
background-color: #7de7e6;
padding: 5px;
}
.header .logo img {
max-height: 80px;
}
.header .logo h1 {
font-size: 45px;
margin-left: 35px;
margin-right: 35px;
}
.header .menu {
width: 100%;
background-color: #094bbc;
color: white;
}
.text-center {
width: 70%;
margin: 0px auto;
display: flex;
}
.header .menu ul {
display: flex;
list-style-type: none;
margin: 0px;
width: 75%;
}
.header .menu ul li {
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
border-right: solid white 1px;
cursor: pointer;
}
.header .menu ul li:hover {
background-color: orange;
}
.header .menu .search {
width: 25%;
}
.header .menu .search input, .header .menu .search button {
font-size: 22px;
margin-top: 6px;
max-width: 180px;
}
.main {
width: 100%;
display: flex;
}
.main .main-content {
width: 70%;
float: left;
}
.main .menu-right {
width: 30%;
float: left;
}
.row {
width: 100%;
display: flex;
}
.row .col-8 {
width: 66.67%;
float: left;
}
.row .col-4 {
width: 33.33%;
float: left;
}
.menu-content {
border: solid black 2px;
padding: 5px;
margin: 5px;
}