<!DOCTYPE html>
<html>
<head>
<title>
Website Layout so61 1
</title>
<style>
* {
box-sizing: border-box;
}

/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}

/* CSS property for nevigation menu */
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}

/* CSS property for content section */
.columnA, .columnB, .columnC {
float: left;
width: 31%;
padding: 15px;
text-align:justify;
}
h2 {
color:green;
text-align:center;
}

/* Media query to set website layout
according to screen size */
@media screen and (max-width:600px) {
.columnA, .columnB, .columnC {
width: 50%;
}
}
@media screen and (max-width:400px) {
.columnA, .columnB, .columnC {
width: 100%;
}
}
</style>

<style>

/* Style for footer section */
.footer {
background-color: green;
padding: 15px;
text-align: center;
}
</style>


</head>

<body>

<!-- header of website layout -->
<div class = "header">
<h2 style = "color:white;font-size:200%">
Template Ma64u 1
</h2>
</div>

<!-- nevigation menu of website layout -->
<div class = "nav_menu">
<a href = "#">home</a>
<a href = "#">Wood</a>
<a href = "#">Contact</a>
</div>

<!-- Content section of website layout -->
<div class = "row">

<div class = "columnA">
<h2>Column A</h2>
<p>&lt;div style=&quot;clear: left&quot;&gt;&lt;/div&gt;<br>
&lt;div style=&quot;clear: right&quot;&gt;&lt;/div&gt;<br>
&lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;<br>
&lt;div style=&quot;clear: none&quot;&gt;&lt;/div&gt;.</p>
</div>

<div class = "columnB">
<h2>Column B</h2>
<p>&lt;style&gt;<br>
.firstcharacter {<br>
color: #903;<br>
float: left;<br>
font-family: Georgia;<br>
font-size: 75px;<br>
line-height: 60px;<br>
padding-top: 4px;<br>
padding-right: 8px;<br>
padding-left: 3px;<br>
}<br>
&lt;/style&gt;</p>
</div>

<div class = "columnC">
<h2>Column C</h2>
<p>&lt;style&gt;<br>
a:link {<br>
color: green;<br>
background-color: transparent;<br>
text-decoration: none;<br>
}</p>
<p>a:visited {<br>
color: pink;<br>
background-color: transparent;<br>
text-decoration: none;<br>
}</p>
<p>a:hover {<br>
color: red;<br>
background-color: transparent;<br>
text-decoration: underline;<br>
}</p>
<p>a:active {<br>
color: yellow;<br>
background-color: transparent;<br>
text-decoration: underline;<br>
}<br>
&lt;/style&gt;</p>
</div>
</div>


<div style="clear: both"></div>


<!-- footer Section -->
<div class = "footer">
<a href = "#">Link A</a>|
<a href = "#">Link B</a>|
<a href = "#">Link C</a>
</div>

</body>
</html>

Post a Comment

Mới hơn Cũ hơn

Xe máy điện Xmen GT Nijia 2018 thể thao năng động (Trắng phối xanh)
Đi tới nơi bán

Xe máy điện Terra Xmen Blade khung thép hợp kim (Xanh lá cây)
Đi tới nơi bán