test
This commit is contained in:
Tizian.Breuch
@@ -1,83 +1,148 @@
|
||||
<div class="showcase">
|
||||
|
||||
<!-- ======================== -->
|
||||
<!-- HERO SEKTION -->
|
||||
<!-- ======================== -->
|
||||
<header class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1>Klicke, um mit einem<br>kostenlosen Konto alles<br>aus dieser Idee herauszuholen.</h1>
|
||||
<p class="brand-name">SATO</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<main class="page-wrapper">
|
||||
<!-- ======================= HEADER ======================= -->
|
||||
<header class="main-header">
|
||||
<div class="container header-content">
|
||||
<div class="header-logo">
|
||||
<img
|
||||
class="logo-image"
|
||||
src="https://i.ibb.co/tQqTvrz/unipod.png"
|
||||
alt="unipod logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-social">
|
||||
<a href="https://twitter.com/sahilnetic" aria-label="Twitter">
|
||||
<button class="social-button">
|
||||
<svg
|
||||
fill="white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="product-list">
|
||||
<!-- ======================= HERO SECTION ======================= -->
|
||||
<section id="hero" class="hero-section">
|
||||
<div class="hero-background-image">
|
||||
<img
|
||||
class="hero-image"
|
||||
src="https://i.ibb.co/5BCcDYB/Remote2.png"
|
||||
alt="Remote work illustration"
|
||||
/>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-headline">
|
||||
Download Now
|
||||
<span class="hero-sub-headline"> Lorem Ipsum </span>
|
||||
</h1>
|
||||
<a class="hero-button" href="https://twitter.com/sahilnetic">
|
||||
<svg
|
||||
fill="white"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M1.571 23.664l10.531-10.501 3.712 3.701-12.519 6.941c-.476.264-1.059.26-1.532-.011l-.192-.13zm9.469-11.56l-10.04 10.011v-20.022l10.04 10.011zm6.274-4.137l4.905 2.719c.482.268.781.77.781 1.314s-.299 1.046-.781 1.314l-5.039 2.793-4.015-4.003 4.149-4.137zm-15.854-7.534c.09-.087.191-.163.303-.227.473-.271 1.056-.275 1.532-.011l12.653 7.015-3.846 3.835-10.642-10.612z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Download now</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================== -->
|
||||
<!-- PRODUKT: Cervantes -->
|
||||
<!-- ======================== -->
|
||||
<section class="product-section layout-a">
|
||||
<div class="connector"></div>
|
||||
<div class="container product-grid">
|
||||
<div class="product-main-image">
|
||||
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Cervantes+Main" alt="Sonnenbrille Cervantes">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h2>Cervantes</h2>
|
||||
<p>Ein Statement für zeitlose Eleganz. Die markante Silhouette verbindet klassisches Design mit modernen Akzenten.</p>
|
||||
</div>
|
||||
<div class="product-variants">
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+1" alt="Cervantes Variante 1"></div>
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+2" alt="Cervantes Variante 2"></div>
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+3" alt="Cervantes Variante 3"></div>
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+4" alt="Cervantes Variante 4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ======================= ABOUT SECTION ======================= -->
|
||||
<section id="about" class="section mat-typography">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 class="section-title">About</h2>
|
||||
<h3 class="section-subtitle">
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- ======================== -->
|
||||
<!-- PRODUKT: Sirius -->
|
||||
<!-- ======================== -->
|
||||
<section class="product-section layout-b">
|
||||
<div class="connector"></div>
|
||||
<div class="container product-grid">
|
||||
<div class="product-main-image">
|
||||
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Sirius+Main" alt="Sonnenbrille Sirius">
|
||||
<div class="about-cards-container">
|
||||
<div class="about-card">
|
||||
<i class="material-icons about-icon">build</i>
|
||||
<h4 class="about-card-title">This is the expansion title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-card">
|
||||
<i class="material-icons about-icon">alarm</i>
|
||||
<h4 class="about-card-title">This is the expansion title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-card">
|
||||
<i class="material-icons about-icon">stars</i>
|
||||
<h4 class="about-card-title">This is the expansion title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-card">
|
||||
<i class="material-icons about-icon">settings</i>
|
||||
<h4 class="about-card-title">This is the expansion title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||
Doloribus numquam quis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h2>Sirius</h2>
|
||||
<p>Inspiriert von der Dynamik der Metropole. Sirius besticht durch seine leichte Bauweise und das futuristische Design.</p>
|
||||
</div>
|
||||
<div class="product-variants">
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+1" alt="Sirius Variante 1"></div>
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+2" alt="Sirius Variante 2"></div>
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+3" alt="Sirius Variante 3"></div>
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+4" alt="Sirius Variante 4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- ======================== -->
|
||||
<!-- PRODUKT: Almach -->
|
||||
<!-- ======================== -->
|
||||
<section class="product-section layout-a">
|
||||
<div class="connector"></div>
|
||||
<div class="container product-grid">
|
||||
<div class="product-main-image">
|
||||
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Almach+Main" alt="Sonnenbrille Almach">
|
||||
<!-- ======================= WORKSPACE SECTION ======================= -->
|
||||
<section id="workspace" class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 class="section-title">Lorem Ipsum Yojo</h2>
|
||||
</div>
|
||||
<div class="workspace-grid">
|
||||
<div class="workspace-card">Workspace 1</div>
|
||||
<div class="workspace-card">Workspace 2</div>
|
||||
<div class="workspace-card">Workspace 3</div>
|
||||
<div class="workspace-card">Workspace 4</div>
|
||||
<div class="workspace-card">Workspace 5</div>
|
||||
<div class="workspace-card">Workspace 6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h2>Almach</h2>
|
||||
<p>Mutig und unkonventionell. Almach ist für all jene, die sich trauen, aus der Masse herauszustechen.</p>
|
||||
</div>
|
||||
<div class="product-variants">
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+1" alt="Almach Variante 1"></div>
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+2" alt="Almach Variante 2"></div>
|
||||
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+3" alt="Almach Variante 3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hier können weitere Produktsektionen nach dem gleichen Muster folgen -->
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
<!-- ======================= FOOTER ======================= -->
|
||||
<footer class="main-footer">
|
||||
<div class="container">
|
||||
<hr />
|
||||
<p>Crafted with ❤️ by <span>Sahil</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<!-- Externes Skript -->
|
||||
<script
|
||||
data-name="BMC-Widget"
|
||||
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
|
||||
data-id="sahilnetic"
|
||||
></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user