149 lines
5.8 KiB
HTML
149 lines
5.8 KiB
HTML
|
|
|
|
<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>
|
|
|
|
<!-- ======================= 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>
|
|
|
|
<!-- ======================= 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>
|
|
|
|
<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>
|
|
</section>
|
|
|
|
<!-- ======================= 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>
|
|
</section>
|
|
|
|
<!-- ======================= 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>
|