In: Computer Science
this is done in HTML
In footer, use HTML tags/style of your choice to explain steps you took to add css file and _Layout. Should include the following:
Folder structure
Short description of what layout does
You should not include the content of css or how you defined your css
<! layout .html >
<!DOCTYPE html>
<html>
<head>
<title>Layout
Demo</title>
<style>
.Header1
{
border: 2px solid
red;
height:
65px;
}
body {
margin: 0
auto;
background-position:center;
background-size:
contain;
width: 90%;
border: 2px slod
balck;
border: 6px solid
black;
height:
449px;
}
.menu {
position:
sticky;
top: 0;
background-color:
#009900;
padding:10px 0px
10px 0px;
color:white;
margin: 0
auto;
overflow:
hidden;
}
.menu a {
float: left;
color:
white;
text-align:
center;
padding: 14px
16px;
text-decoration:
none;
font-size:
20px;
}
footer {
border: 2px solid
red;
height:
65px;
}
.index
{
border: 2px solid
red;
width: 50%;
height:
230px;
}
.contain1
{
border: 2px solid
red;
width: 49%;
height:
230px;
float:right;
margin-top:
-231px;
}
#Content
{
padding-top:12px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div
class="Header1">
<center>
<h1>Header Section</h1>
</center>
</div>
</header>
<!-- Menu Navigation Bar
-->
<div class="menu">
<a
href="#">HOME</a>
<a
href="#">NEWS</a>
<a
href="#">NOTIFICATIONS</a>
</div>
<!-- Body section -->
<div >
<section
id="Content">
<div class="index">
<center>
<h1>Index</h1>
</center>
</div>
<div class="contain1">
<center>
<h1>Content Section</h1>
</center>
</div>
</section>
</div>
<!-- Footer Section -->
<footer>
<center>
<h1>Footer Section </h1>
</center>
</footer>
</body>
</html>