mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 22:45:39 +00:00
Add feature detail 1-4
This commit is contained in:
Adam Iannazzone
parent
cf6d8bb31a
commit
5917d23681
|
|
@ -38,11 +38,11 @@ footer {
|
||||||
font-family: "Nunito Sans", sans-serif;
|
font-family: "Nunito Sans", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron p>a, footer a {
|
.jumbotron p>a, footer a, a {
|
||||||
color: #222;
|
color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron p>a:hover, footer a:hover{
|
.jumbotron p>a:hover, footer a:hover, a:hover {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -87,6 +87,7 @@ footer {
|
||||||
|
|
||||||
.feature-detail-container {
|
.feature-detail-container {
|
||||||
display: none;
|
display: none;
|
||||||
|
transition: display 1s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
#active-feature-detail {
|
#active-feature-detail {
|
||||||
|
|
|
||||||
|
|
@ -145,27 +145,40 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Feature List -->
|
<!-- Feature List -->
|
||||||
<div class="h5 row d-flex flex-md-column align-items-center overflow-x-scroll text-nowrap text-end flex-nowrap" id="feature-list">
|
<div class="h5 row d-flex flex-md-column align-items-center overflow-x-scroll text-end flex-nowrap text-nowrap" id="feature-list">
|
||||||
|
<!-- Feature 1 -->
|
||||||
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0"
|
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0"
|
||||||
id="active-feature-item">
|
id="active-feature-item">
|
||||||
Pick Up and Play
|
Pick Up and Play
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Feature 2 -->
|
||||||
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
||||||
Quick Resume
|
Rich Metadata & Cover Art
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Feature 3 -->
|
||||||
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
||||||
Rewind & Fast Forward
|
Custom Radial Menu
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Feature 4 -->
|
||||||
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
||||||
Configurator
|
External Controller Support
|
||||||
|
</div>
|
||||||
|
<!-- Feature 5 -->
|
||||||
|
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
||||||
|
BYO Emulator w/Ponzu
|
||||||
|
</div>
|
||||||
|
<!-- Feature 6 -->
|
||||||
|
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
||||||
|
RetroAchievement Support
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- End Left Column -->
|
<!-- End Left Column -->
|
||||||
|
|
||||||
<!-- Right Column -->
|
<!-- Right Column -->
|
||||||
<div class="col-md-8" id="feature-detail-column">
|
<div class="col-md-8 p-0 p-sm-2 ps-sm-3" id="feature-detail-column">
|
||||||
<div class="my-gradient gradient-spin rounded-3">
|
<div class="my-gradient gradient-spin rounded-3 h-100 pt-0 pt-sm-auto">
|
||||||
|
<!-- Feature 1 -->
|
||||||
<div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
|
<div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
|
||||||
<!-- Image/Video Container -->
|
<!-- Image/Video Container -->
|
||||||
<div class="row" id="feature-media-container">
|
<div class="row" id="feature-media-container">
|
||||||
|
|
@ -178,19 +191,13 @@
|
||||||
<div class="row py-2 rounded-3 feature-text-container">
|
<div class="row py-2 rounded-3 feature-text-container">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h4>Don't waste time on setup</h4>
|
<h4>Don't waste time on setup</h4>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
Once installed, you can start playing with RetroDECK immediately.
|
||||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
No setup wizards or configuration needed (although you can get into the weeds if you want).
|
||||||
nostrud
|
|
||||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
|
|
||||||
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
||||||
nulla
|
|
||||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
||||||
officia
|
|
||||||
deserunt mollit anim id est laborum.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature 2 -->
|
||||||
<div class="feature-detail-container rounded-3 p-3" id="">
|
<div class="feature-detail-container rounded-3 p-3" id="">
|
||||||
<!-- Image/Video Container -->
|
<!-- Image/Video Container -->
|
||||||
<div class="row" id="feature-media-container">
|
<div class="row" id="feature-media-container">
|
||||||
|
|
@ -202,20 +209,15 @@
|
||||||
<!-- Feature Detail Container -->
|
<!-- Feature Detail Container -->
|
||||||
<div class="row py-2 rounded-3 feature-text-container">
|
<div class="row py-2 rounded-3 feature-text-container">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h4>Don't waste time on setup</h4>
|
<h4>Browse your games in style</h4>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
Because RetroDECK is built on top of EmulationStation-DE, your game library will be matched
|
||||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
by ScreenScraper and TheGamesDB. Metadata like cover art, release dates, and summaries will
|
||||||
nostrud
|
be automatically downloaded.
|
||||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
|
|
||||||
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
||||||
nulla
|
|
||||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
||||||
officia
|
|
||||||
deserunt mollit anim id est laborum.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature 3 -->
|
||||||
<div class="feature-detail-container rounded-3 p-3" id="">
|
<div class="feature-detail-container rounded-3 p-3" id="">
|
||||||
<!-- Image/Video Container -->
|
<!-- Image/Video Container -->
|
||||||
<div class="row" id="feature-media-container">
|
<div class="row" id="feature-media-container">
|
||||||
|
|
@ -224,6 +226,49 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature Detail Container -->
|
||||||
|
<div class="row py-2 rounded-3 feature-text-container">
|
||||||
|
<div class="col">
|
||||||
|
<h4>Access emulator settings without breaking your flow</h4>
|
||||||
|
The custom RetroDECK controller profile makes use of the left touch pad on your Steam Deck.
|
||||||
|
Just touch it, and a radial menu will appear. Menus are tailored to your current emulator and
|
||||||
|
include features such as save/load state, upscaling, and more.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature 4 -->
|
||||||
|
<div class="feature-detail-container rounded-3 p-3" id="">
|
||||||
|
<!-- Image/Video Container -->
|
||||||
|
<div class="row" id="feature-media-container">
|
||||||
|
<div class="col">
|
||||||
|
<img class="img-fluid rounded-3" src="assets/screens/small/screen04.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature Detail Container -->
|
||||||
|
<div class="row py-2 rounded-3 feature-text-container">
|
||||||
|
<div class="col">
|
||||||
|
<h4>Use your official and unofficial controllers</h4>
|
||||||
|
Use your first-party Xbox, PlayStation, and Nintendo controllers, as well as
|
||||||
|
many 3rd party controllers. Guitar Hero controllers? ✅<br>
|
||||||
|
LEGO Dimensions ToyPad? ✅<br>
|
||||||
|
More supported controllers and how to implement them can be found in the
|
||||||
|
<a target="_blank" rel="noopener noreferrer"
|
||||||
|
href="https://retrodeck.readthedocs.io/en/latest/">Wiki</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature 5 -->
|
||||||
|
<div class="feature-detail-container rounded-3 p-3" id="">
|
||||||
|
<!-- Image/Video Container -->
|
||||||
|
<div class="row" id="feature-media-container">
|
||||||
|
<div class="col">
|
||||||
|
<img class="img-fluid rounded-3" src="assets/screens/small/screen04.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Feature Detail Container -->
|
<!-- Feature Detail Container -->
|
||||||
<div class="row py-2 rounded-3 feature-text-container">
|
<div class="row py-2 rounded-3 feature-text-container">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
|
@ -241,6 +286,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature 6 -->
|
||||||
<div class="feature-detail-container rounded-3 p-3" id="">
|
<div class="feature-detail-container rounded-3 p-3" id="">
|
||||||
<!-- Image/Video Container -->
|
<!-- Image/Video Container -->
|
||||||
<div class="row" id="feature-media-container">
|
<div class="row" id="feature-media-container">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue