Webleb - fragmentos de código

HTML

<!DOCTYPE html>

<head>

<title>AeroVoyant · sustainable AI travel</title>

<style>

/* RESET & BASE */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

background-color: #fafaf8;

color: #1e2b2c;

line-height: 1.5;

scroll-behavior: smooth;

}

/* variables */

:root {

--lime: #c3f53a;        /* fresh lime/neon accent */

--lime-dark: #a3d62a;

--dark: #1a2a2b;

--soft-gray: #f0f2ef;

--white: #ffffff;

--shadow: 0 20px 35px -8px rgba(0, 30, 20, 0.1);

--radius-card: 24px;

--spacing-section: 120px;

}

/* 12‑column grid system */

.grid-12 {

display: grid;

grid-template-columns: repeat(12, 1fr);

gap: 2rem;

}

.container {

max-width: 1280px;

margin: 0 auto;

padding: 0 2rem;

}

/* typography */

h1, h2, h3 {

font-weight: 400;

letter-spacing: -0.02em;

}

.serif {

font-family: 'Playfair Display', serif;

font-weight: 700;

}

.sans {

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

font-weight: 400;

}

/* sections */

section {

padding: var(--spacing-section) 0;

}

section:first-of-type {

padding-top: 0;

}

/* buttons */

.btn {

display: inline-block;

background: transparent;

border: 2px solid var(--lime);

padding: 0.9rem 2.5rem;

border-radius: 60px;

font-weight: 600;

text-decoration: none;

color: var(--dark);

transition: all 0.2s ease;

font-size: 1rem;

cursor: pointer;

}

.btn-primary {

background: var(--lime);

border-color: var(--lime);

color: #0f2a2a;

box-shadow: 0 8px 18px rgba(195, 245, 58, 0.25);

}

.btn-primary:hover {

background: var(--lime-dark);

border-color: var(--lime-dark);

transform: scale(1.02);

box-shadow: 0 12px 24px rgba(163, 214, 42, 0.3);

}

.btn-outline:hover {

background: var(--lime);

border-color: var(--lime);

}

/* cards & micro-animations */

.card {

background: var(--white);

border-radius: var(--radius-card);

padding: 2rem;

box-shadow: var(--shadow);

transition: transform 0.25s ease, box-shadow 0.3s ease;

height: 100%;

}

.card:hover {

transform: translateY(-8px);

box-shadow: 0 30px 45px -12px rgba(30, 50, 40, 0.2);

}

/* header */

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1.8rem 2rem;

max-width: 1440px;

margin: 0 auto;

}

.logo {

font-size: 1.8rem;

font-weight: 700;

letter-spacing: -0.02em;

}

.logo span { color: var(--lime); }

.nav-links {

display: flex;

gap: 3rem;

list-style: none;

}

.nav-links a {

text-decoration: none;

color: var(--dark);

font-weight: 500;

font-size: 1.05rem;

transition: color 0.2s;

}

.nav-links a:hover { color: var(--lime); }

/* hero — full width with cinematic bg + overlay */

.hero {

width: 100%;

min-height: 85vh;

background:

linear-gradient(135deg, rgba(10, 30, 25, 0.3) 0%, rgba(30, 50, 30, 0.2) 100%),

url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;

display: flex;

align-items: center;

position: relative;

}

.hero-overlay {

position: absolute;

inset: 0;

background: radial-gradient(circle at 30% 30%, rgba(255,255,240,0.1) 0%, rgba(0,20,10,0.2) 90%);

}

.hero-content {

position: relative;

z-index: 3;

max-width: 900px;

margin-left: 5%;

color: white;

text-shadow: 0 4px 18px rgba(0,0,0,0.3);

}

.hero h1 {

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

line-height: 1.1;

margin-bottom: 1.5rem;

}

.hero h1 .serif {

display: block;

font-size: 1.3em;

color: #fefee6;

}

.hero h1 .sans {

font-weight: 300;

letter-spacing: -0.01em;

color: #f0ffe0;

}

.hero .btn-primary {

font-size: 1.3rem;

padding: 1.2rem 3.5rem;

margin-top: 1.2rem;

border-radius: 60px;

background: var(--lime);

border: none;

color: #0a2620;

text-shadow: none;

}

/* stats row */

.stats-grid {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

gap: 2rem;

background: var(--white);

padding: 3rem 4rem;

border-radius: 80px;

box-shadow: var(--shadow);

margin-top: -80px;

position: relative;

z-index: 5;

}

.stat-item {

text-align: center;

flex: 1 1 150px;

}

.stat-number {

font-size: 3rem;

font-weight: 700;

color: var(--dark);

line-height: 1;

}

.stat-label {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

color: #4a615b;

}

/* about two-column */

.about-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.about-image img {

width: 100%;

border-radius: 40px;

box-shadow: var(--shadow);

}

/* feature cards (services) */

.feature-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2rem;

margin-top: 3rem;

}

/* benefits with visual */

.benefits-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.benefits-list {

list-style: none;

}

.benefits-list li {

display: flex;

gap: 1rem;

align-items: center;

margin-bottom: 1.8rem;

font-size: 1.2rem;

}

.benefits-list i {

color: var(--lime);

font-size: 1.8rem;

width: 2.5rem;

}

.benefits-visual img {

width: 100%;

border-radius: 30px;

box-shadow: var(--shadow);

}

/* editorial testimonials */

.testimonial-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2rem;

}

.testimonial-card {

background: white;

border-radius: var(--radius-card);

padding: 2.2rem;

box-shadow: var(--shadow);

position: relative;

}

.testimonial-card i.fa-quote-left {

color: var(--lime);

opacity: 0.4;

font-size: 2.5rem;

margin-bottom: 1rem;

}

.testimonial-card p {

font-style: italic;

margin: 1.2rem 0;

}

.testimonial-author {

display: flex;

align-items: center;

gap: 1rem;

}

.author-avatar {

width: 50px;

height: 50px;

border-radius: 50%;

background: #d4dcd2;

background-image: url('https://randomuser.me/api/portraits/women/44.jpg');

background-size: cover;

}

.author-avatar.men { background-image: url('https://randomuser.me/api/portraits/men/32.jpg'); }

.author-avatar.third { background-image: url('https://randomuser.me/api/portraits/women/68.jpg'); }

/* pricing cards */

.pricing-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2rem;

margin-top: 3rem;

}

.pricing-card {

background: white;

border-radius: 40px;

padding: 2.5rem 2rem;

box-shadow: var(--shadow);

transition: transform 0.2s;

text-align: center;

}

.pricing-card:hover {

transform: scale(1.02);

}

.pricing-card .price {

font-size: 3rem;

font-weight: 700;

margin: 1rem 0;

color: var(--dark);

}

.pricing-card .btn-outline {

border-color: var(--dark);

margin-top: 1.5rem;

width: 100%;

}

/* blog preview */

.blog-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2rem;

}

.blog-card {

background: white;

border-radius: 30px;

overflow: hidden;

box-shadow: var(--shadow);

}

.blog-card img {

width: 100%;

height: 200px;

object-fit: cover;

}

.blog-content {

padding: 1.8rem;

}

/* full-width newsletter */

.newsletter-cta {

background: var(--lime);

width: 100vw;

position: relative;

left: 50%;

right: 50%;

margin-left: -50vw;

margin-right: -50vw;

padding: 5rem 0;

text-align: center;

}

.newsletter-inner {

max-width: 700px;

margin: 0 auto;

padding: 0 2rem;

}

.newsletter-cta h2 {

font-size: 2.8rem;

margin-bottom: 1.8rem;

color: #0a2620;

}

.newsletter-form {

display: flex;

gap: 1rem;

justify-content: center;

}

.newsletter-form input {

flex: 1;

padding: 1.2rem 1.8rem;

border: none;

border-radius: 60px;

font-size: 1.1rem;

}

.newsletter-form .btn-primary {

background: var(--dark);

border: none;

color: white;

box-shadow: none;

}

/* minimal footer */

.footer {

padding: 4rem 0 2rem;

background: #eef3ed;

}

.footer-content {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

gap: 2rem;

}

.footer-links {

display: flex;

gap: 3rem;

}

.footer-links a {

text-decoration: none;

color: var(--dark);

}

.social i {

font-size: 1.5rem;

margin-left: 1.5rem;

color: var(--dark);

}

/* responsive */

@media (max-width: 1000px) {

.feature-grid, .testimonial-grid, .pricing-grid, .blog-grid, .about-grid, .benefits-grid {

grid-template-columns: 1fr;

}

.navbar {

flex-direction: column;

gap: 1rem;

}

.nav-links {

flex-wrap: wrap;

justify-content: center;

gap: 1.5rem;

}

.stats-grid {

flex-direction: column;

align-items: center;

padding: 2rem;

}

.hero h1 {

font-size: 3.2rem;

}

:root {

--spacing-section: 80px;

}

@media (max-width: 600px) {

.newsletter-form {

flex-direction: column;

}

/* smooth scroll already on html */

html {

scroll-behavior: smooth;

}

</style>

</head>

<body>

<div class="logo"><span>Aero</span>Voyant</div>

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

<li><a href="#services">Services</a></li>

<li><a href="#projects">Projects</a></li>

<li><a href="#industries">Industries</a></li>

<li><a href="#pricing">Pricing</a></li>

</ul>

</nav>

</header>

<h1>

<span class="serif">Sustainable journeys,</span>

<span class="sans">intelligently guided</span>

</h1>

<p style="font-size: 1.4rem; max-width: 600px; margin-bottom: 2rem;">Where AI meets ecology — travel without compromise.</p>

<a href="#" class="btn btn-primary">Discover our recent projects →</a>

</div>

</section>

<div class="stat-item"><div class="stat-number">1,200+</div><div class="stat-label">travelers</div></div>

<div class="stat-item"><div class="stat-number">95%</div><div class="stat-label">satisfaction</div></div>

<div class="stat-item"><div class="stat-number">3</div><div class="stat-label">continents</div></div>

<div class="stat-item"><div class="stat-number">10</div><div class="stat-label">years expertise</div></div>

</div>

<div>

<h2 class="serif" style="font-size: 3rem; margin-bottom: 2rem;">About us</h2>

<p style="font-size: 1.2rem; margin-bottom: 2rem;">AeroVoyant was born in 2015 from a simple idea: use AI to erase the carbon guilt from travel. We blend real‑time smart sensing, renewable energy sourcing, and hyper‑personalised itineraries to create journeys that feel good and do good.</p>

<a href="#" class="btn btn-outline" style="border-color: var(--dark);">Learn more →</a>

</div>

</div>

</section>

<h2 class="serif" style="font-size: 2.8rem; margin-bottom: 1rem;">Services</h2>

<h3 style="font-size: 1.9rem; margin-bottom: 1rem;">AI Trip Planner</h3>

<p>Context‑aware assistance that learns your pace, values, and style — then builds a carbon‑smart itinerary.</p>

</div>

<h3 style="font-size: 1.9rem; margin-bottom: 1rem;">Eco‑stay Network</h3>

<p>Hand‑picked hotels and lodges running on renewable energy, with real‑time monitoring of consumption.</p>

</div>

<h3 style="font-size: 1.9rem; margin-bottom: 1rem;">24/7 Maintenance</h3>

<p>Round‑the‑clock support from local experts and AI — because sustainable travel should be effortless.</p>

</div>

</section>

<div>

<h2 class="serif" style="font-size: 2.8rem; margin-bottom: 2rem;">Benefits of regenerative travel</h2>

<li><i class="fas fa-leaf"></i> <span>Sustainability — net‑positive experiences</span></li>

<li><i class="fas fa-globe-asia"></i> <span>Environmental Impact — real‑time tracking</span></li>

<li><i class="fas fa-shield-alt"></i> <span>Energy Security — 100% renewable stays</span></li>

<li><i class="fas fa-chart-line"></i> <span>Economic Growth — local communities benefit</span></li>

</ul>

<a href="#" class="btn btn-primary" style="margin-top: 2rem;">Learn more</a>

</div>

</div>

</section>

<h2 class="serif" style="font-size: 2.8rem; text-align: center; margin-bottom: 4rem;">Trusted by modern explorers</h2>

<p>AeroVoyant didn’t just plan our trip—they transformed how we see travel. Every stay was carbon‑neutral, and the AI suggested local initiatives we’d never have found.</p>

<div><strong>Lena Keller</strong><br>Zurich</div>

</div>

<p>The real‑time energy dashboard showed me our lodge was running on 100% wind power. That’s peace of mind you can’t buy.</p>

<div><strong>Marcus Velez</strong><br>Lisbon</div>

</div>

<p>Finally, a travel company that walks the talk. From tower installation workshops to 24/7 maintenance, they care deeply.</p>

<div><strong>Priya Nair</strong><br>Singapore</div>

</div>

</section>

<h2 class="serif" style="font-size: 2.8rem; text-align: center;">Simple, transparent pricing</h2>

<p class="sans" style="text-align: center; margin-bottom: 2rem;">Flexible plans for every journey</p>

<h3>Individual</h3>

<p>Smart itineraries, carbon tracking, 24/7 chat</p>

<a href="#" class="btn btn-outline">Choose plan</a>

</div>

<h3>Business</h3>

<p>Team bookings, analytics, API access</p>

<a href="#" class="btn btn-primary" style="background: var(--lime); color: #0f2a2a;">Choose plan</a>

</div>

<h3>Enterprise</h3>

<p>Dedicated support, custom AI models, on‑site audits</p>

<a href="#" class="btn btn-outline">Choose plan</a>

</div>

</section>

<h2 class="serif" style="font-size: 2.8rem; margin-bottom: 2rem;">Our latest thoughts</h2>

<h3>Beautiful Italy, responsibly</h3>

<p>How we're rewilding the Apennines with every trip.</p>

</div>

<h3>Enjoy the desert's silence</h3>

<p>Solar‑powered camps in Salinas — zero emissions, 100% wonder.</p>

</div>

<h3>Energy security while travelling</h3>

<p>How our tower installation projects power remote communities.</p>

</div>

</section>

</main>

<h2 class="serif">Ready to work with less friction?</h2>

<p style="font-size: 1.3rem; margin-bottom: 2rem;">Join the movement — get monthly insights on sustainable AI travel.</p>

<button type="submit" class="btn btn-primary">Subscribe</button>

</form>

</div>

<div class="logo"><span>Aero</span>Voyant</div>

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

<a href="#">Services</a>

<a href="#">Projects</a>

<a href="#">Privacy</a>

</div>

</div>

</div>

</footer>

</body>

</html>

CSS

JS

Metehan

Recomendado