Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-21 22:45:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement carousel with standard Bootstrap for better responsiveness

Browse source
This commit is contained in:
Adam Iannazzone 2024-09-26 13:04:58 -04:00
parent 95a80fb3ba
commit 755e161eaa
2 changed files with 168 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
css/style.css
View file

@ -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;

80
index.html
View file

@ -153,7 +153,8 @@
<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 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">
@ -220,10 +221,11 @@
<!-- End Second Section -->
</div>
</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,11 +284,78 @@
</div>
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
</div>
</div>
</div> -->
<!-- End Screenshot/Feature Section -->
<!-- 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>
<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>
<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 p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
<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">
@ -323,6 +392,7 @@
</div>
</div>
</div>
<!-- End Donate Appeal -->
</main>
@ -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>