By GokiSoft.com|
19:46 04/03/2021|
Học HTML5 - CSS3
Bài tập ôn luyện IFrame - 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)
![Nguyễn Anh Vũ [T2008A]](https://www.gravatar.com/avatar/8863d24ed74b396082becbc4db8331fd.jpg?s=80&d=mm&r=g)
Nguyễn Anh Vũ
2020-10-16 09:40:24
#3.2.html
<!DOCTYPE html>
<html>
<head>
<title>EasyBank-Whole World One Bank</title>
<meta charset="utf-8">
<style type="text/css">
.colum{
width: 700px;
height: 500px;
margin: 0 auto;
}
.colum-1{
width: 100%;
height: 30%;
border: 1px solid;
}
.colum-2{
width: 450px;
height: 100px;
margin: 0 auto;
margin-top: 25px;
background-color: #faffad;
}
#back-1{
font-size:20px;
padding-top: 20px;
margin-left: 100px;
color: #A03055;
}
#back-2{
font-size: 23px;
margin-left: 250px;
padding-top: 10px;
color: #336A2A;
}
.sup{
width: 100%;
height: 60%;
display: flex;
}
.supper{
border: 1px solid;
width: 30%;
height: 100%;
}
.bottom{
border: 1px solid;
width: 70%;
height: 100%;
padding-left: 3px;
}
</style>
</head>
<body>
<div class="colum">
<div class="colum-1">
<div class="colum-2">
<div id="back-1">Whole World One Bank...</div>
<div id="back-2">EasyBank</div>
</div>
</div>
<div class="sup">
<div class="supper">
<ul>
<li><a href="aboutus.html" style="color: #CC66CC">About Us</a></li>
<li><a href="products.html" style="color: #CC66CC">Products and Services</a></li>
<li><a href="contactus.html" style="color: #CC66CC">Contact Us</a></li>
</ul>
</div>
<div class="bottom">
<p>
<h2>-: Contact Us :-</h2>
</p>
<p> Contact by calling the relevant cutomet service telephone numbers and serding e-mail</p>
<br>
<b href="contactus.html" style="color: black">Customer Servikes</b>
<br>
<b href="contactus.html" style="color: black">Telephone Number 096-465-7860</b>
<br>
<b href="contactus.html" style="color: black">E-mail:<a style="color: blue">nguyenanhvu280402@gmail.com</a> </b>
</div>
</div>
</div>
</body>
</html>
![Nguyễn Anh Vũ [T2008A]](https://www.gravatar.com/avatar/8863d24ed74b396082becbc4db8331fd.jpg?s=80&d=mm&r=g)
Nguyễn Anh Vũ
2020-10-16 09:29:08
#2.2.html
<!DOCTYPE html>
<html>
<head>
<title>EasyBank-Whole World One Bank</title>
<meta charset="utf-8">
<style type="text/css">
.colum{
width: 700px;
height: 500px;
margin: 0 auto;
}
.colum-1{
width: 100%;
height: 30%;
border: 1px solid;
}
.colum-2{
width: 450px;
height: 100px;
margin: 0 auto;
margin-top: 25px;
background-color: #faffad;
}
#back-1{
font-size:20px;
padding-top: 20px;
margin-left: 100px;
color: #A03055;
}
#back-2{
font-size: 23px;
margin-left: 250px;
padding-top: 10px;
color: #336A2A;
}
.sup{
width: 100%;
height: 60%;
display: flex;
}
.supper{
border: 1px solid;
width: 30%;
height: 100%;
}
.bottom{
border: 1px solid;
width: 70%;
height: 100%;
padding-left: 3px;
}
</style>
</head>
<body>
<div class="colum">
<div class="colum-1">
<div class="colum-2">
<div id="back-1">Whole World One Bank...</div>
<div id="back-2">EasyBank</div>
</div>
</div>
<div class="sup">
<div class="supper">
<ul>
<li><a href="aboutus.html" style="color: #CC66CC">About Us</a></li>
<li><a href="products.html" style="color: #CC66CC">Products and Services</a></li>
<li><a href="contactus.html" style="color: #CC66CC">Contact Us</a></li>
</ul>
</div>
<div class="bottom">
<p>
<h2>-: Products and Services :-</h2>
</p>
<p> EasyBank is, one of the biggest bank in the World, offering a wide range of insurance products and account services to customers. </p>
<br>
<li href="contactus.html" style="color: black">It provides credit cards</li>
<br>
<li href="contactus.html" style="color: black">It has a branch network that provides professional banking</li>
<br>
</div>
</div>
</div>
</body>
</html>
![Nguyễn Anh Vũ [T2008A]](https://www.gravatar.com/avatar/8863d24ed74b396082becbc4db8331fd.jpg?s=80&d=mm&r=g)
Nguyễn Anh Vũ
2020-10-16 09:03:54
#1.2.html
<!DOCTYPE html>
<html>
<head>
<title>EasyBank-Whole World One Bank</title>
<meta charset="utf-8">
<style type="text/css">
.colum{
width: 700px;
height: 500px;
margin: 0 auto;
}
.colum-1{
width: 100%;
height: 30%;
border: 1px solid;
}
.colum-2{
width: 450px;
height: 100px;
margin: 0 auto;
margin-top: 25px;
background-color: #faffad;
}
#back-1{
font-size:20px;
padding-top: 20px;
margin-left: 100px;
color: #A03055;
}
#back-2{
font-size: 23px;
margin-left: 250px;
padding-top: 10px;
color: #336A2A;
}
.sup{
width: 100%;
height: 60%;
display: flex;
}
.supper{
border: 1px solid;
width: 30%;
height: 100%;
}
.bottom{
border: 1px solid;
width: 70%;
height: 100%;
padding-left: 3px;
}
</style>
</head>
<body>
<div class="colum">
<div class="colum-1">
<div class="colum-2">
<div id="back-1">Whole World One Bank...</div>
<div id="back-2">EasyBank</div>
</div>
</div>
<div class="sup">
<div class="supper">
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="products.html">Products and Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div class="bottom">
<p>
<h2>-: About Us :-</h2>
</p>
<p>At EasyBank we belive in helping people to organize their requirements. We provide services snd products worldwide. The details of our products and services can be found throughout this site.</p>
<p>
<h2>-: History :-</h2>
</p>
<p>EasyBank was established in 1945 in the United States. Nicholas k. Smith became the first president.<br/>
EasyBank opened an office in Paris in 2000.</p>
</div>
</div>
</div>
</body>
</html>
![hainguyen [T2008A]](https://www.gravatar.com/avatar/32855ce6db55d60134d830aee06b41e5.jpg?s=80&d=mm&r=g)
hainguyen
2020-10-15 14:34:34
#products.html
<!DOCTYPE html>
<html>
<head>
<title>EasyBank-Whole World One Bank</title>
<meta charset="utf-8">
<style type="text/css">
.colum{
width: 700px;
height: 500px;
margin: 0 auto;
}
.colum-1{
width: 100%;
height: 30%;
border: 1px solid;
}
.colum-2{
width: 450px;
height: 100px;
margin: 0 auto;
margin-top: 25px;
background-color: #faffad;
}
#back-1{
font-size:20px;
padding-top: 20px;
margin-left: 100px;
color: #A03055;
}
#back-2{
font-size: 23px;
margin-left: 250px;
padding-top: 10px;
color: #336A2A;
}
.sup{
width: 100%;
height: 60%;
display: flex;
}
.supper{
border: 1px solid;
width: 30%;
height: 100%;
}
.bottom{
border: 1px solid;
width: 70%;
height: 100%;
padding-left: 3px;
}
</style>
</head>
<body>
<div class="colum">
<div class="colum-1">
<div class="colum-2">
<div id="back-1">Whole World One Bank...</div>
<div id="back-2">EasyBank</div>
</div>
</div>
<div class="sup">
<div class="supper">
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="products.html">Products and Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div class="bottom">
<p>
<h2>-: Products and Services :-</h2>
</p>
<p>
EasyBank is, one of the biggest in the World, offering a wide range of insurance products and account services to customers.
</p>
<ul>
<li>It provides credit cards.</li>
<li>It as a branch network that provides professional baking.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
![hainguyen [T2008A]](https://www.gravatar.com/avatar/32855ce6db55d60134d830aee06b41e5.jpg?s=80&d=mm&r=g)
hainguyen
2020-10-15 14:33:42
#contactus.html
<!DOCTYPE html>
<html>
<head>
<title>EasyBank-Whole World One Bank</title>
<meta charset="utf-8">
<style type="text/css">
.colum{
width: 700px;
height: 500px;
margin: 0 auto;
}
.colum-1{
width: 100%;
height: 30%;
border: 1px solid;
}
.colum-2{
width: 450px;
height: 100px;
margin: 0 auto;
margin-top: 25px;
background-color: #faffad;
}
#back-1{
font-size:20px;
padding-top: 20px;
margin-left: 100px;
color: #A03055;
}
#back-2{
font-size: 23px;
margin-left: 250px;
padding-top: 10px;
color: #336A2A;
}
.sup{
width: 100%;
height: 60%;
display: flex;
}
.supper{
border: 1px solid;
width: 30%;
height: 100%;
}
.bottom{
border: 1px solid;
width: 70%;
height: 100%;
padding-left: 3px;
}
</style>
</head>
<body>
<div class="colum">
<div class="colum-1">
<div class="colum-2">
<div id="back-1">Whole World One Bank...</div>
<div id="back-2">EasyBank</div>
</div>
</div>
<div class="sup">
<div class="supper">
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="products.html">Products and Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div class="bottom">
<p>
<h2>-: Contacts Us :-</h2>
</p>
<p>
Contact us by calling relevant customer service telephone numbers and sending e-mail.
</p>
<p>
<b>Customer Services</b>
<br/>
<b>Telephone Number:</b>033-244-5341
<br/>
<b>E-mail:</b><a href="#" >abc@gmail.com</a>
</p>
</div>
</div>
</div>
</body>
</html>
![hainguyen [T2008A]](https://www.gravatar.com/avatar/32855ce6db55d60134d830aee06b41e5.jpg?s=80&d=mm&r=g)
hainguyen
2020-10-15 14:32:59
#home.html
<!DOCTYPE html>
<html>
<head>
<title>EasyBank-Whole World One Bank</title>
<meta charset="utf-8">
<style type="text/css">
.colum{
width: 700px;
height: 500px;
margin: 0 auto;
}
.colum-1{
width: 100%;
height: 30%;
border: 1px solid;
}
.colum-2{
width: 450px;
height: 100px;
margin: 0 auto;
margin-top: 25px;
background-color: #faffad;
}
#back-1{
font-size:20px;
padding-top: 20px;
margin-left: 100px;
color: #A03055;
}
#back-2{
font-size: 23px;
margin-left: 250px;
padding-top: 10px;
color: #336A2A;
}
.sup{
width: 100%;
height: 60%;
display: flex;
}
.supper{
border: 1px solid;
width: 30%;
height: 100%;
}
.bottom{
border: 1px solid;
width: 70%;
height: 100%;
padding-left: 3px;
}
</style>
</head>
<body>
<div class="colum">
<div class="colum-1">
<div class="colum-2">
<div id="back-1">Whole World One Bank...</div>
<div id="back-2">EasyBank</div>
</div>
</div>
<div class="sup">
<div class="supper">
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="products.html">Products and Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div class="bottom">
<p>
<h2>-: About Us :-</h2>
</p>
<p>At EasyBank we belive in helping people to organize their requirements. We provide services snd products worldwide. The details of our products and services can be found throughout this site.</p>
<p>
<h2>-: History :-</h2>
</p>
<p>EasyBank was established in 1945 in the United States. Nicholas k. Smith became the first president.<br/>
EasyBank opened an office in Paris in 2000.</p>
</div>
</div>
</div>
</body>
</html>
![Triệu Văn Lăng [T2008A]](https://www.gravatar.com/avatar/1348e3562c6492c26f796cb1f45982a1.jpg?s=80&d=mm&r=g)
Triệu Văn Lăng
2020-10-15 10:29:10
https://thienlac.herokuapp.com/bai1990/AboutUs.html
![Nguyễn Xuân Mai [T2008A]](https://www.gravatar.com/avatar/d3d863d6f47708501814fb41e9c38f31.jpg?s=80&d=mm&r=g)
Nguyễn Xuân Mai
2020-10-15 06:55:36
https://t2008amai.herokuapp.com/Lesson04/frame_b1.html
https://t2008amai.herokuapp.com/Lesson04/AboutUs.html
https://t2008amai.herokuapp.com/Lesson04/Products.html
https://t2008amai.herokuapp.com/Lesson04/ContactUs.html
![Nguyễn Hữu Hiếu [T2008A]](https://www.gravatar.com/avatar/ca2884508b617fee77f000c7d99c219d.jpg?s=80&d=mm&r=g)
Nguyễn Hữu Hiếu
2020-10-15 02:41:37
#1990.html
<!DOCTYPE html>
<html>
<head>
<title>Easy Bank</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<p class="texttop1">Whole World One Bank...</p>
<p class="texttop2">Easy Bank</p>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="product.html">Products and Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="right">
<h2>About Us</h2>
<p>At Easy Bank we belive in helping......</p>
<h2>History</h2>
<p>Easy Bank in 1945 in the US,...</p>
</div>
</div>
</body>
</html>
#about.html
<!DOCTYPE html>
<html>
<head>
<title>Easy Bank</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<p class="texttop1">Whole World One Bank...</p>
<p class="texttop2">Easy Bank</p>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="product.html">Products and Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="right">
<h2>About Us</h2>
<p>At Easy Bank we belive in helping......</p>
<h2>History</h2>
<p>Easy Bank in 1945 in the US,...</p>
</div>
</div>
</body>
</html>
#contact.html
<!DOCTYPE html>
<html>
<head>
<title>Easy Bank</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<p class="texttop1">Whole World One Bank...</p>
<p class="texttop2">Easy Bank</p>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="product.html">Products and Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="right">
<h2>Contact</h2>
<p>Contact us by calling,,,</p>
</div>
</div>
</body>
</html>
#product.html
<!DOCTYPE html>
<html>
<head>
<title>Easy Bank</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<p class="texttop1">Whole World One Bank...</p>
<p class="texttop2">Easy Bank</p>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="product.html">Products and Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="right">
<h2>Products and Services</h2>
<p>At Easy Bank we belive in helping......</p>
<h2>Products</h2>
<p>Easy Bank product in 1945 in the US,...</p>
</div>
</div>
</body>
</html>
#style.css
.top {
background-color: #f2cac4;
width: 700px;
height: 300px;
margin: 0 auto;
}
.texttop1 {
position: absolute;
padding-top: 50px;
padding-left: 150px;
font-size: 20px;
font-family: monospace;
color: #b55f51;
}
.texttop2 {
position: absolute;
padding-top: 100px;
padding-left: 300px;
font-size: 40px;
font-family: arial;
color: #438f50;
}
.main {
display: flex;
}
.left {
border: solid black 1px;
float: left;
width: 20%;
height: 500px;
}
.right {
border: solid black 1px;
float: left;
width: 80%;
height: 500px;
padding-left: 20px;
}
![Nguyễn Tiến Đạt [T2008A]](https://www.gravatar.com/avatar/b5819cd0adc95c727c7ad0c2bcf6098b.jpg?s=80&d=mm&r=g)
Nguyễn Tiến Đạt
2020-10-14 04:09:30
#about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EasyBank - Whole World One Bank</title>
<style>
.root{
width: 700px;
height: 600px;
margin: 0 auto;
}
.top{
width: 99.75%;
height: 30%;
border: 1px solid;
}
.main{
width: 100%;
height: 70%;
display: flex;
}
.left{
width: 25%;
height: 100%;
border: 1px solid;
}
.right{
width: 75%;
height: 100%;
border: 1px solid;
padding-left: 2px;
}
.content{
width: 500px;
height: 160px;
margin: 0 auto;
margin-top: 10px;
background-color: #EDE7B9;
}
.chu1{
font-size: 23px;
padding-top: 44px;
margin-left: 87px;
color: #A03055;
}
.chu2{
font-size: 28px;
margin-left: 254px;
padding-top: 3px;
color: #336A2A;
}
ul{
padding-left: 28px;
}
li{
padding-bottom: 5px;
}
</style>
</head>
<body>
<div class="root">
<div class="top">
<div class="content">
<div class="chu1">
Whole World One Bank...
</div>
<div class="chu2">
EasyBank
</div>
</div>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="about.html">About us</a></li>
<li><a href="product.html">Products and Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="right">
<p>
<h2>-: About Us :-</h2>
</p>
<p>At EasyBank we believe in helping people to organize their requirements. We provide services and products worldwide. The details of our products and services can be found throughout this site.</p>
<p>
<h2>-: History :-</h2>
</p>
<p>EasyBank was established in 1945 in the United States. Nicholas K. Smith became the first president. EasyBank opened an office in Paris in 2000.</p>
</div>
</div>
</div>
</body>
</html>
#contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EasyBank - Whole World One Bank</title>
<style>
.root{
width: 700px;
height: 600px;
margin: 0 auto;
}
.top{
width: 99.75%;
height: 30%;
border: 1px solid;
}
.main{
width: 100%;
height: 70%;
display: flex;
}
.left{
width: 25%;
height: 100%;
border: 1px solid;
}
.right{
width: 75%;
height: 100%;
border: 1px solid;
padding-left: 2px;
}
.content{
width: 500px;
height: 160px;
margin: 0 auto;
margin-top: 10px;
background-color: #EDE7B9;
}
.chu1{
font-size: 23px;
padding-top: 44px;
margin-left: 87px;
color: #A03055;
}
.chu2{
font-size: 28px;
margin-left: 254px;
padding-top: 3px;
color: #336A2A;
}
ul{
padding-left: 28px;
}
li{
padding-bottom: 5px;
}
</style>
</head>
<body>
<div class="root">
<div class="top">
<div class="content">
<div class="chu1">
Whole World One Bank...
</div>
<div class="chu2">
EasyBank
</div>
</div>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="about.html">About us</a></li>
<li><a href="product.html">Products and Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="right">
<p>
<h2>-: Contact Us :-</h2>
</p>
<p>Contact us by calling the relevant customer service telephone numbers and sending e-mails.</p>
<b>Customer Services</b>
<br>
<b>Telephone Number:</b> 033-244-5341
<br>
<b>Email:</b><a href="#">customerservices@easybank.com</a>
<br>
</div>
</div>
</div>
</body>
</html>
#main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EasyBank - Whole World One Bank</title>
<style>
.root{
width: 700px;
height: 600px;
margin: 0 auto;
}
.top{
width: 99.75%;
height: 30%;
border: 1px solid;
}
.main{
width: 100%;
height: 70%;
display: flex;
}
.left{
width: 25%;
height: 100%;
border: 1px solid;
}
.right{
width: 75%;
height: 100%;
border: 1px solid;
padding-left: 2px;
}
.content{
width: 500px;
height: 160px;
margin: 0 auto;
margin-top: 10px;
background-color: #EDE7B9;
}
.chu1{
font-size: 23px;
padding-top: 44px;
margin-left: 87px;
color: #A03055;
}
.chu2{
font-size: 28px;
margin-left: 254px;
padding-top: 3px;
color: #336A2A;
}
ul{
padding-left: 28px;
}
li{
padding-bottom: 5px;
}
</style>
</head>
<body>
<div class="root">
<div class="top">
<div class="content">
<div class="chu1">
Whole World One Bank...
</div>
<div class="chu2">
EasyBank
</div>
</div>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="about.html">About us</a></li>
<li><a href="product.html">Products and Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="right">
</div>
</div>
</div>
</body>
</html>
#product.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EasyBank - Whole World One Bank</title>
<style>
.root{
width: 700px;
height: 600px;
margin: 0 auto;
}
.top{
width: 99.75%;
height: 30%;
border: 1px solid;
}
.main{
width: 100%;
height: 70%;
display: flex;
}
.left{
width: 25%;
height: 100%;
border: 1px solid;
}
.right{
width: 75%;
height: 100%;
border: 1px solid;
padding-left: 2px;
}
.content{
width: 500px;
height: 160px;
margin: 0 auto;
margin-top: 10px;
background-color: #EDE7B9;
}
.chu1{
font-size: 23px;
padding-top: 44px;
margin-left: 87px;
color: #A03055;
}
.chu2{
font-size: 28px;
margin-left: 254px;
padding-top: 3px;
color: #336A2A;
}
ul{
padding-left: 28px;
}
li{
padding-bottom: 5px;
}
</style>
</head>
<body>
<div class="root">
<div class="top">
<div class="content">
<div class="chu1">
Whole World One Bank...
</div>
<div class="chu2">
EasyBank
</div>
</div>
</div>
<div class="main">
<div class="left">
<ul>
<li><a href="about.html">About us</a></li>
<li><a href="product.html">Products and Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="right">
<p>
<h2>-: Products and Services :-</h2>
</p>
<p>EasyBank is, one of the biggest bank in the World, offering a wide range of insurance products and account services to customers.</p>
<ul>
<li>It provides credit cards.</li>
<li>It has a branch network that provides professional banking.</li>
</ul>
</div>
</div>
</div>
</body>
</html>