E-Commerce HTML-TEMPLATE

iPhone Duo Hüllen-Shop — HTML CSS E-Commerce-Website

5.0/5 · 12 Bewertungen v3.0.0 10.09.2026 40 Aufrufe
( 00 ) — Vorstellungsfilm Das Design spricht für sich — spielt automatisch ab Stummschaltung · Pause · Vollbild · Mobilansicht
iPhone Duo Hüllen-Shop — HTML CSS E-Commerce-Website promo filmi copypromt.com/demo/iphone-duo-kilifLIVE00:00:00 Startseite 01/17
StartseiteParallax hero, scroll-telling tour, 8-finish picker Diese Seite live testen ↗ Kaufen →
Szenen — 17 Automatischer Film · Pause · Vollbild · Mobile Ansicht

Eine Premium-Hüllen-Shop-Vorlage im MONOLITH-Design für das iPhone 18 Duo: Parallax-Schaufenstere, Scroll-telling-Tech-Tour, Live-Wähler für 8 Ausführungen, kompletter Warenkorb- und Checkout-Flow; TR + EN Package.

0Seite
0Datei
335 KBpaket
0Abschnitt
Live-Vorschau Kaufen — $
  • Nach der Zahlungsbestätigung wird Ihr Lizenzschlüssel sofort erstellt, die ZIP-Datei kann heruntergeladen werden.
  • Das Paket wird in der Sprache geliefert, die Sie gekauft haben (TR · EN · DE · FR · ES · IT · PT · RU)
  • Geschützt bis zur Genehmigung der Quellcode-Lizenz
  • Lebenslange kostenlose Updates
GESCHÜTZTE LIEFERUNG SOFORTIGE LIEFERUNG INSTALLATIONSSUPPORT
( 01 ) — Live-Vitrine

Dies ist kein Screenshot — iPhone Duo Hüllen-Shop — HTML CSS E-Commerce-Website arbeitet gerade auf dieser Seite

Im Fenster unten lebt die echte Startseite des Themes. Beim Scrollen durchläuft die Seite einen Rundgang, zeigt Ihnen die Abschnitte einzeln. Beim Klick auf das Fenster übernehmen Sie die Kontrolle — Menüs, Hover-Effekte, alles live.

copypromt.com/demo/iphone-duo-kilif LIVE
Gefallen? Der Code ist genauso sauber.9 Seite · 15 Datei · ömür boyu güncelleme Kaufen — $
00Startseite wird geöffnet 0%
( 02 ) — Scope

9 Seite im Package

Jede Seite wurde einzeln designed. Beim Klick auf die Karten wird die geschützte Vorschau der Seite geöffnet.

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

Was laden Sie herunter?

Die tatsächliche Dateistruktur des Pakets — beim Kauf gehört Ihnen das gesamte Paket vollständig.

Paket-Sprachen TürkischEnglish

Ihr Paket wird in der Sprache geliefert, in der Sie die Website beim Kauf nutzen; die anderen Sprachpakete erreichen Sie über Ihre Bestellseite und Ihr Konto.

iphone-duo-kilif-copypromt.zip15 Datei · 335 KB
assets3 Datei
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
Insgesamt 15 Dateien — 335 KB · Package wird nach der Lizenzbestätigung geöffnet
( 04 ) — Code-Qualität

Echter Code aus dem Paket

Die folgenden Beispiele sind 1:1 aus den Dateien im Paket — kein Handeln, kein Angeben.

<!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 · Seite 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);
Lesbarer, kommentierter, copy-paste-freundlicher Code — 3.0.0
( 05 ) — Funktionen

Was kann es?

9 fertige Seiten (Start, Produkte, Produktdetail, Warenkorb, Checkout, Über uns, Kontakt, FAQ, 404)
Zweisprachiges TR + EN Package — sprachabhängiger Download
MONOLITH-Design: Tintenschwarz + Knochenweiß + Signalorange, riesige Space-Grotesk-Typografie
Vollständige Motion-Engine: Preloader, Seitenübergänge, Scroll-telling-Tour, magnetische Buttons, Tilt-Karten, eigener Cursor
Alle Produktbilder Inline-SVG — null externe Bilder
100 % responsive: 1440px Desktop bis 390px Handy ohne Overflow, Aria + Reduced-Motion
SEO + GEO bereit: Canonical, hreflang, JSON-LD (Product, FAQPage, Organization, BreadcrumbList), llms.txt

Über das Theme

iPhone Duo Hüllen-Shop ist eine Premium-E-Commerce-Vorlage, die von Grund auf im MONOLITH-Design für iPhone-18-Duo-Besitzer gebaut wurde. Eine Tintenschwarz + Knochenweiß + Signalorange-Palette, riesige Space-Grotesk-Typografie und realistische Inline-SVG-Hüllen-Renderings liefern eine Prestige-Schaufenstere.

Das Package enthält 9 Seiten (Start, Produktliste, Produktdetail, Warenkorb, Checkout, Über uns, Kontakt, FAQ, 404), ein Typkisch + Englisch zweisprachiges Package und eine abhängigkeitsfreie pure HTML5 + CSS3 + Vanilla-JS-Motion-Engine. Sämtliche Produktbilder sind Inline-SVG — null externe Bilder.

  • Marken-Preloader, Seitenübergangs-Overlay, Scroll-Fortschrittsbalken, eigener Cursor und Filmkorn-Textur
  • Scroll-telling-Tech-Tour: 4 Kapitel in einer Sticky-Sektion, animierte Messbalken und Fortschrittsschiene
  • Maus-Parallax-Hero mit 3 Ebenen, Kinetic-Typografie mit Linienmaske, magnetische Buttons, Tilt+Glare-Karten
  • Live-Wähler für 8 Ausführungen: Die Hüllenfarbe wechselt sofort am Produkt, Zähler-animierte Statistiken
  • SEO bereit: eindeutiger Title und Description, Canonical, hreflang, Open Graph, Twitter Card, Geo-Meta
  • GEO bereit: JSON-LD Product + AggregateRating, Organization, WebSite + SearchAction, FAQPage- und BreadcrumbList-Schemata, llms.txt, robots.txt offen für AI-Crawler
  • 100 % responsive: vom 1440px-Desktop bis zum 390px-Handy ohne Overflow, mit Aria-Zugänglichkeit und Reduced-Motion-Unterstützung
  • Warenkorb und Checkout: Live-Mengensummen, 8 Ausführungen, 3 Zahlungsarten, 3D-Secure-Vertrauensansicht
NET-LIZENZ
Ein Preis, eine Lizenz — keine Überraschungen.

Sie können den gesamten Quellcode unbegrenzt in einem einzigen Projekt verwenden; lebenslange Updates und 10 Download-Rechte pro Lizenz sind enthalten. Wenden Sie sich für Kundenaufträge und Wiederverkauf an uns.

( 06 ) — Häufig gestellte Fragen

Vor dem Kauf

Wann wird der Quellcode freigegeben?

Der Code wird auf unserem geschützten Server aufbewahrt; sobald Ihre Zahlung bestätigt wird, wird Ihr Lizenzschlüssel auf der Bestellseite generiert und Sie können das gesamte Paket sofort herunterladen. Der Code kann während der Vorschau nicht kopiert werden.

Wie erhalte ich Updates?

Wenn eine neue Version veröffentlicht wird, erreichen Sie die neueste Version über denselben Download-Link, ohne dass sich Ihr Lizenzschlüssel ändert. Wenn Sie für unseren Newsletter registriert sind, erhalten Sie die Versionshinweise per E-Mail.

Was ist in der Ein-Projekt-Lizenz enthalten?

Sie können den Quellcode unbegrenzt in Ihrem eigenen Projekt, Portfolio oder auf der Website Ihres Unternehmens verwenden. Für Wiederverkauf oder Mehrfachnutzung in Kundenaufträgen können Sie ein spezielles Angebot anfordern.

( + ) — Ähnlich

Das könnte Sie auch interessieren

Pakete in gleichbleibend hoher Qualität — jeder durchsuchbar in der Vitrine.

SaaS Lander Premium HTML-TEMPLATE
SaaS & Startup 5.0/5

SaaS Lander Premium

Glassmorphism-Landingpage-Vorlage mit animierten Sektionen für moderne SaaS-Startups.

$25Start
Details
Copy Promt Beschwerdeplattform-Design Schaufenstercopypromt.com/demo/copy-promt-sikayetLIVE00:00:0001/04StartseitePlattformübersicht und ausgewählte BeschwerdenDiese Seite live testen ↗Kaufen → HTML-TEMPLATE
Agentur & Unternehmensberatung 5.0/5

Copy Promt Beschwerdeplattform-Design

Fertige HTML-Vorlage für Beschwerdeplattformen: Beschwerdeformular, Markenantworten, Lösungsverfolgung und SEO-freundliche Seitenstruktur.

$25Start
Vorschau ↗ Details
UiFolio Pro — Designer-Portfolio Schaufenstercopypromt.com/demo/uifolio-proLIVE00:00:0001/04 HTML-TEMPLATE
Portfolio & CV 5.0/5

UiFolio Pro — Designer-Portfolio

Dunkles Designer-Portfolio mit Projektvitrine: Case Studies, Prozess-Storytelling und Kontaktbereich; 5 Sprachvarianten.

$25Start
Details
$25Einzelpreis · Volles Paket Vorschau Kaufen