Mobile-Friendly Responsive Website (Single HTML File) #46
Description
<title>Responsive Web Page</title>
<style>
/* ========== Base Styles ========== */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
background-color: #f4f4f4;
}
header, footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
padding: 0;
margin: 0;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
.container {
display: flex;
margin: 20px;
gap: 20px;
}
.sidebar {
width: 25%;
background-color: #ddd;
padding: 15px;
}
.main-content {
width: 75%;
background-color: white;
padding: 15px;
}
img {
max-width: 100%;
height: auto;
}
/* ========== Media Query for Mobile (max-width: 768px) ========== */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
.container {
flex-direction: column;
margin: 10px;
}
.sidebar {
display: none; /* Optional: Hide sidebar on mobile */
}
.main-content {
width: 100%;
}
header, footer {
padding: 15px;
text-align: center;
}
body {
font-size: 16px;
}
}
</style>
My Responsive Website
Sidebar
This is the sidebar content. It might be hidden on small screens.
<section class="main-content">
<h2>Main Content</h2>
<p>This is your main content area. Resize the browser window to see the layout adapt.</p>
<img src="https://via.placeholder.com/600x300" alt="Placeholder Image" />
</section>
© 2025 My Website