forked from FWS/TEMPLATE-Web-site-one-page
feat(index): ajouter hero carousel avec images et script dedie
This commit is contained in:
+18
-6
@@ -8,18 +8,28 @@
|
||||
</head>
|
||||
<body>
|
||||
<main data-page-content>
|
||||
<section class="hero">
|
||||
<section class="hero hero-carousel" aria-label="Présentation FWS Linux">
|
||||
<div class="hero-carousel-track" data-hero-track>
|
||||
<article class="hero-slide is-active" data-hero-slide style="background-image: url('/p/assets/img/hero/xfce.png');" aria-hidden="false"></article>
|
||||
<article class="hero-slide" data-hero-slide style="background-image: url('/p/assets/img/hero/install.png');" aria-hidden="true"></article>
|
||||
<article class="hero-slide" data-hero-slide style="background-image: url('/p/assets/img/hero/gnome.png');" aria-hidden="true"></article>
|
||||
</div>
|
||||
|
||||
<div class="hero-inner">
|
||||
<h1 class="hero-title">FWS Linux</h1>
|
||||
<h2 class="hero-subtitle">un système léger, libre et compatible</h2>
|
||||
|
||||
<p class="lead">Open-source basé sur Arch Linux, Fws facilite la transition depuis Windows sans vous déposséder de vos données. Installation simplifiée, interface épurée, et compatibilité avec vos applications Windows grâce à Wine et Winboat — tout en restant respectueux de votre vie privée.</p>
|
||||
|
||||
<h2 class="hero-subtitle">Un systeme leger, libre et compatible</h2>
|
||||
<p class="lead">Open-source base sur Arch Linux, FWS facilite la transition depuis Windows sans vous deposseder de vos donnees. Installation simplifiee, interface epuree, et compatibilite avec vos applications Windows grace a Wine et Winboat.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button-primary" href="/?p/dl/" data-route="dl">Télécharger</a>
|
||||
<a class="button button-primary" href="/?p/dl/" data-route="dl">Telecharger</a>
|
||||
<a class="button button-secondary" href="/?p/contact/" data-route="contact">En savoir plus</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-controls" aria-label="Controles du carousel">
|
||||
<button class="hero-control" type="button" data-hero-prev aria-label="Image precedente">‹</button>
|
||||
<div class="hero-dots" data-hero-dots role="tablist" aria-label="Selectionner une image"></div>
|
||||
<button class="hero-control" type="button" data-hero-next aria-label="Image suivante">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features">
|
||||
@@ -44,5 +54,7 @@
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="../assets/js/hero-carousel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user