By GokiSoft.com| 09:40 15/01/2021|
Học HTML5 - CSS3

Thiết kế website sử dụng IFrame - phân chia layout - Lập trình HTML5 CSS Javascript

Yêu cầu sử dụng layout thiết kế web -> không sử dụng iframe


Tags:

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

nguyen hoang viet [community,C2009I]
nguyen hoang viet

2020-12-15 06:38:35

https://nguyenhoangviet.herokuapp.com/AboutUs.html

Vũ Trung Kiên [C2009I]
Vũ Trung Kiên

2020-12-10 14:12:40


#AboutUs.html


<!DOCTYPE html>
<html>
<head>
	<title>EasyBank - Whole World One Bank</title>
	<meta charset="utf-8">
	<style type="text/css">
		body
		{
			margin: 0px !important;
			padding: 0px !important;
		}
		.header
		{
			padding: 10px 500px;
		}
		.main
		{
			display: flex;
		}
		.main .left
		{
			width: 25%;
			float: left;
			border-top: ridge 3px;
			border-bottom: ridge 3px;
			border-color: #cccccc;
		}
		.main .right
		{
			width: 75%;
			float: right;
			border-top: ridge 3px;
			border-bottom: ridge 3px;
			border-left: ridge 3px;
			height: 783px;
			border-color: #cccccc;
		}
		h2
		{
			padding-left: 15px;
		}
		.text
		{
			padding-left: 15px;
		}
		ul
		{
			padding-top: 10px;
			padding-left: 150px;
		}
	</style>
</head>
<body>
	<div class="header">
		<img src="img/text.png">
	</div>
	<div class="main">
		<div class="left">
			<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="right">
			<h2>
				-: About Us :-
			</h2>
			<div class="text">
				At EasyBank we believe in helping people to organize their requirement. We provide services and product worldwide. The details of our products and services can be found throughout this site.
			</div>
			<h2>
				-: History :-
			</h2>
			<div class="text">
				EasyBank was estblished in 1945 in the United States. Nicolas K. Smith become the first president. EasyBank opened an office in Paris 2000.
			</div>
		</div>
	</div>
</body>
</html>


#contactus.html


<!DOCTYPE html>
<html>
<head>
	<title>EasyBank - Whole World One Bank</title>
	<meta charset="utf-8">
	<style type="text/css">
		body
		{
			margin: 0px !important;
			padding: 0px !important;
		}
		.header
		{
			padding: 10px 500px;
		}
		.main
		{
			display: flex;
		}
		.main .left
		{
			width: 25%;
			float: left;
			border-top: ridge 3px;
			border-bottom: ridge 3px;
			border-color: #cccccc;
		}
		.main .right
		{
			width: 75%;
			float: right;
			border-top: ridge 3px;
			border-bottom: ridge 3px;
			border-left: ridge 3px;
			height: 783px;
			border-color: #cccccc;
		}
		h2
		{
			padding-left: 15px;
		}
		.text
		{
			padding-left: 15px;
		}
		ul
		{
			padding-top: 10px;
			padding-left: 150px;
		}
	</style>
</head>
<body>
	<div class="header">
		<img src="img/text.png">
	</div>
	<div class="main">
		<div class="left">
			<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="right">
			<h2>
				-: Contact Us :-
			</h2>
			<div class="text">
				Contact us by calling the relevant customer service telephone numbers and sending e-mail.
				<br/>
				<br/>
				<b>
					Customes Services
				</b>
				<br/>
				<b>
					Telephone Number:
				</b>
				033-244-5341
				<br/>
				<b>
					E-mail:
				</b>
				<a href="">customerservices@easybank.com</a>
			</div>
		</div>
	</div>
</body>
</html>


#Products.html


<!DOCTYPE html>
<html>
<head>
	<title>EasyBank - Whole World One Bank</title>
	<meta charset="utf-8">
	<style type="text/css">
		body
		{
			margin: 0px !important;
			padding: 0px !important;
		}
		.header
		{
			padding: 10px 500px;
		}
		.main
		{
			display: flex;
		}
		.main .left
		{
			width: 25%;
			float: left;
			border-top: ridge 3px;
			border-bottom: ridge 3px;
			border-color: #cccccc;
		}
		.main .right
		{
			width: 75%;
			float: right;
			border-top: ridge 3px;
			border-bottom: ridge 3px;
			border-left: ridge 3px;
			height: 783px;
			border-color: #cccccc;
		}
		h2
		{
			padding-left: 15px;
		}
		.text
		{
			padding-left: 15px;
		}
		ul
		{
			padding-top: 10px;
			padding-left: 150px;
		}
		.list ul
		{
			padding-left: 5%;
		}
	</style>
</head>
<body>
	<div class="header">
		<img src="img/text.png">
	</div>
	<div class="main">
		<div class="left">
			<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="right">
			<h2>
				-: Products and Services :-
			</h2>
			<div class="text">
				EasyBank is one of the boggest bank in the World, offering a wide range of insurance products and account services to customers.
			</div>
			<div class="list">
				<ul>
					<li>
						It provides credit cards.
					</li>
					<li>
						It has branch network that provides professional banking.
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>


#text.png


https://res.cloudinary.com/wegoup/image/upload/v1607609556/v3owkkw3miaqpqjydv8u.png


Phạm Xuân Hậu [HTML5-T6]
Phạm Xuân Hậu

2020-06-07 14:51:12


#Untitled-1.html


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #header {
            width: 80%;
            background-color: bisque;
            margin-left: 10%;
            display: inline-block;
        }

        #left {
            width: 40%;
            height: 500px;
            float: left;

        }

        #right {
            width: 60%;
            height: 500px;
            float: left;


        }

        #wrapper {
            border: bold 3px wheat

        }
        table{
            width: 100%;
        }

        h3 {
            text-align: center;
            color: rgb(85, 43, 57);
        }

        h4 {
            margin-left: 60%;
            color: green;
            font-family: Verdana;
            text-shadow: slategray;
        }
    </style>
</head>

<body>
    <div id="header">
        <h3>Whole World One Bank....</h3><br>
        <h4>EasyBank</h4>
    </div>
    <div id="wrapper">
        <table border="2" align="center">
            <tr>
                <td>
                    <div id="left">
                        <ul>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Products and Services</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>

                    </div>
                </td>
                <td>
                    <div id="right">
                        <h2>-: About Us :-</h2><br>
                        <p>At EasyBank we believe in helping people to organize their requirements. We provide services
                            and
                            products<br>
                            worldwide.The details of our products and services can be found throught this site.
                        <h2>-: About Us :-</h2><br>
                        <p>EasyBank was established in 1945 in the United States. Nicholas K. Smith became the first
                            presidents<br>
                         </p>   EasyBank opened an office in Paris in 2000</p>
                </td>
            </tr>
    
        </table>
    </div>
    </div>

</body>

</html>