Scribd
Upload
15 views3 pages

Index

The document is an HTML template for a responsive layout practice, including a header with navigation, a main section with a sidebar and main content area, and a footer. There are several coding errors present, such as incorrect attribute syntax and CSS properties, which may affect the layout and functionality. The document aims to demonstrate the use of flexbox for layout design.

Uploaded by

De Guzman Arianne
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
15 views3 pages

Index

The document is an HTML template for a responsive layout practice, including a header with navigation, a main section with a sidebar and main content area, and a footer. There are several coding errors present, such as incorrect attribute syntax and CSS properties, which may affect the layout and functionality. The document aims to demonstrate the use of flexbox for layout design.

Uploaded by

De Guzman Arianne
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
You are on page 1/ 3

<!

DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<meta name="viewort"=width-device-width,initial-scale=1.0">
<title>Resonsive layout Practice</title>
<link rel="stylesheet href="styles.css">
</head>
<body>
<header>
<div class="logo">My Logo</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#>About<//a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<aside class=">Sidebar Content</aside>
<section class="main-content">Main Content</section>
</main>
<footer>
<p>&copy,2025 My Website</p>
</footer>
</body>
</html>

body{
font-family:Arial,sans-serif;
margin:0;
padding:0;
}

header{
background-color:#333;
color-white;
padding;10px 0;
text-align:center;
}

logo{
float:left;
margin-left:20px;
}

nav ul{
life-style:none;
margin:0;
padding:0;
float:right;
margin-right:20px;
}

nav ul li {
display:inline,
margin-left:10px;
}

nay ullia{
color:white;
text-decoration:none;
)

main{
overflow:hidden;/*Clear floatss*/
padding:20px;
}

sidebar{
float:left;
width:25%;
background-color:#f4f4f4;
padding:10px;
}

main-content {
float:left;
width:70%

margin-left:5%
background-color:#e4e4e4;
padding:10px
}
footer{
background-color#333;
color white:
text-aligh:center;
padding:10px 0;
clear:both;/*Ensure footer stays below floated elements*/
}

/*Flexbox styles*/

header{
display:flex;
justify-content:space-between;
aligh-items:center;
padding:10px 20px;
}

nav ul{
display-flex;
gap:10px
}

main{
display:flex;
gap:20px;
}

sidebar{
flex:1;
}
main content{
flex:3;
}

You might also like