Webleb - Code-Snippets

HTML CSS JS

<!DOCTYPE html>

<head>

<title>VANTAGE | Explore History & Nature</title>

<style>

:root {

--primary: #ffffff;

--accent: #c5a358; /* Muted Gold */

--bg-dark: #0a0a0a;

--glass: rgba(255, 255, 255, 0.05);

--glass-border: rgba(255, 255, 255, 0.1);

--transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

outline: none;

}

body {

background-color: var(--bg-dark);

color: var(--primary);

font-family: 'Inter', sans-serif;

line-height: 1.6;

overflow-x: hidden;

-webkit-font-smoothing: antialiased;

}

/* --- NAVIGATION --- */

nav {

position: fixed;

top: 0;

width: 100%;

padding: 30px 5%;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 1000;

transition: var(--transition);

}

nav.scrolled {

padding: 15px 5%;

background: rgba(10, 10, 10, 0.8);

backdrop-filter: blur(20px);

border-bottom: 1px solid var(--glass-border);

}

.logo {

font-family: 'Playfair Display', serif;

font-size: 1.5rem;

letter-spacing: 2px;

font-weight: 700;

}

.nav-links {

display: flex;

gap: 30px;

list-style: none;

}

.nav-links a {

text-decoration: none;

color: var(--primary);

font-size: 0.85rem;

text-transform: uppercase;

letter-spacing: 1px;

opacity: 0.7;

transition: 0.3s;

}

.nav-links a:hover {

opacity: 1;

color: var(--accent);

}

/* --- HERO SECTION --- */

.hero {

height: 100vh;

position: relative;

display: flex;

align-items: center;

padding: 0 5%;

overflow: hidden;

}

.hero-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

}

.hero-bg img {

width: 100%;

height: 100%;

object-fit: cover;

filter: brightness(0.4);

transition: transform 1.2s ease;

}

.hero-content {

max-width: 700px;

z-index: 10;

}

.hero-content h1 {

font-family: 'Playfair Display', serif;

font-size: clamp(3rem, 8vw, 6rem);

line-height: 1.1;

margin-bottom: 20px;

}

.hero-content h1 span {

font-style: italic;

display: block;

font-weight: 400;

}

.hero-content p {

font-size: 1.1rem;

opacity: 0.8;

margin-bottom: 40px;

max-width: 500px;

}

.btn-group {

display: flex;

gap: 20px;

}

.btn {

padding: 18px 35px;

border: none;

cursor: pointer;

font-weight: 600;

letter-spacing: 1px;

transition: var(--transition);

text-transform: uppercase;

font-size: 0.8rem;

}

.btn-primary {

background: var(--primary);

color: var(--bg-dark);

}

.btn-outline {

background: transparent;

color: var(--primary);

border: 1px solid var(--glass-border);

backdrop-filter: blur(10px);

}

.btn:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(0,0,0,0.3);

}

/* --- SLIDER SYSTEM --- */

.slider-container {

position: absolute;

bottom: 50px;

right: 0;

width: 40%;

z-index: 20;

}

.slider-wrapper {

display: flex;

gap: 20px;

padding-right: 50px;

}

.slide-card {

min-width: 200px;

height: 280px;

border-radius: 15px;

overflow: hidden;

position: relative;

cursor: pointer;

border: 1px solid var(--glass-border);

transition: var(--transition);

}

.slide-card img {

width: 100%;

height: 100%;

object-fit: cover;

}

.slide-card:hover {

transform: scale(1.05);

}

/* --- DESTINATIONS SECTION --- */

section {

padding: 100px 5%;

}

.section-header {

margin-bottom: 60px;

text-align: center;

}

.section-header h2 {

font-family: 'Playfair Display', serif;

font-size: 3rem;

}

.dest-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

gap: 40px;

}

.dest-card {

background: var(--glass);

border: 1px solid var(--glass-border);

border-radius: 24px;

overflow: hidden;

transition: var(--transition);

position: relative;

}

.dest-card:hover {

transform: translateY(-15px);

background: rgba(255,255,255,0.08);

}

.dest-img {

height: 250px;

overflow: hidden;

}

.dest-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: 1s;

}

.dest-card:hover .dest-img img {

transform: scale(1.1);

}

.dest-info {

padding: 25px;

}

.category-tag {

font-size: 0.7rem;

text-transform: uppercase;

color: var(--accent);

letter-spacing: 2px;

margin-bottom: 10px;

display: block;

}

/* --- RATING SYSTEM --- */

.rating-box {

display: flex;

align-items: center;

gap: 10px;

margin: 15px 0;

}

.stars {

color: #444;

cursor: pointer;

}

.stars span {

font-size: 1.2rem;

transition: 0.3s;

}

.stars span.active {

color: var(--accent);

}

/* --- REVIEW SECTION --- */

.review-section {

margin-top: 30px;

border-top: 1px solid var(--glass-border);

padding-top: 20px;

}

.comment-input {

width: 100%;

background: rgba(255,255,255,0.03);

border: 1px solid var(--glass-border);

padding: 12px;

color: white;

border-radius: 8px;

margin-bottom: 10px;

}

/* --- ANIMATIONS --- */

.reveal {

opacity: 0;

transform: translateY(30px);

transition: 1s ease-out;

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

@media (max-width: 768px) {

.nav-links { display: none; }

.slider-container { display: none; }

.hero-content { text-align: center; }

.btn-group { justify-content: center; }

}

</style>

</head>

<body>

<div class="logo">VANTAGE</div>

<li><a href="#destinations">Destinations</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</div>

<span class="category-tag" style="color: white">Premium Discovery</span>

<h1>Crafted for <span>Discovery</span></h1>

<p>Experience the intersection of ancient history and untamed nature. Our platform brings the world's most evocative locations to your fingertips.</p>

<button class="btn btn-primary">Start Journey</button>

<button class="btn btn-outline">Watch Film</button>

</div>

</div>

</div>

</div>

</section>

<span class="category-tag">Explore the world</span>

<h2>Top Destinations</h2>

</div>

</div>

<span class="category-tag">Historical</span>

<h3>The Lost City of Petra</h3>

<p>Wander through the rose-red city, carved directly into vibrant sandstone cliffs.</p>

</div>

</div>

</div>

</div>

<span class="category-tag">Nature</span>

<h3>Yosemite Valley</h3>

<p>Stand beneath monolithic granite walls and witness the power of ancient glaciers.</p>

</div>

</div>

</div>

</div>

<span class="category-tag">Nature</span>

<h3>Moraine Lake</h3>

<p>Emerald waters surrounded by the jagged peaks of the Canadian Rockies.</p>

</div>

</div>

</div>

</section>

<span class="category-tag">Our Philosophy</span>

<h2 style="font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 30px;">Connecting the Past with the Present</h2>

<p style="font-size: 1.2rem; opacity: 0.7;">We believe that travel is more than just a destination. It's an immersive dialogue between human history and the natural wonders of our planet. Vantage is designed to curate these stories for the modern explorer.</p>

</div>

</section>

// Sticky Header Effect

window.addEventListener('scroll', () => {

const nav = document.getElementById('navbar');

if (window.scrollY > 50) {

nav.classList.add('scrolled');

} else {

nav.classList.remove('scrolled');

}

});

// Hero Image Slider Logic

function changeHero(imgUrl, title) {

const heroImg = document.getElementById('mainHeroImg');

heroImg.style.opacity = '0';

setTimeout(() => {

heroImg.src = imgUrl;

heroImg.style.opacity = '1';

}, 400);

}

// Star Rating Logic

function handleRate(element) {

const stars = element.querySelectorAll('span');

stars.forEach((star, index) => {

star.addEventListener('click', () => {

stars.forEach((s, i) => {

s.classList.toggle('active', i <= index);

});

// Visual feedback

star.parentElement.nextElementSibling.innerText = (index + 1).toFixed(1);

});

}

// Scroll Reveal Animation

const observerOptions = {

threshold: 0.1

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('active');

}

});

}, observerOptions);

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Smooth Scroll

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

// Comment System Simulation

document.querySelectorAll('.comment-input').forEach(input => {

input.addEventListener('keypress', (e) => {

if (e.key === 'Enter' && input.value !== '') {

const val = input.value;

input.value = 'Sending...';

setTimeout(() => {

input.value = '';

input.placeholder = 'Comment added!';

setTimeout(() => input.placeholder = 'Leave a thought...', 2000);

}, 1000);

}

});

</script>

</body>

</html>

Preview

Open Advanced Editor

HTML CSS JS

<!DOCTYPE html>

<head>

<title>VANTAGE | Explore History & Nature</title>

<style>

:root {

--primary: #ffffff;

--accent: #c5a358; /* Muted Gold */

--bg-dark: #0a0a0a;

--glass: rgba(255, 255, 255, 0.05);

--glass-border: rgba(255, 255, 255, 0.1);

--transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

outline: none;

}

body {

background-color: var(--bg-dark);

color: var(--primary);

font-family: 'Inter', sans-serif;

line-height: 1.6;

overflow-x: hidden;

-webkit-font-smoothing: antialiased;

}

/* --- NAVIGATION --- */

nav {

position: fixed;

top: 0;

width: 100%;

padding: 30px 5%;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 1000;

transition: var(--transition);

}

nav.scrolled {

padding: 15px 5%;

background: rgba(10, 10, 10, 0.8);

backdrop-filter: blur(20px);

border-bottom: 1px solid var(--glass-border);

}

.logo {

font-family: 'Playfair Display', serif;

font-size: 1.5rem;

letter-spacing: 2px;

font-weight: 700;

}

.nav-links {

display: flex;

gap: 30px;

list-style: none;

}

.nav-links a {

text-decoration: none;

color: var(--primary);

font-size: 0.85rem;

text-transform: uppercase;

letter-spacing: 1px;

opacity: 0.7;

transition: 0.3s;

}

.nav-links a:hover {

opacity: 1;

color: var(--accent);

}

/* --- HERO SECTION --- */

.hero {

height: 100vh;

position: relative;

display: flex;

align-items: center;

padding: 0 5%;

overflow: hidden;

}

.hero-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

}

.hero-bg img {

width: 100%;

height: 100%;

object-fit: cover;

filter: brightness(0.4);

transition: transform 1.2s ease;

}

.hero-content {

max-width: 700px;

z-index: 10;

}

.hero-content h1 {

font-family: 'Playfair Display', serif;

font-size: clamp(3rem, 8vw, 6rem);

line-height: 1.1;

margin-bottom: 20px;

}

.hero-content h1 span {

font-style: italic;

display: block;

font-weight: 400;

}

.hero-content p {

font-size: 1.1rem;

opacity: 0.8;

margin-bottom: 40px;

max-width: 500px;

}

.btn-group {

display: flex;

gap: 20px;

}

.btn {

padding: 18px 35px;

border: none;

cursor: pointer;

font-weight: 600;

letter-spacing: 1px;

transition: var(--transition);

text-transform: uppercase;

font-size: 0.8rem;

}

.btn-primary {

background: var(--primary);

color: var(--bg-dark);

}

.btn-outline {

background: transparent;

color: var(--primary);

border: 1px solid var(--glass-border);

backdrop-filter: blur(10px);

}

.btn:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(0,0,0,0.3);

}

/* --- SLIDER SYSTEM --- */

.slider-container {

position: absolute;

bottom: 50px;

right: 0;

width: 40%;

z-index: 20;

}

.slider-wrapper {

display: flex;

gap: 20px;

padding-right: 50px;

}

.slide-card {

min-width: 200px;

height: 280px;

border-radius: 15px;

overflow: hidden;

position: relative;

cursor: pointer;

border: 1px solid var(--glass-border);

transition: var(--transition);

}

.slide-card img {

width: 100%;

height: 100%;

object-fit: cover;

}

.slide-card:hover {

transform: scale(1.05);

}

/* --- DESTINATIONS SECTION --- */

section {

padding: 100px 5%;

}

.section-header {

margin-bottom: 60px;

text-align: center;

}

.section-header h2 {

font-family: 'Playfair Display', serif;

font-size: 3rem;

}

.dest-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

gap: 40px;

}

.dest-card {

background: var(--glass);

border: 1px solid var(--glass-border);

border-radius: 24px;

overflow: hidden;

transition: var(--transition);

position: relative;

}

.dest-card:hover {

transform: translateY(-15px);

background: rgba(255,255,255,0.08);

}

.dest-img {

height: 250px;

overflow: hidden;

}

.dest-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: 1s;

}

.dest-card:hover .dest-img img {

transform: scale(1.1);

}

.dest-info {

padding: 25px;

}

.category-tag {

font-size: 0.7rem;

text-transform: uppercase;

color: var(--accent);

letter-spacing: 2px;

margin-bottom: 10px;

display: block;

}

/* --- RATING SYSTEM --- */

.rating-box {

display: flex;

align-items: center;

gap: 10px;

margin: 15px 0;

}

.stars {

color: #444;

cursor: pointer;

}

.stars span {

font-size: 1.2rem;

transition: 0.3s;

}

.stars span.active {

color: var(--accent);

}

/* --- REVIEW SECTION --- */

.review-section {

margin-top: 30px;

border-top: 1px solid var(--glass-border);

padding-top: 20px;

}

.comment-input {

width: 100%;

background: rgba(255,255,255,0.03);

border: 1px solid var(--glass-border);

padding: 12px;

color: white;

border-radius: 8px;

margin-bottom: 10px;

}

/* --- ANIMATIONS --- */

.reveal {

opacity: 0;

transform: translateY(30px);

transition: 1s ease-out;

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

@media (max-width: 768px) {

.nav-links { display: none; }

.slider-container { display: none; }

.hero-content { text-align: center; }

.btn-group { justify-content: center; }

}

</style>

</head>

<body>

<div class="logo">VANTAGE</div>

<li><a href="#destinations">Destinations</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</div>

<span class="category-tag" style="color: white">Premium Discovery</span>

<h1>Crafted for <span>Discovery</span></h1>

<p>Experience the intersection of ancient history and untamed nature. Our platform brings the world's most evocative locations to your fingertips.</p>

<button class="btn btn-primary">Start Journey</button>

<button class="btn btn-outline">Watch Film</button>

</div>

</div>

</div>

</div>

</section>

<span class="category-tag">Explore the world</span>

<h2>Top Destinations</h2>

</div>

</div>

<span class="category-tag">Historical</span>

<h3>The Lost City of Petra</h3>

<p>Wander through the rose-red city, carved directly into vibrant sandstone cliffs.</p>

</div>

</div>

</div>

</div>

<span class="category-tag">Nature</span>

<h3>Yosemite Valley</h3>

<p>Stand beneath monolithic granite walls and witness the power of ancient glaciers.</p>

</div>

</div>

</div>

</div>

<span class="category-tag">Nature</span>

<h3>Moraine Lake</h3>

<p>Emerald waters surrounded by the jagged peaks of the Canadian Rockies.</p>

</div>

</div>

</div>

</section>

<span class="category-tag">Our Philosophy</span>

<h2 style="font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 30px;">Connecting the Past with the Present</h2>

</div>

</section>

// Sticky Header Effect

window.addEventListener('scroll', () => {

const nav = document.getElementById('navbar');

if (window.scrollY > 50) {

nav.classList.add('scrolled');

} else {

nav.classList.remove('scrolled');

}

});

// Hero Image Slider Logic

function changeHero(imgUrl, title) {

const heroImg = document.getElementById('mainHeroImg');

heroImg.style.opacity = '0';

setTimeout(() => {

heroImg.src = imgUrl;

heroImg.style.opacity = '1';

}, 400);

}

// Star Rating Logic

function handleRate(element) {

const stars = element.querySelectorAll('span');

stars.forEach((star, index) => {

star.addEventListener('click', () => {

stars.forEach((s, i) => {

s.classList.toggle('active', i <= index);

});

// Visual feedback

star.parentElement.nextElementSibling.innerText = (index + 1).toFixed(1);

});

}

// Scroll Reveal Animation

const observerOptions = {

threshold: 0.1

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('active');

}

});

}, observerOptions);

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Smooth Scroll

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

// Comment System Simulation

document.querySelectorAll('.comment-input').forEach(input => {

input.addEventListener('keypress', (e) => {

if (e.key === 'Enter' && input.value !== '') {

const val = input.value;

input.value = 'Sending...';

setTimeout(() => {

input.value = '';

input.placeholder = 'Comment added!';

setTimeout(() => input.placeholder = 'Leave a thought...', 2000);

}, 1000);

}

});

</script>

</body>

</html>

Preview

Validating your code, please wait...