Responsive Website Demo
Chapter 17 - Responsive Web Design
Wednesday, 26 February 2025
Embedded Files
Home > Chapter Review and Exercises > Chapter 17 - Responsive Web Design > Responsive Website Demo
Here are the responsive websites shown in class:
Here are the responsive websites shown in class:
https://www.smashingmagazine.com/
https://bradfrost.com/blog/post/ish/
The following is a demo of a responsive website. Feel free to try it and modify it as you like.
The following is a demo of a responsive website. Feel free to try it and modify it as you like.
Here is the index.html document:
Here is the index.html document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>My Cat Website</h1>
<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>
<section class="container">
<div class="column">
<h2>Column 1</h2><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="cat1.jpg" alt="cat">
<!-- <img src="placeholder-image.jpg" alt="Placeholder Image"> -->
<!-- <div class="fakeimg" style="height:499px;">Image</div> -->
</div>
<div class="column">
<h2>Column 2</h2><br>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="cat2.jpg" alt="Cat">
</div>
<div class="column">
<h2>Column 3</h2><br>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur consequat.</p>
<img src="cat3.jpg" alt="cat">
</div>
</section>
</main>
</div>
<footer>
<p>© 2025 My Cat Website</p>
</footer>
</body>
</html>
Here is the style.css document (using Grid):
Here is the style.css document (using Grid):
/* Basic Reset (Optional, but good practice) */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
line-height: 1.6;
min-height: 100vh; /* VERY IMPORTANT: Make body at least viewport height */
display: grid; /* Turn body into a grid container */
grid-template-rows: auto 1fr auto; /* Define row heights */
}
/* Header Styles */
header {
background-color: lightslategrey; /* #333; @/
color: white; /* #fff; */
padding: 1rem;
text-align: center;
}
nav ul {
list-style: none; /* Remove bullet points */
padding: 0;
}
nav li {
display: inline-block; /* Make list items horizontal */
margin: 0 1rem;
}
nav a {
color: white; /* #fff; */
text-decoration: none;
}
/* Container Styles */
.container {
max-width: 1200px; /* Limit the maximum width */
margin: 0 auto; /* Center the container */
padding: 1rem;
}
/* Column Styles (Desktop First) */
.column {
width: 33.33%; /* Each column takes up 1/3 of the container */
float: left; /* Float the columns next to each other */
padding: 1rem;
}
.column img {
max-width: 100%; /* Make images responsive */
height: auto; /* Maintain aspect ratio */
display: block; /* Removes bottom margin that inline-block elements have by default.*/
}
/* Footer Styles */
footer {
text-align: center;
padding: 1rem;
background-color: lightgreen; /* #333; */
color: black; /* #fff; */
height: 100px;
}
/* Media Query for Smaller Screens */
@media (max-width: 768px) {
.column {
width: 100%; /* Each column takes up the full width */
float: none; /* Remove the float */
}
nav li {
display: block; /* Stack navigation items vertically */
margin: 0.5rem 0;
}
}
/* Fake image, just for this example */
.fakeimg {
background-color: lightlightgrey; /* #aaa; */
width: 100%;
padding: 20px;
}
Here is the style.css document (using Flexbot):
Here is the style.css document (using Flexbot):
/* Basic Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
line-height: 1.6;
min-height: 100vh; /* VERY IMPORTANT: Make body at least viewport height */
display: flex; /* VERY IMPORTANT: Turn body into a flex container */
flex-direction: column; /* VERY IMPORTANT: Stack items vertically */
}
.wrapper {
flex: 1; /* VERY IMPORTANT: Make the wrapper grow to fill available space */
}
/* Header Styles */
header {
background-color: lightslategrey; /* #333; @/
color: white; /* #fff; */
padding: 1rem;
text-align: center;
}
nav ul {
list-style: none; /* Remove bullet points */
padding: 0;
}
nav li {
display: inline-block; /* Make list items horizontal */
margin: 0 1rem;
}
nav a {
color: white; /* #fff; */
text-decoration: none;
}
/* Container Styles */
.container {
max-width: 1200px; /* Limit the maximum width */
margin: 0 auto; /* Center the container */
padding: 1rem;
}
/* Column Styles (Desktop First) */
.column {
width: 33.33%; /* Each column takes up 1/3 of the container */
float: left; /* Float the columns next to each other */
padding: 1rem;
}
.column img {
max-width: 100%; /* Make images responsive */
height: auto; /* Maintain aspect ratio */
display: block; /* Removes bottom margin that inline-block elements have by default.*/
}
/* Footer Styles */
footer {
text-align: center;
padding: 1rem;
background-color: lightgreen; /* #333; */
color: black; /* #fff; */
height: 100px;
}
/* Media Query for Smaller Screens */
@media (max-width: 768px) {
.column {
width: 100%; /* Each column takes up the full width */
float: none; /* Remove the float */
}
nav li {
display: block; /* Stack navigation items vertically */
margin: 0.5rem 0;
}
}
/* Fake image, just for this example */
.fakeimg {
background-color: lightlightgrey; /* #aaa; */
width: 100%;
padding: 20px;
}
Here are the three cat images (cat1.jpg, cat2.jpg, and cat3.jpg):
Here are the three cat images (cat1.jpg, cat2.jpg, and cat3.jpg):
Each is approximately 615px x 499px.
Here is what it looks like:
Here is what it looks like:
Report abuse