HTML THEME
SaaS & Startup
5.0/5
SaaS Lander Premium
A glassmorphism landing page template with animated sections for modern SaaS startups.
$25start
E-Commerce HTML THEME
iPhone Duo Case Shop — HTML CSS E-Commerce Template
( 00 ) — Promo Film
The design speaks for itself — auto-plays
no sound · pause · fullscreen · mobile view
copypromt.com/demo/iphone-duo-kilifLIVE00:00:00
Home
01/17
HomeParallax hero, scroll-telling tour, 8-finish picker
Try this page live ↗
Purchase →
Scenes — 17
Auto-play · pause · fullscreen · mobile view
A premium case shop template built with the MONOLITH design language for the iPhone 18 Duo: parallax showcase, scroll-telling tech tour, live 8-finish picker, full cart and checkout flow; TR + EN package.
0page
0file
335 KBpaket
0section
- Instant download after payment confirmation
- The package is delivered in the language you purchased (TR · EN · DE · FR · ES · IT · PT · RU)
- Protected until source code license approval
- Lifetime free updates
PROTECTED DELIVERY
INSTANT DELIVERY
INSTALLATION SUPPORT
( 01 ) — Live Showcase
This is not a screenshot — iPhone Duo Case Shop — HTML CSS E-Commerce Template Currently working on this page
The theme's real homepage lives in the window below. As you scroll, the homepage takes you on a tour, revealing sections one by one. When you click the window, controls come to you — menus, hovers, everything is live.
copypromt.com/demo/iphone-duo-kilif
LIVE
Liked it? The code is just as clean.9 page · 15 files · lifetime updates
Buy — $25
00Homepage launch
0%
( 02 ) — Scope
9 pages in package
Every page is individually designed. Clicking on the cards opens that page in a protected preview.
01
HomeCinematic hero, sticky tech tour, finish picker, comparison
index.html
02
Shop8 finishes, filterable grid
products.html
03
Product DetailsGallery, live finish picker, spec sheet
product.html
04
CartItems and order summary
cart.html
05
CheckoutAddress form and 3 payment methods
checkout.html
06
AboutManifesto, timeline, values
about.html
07
ContactContact cards and form
contact.html
08
FAQ8-question accordion + FAQ schema
faq.html
09
404On-brand lost page screen
404.html
( 03 ) — Content
What are you downloading?
The actual file structure of the package — when you purchase, the entire package belongs to you.
Package languages
TurkishEnglish
Your package is delivered in the language of the site you use while purchasing; you can access the other language packs from your order page and your account.
assets3 file
app.js15 KB
og-cover.jpg61 KB
style.css42 KB
404.html9 KB
about.html13 KB
cart.html18 KB
checkout.html13 KB
contact.html11 KB
faq.html16 KB
index.html51 KB
llms.txt1 KB
manifest.json1 KB
product.html42 KB
products.html42 KB
robots.txt532 B
Total 15 files — 335 KB · package unlocks after license approval
( 04 ) — Code Quality
Real code from the package
The examples below are taken directly from the files in the package — no negotiation, no show-off.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>iPhone 18 Duo Case — Dual-Lens Shield, 3.2 m Drop Protection | Duo Case</title>
<meta name="description" content="Aramid fiber case for iPhone 18 Duo: 0.9 mm dual-lens shield, 38-magnet MagSafe ring, 3.2-meter drop protection. 8 finishes from $45. Same-day dispatch, 30-day returns.">
<meta name="keywords" content="iphone 18 duo case, iphone 18 case, duo case, dual lens case, magsafe case, aramid fiber case, drop protection case, iphone case shop, premium phone case, wireless charging case">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
<meta name="author" content="Duo Case">
<meta name="theme-color" content="#0a0a0b">
<link rel="canonical" href="https://www.duocase.com/index.html">
<link rel="alternate" hreflang="en" href="https://www.duocase.com/index.html">
<link rel="alternate" hreflang="tr" href="https://www.duocase.com.tr/index.html">
<link rel="alternate" hreflang="x-default" href="https://www.duocase.com/index.html">
<meta property="og:site_name" content="Duo Case Store">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:title" content="iPhone 18 Duo Case — Dual-Lens Shield, 3.2 m Drop Protection | Duo Case">
<meta property="og:description" content="Aramid fiber case for iPhone 18 Duo: 0.9 mm dual-lens shield, 38-magnet MagSafe ring, 3.2-meter drop protection. 8 finishes from $45. Same-day dispatch, 30-day returns.">
<meta property="og:url" content="https://www.duocase.com/index.html">
<meta property="og:image" content="https://www.duocase.com/assets/og-cover.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="iPhone 18 Duo Case — Dual-Lens Shield, 3.2 m Drop Protection | Duo Case">
<meta name="twitter:description" content="Aramid fiber case for iPhone 18 Duo: 0.9 mm dual-lens shield, 38-magnet MagSafe ring, 3.2-meter drop protection. 8 finishes from $45. Same-day dispatch, 30-day returns.">
<meta name="twitter:image" content="https://www.duocase.com/assets/og-cover.jpg">
<meta name="geo.region" content="US">
<meta name="geo.placename" content="New York">
<meta name="geo.position" content="40.7128;-74.006">
<meta name="ICBM" content="40.7128, -74.006">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",:root{
--ink:#0a0a0b; --ink2:#111114; --ink3:#18181d;
--bone:#f3f2ee; --bone2:#e9e7e1; --card:#ffffff;
--volt:#ff4a00; --volt2:#ff6a2b;
--tx:#f4f4f2; --txd:#9a9aa3;
--itx:#141417; --itxd:#67686f;
--hd:rgba(255,255,255,.09); --hl:rgba(15,15,18,.14);
--fd:"Space Grotesk",system-ui,sans-serif;
--fb:"Inter Tight",system-ui,sans-serif;
--fm:"Space Mono",ui-monospace,monospace;
--ease:cubic-bezier(.16,1,.3,1);
--wrap:1240px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--ink);color:var(--tx);line-height:1.6;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--volt);color:#fff}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:2px}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:var(--ink)}
body::-webkit-scrollbar-thumb{background:#2c2c33;border-radius:5px;border:2px solid var(--ink)}
body::-webkit-scrollbar-thumb:hover{background:var(--volt)}
/* film greni */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:2000;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");animation:grain 9s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,2%)}} preloader · page geçişi · IO reveal · scroll-telling story ·
hero paralaks · magnetic · tilt+glare · count-up · finish switcher ·
akordeon · filtre · qty · galeri · cursor · progress */
(function () {
"use strict";
var RM = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
var FINE = window.matchMedia("(pointer: fine)").matches;
var $ = function (s, c) { return (c || document).querySelector(s); };
var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };
var lerp = function (a, b, t) { return a + (b - a) * t; };
var SHOOT = location.hash === "#shoot";
/* ── 0 · secim alanlarını header altına sabitle ── */
var st = document.createElement("style");
st.textContent = "[id]{scroll-margin-top:84px}";
document.head.appendChild(st);
/* ── 1 · PRELOADER ── */
var pld = $(".pld");
if (pld && !RM && !SHOOT) {
var num = $(".pld-num"), bar = $(".pld-bar i"), n = 0;
var t0 = performance.now();
document.documentElement.style.overflow = "hidden";
(function tick(now) {
var p = Math.min(1, (now - t0) / 900);
n = Math.floor(p * 100); Readable, commented, copy-paste friendly code — 3.0.0
( 05 ) — Features
What can it do?
9 ready-made pages (home, products, product detail, cart, checkout, about, contact, FAQ, 404)
TR + EN bilingual package — language-aware download
MONOLITH design language: ink black + bone white + signal orange, giant Space Grotesk type
Full motion engine: preloader, page transitions, scroll-telling tour, magnetic buttons, tilt cards, custom cursor
All product imagery inline SVG — zero external images
100% responsive: 1440px desktop to 390px mobile without overflow, aria + reduced-motion support
SEO + GEO ready: canonical, hreflang, JSON-LD (Product, FAQPage, Organization, BreadcrumbList), llms.txt
About the theme
iPhone Duo Case Shop is a premium e-commerce case-shop template built from scratch in the MONOLITH design language for iPhone 18 Duo owners. An ink-black + bone-white + signal-orange palette, giant Space Grotesk typography and realistic inline SVG case renders deliver a prestige storefront.
The package includes 9 pages (home, product list, product detail, cart, checkout, about, contact, FAQ, 404), a Turkish + English bilingual package, and a dependency-free pure HTML5 + CSS3 + vanilla JS motion engine. All product imagery is inline SVG — zero external images.
- Brand preloader, page-transition overlay, scroll progress bar, custom cursor and film-grain texture
- Scroll-telling technology tour: 4 chapters in a sticky section, animated measurement bars and a progress rail
- Mouse-parallax 3-layer hero, line-masked kinetic typography, magnetic buttons, tilt + glare cards
- Live 8-finish picker: the case color changes instantly on the product, with counter-animated statistics
- SEO ready: unique title and description, canonical, hreflang, Open Graph, Twitter Card, geo meta
- GEO ready: JSON-LD Product + AggregateRating, Organization, WebSite + SearchAction, FAQPage and BreadcrumbList schemas, llms.txt, robots.txt open to AI crawlers
- 100% responsive: from a 1440px desktop to a 390px mobile screen without overflow, with aria accessibility and reduced-motion support
- Cart and checkout flow: live quantity totals, 8 finishes, 3 payment methods, 3D Secure trust view
NET LICENSE
Single price, single license — no surprises.
You may use the complete source code in a single project for an unlimited time; lifetime updates and 10 downloads per license are included. Contact us for client work and resale.
( 06 ) — Frequently asked questions
Before purchasing
When is the source code opened?
Code is kept on our protected servers; once your payment is approved, your license key appears on your order page and you download the entire package instantly. Code cannot be copied during the preview.
How do I get updates?
When a new version is released, you will reach the latest version from the same download link without changing your license key. If you are subscribed to our newsletter, the release notes will be sent to your email.
What does the single project license include?
You can use the source code in your own projects, portfolio, or company website indefinitely. For reselling or multi-use in client projects, you can request a special offer.
( + ) — Similar
You might also like
Single-priced packages, prepared with the same quality philosophy — each is browsable in its showcase.
HTML THEME
copypromt.com/demo/copy-promt-sikayetLIVE00:00:0001/04HomePlatform overview and featured complaintsTry this page live ↗Purchase → HTML THEME
Corporate & Agency
5.0/5
Copy Promt Complaint Site Design
A ready-made HTML theme for complaint platforms: complaint form, brand responvoice, resolution tracking, and an SEO-friendly page structure.
copypromt.com/demo/uifolio-proLIVE00:00:0001/04 HTML THEME
Portfolio & CV
5.0/5
UiFolio Pro — Designer Portfolio
A dark-themed designer portfolio with a project showcase: case studies, process storytelling, and a contact section; 5 language variants.
$25start