Scribd
Upload
7 views4 pages

Activity 6

The document is an HTML template for a webpage titled 'activity7' that includes a structured layout with a logo, navigation, and content sections. It utilizes CSS for styling, including borders, background colors, and flexible layouts. The design emphasizes a clean and organized appearance with designated areas for various elements like the footer and tables.

Uploaded by

gamepyton
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
7 views4 pages

Activity 6

The document is an HTML template for a webpage titled 'activity7' that includes a structured layout with a logo, navigation, and content sections. It utilizes CSS for styling, including borders, background colors, and flexible layouts. The design emphasizes a clean and organized appearance with designated areas for various elements like the footer and tables.

Uploaded by

gamepyton
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 name="viewport" content="width=device-width, initial-
scale=1.0">
<title>activity7</title>
</head>
<style>
body {
margin-left: 20vw;
margin-right: 20vw;
margin-top: 3vw;
/* object-position: center; */ś

#divl {
width: 20%;
border: 4px solid black;
background-color: green;
float: left;
margin-left: 1vw;
height: 8vw;
}

#logo {
text-align: center;
margin-top: 3vw;
font-size: 27px;
}

#divr {
float: left;
margin-left: 20px;
display: block;
}

#divr2 {
border: 4px solid black;
height: 40px;
width: 15vw;
margin-top: 65px;
}

#maindiv {
display: flex;
}

#maindiv2 {
display: flex;
font-size: 24px;
}

#table {
margin-top: 5px;
display: flex;
float: left;
}

.theads {
background-color: green;
border: 4px solid black;
float: left;
height: 34px;
width: 5vw;

}
</style>

<body>
<div style="border: 5px solid black; margin: 25px; padding:
15px; height: 39vw; width: 49vw; ">
<div id="maindiv">
<div id="divl">
<div id="logo">
<b>LOGO</b>
</div>
</div>
<div id="divr">
<div style="float: left; width:27vw; border: 4px
solid black; background-color: green; height: 50px;">

</div>
<div id="divr2">

</div>
<div id="divr3">
<div id="table">
<div class="theads">

</div>
<div style="margin-left: 10px;"
class="theads">

</div>
<div style="margin-left: 10px;"
class="theads">

</div>
<div style="margin-left: 10px;"
class="theads">
</div>
<div style="margin-left: 10px;"
class="theads">

</div>
<div style="margin-left: 10px;"
class="theads">

</div>
</div>
</div>
</div>

</div>
<div id="maindiv2">
<div style="border: 4px solid black; height: 20vw;
width: 20%; float: left; margin: 20px;">
<p style="margin-top: 9vw;">
<center><b>Navigation</b></center>
</p>
</div>

<div style="border: 4px solid black; height:25vw;


width: 35vw; margin-top: 1vw; float: left;">

<p style="margin-top: 11vw; ">


<center><b>Content</b></center>
</p>

</div>

</div>
<div style="display: flex; padding-right: 19px;">
<div style="float: left; margin-left: 30px; font-size:
21px; width: 140px;padding-right: 52px;padding-left: 26px;">
<b>White space</b>
</div>
<div id="footer">
<div
style="float: left; border: 4px solid black;
background-color: green; height: 32px; text-align: center; width:
35vw; margin: 27px; padding-top: 4px; margin-left: 15px; margin-
right: 5px;">

<b style="font-size: 25px; ">Footer</b>


</div>
</div>
</div>
</div>
</body>

</html>

You might also like