Scribd
Upload
14 views6 pages

Document

The document is an HTML template for a responsive web layout that includes a header with a banner image, a navigation section with buttons, a content section displaying two images with descriptions, and a footer. The CSS styles ensure a flexible design that adapts to different screen sizes, with specific styles for navigation buttons, images, and layout adjustments for smaller screens. Overall, it provides a structured and visually appealing framework for a simple web page.

Uploaded by

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

Document

The document is an HTML template for a responsive web layout that includes a header with a banner image, a navigation section with buttons, a content section displaying two images with descriptions, and a footer. The CSS styles ensure a flexible design that adapts to different screen sizes, with specific styles for navigation buttons, images, and layout adjustments for smaller screens. Overall, it provides a structured and visually appealing framework for a simple web page.

Uploaded by

jezzmarc882
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Layout</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<!-- Banner Image -->

<img src="banner.jpg" alt="Banner Image" class="banner">

</header>

<nav>

<!-- Buttons -->

<button class="nav-btn">Image</button>

<button class="nav-btn">Table</button>

<button class="nav-btn">Login</button>

</nav>

<section class="content">

<div class="image-section">

<!-- Left Image -->

<img src="image1.jpg" alt="Image 1" class="content-image">


<p class="description">Description for Image 1</p>

</div>

<div class="image-section">

<!-- Right Image -->

<img src="image2.jpg" alt="Image 2" class="content-image">

<p class="description">Description for Image 2</p>

</div>

</section>

<footer>

<!-- Footer -->

<p>Footer Content Here</p>

</footer>

</body>

</html>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

}
/* Header: Banner Image */

header {

text-align: center;

margin-bottom: 20px;

.banner {

width: 100%;

height: auto;

/* Navigation buttons */

nav {

display: flex;

justify-content: center;

margin-bottom: 20px;

.nav-btn {

padding: 10px 20px;

margin: 0 10px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;
}

.nav-btn:hover {

background-color: #45a049;

/* Content section: Images and descriptions */

.content {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

margin-bottom: 20px;

.image-section {

text-align: center;

flex-basis: 45%;

margin: 10px;

.content-image {

max-width: 100%;

height: auto;

}
.description {

margin-top: 10px;

font-size: 1.1em;

/* Footer */

footer {

text-align: center;

padding: 10px;

background-color: #333;

color: white;

position: relative;

bottom: 0;

width: 100%;

/* Responsive Design */

@media (max-width: 768px) {

.content {

flex-direction: column;

.image-section {

flex-basis: 100%;

}
.nav-btn {

flex-basis: 30%;

You might also like