Scribd
Upload
12 views4 pages

Demo

The document is an HTML page layout with a header, navigation menus, section, aside and footer. It contains styles for the layout and elements including menus, forms and paragraphs.

Uploaded by

dangnguyennguyen16
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views4 pages

Demo

The document is an HTML page layout with a header, navigation menus, section, aside and footer. It contains styles for the layout and elements including menus, forms and paragraphs.

Uploaded by

dangnguyennguyen16
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAYOUT 3B</title>
<style>
*{
box-sizing: border-box;
margin: auto;
}
.tong{
width: 980px;
height: 800px;
border: 1px solid red;
margin-top: 20px;
}
header{
width: 100%;
height: 150px;
border-bottom: 1px solid red;
background-image: url(../IMAGE/Glogo.jpg);
background-size: cover;
}
.menungang{
width: 100%;
height: 50px;
border-bottom: 1px solid red;
}
.menudoc{
float: left;
width: 20%;
height: 500px;
border-bottom: 1px solid red ;
border-right: 1px solid red;
}
section{
float: left;
width: 50%;
height: 500px;
border-bottom: 1px solid red ;
border-right: 1px solid red;
}
aside{
float: left;
width: 30%;
height: 500px;
border-bottom: 1px solid red ;

}
footer{
clear: both;
width: 100%;
height: 96px;
background-color: aqua;
}
.khung{
margin-top: 30px;
width: 370px;
height: 400px;
border: 3px solid blue;
box-shadow: 4px 4px 3px red;
}
h1{
text-align: center;
color: rgb(43, 226, 98);
margin-top: 10px;
margin-bottom: 20px;
}
p,input{
margin-left: 6px;
margin-bottom: 10px;
}
.c1 li{
display: inline-block;
width: 120px;
line-height: 35px;
border: 1px dotted pink;
height: 35px;
margin-top: 5px;
text-align: center;
border-radius: 10px;
}
a{
text-decoration: none;
}
.c1 li:hover{
background-color: aqua;
}
.c1 li a:hover{
text-transform: uppercase;
color: brown;
}
.d1{
margin-left: 30px;
margin-top: 30px;
width: 230px;
text-align: justify;
border: 1px double rgb(149, 0, 255);
column-count: 2;
padding: 3px;
}

</style>
</head>
<body>
<div class="tong">
<header>logo</header>
<nav class="menungang">
<ul class="c1">
<li><a href="#">Edit 1</a></li>
<li><a href="#">Edit 2</a></li>
<li><a href="#">Edit 3</a></li>
<li><a href="#">Edit 4</a></li>
<li><a href="#">Edit 5</a></li>
<li><a href="#">Edit 6</a></li>
</ul>
</nav>
<nav class="menudoc">menu doc</nav>
<section>
<div class="khung">
<h1>ĐĂNG KÝ</h1>
<p>Miễn phí và luôn như vậy</p>
<form action="">
<input type="text" name="ho" id="ho" placeholder="Họ">
<input type="text" name="ten" id="ten" value="Tên" >
<input type="email" name="email" id="email" size="47px"
value="Email">
</form>

</div>
</section>
<aside>
<p class="d1">Pick a predefined style from the gallery or generate a
text shadow with your preferences. Set up the desired attributes to get the CSS
code.

Shift the shadow right/down, set the blur and opacity and pick a
color from the palette to get your CSS. Use the online editor to adjust your
style manually. Follow the evolution of your shadow in the live preview where you
can set a custom text and background color.</p>
</aside>
<footer>địa chỉ</footer>
</div>

</body>
</html>

You might also like