Scribd
Upload
13 views2 pages

Simple Webpage Layout

The document is an HTML template for a simple webpage layout that utilizes CSS Grid for responsive design. It includes a header, main content area, sidebar, and footer, with styles defined for both mobile and desktop views. The layout is structured to adapt to different screen sizes, ensuring a user-friendly experience.

Uploaded by

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

Simple Webpage Layout

The document is an HTML template for a simple webpage layout that utilizes CSS Grid for responsive design. It includes a header, main content area, sidebar, and footer, with styles defined for both mobile and desktop views. The layout is structured to adapt to different screen sizes, ensuring a user-friendly experience.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Webpage Layout</title>
<style>
/* Basic reset */
body, h1, p {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

/* Layout styles */
.container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-gap: 10px;
padding: 10px;
}

@media (min-width: 768px) {


.container {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
}
}

header {
grid-area: header;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

main {
grid-area: main;
background-color: #f4f4f4;
padding: 20px;
}

aside {
grid-area: sidebar;
background-color: #ddd;
padding: 20px;
}
footer {
grid-area: footer;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}

/* Additional styles */
header h1, footer p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Simple Webpage Layout</h1>
</header>
<main>
<h2>Main Content</h2>
<p>This is the main content area where most of the page's content will
go.</p>
</main>
<aside>
<h2>Sidebar</h2>
<p>This is the sidebar, which can include links, additional
information, or advertisements.</p>
</aside>
<footer>
<p>© 2024 Your Website | All Rights Reserved</p>
</footer>
</div>
</body>
</html>

You might also like