In: Computer Science
i need the whole html code Make a layout template that contains a header and two paragraphs. Use float to line up the two paragraphs as columns side by side. Give the header and two paragraphs a border and/or a background color so you can see where they are.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Layout</title>
<style>
* {
box-sizing: border-box;
}
header {
padding: 10px;
text-align: center;
font-size: 20px;
color: white;
background-color: red;
}
p1 {
float: left;
width: 50%;
height: 200px;
background: yellow;
padding: 20px;
}
p2 {
float: left;
padding: 20px;
width: 50%;
background-color: cyan;
height: 200px;
}
</style>
</head>
<body>
<header>
<h2>HTML Layout Example</h2>
</header>
<section>
<p1>
<p>
This is my first paragraph which is placed to the right hand side
and its background color is yellow.</p>
</p1>
<p2>
<p>This is the Second paragragh which had
been placed on the left hand side.</p>
</p2>
</section>
</body>
</html>