Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echoes of Eternity | A Novel by Elena Voss</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap');
:root {
--book-color: #4f46e5;
}
body {
font-family: 'Inter', system_ui, sans-serif;
}
.heading-font {
font-family: 'Playfair Display', serif;
}
.hero-bg {
background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)),
url('https://picsum.photos/id/1015/2000/1200') center/cover no-repeat;
}
.book-cover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}
.book-cover:hover {
transform: scale(1.05) rotate(2deg);
box-shadow: 0 35px 60px -15px rgb(0 0 0 / 0.5);
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: rgb(79 70 229);
transition: width 0.3s ease;
}
.nav-link:hover:after {
width: 100%;
}
</style>
</head>
<body class="bg-zinc-50 text-zinc-800">
<!-- NAVBAR -->
<nav class="bg-white border-b sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-indigo-600 rounded flex items-center justify-center text-white font-bold text-xl">📖</div>
<div>
<span class="heading-font text-2xl font-bold tracking-tight">Echoes of Eternity</span>
</div>
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
<a href="#synopsis" class="nav-link cursor-pointer">Synopsis</a>
<a href="#author" class="nav-link cursor-pointer">Author</a>
<a href="#reviews" class="nav-link cursor-pointer">Reviews</a>
<a href="#buy" class="nav-link cursor-pointer">Get the Book</a>
</div>
<div class="flex items-center gap-4">
<button onclick="toggleCart()"
class="flex items-center gap-2 px-5 py-2.5 rounded-2xl border hover:bg-zinc-100 transition-colors">
<i class="fa-solid fa-cart-shopping"></i>
<span id="cart-count" class="text-sm font-medium">0</span>
</button>
<button onclick="window.scrollTo({top: document.getElementById('buy').offsetTop - 80, behavior: 'smooth'})"
class="bg-indigo-600 hover:bg-indigo-700 transition-colors text-white px-8 py-3 rounded-2xl font-semibold text-sm flex items-center gap-2">
<i class="fa-solid fa-book"></i>
BUY NOW
</button>
</div>
</div>
</nav>
<!-- HERO -->
<header class="hero-bg h-screen flex items-center text-white">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-8">
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-2 rounded-3xl text-sm">
<span class="bg-emerald-400 w-2 h-2 rounded-full animate-pulse"></span>
#1 New York Times Bestseller
</div>
<h1 class="heading-font text-7xl md:text-8xl font-bold leading-none tracking-tighter">
ECHOES OF<br>ETERNITY
</h1>
<p class="text-2xl text-white/90 max-w-md">
In a world where time can be borrowed, one woman must decide what she's willing to give up for love.
</p>
<div class="flex items-center gap-6">
<button onclick="window.scrollTo({top: document.getElementById('buy').offsetTop - 80, behavior: 'smooth'})"
class="bg-white text-zinc-900 hover:bg-amber-300 transition-all px-10 py-4 rounded-3xl font-semibold text-lg flex items-center gap-3 group">
<span>Read Now</span>
<i class="fa-solid fa-arrow-right group-active:translate-x-2 transition"></i>
</button>
<a href="#synopsis"
class="flex items-center gap-3 group">
<div class="w-12 h-12 border-2 border-white/60 rounded-2xl flex items-center justify-center group-hover:border-white transition-colors">
<i class="fa-solid fa-play text-xl"></i>
</div>
<div>
<div class="text-sm opacity-75">Watch Trailer</div>
<div class="text-lg font-medium">1:42</div>
</div>
</a>
</div>
<div class="flex items-center gap-8 text-sm pt-4">
<div>
<div class="flex text-amber-400">
★★★★☆
</div>
<div class="text-white/70 text-xs">4.9 • 12,458 ratings</div>
</div>
<div class="h-8 w-px bg-white/30"></div>
<div>
<span class="block text-white/70 text-xs">Available in</span>
<span class="font-medium">Hardcover • Paperback • Kindle • Audiobook</span>
</div>
</div>
</div>
<!-- Book Cover -->
<div class="flex justify-center md:justify-end">
<div class="relative">
<img id="main-cover"
src="https://picsum.photos/id/1015/420/620"
alt="Echoes of Eternity Book Cover"
class="book-cover w-80 md:w-96 rounded-3xl border-8 border-white/90">
<!-- Floating badges -->
<div class="absolute -top-4 -right-4 bg-white text-zinc-900 text-xs font-bold px-5 py-2 rounded-2xl shadow-xl rotate-12">
NOW IN PAPERBACK
</div>
<div class="absolute -bottom-6 -left-8 bg-rose-500 text-white text-sm font-semibold px-6 py-3 rounded-3xl shadow-xl flex items-center gap-2">
<i class="fa-solid fa-heart"></i>
<span>Featured in Oprah's Book Club</span>
</div>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 flex flex-col items-center text-white/70 text-xs tracking-widest">
<div>SCROLL TO DISCOVER</div>
<i class="fa-solid fa-chevron-down mt-2 animate-bounce"></i>
</div>
</header>
<!-- SYNOPSIS -->
<section id="synopsis" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="grid md:grid-cols-12 gap-16">
<div class="md:col-span-5">
<div class="sticky top-28">
<div class="uppercase tracking-widest text-indigo-600 text-sm font-medium mb-3">The Story</div>
<h2 class="heading-font text-5xl font-bold leading-tight">A love that defies time itself</h2>
<div class="mt-8 w-24 h-1 bg-gradient-to-r from-indigo-500 to-violet-500"></div>
</div>
</div>
<div class="md:col-span-7 prose prose-lg text-zinc-600">
<p class="text-xl leading-relaxed">
When 28-year-old archivist Clara Vale discovers an ancient pocket watch that allows her to borrow moments from her future, she thinks she's found the answer to her dreams. But every second she steals from tomorrow comes at a devastating cost.
</p>
<p>
As she falls deeper in love with a man who exists only in stolen time, Clara must confront the ultimate question: How much of her life is she willing to trade for a love that might never truly be hers?
</p>
<p>
A sweeping tale of sacrifice, memory, and the fragile beauty of human connection, <span class="font-semibold italic">Echoes of Eternity</span> will leave readers questioning what they would give up to hold onto the people they love most.
</p>
<div class="grid grid-cols-3 gap-6 mt-12 text-center">
<div>
<div class="text-4xl font-bold text-indigo-600">384</div>
<div class="text-sm text-zinc-500 mt-1">Pages</div>
</div>
<div>
<div class="text-4xl font-bold text-indigo-600">2025</div>
<div class="text-sm text-zinc-500 mt-1">Published</div>
</div>
<div>
<div class="text-4xl font-bold text-indigo-600">Literary Fiction</div>
<div class="text-sm text-zinc-500 mt-1">Genre</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- AUTHOR -->
<section id="author" class="py-24 bg-zinc-100">
<div class="max-w-7xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<img src="https://picsum.photos/id/64/600/700"
alt="Elena Voss"
class="rounded-3xl shadow-2xl w-full">
</div>
<div class="space-y-8">
<div>
<div class="uppercase text-sm tracking-widest text-zinc-500">Meet the Author</div>
<h2 class="heading-font text-5xl font-bold mt-3">Elena Voss</h2>
</div>
<div class="prose text-zinc-600">
<p>Elena Voss is the award-winning author of three previous novels, including the international bestseller <i>The Last Light of Day</i>. With a background in history and philosophy, her writing explores the intersections of time, memory, and human emotion.</p>
<p>When she's not writing, Elena can be found wandering old libraries, practicing calligraphy, or tending to her collection of antique clocks.</p>
</div>
<div class="flex gap-8 text-sm">
<div>
<span class="block text-zinc-400">PREVIOUS WORKS</span>
<span class="font-medium">The Last Light of Day • The Weight of Tomorrow • Fragments</span>
</div>
<div>
<span class="block text-zinc-400">LIVES IN</span>
<span class="font-medium">Edinburgh, Scotland</span>
</div>
</div>
<a href="#" class="inline-flex items-center gap-3 group text-indigo-600 font-medium">
Read Elena's full bio
<span class="group-hover:translate-x-1 transition">→</span>
</a>
</div>
</div>
</div>
</section>
<!-- REVIEWS -->
<section id="reviews" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-12">
<div>
<div class="uppercase text-sm tracking-widest text-amber-500">Praise</div>
<h2 class="heading-font text-5xl font-bold">What Readers Are Saying</h2>
</div>
<div class="text-right">
<div class="flex text-4xl text-amber-400">★★★★★</div>
<div class="text-zinc-500">Average rating: 4.9/5</div>
</div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Review 1 -->
<div class="bg-zinc-50 p-8 rounded-3xl">
<div class="flex text-amber-400 mb-6">★★★★★</div>
<p class="italic text-zinc-600">"I couldn't put it down. This book broke me and then put me back together in the most beautiful way. Elena Voss is a genius."</p>
<div class="mt-8 flex items-center gap-3">
<div class="w-10 h-10 bg-purple-200 rounded-2xl"></div>
<div>
<div class="font-medium">Sarah Chen</div>
<div class="text-xs text-zinc-500">Goodreads • Verified Purchase</div>
</div>
</div>
</div>
<!-- Review 2 -->
<div class="bg-zinc-50 p-8 rounded-3xl">
<div class="flex text-amber-400 mb-6">★★★★☆</div>
<p class="italic text-zinc-600">"A masterpiece of speculative fiction. The concept of borrowing time is so original and executed perfectly. One of my favorite reads of the year."</p>
<div class="mt-8 flex items-center gap-3">
<div class="w-10 h-10 bg-rose-200 rounded-2xl"></div>
<div>
<div class="font-medium">Marcus Okonkwo</div>
<div class="text-xs text-zinc-500">New York Times</div>
</div>
</div>
</div>
<!-- Review 3 -->
<div class="bg-zinc-50 p-8 rounded-3xl">
<div class="flex text-amber-400 mb-6">★★★★★</div>
<p class="italic text-zinc-600">"I cried. I laughed. I stayed up until 4am finishing it. This book will stay with me forever."</p>
<div class="mt-8 flex items-center gap-3">
<div class="w-10 h-10 bg-emerald-200 rounded-2xl"></div>
<div>
<div class="font-medium">Priya Patel</div>
<div class="text-xs text-zinc-500">Bookstagrammer</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BUY SECTION -->
<section id="buy" class="py-24 bg-gradient-to-br from-zinc-900 to-black text-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="heading-font text-5xl font-bold">Get Your Copy Today</h2>
<p class="text-xl text-white/70 mt-4">Choose your preferred format</p>
</div>
<div class="grid md:grid-cols-4 gap-8">
<!-- Hardcover -->
<div onclick="addToCart(this)" class="buy-option bg-white/5 hover:bg-white/10 border border-white/10 rounded-3xl p-8 cursor-pointer transition-all group">
<div class="text-xs uppercase tracking-widest mb-6 text-emerald-400">Premium</div>
<div class="text-3xl font-bold">$28</div>
<div class="text-sm text-white/60">Hardcover</div>
<div class="my-8 h-px bg-white/10"></div>
<ul class="space-y-4 text-sm">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Beautiful dust jacket</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Signed bookplate option</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Free shipping on orders $50+</li>
</ul>
<button class="mt-12 w-full py-4 bg-white text-black font-semibold rounded-2xl group-hover:scale-105 transition">Add to Cart</button>
</div>
<!-- Paperback -->
<div onclick="addToCart(this)" class="buy-option bg-white/5 hover:bg-white/10 border border-white/10 rounded-3xl p-8 cursor-pointer transition-all group">
<div class="text-xs uppercase tracking-widest mb-6 text-amber-400">Popular</div>
<div class="text-3xl font-bold">$16</div>
<div class="text-sm text-white/60">Paperback</div>
<div class="my-8 h-px bg-white/10"></div>
<ul class="space-y-4 text-sm">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Perfect for travel</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Matte finish</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Best value</li>
</ul>
<button class="mt-12 w-full py-4 bg-white text-black font-semibold rounded-2xl group-hover:scale-105 transition">Add to Cart</button>
</div>
<!-- Kindle -->
<div onclick="addToCart(this)" class="buy-option bg-white/5 hover:bg-white/10 border border-white/10 rounded-3xl p-8 cursor-pointer transition-all group">
<div class="text-xs uppercase tracking-widest mb-6 text-blue-400">Instant</div>
<div class="text-3xl font-bold">$9.99</div>
<div class="text-sm text-white/60">Kindle Edition</div>
<div class="my-8 h-px bg-white/10"></div>
<ul class="space-y-4 text-sm">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Instant download</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Whispersync ready</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-emerald-400"></i> Enhanced typesetting</li>
</ul>
<button class="mt-12 w-full py-4 bg-white text-black font-semibold rounded-2xl group-hover:scale-105 transition">Buy on Kindle</button>
</div>
<!-- Audiobook -->
<div onclick="addToCart(this)" class="buy-option bg-white/5 hover:bg-white/10 border border-white/10 rounded-3xl p-8 cursor-pointer transition-all group">
<div class="text-xs uppercase tracking-widest mb-6 text-violet-400">Immersive</div>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
14
Requests
7
Domains
899KB
Transfer Size
1261KB
Content Size
1,092.0ms
Dom Content Loaded
1,212.0ms
First Paint
1,317.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...