325 lines
No EOL
10 KiB
HTML
325 lines
No EOL
10 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<style>
|
||
body {
|
||
background-color: white; /* Ensure the iframe has a white background */
|
||
}
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf‑8">
|
||
<title>Light / Dark Demo – Portfolio / Product Page</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
/* --------------------------------------------------------------------
|
||
1. Palette – light (default) & dark (data-theme="dark")
|
||
-------------------------------------------------------------------- */
|
||
:root {
|
||
--color-primary: #A992E8; /* lavender */
|
||
--color-secondary: #B0E5D2; /* soft mint */
|
||
--color-success: #AED7A8; /* pastel green */
|
||
--color-warning: #F4D1A5; /* peach */
|
||
--color-error: #F7A1A1; /* pale salmon */
|
||
--color-bg: #FFFFFF; /* white */
|
||
--color-accent: #C6A8E1; /* light lilac */
|
||
--color-text: #111111;
|
||
--color-muted: #555;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--color-primary: #C3B0F7;
|
||
--color-secondary: #A3E8CD;
|
||
--color-success: #A3E3AA;
|
||
--color-warning: #F5BFA4;
|
||
--color-error: #F9B5B5;
|
||
--color-bg: #1A1A1A;
|
||
--color-accent: #D1A0F6;
|
||
--color-text: #EEE;
|
||
--color-muted: #CCC;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------
|
||
2. Base resets & layout
|
||
-------------------------------------------------------------------- */
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
body, h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
|
||
body {
|
||
font-family: system-ui, sans-serif;
|
||
line-height: 1.6;
|
||
color: var(--color-text);
|
||
background: var(--color-bg);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
a { text-decoration: none; color: inherit; }
|
||
img { max-width: 100%; display: block; }
|
||
|
||
/* --------------------------------------------------------------------
|
||
3. Navigation
|
||
-------------------------------------------------------------------- */
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--color-bg);
|
||
padding: .75rem 1rem;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,.1);
|
||
z-index: 10;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
nav .logo { font-weight: bold; font-size: 1.25rem; }
|
||
nav ul { display: flex; list-style: none; gap: 1.25rem; }
|
||
nav ul li a { padding: .25rem .5rem; transition: color .2s; }
|
||
nav ul li a:hover { color: var(--color-primary); }
|
||
|
||
/* --------------------------------------------------------------------
|
||
4. Theme toggle button
|
||
-------------------------------------------------------------------- */
|
||
.theme-toggle {
|
||
background: var(--color-accent);
|
||
border: none;
|
||
padding: .5rem .75rem;
|
||
border-radius: .25rem;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
font-size: .9rem;
|
||
transition: background .2s;
|
||
}
|
||
.theme-toggle:hover { background: var(--color-primary); }
|
||
|
||
/* --------------------------------------------------------------------
|
||
5. Hero section
|
||
-------------------------------------------------------------------- */
|
||
.hero {
|
||
position: relative;
|
||
height: 60vh;
|
||
min-height: 300px;
|
||
background: url('https://picsum.photos/1600/900?blur=2') center/cover no-repeat;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0,0,0,.35);
|
||
}
|
||
.hero-content {
|
||
position: relative;
|
||
max-width: 80%;
|
||
}
|
||
.hero h1 { font-size: 3rem; margin-bottom: .5rem; }
|
||
.hero p { font-size: 1.25rem; margin-bottom: 1.5rem; }
|
||
.hero button {
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
border: none;
|
||
padding: .75rem 1.5rem;
|
||
border-radius: .3rem;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
transition: background .2s;
|
||
}
|
||
.hero button:hover { background: var(--color-accent); }
|
||
|
||
/* --------------------------------------------------------------------
|
||
6. Card grid
|
||
-------------------------------------------------------------------- */
|
||
.section { padding: 3rem 1rem; }
|
||
.section h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; }
|
||
.cards {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
}
|
||
.card {
|
||
background: var(--color-bg);
|
||
border-radius: .5rem;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 8px rgba(0,0,0,.05);
|
||
transition: transform .2s, box-shadow .2s;
|
||
}
|
||
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 12px rgba(0,0,0,.1); }
|
||
.card img { aspect-ratio: 4/3; object-fit: cover; }
|
||
.card-body { padding: 1rem; }
|
||
.card-body h3 { margin-bottom: .5rem; font-size: 1.25rem; }
|
||
.card-body p { margin-bottom: 1rem; color: var(--color-muted); }
|
||
.card-body button {
|
||
background: var(--color-secondary);
|
||
border: none;
|
||
padding: .5rem 1rem;
|
||
border-radius: .25rem;
|
||
cursor: pointer;
|
||
color: #111;
|
||
transition: background .2s;
|
||
}
|
||
.card-body button:hover { background: var(--color-primary); }
|
||
|
||
/* --------------------------------------------------------------------
|
||
7. Image gallery
|
||
-------------------------------------------------------------------- */
|
||
.gallery {
|
||
display: grid;
|
||
gap: .75rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
}
|
||
.gallery img { border-radius: .5rem; }
|
||
|
||
/* --------------------------------------------------------------------
|
||
8. Footer
|
||
-------------------------------------------------------------------- */
|
||
footer {
|
||
background: var(--color-bg);
|
||
color: var(--color-text);
|
||
padding: 2rem 1rem;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
footer h4 { margin-bottom: .75rem; font-weight: bold; }
|
||
footer ul { list-style: none; }
|
||
footer ul li { margin-bottom: .5rem; }
|
||
footer a { color: var(--color-muted); transition: color .2s; }
|
||
footer a:hover { color: var(--color-primary); }
|
||
footer .socials { display: flex; gap: .75rem; }
|
||
footer .socials a { font-size: 1.5rem; color: var(--color-muted); }
|
||
footer .socials a:hover { color: var(--color-primary); }
|
||
footer .copyright { text-align: center; margin-top: 1.5rem; font-size: .9rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav>
|
||
<div class="logo">MySite</div>
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Projects</a></li>
|
||
<li><a href="#">About</a></li>
|
||
<li><a href="#">Contact</a></li>
|
||
</ul>
|
||
<button class="theme-toggle" id="themeToggle">Toggle Theme</button>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<h1>Welcome to Our Portfolio</h1>
|
||
<p>Showcasing our best work and creative solutions.</p>
|
||
<button>Get Started</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Cards -->
|
||
<section class="section">
|
||
<h2>Featured Projects</h2>
|
||
<div class="cards">
|
||
<article class="card">
|
||
<img src="https://picsum.photos/600/400?random=1" alt="Project 1">
|
||
<div class="card-body">
|
||
<h3>Project One</h3>
|
||
<p>Short description of the project, highlighting key features.</p>
|
||
<button>View Details</button>
|
||
</div>
|
||
</article>
|
||
<article class="card">
|
||
<img src="https://picsum.photos/600/400?random=2" alt="Project 2">
|
||
<div class="card-body">
|
||
<h3>Project Two</h3>
|
||
<p>A brief overview of what this project achieved.</p>
|
||
<button>View Details</button>
|
||
</div>
|
||
</article>
|
||
<article class="card">
|
||
<img src="https://picsum.photos/600/400?random=3" alt="Project 3">
|
||
<div class="card-body">
|
||
<h3>Project Three</h3>
|
||
<p>Highlights, challenges, and outcomes.</p>
|
||
<button>View Details</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Gallery -->
|
||
<section class="section">
|
||
<h2>Image Gallery</h2>
|
||
<div class="gallery">
|
||
<img src="https://picsum.photos/400/300?random=4" alt="Gallery 1">
|
||
<img src="https://picsum.photos/400/300?random=5" alt="Gallery 2">
|
||
<img src="https://picsum.photos/400/300?random=6" alt="Gallery 3">
|
||
<img src="https://picsum.photos/400/300?random=7" alt="Gallery 4">
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div>
|
||
<h4>About</h4>
|
||
<p>We create web experiences that are beautiful, functional, and inclusive.</p>
|
||
</div>
|
||
<div>
|
||
<h4>Links</h4>
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Projects</a></li>
|
||
<li><a href="#">Blog</a></li>
|
||
<li><a href="#">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>Social</h4>
|
||
<div class="socials">
|
||
<a href="#" aria-label="Twitter">🐦</a>
|
||
<a href="#" aria-label="LinkedIn">💼</a>
|
||
<a href="#" aria-label="Instagram">📸</a>
|
||
</div>
|
||
</div>
|
||
<div style="grid-column: span 3;">
|
||
<p class="copyright">© 2026 MySite. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- --------------------------------------------------------------
|
||
9. Theme toggle script
|
||
-------------------------------------------------------------- -->
|
||
<script>
|
||
(function(){
|
||
const toggle = document.getElementById('themeToggle');
|
||
const storageKey = 'theme';
|
||
// Load stored theme or fall back to system preference
|
||
const stored = localStorage.getItem(storageKey);
|
||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
const init = stored || (prefersDark ? 'dark' : 'light');
|
||
document.documentElement.setAttribute('data-theme', init);
|
||
|
||
toggle.addEventListener('click', () => {
|
||
const current = document.documentElement.getAttribute('data-theme');
|
||
const next = current === 'dark' ? 'light' : 'dark';
|
||
document.documentElement.setAttribute('data-theme', next);
|
||
localStorage.setItem(storageKey, next);
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
<script>
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|