Okay, I can help you set up the structure and basic content for this responsive multi-page website. We'll create the HTML files for each page, a CSS file for styling and responsiveness, and include placeholder assets. Home - My Website

About Our Site

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More With Video

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.

About Us - My Website

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Contact Us

Send us a message

Our Location & Info

Address: 123 Main Street, Anytown, USA

Phone: (555) 123-4567

Email: info@mywebsite.com

Products - My Website

Our Products

Product 1

Short description of product 1.

Product 2

Short description of product 2.

Product 3

Short description of product 3.

Product 4

Short description of product 4.

Product 5

Short description of product 5.

Product 6

Short description of product 6.

Product 7

Short description of product 7.

Product 8

Short description of product 8.

Product 9

Short description of product 9.

Product 10

Short description of product 10.

Product Detail - My Website

Product Title

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.

/* --- Global Styles & Resets --- */ :root { --primary-color: #007bff; --secondary-color: #6c757d; --light-color: #f8f9fa; --dark-color: #343a40; --background-image-url: url('assets/background.jpg'); /* Placeholder */ --text-color: #333; --header-height: 70px; --footer-height: 100px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: sans-serif; line-height: 1.6; color: var(--text-color); background-image: var(--background-image-url); background-size: cover; background-position: center; background-attachment: fixed; /* Keeps background fixed during scroll */ background-color: var(--light-color); /* Fallback color */ display: flex; flex-direction: column; min-height: 100vh; /* Ensure footer sticks to bottom */ } main { flex-grow: 1; /* Allows main content to fill space */ padding-top: var(--header-height); /* Prevent content overlap */ } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primary-color); text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.75rem; line-height: 1.2; } p { margin-bottom: 1rem; } .section-padding { padding: 40px 0; } /* --- Header --- */ .main-header { background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: fixed; /* Fixed header */ top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 1000; display: flex; align-items: center; } .header-content { display: flex; justify-content: space-between; align-items: center; width: 100%; } .logo { height: 50px; /* Adjust as needed */ width: auto; } .main-nav ul { display: flex; } .main-nav li { margin-left: 20px; } .main-nav a { padding: 5px 10px; transition: color 0.3s ease; font-weight: bold; color: var(--dark-color); } .main-nav a:hover, .main-nav a.active { color: var(--primary-color); text-decoration: none; } /* --- Mobile Menu Toggle --- */ .menu-toggle { display: none; /* Hidden by default */ background: none; border: none; cursor: pointer; padding: 10px; } .menu-toggle span { display: block; width: 25px; height: 3px; background-color: var(--dark-color); margin: 5px 0; transition: all 0.3s ease; } /* --- Footer --- */ .main-footer { background-color: var(--dark-color); color: var(--light-color); padding: 20px 0; margin-top: auto; /* Pushes footer to bottom */ height: var(--footer-height); display: flex; align-items: center; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; /* Allow wrapping on small screens */ } .footer-links ul { display: flex; flex-wrap: wrap; /* Allow links to wrap */ } .footer-links li { margin-right: 15px; margin-bottom: 10px; /* Spacing for wrapped items */ } .footer-links a { color: var(--light-color); } .copyright { text-align: right; margin-top: 10px; /* Add space when wrapped */ width: 100%; /* Ensure it takes full width when wrapped */ text-align: center; /* Center on small screens */ } /* --- Home Page Specific --- */ .hero-banner { background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for text visibility */ color: white; padding: 100px 0; text-align: center; min-height: 400px; /* Ensure banner has some height */ display: flex; align-items: center; justify-content: center; } .hero-banner h1 { font-size: 2.8rem; margin-bottom: 1rem; } .hero-banner p { font-size: 1.2rem; margin-bottom: 2rem; } .cta-button { background-color: var(--primary-color); color: white; padding: 12px 25px; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease; } .cta-button:hover { background-color: #0056b3; /* Darker blue */ text-decoration: none; } .about-intro { background-color: rgba(255, 255, 255, 0.85); border-radius: 8px; margin: 20px auto; /* Center section */ max-width: 90%; /* Limit width */ } .about-intro h2 { text-align: center; margin-bottom: 1.5rem; } .featured-list { background-color: rgba(248, 249, 250, 0.9); /* Light background */ border-radius: 8px; } .featured-list h2 { text-align: center; margin-bottom: 2rem; } .see-all-link { text-align: center; margin-top: 2rem; } .see-all-link a { font-weight: bold; } .video-feature { background-color: rgba(255, 255, 255, 0.85); border-radius: 8px; margin: 20px auto; /* Center section */ max-width: 90%; /* Limit width */ } .video-feature-content { display: flex; align-items: center; gap: 30px; /* Space between video and text */ } .video-container { flex: 1; /* Takes up available space */ max-width: 560px; /* Limit video width */ } .video-container iframe { width: 100%; aspect-ratio: 16 / 9; /* Maintain aspect ratio */ height: auto; } .video-text { flex: 1; /* Takes up available space */ } /* --- Item Grid (Used on Home & List) --- */ .item-grid { display: grid; gap: 20px; } /* Default: 4 columns for desktop */ .featured-grid { grid-template-columns: repeat(4, 1fr); } .list-page-grid { grid-template-columns: repeat(4, 1fr); } .item-card { background-color: white; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; transition: box-shadow 0.3s ease; text-align: center; } .item-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .item-card a { display: block; color: inherit; /* Inherit text color */ text-decoration: none; } .item-card a:hover { text-decoration: none; } .item-card img { width: 100%; height: 180px; /* Fixed height for consistency */ object-fit: cover; /* Cover the area */ } .item-card h3 { margin: 15px 10px 10px; font-size: 1.1rem; } .item-card p { margin: 0 10px 15px; font-size: 0.9rem; color: var(--secondary-color); } /* --- About Page Specific --- */ .about-video { text-align: center; /* Center the container */ } .centered-video { display: inline-block; /* Allow centering */ max-width: 700px; /* Limit video width */ margin: 20px auto; /* Center horizontally */ } .centered-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } .about-text { background-color: rgba(255, 255, 255, 0.85); padding: 20px; border-radius: 8px; margin-top: 20px; } /* --- Contact Page Specific --- */ .contact-content { display: flex; gap: 30px; margin-top: 2rem; background-color: rgba(255, 255, 255, 0.85); padding: 30px; border-radius: 8px; } .contact-form-container, .contact-info-container { flex: 1; /* Each takes half the space */ } .contact-form .form-group { margin-bottom: 1rem; } .contact-form label { display: block; margin-bottom: 0.5rem; font-weight: bold; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .contact-form textarea { resize: vertical; /* Allow vertical resize */ } .submit-button { background-color: var(--primary-color); color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .submit-button:hover { background-color: #0056b3; } .map-container { margin-bottom: 1.5rem; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; /* Clip iframe corners */ } .map-container iframe { display: block; /* Remove extra space below iframe */ } .contact-details p { margin-bottom: 0.5rem; } /* --- Detail Page Specific --- */ .detail-video-banner iframe { width: 100%; display: block; /* Remove extra space */ max-height: 50vh; /* Limit banner height */ } .detail-layout { display: flex; gap: 30px; background-color: rgba(255, 255, 255, 0.85); padding: 30px; border-radius: 8px; } .detail-text { flex: 2; /* Text takes more space */ } .detail-text h1 { margin-bottom: 1.5rem; } .detail-images { flex: 1; /* Images take less space */ display: flex; flex-direction: column; gap: 15px; } .detail-images img { border: 1px solid #ddd; border-radius: 4px; } /* --- Responsiveness --- */ /* Medium screens (Tablets, small laptops: 641px to 1024px) */ @media (max-width: 1024px) { .container { padding: 0 15px; } .featured-grid { grid-template-columns: repeat(2, 1fr); /* 2 columns */ } .list-page-grid { grid-template-columns: repeat(3, 1fr); /* 3 columns */ } .video-feature-content { flex-direction: column; /* Stack video and text */ } .video-container { max-width: 100%; /* Allow video to take full width */ } .contact-content { flex-direction: column; /* Stack form and info */ } .detail-layout { flex-direction: column; /* Stack text and images */ } .detail-images { flex-direction: row; /* Images side-by-side */ justify-content: space-around; } .detail-images img { max-width: 30%; } .footer-content { flex-direction: column; text-align: center; } .footer-links ul { justify-content: center; margin-bottom: 15px; } .copyright { text-align: center; width: 100%; margin-top: 0; } } /* Small screens (Mobiles: <= 640px) */ @media (max-width: 640px) { :root { --header-height: 60px; /* Slightly smaller header */ } main { padding-top: var(--header-height); } .header-content { position: relative; /* Needed for absolute positioning of nav */ } .main-nav { display: none; /* Hide nav by default */ position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 10px 0; } .main-nav.active { display: block; /* Show nav when active */ } .main-nav ul { flex-direction: column; align-items: center; } .main-nav li { margin: 10px 0; margin-left: 0; /* Reset margin */ } .menu-toggle { display: block; /* Show hamburger icon */ } /* Animate hamburger to X */ .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .hero-banner { padding: 60px 0; min-height: 300px; } .hero-banner h1 { font-size: 2rem; } .hero-banner p { font-size: 1rem; } .featured-grid, .list-page-grid { grid-template-columns: 1fr; /* 1 column */ } .item-card img { height: 200px; /* Adjust height for single column */ } .video-feature-content, .contact-content, .detail-layout { flex-direction: column; padding: 20px; } .detail-images { flex-direction: column; /* Stack images vertically again */ } .detail-images img { max-width: 100%; } .footer-content { flex-direction: column; text-align: center; } .footer-links ul { justify-content: center; margin-bottom: 15px; } .footer-links li { margin-right: 10px; /* Slightly less space */ } .copyright { text-align: center; width: 100%; margin-top: 0; } } /* Extra Small screens (<= 340px) */ @media (max-width: 340px) { .container { padding: 0 10px; } .hero-banner h1 { font-size: 1.8rem; } .cta-button { padding: 10px 20px; font-size: 0.9rem; } .item-card h3 { font-size: 1rem; } .item-card p { font-size: 0.85rem; } .footer-links li { margin-right: 8px; } .footer-links a { font-size: 0.9rem; } .copyright p { font-size: 0.9rem; } } // Basic script for mobile menu toggle const menuToggle = document.querySelector('.menu-toggle'); const mainNav = document.querySelector('.main-nav'); if (menuToggle && mainNav) { menuToggle.addEventListener('click', () => { mainNav.classList.toggle('active'); menuToggle.classList.toggle('active'); // ARIA attribute for accessibility const isExpanded = mainNav.classList.contains('active'); menuToggle.setAttribute('aria-expanded', isExpanded); }); // Optional: Close menu when a link is clicked (useful for single-page apps, but good practice) mainNav.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { if (mainNav.classList.contains('active')) { mainNav.classList.remove('active'); menuToggle.classList.remove('active'); menuToggle.setAttribute('aria-expanded', 'false'); } }); }); // Optional: Close menu if clicking outside of it document.addEventListener('click', (event) => { const isClickInsideNav = mainNav.contains(event.target); const isClickOnToggle = menuToggle.contains(event.target); if (!isClickInsideNav && !isClickOnToggle && mainNav.classList.contains('active')) { mainNav.classList.remove('active'); menuToggle.classList.remove('active'); menuToggle.setAttribute('aria-expanded', 'false'); } }); } else { console.log("Menu toggle button or main navigation not found."); } This sets up the HTML structure for all 5 pages, a CSS file with global styles, page-specific styles, and media queries for responsiveness at 1024px, 640px, and 340px. A basic JavaScript file is included to handle the mobile navigation toggle. **Next Steps:** 1. **Add Assets:** You need to create and place `logo.png`, `background.jpg`, and `placeholder.png` inside the `assets` folder. You can use any images for now. 2. **Replace Placeholders:** Update the placeholder text (Lorem Ipsum), video embeds (currently using a placeholder YouTube link), and the Google Maps iframe source in `contact.html` with your actual content. 3. **Refine Styles:** Adjust the CSS (`styles.css`) further to match your desired visual appearance (colors, fonts, spacing, etc.). 4. **Test Responsiveness:** Open the `index.html` file and resize your browser window or use browser developer tools to check the layout at the specified dimensions (340px, 640px, >1024px).

Welcome to Our Awesome Website!

About Our Site

Featured Products

Product 1

Product 2

Product 3

Product 4

Learn More With Video

About Us

Contact Us

Send us a message

Our Location & Info

Our Products

Product 1

Product 2

Product 3

Product 4

Product 5

Product 6

Product 7

Product 8

Product 9

Product 10

Product Title