mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 14:35:38 +00:00
Implement carousel with standard Bootstrap for better responsiveness
This commit is contained in:
Adam Iannazzone
parent
95a80fb3ba
commit
755e161eaa
|
|
@ -99,25 +99,25 @@ footer {
|
|||
border-bottom: var(--rd-purple) 5px solid;
|
||||
}
|
||||
|
||||
#feature-row {
|
||||
/* #feature-row {
|
||||
flex-wrap: nowrap;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
} */
|
||||
|
||||
.feature-container {
|
||||
/* .feature-container {
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
scale: 80%;
|
||||
scroll-margin-top: 20px;
|
||||
max-height: fit-content;
|
||||
}
|
||||
} */
|
||||
|
||||
.feature-container#active-feature {
|
||||
/* .feature-container#active-feature {
|
||||
transition: 0.5s;
|
||||
scale: 100%;
|
||||
cursor:auto;
|
||||
}
|
||||
} */
|
||||
|
||||
.empty-feature-container {
|
||||
visibility: hidden;
|
||||
|
|
|
|||
254
index.html
254
index.html
|
|
@ -151,79 +151,81 @@
|
|||
|
||||
<!-- Main Content -->
|
||||
<main class="container-fluid px-0 mt-4">
|
||||
|
||||
|
||||
<!-- Jumbotron -->
|
||||
<div class="container p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||||
<div class="container-fluid align-items-center">
|
||||
<!-- First section -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h1 class="display-md-5 jumbo-header">Your all-in-one emulation package for the Steam Deck</h1>
|
||||
<p class="fs-md-4">
|
||||
Powered by <a target="_blank" rel="noopener noreferrer" href="https://es-de.org/">ES-DE</a>,
|
||||
RetroDECK combines all of the best open-source emulators into a single application.
|
||||
Pair that with a best-in-class Steam Deck controller configuration, and you'll be in retro
|
||||
gaming
|
||||
paradise.
|
||||
</p>
|
||||
</div>
|
||||
<div class="container px-2">
|
||||
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||||
<div class="container-fluid align-items-center">
|
||||
<!-- First section -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h1 class="display-md-5 jumbo-header">Your all-in-one emulation package for the Steam Deck</h1>
|
||||
<p class="fs-md-4">
|
||||
Powered by <a target="_blank" rel="noopener noreferrer" href="https://es-de.org/">ES-DE</a>,
|
||||
RetroDECK combines all of the best open-source emulators into a single application.
|
||||
Pair that with a best-in-class Steam Deck controller configuration, and you'll be in retro
|
||||
gaming
|
||||
paradise.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Flathub Link -->
|
||||
<div class="col-md-4 text-center">
|
||||
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
|
||||
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<svg fill="#946beb" role="img" height="2rem" class="px-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Flathub</title>
|
||||
<path
|
||||
d="M6.068 0a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 5.998-6 6 6 0 0 0-5.998-6Zm9.15.08a1.656 1.656 0 0 0-1.654 1.656v8.15a1.656 1.656 0 0 0 2.483 1.434l7.058-4.074a1.656 1.656 0 0 0 0-2.869l-1.044-.604-6.014-3.47a1.656 1.656 0 0 0-.828-.223Zm3.575 13.135a.815.815 0 0 0-.816.818v2.453h-2.454a.817.817 0 1 0 0 1.635h2.454v2.453a.817.817 0 1 0 1.635 0v-2.453h2.452a.817.817 0 1 0 0-1.635h-2.453v-2.453a.817.817 0 0 0-.818-.818zM2.865 13.5a2.794 2.794 0 0 0-2.799 2.8v4.9c0 1.55 1.248 2.8 2.8 2.8h4.9c1.55 0 2.8-1.25 2.8-2.8v-4.9c0-1.55-1.25-2.8-2.8-2.8Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-8 text-start">
|
||||
<div class="row">
|
||||
<div class="col">Get it on</div>
|
||||
<!-- Flathub Link -->
|
||||
<div class="col-md-4 text-center">
|
||||
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
|
||||
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<svg fill="#946beb" role="img" height="2rem" class="px-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Flathub</title>
|
||||
<path
|
||||
d="M6.068 0a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 5.998-6 6 6 0 0 0-5.998-6Zm9.15.08a1.656 1.656 0 0 0-1.654 1.656v8.15a1.656 1.656 0 0 0 2.483 1.434l7.058-4.074a1.656 1.656 0 0 0 0-2.869l-1.044-.604-6.014-3.47a1.656 1.656 0 0 0-.828-.223Zm3.575 13.135a.815.815 0 0 0-.816.818v2.453h-2.454a.817.817 0 1 0 0 1.635h2.454v2.453a.817.817 0 1 0 1.635 0v-2.453h2.452a.817.817 0 1 0 0-1.635h-2.453v-2.453a.817.817 0 0 0-.818-.818zM2.865 13.5a2.794 2.794 0 0 0-2.799 2.8v4.9c0 1.55 1.248 2.8 2.8 2.8h4.9c1.55 0 2.8-1.25 2.8-2.8v-4.9c0-1.55-1.25-2.8-2.8-2.8Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">Flathub</div>
|
||||
<div class="col-8 text-start">
|
||||
<div class="row">
|
||||
<div class="col">Get it on</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">Flathub</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Flathub Link -->
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Flathub Link -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- End First Section -->
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Second Section -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="display-md-5 jumbo-header">No need to configure emulators</h2>
|
||||
<h2 class="display-md-5 jumbo-header">(But you can if you want)</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"></div>
|
||||
<p class="fs-md-4">
|
||||
With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam
|
||||
Deck.
|
||||
If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator.
|
||||
And don’t worry – you can always reset with a single click.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- End First Section -->
|
||||
<!-- End Second Section -->
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Second Section -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="display-md-5 jumbo-header">No need to configure emulators</h2>
|
||||
<h2 class="display-md-5 jumbo-header">(But you can if you want)</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"></div>
|
||||
<p class="fs-md-4">
|
||||
With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam
|
||||
Deck.
|
||||
If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator.
|
||||
And don’t worry – you can always reset with a single click.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- End Second Section -->
|
||||
|
||||
</div>
|
||||
<!-- End Jumbotron -->
|
||||
|
||||
<!-- Screenshot/Feature Section -->
|
||||
<div class="container-fluid mb-4 pt-2" id="features">
|
||||
<!-- <div class="container-fluid mb-4 pt-2" id="features">
|
||||
<div class="row mb-2 overflow-x-scroll" id="feature-row">
|
||||
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
|
||||
<div class="col-8 col-sm-6 feature-container" id="active-feature">
|
||||
|
|
@ -282,45 +284,113 @@
|
|||
</div>
|
||||
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- End Screenshot/Feature Section -->
|
||||
|
||||
<!-- Donate Appeal -->
|
||||
<div class="container p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||||
<div class="container-fluid py-2 align-items-center">
|
||||
<!-- First section -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h2 class="display-md-5 jumbo-header">We can't do this alone!</h2>
|
||||
<p class="fs-md-4">
|
||||
RetroDECK is run by volunteers.
|
||||
If you appreciate our work, please consider code contribution or donating to us or our
|
||||
sibling projects.
|
||||
</p>
|
||||
<!-- Screenshots and Features as Bootstrap Carousel -->
|
||||
<div class="container-fluid mb-4" id="features">
|
||||
<div class="carousel slide py-2" id="features-carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active feature-container">
|
||||
<img src="assets/screens/large/screen01.png" class="d-block w-75 screenshot" alt="" />
|
||||
<div class="feature-card px-5 mt-2 mx-auto">
|
||||
<h3>Feature 1</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||||
sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Donate/Help Link -->
|
||||
<div class="col-md-4 text-center">
|
||||
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
|
||||
href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#946beb"
|
||||
class="bi bi-balloon-heart-fill px-2" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.49 10.92C19.412 3.382 11.28-2.387 8 .986 4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135-.237.463-.36 1.08-.202 1.85.055.27.467.197.527-.071.285-1.256 1.177-2.462 2.989-2.528.234-.008.348-.278.14-.386" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-8 text-start">Learn More</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="carousel-item feature-container">
|
||||
<img src="assets/screens/large/screen02.png" class="d-block w-75 screenshot" alt="" />
|
||||
<div class="feature-card px-5 mt-2 mx-auto">
|
||||
<h3>Feature 2</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||||
sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Donate/Help Link -->
|
||||
|
||||
<div class="carousel-item feature-container">
|
||||
<img src="assets/screens/large/screen03.png" class="d-block w-75 screenshot" alt="" />
|
||||
<div class="feature-card px-5 mt-2 mx-auto">
|
||||
<h3>Feature 3</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||||
sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item feature-container">
|
||||
<img src="assets/screens/large/screen04.png" class="d-block w-75 screenshot" alt="" />
|
||||
<div class="feature-card px-5 mt-2 mx-auto">
|
||||
<h3>Feature 4</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||||
sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-item feature-container">
|
||||
<img src="assets/screens/large/screen05.png" class="d-block w-75 screenshot" alt="" />
|
||||
<div class="feature-card px-5 mt-2 mx-auto">
|
||||
<h3>Feature 5</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||||
sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#features-carousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#features-carousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Screenshots and Features as Bootstrap Carousel -->
|
||||
|
||||
<!-- Donate Appeal -->
|
||||
<div class="container px-2">
|
||||
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||||
<div class="container-fluid py-2 align-items-center">
|
||||
<!-- First section -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h2 class="display-md-5 jumbo-header">We can't do this alone!</h2>
|
||||
<p class="fs-md-4">
|
||||
RetroDECK is run by volunteers.
|
||||
If you appreciate our work, please consider code contribution or donating to us or our
|
||||
sibling projects.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Donate/Help Link -->
|
||||
<div class="col-md-4 text-center">
|
||||
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
|
||||
href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#946beb"
|
||||
class="bi bi-balloon-heart-fill px-2" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.49 10.92C19.412 3.382 11.28-2.387 8 .986 4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135-.237.463-.36 1.08-.202 1.85.055.27.467.197.527-.071.285-1.256 1.177-2.462 2.989-2.528.234-.008.348-.278.14-.386" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-8 text-start">Learn More</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Donate/Help Link -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- End First Section -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- End First Section -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Donate Appeal -->
|
||||
|
|
@ -350,7 +420,7 @@
|
|||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
crossorigin="anonymous"></script>
|
||||
<!-- <script src="scripts/gradient.js"></script> -->
|
||||
<script src="scripts/features.js"></script>
|
||||
<!-- <script src="scripts/features.js"></script> -->
|
||||
<script src="scripts/accessibility.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue