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;
|
||||
}
|
||||
|
||||
.jumbotron p>a, footer a {
|
||||
.jumbotron p>a, footer a, a {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.jumbotron p>a:hover, footer a:hover{
|
||||
.jumbotron p>a:hover, footer a:hover, a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -87,6 +87,7 @@ footer {
|
|||
|
||||
.feature-detail-container {
|
||||
display: none;
|
||||
transition: display 1s ease-in-out;
|
||||
}
|
||||
|
||||
#active-feature-detail {
|
||||
|
|
|
|||
|
|
@ -145,27 +145,40 @@
|
|||
</div>
|
||||
|
||||
<!-- 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"
|
||||
id="active-feature-item">
|
||||
Pick Up and Play
|
||||
</div>
|
||||
<!-- Feature 2 -->
|
||||
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
||||
Quick Resume
|
||||
Rich Metadata & Cover Art
|
||||
</div>
|
||||
<!-- Feature 3 -->
|
||||
<div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
|
||||
Rewind & Fast Forward
|
||||
Custom Radial Menu
|
||||
</div>
|
||||
<!-- Feature 4 -->
|
||||
<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>
|
||||
<!-- End Left Column -->
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="col-md-8" id="feature-detail-column">
|
||||
<div class="my-gradient gradient-spin rounded-3">
|
||||
<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 h-100 pt-0 pt-sm-auto">
|
||||
<!-- Feature 1 -->
|
||||
<div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
|
||||
<!-- Image/Video Container -->
|
||||
<div class="row" id="feature-media-container">
|
||||
|
|
@ -178,19 +191,13 @@
|
|||
<div class="row py-2 rounded-3 feature-text-container">
|
||||
<div class="col">
|
||||
<h4>Don't waste time on setup</h4>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
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.
|
||||
Once installed, you can start playing with RetroDECK immediately.
|
||||
No setup wizards or configuration needed (although you can get into the weeds if you want).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="feature-detail-container rounded-3 p-3" id="">
|
||||
<!-- Image/Video Container -->
|
||||
<div class="row" id="feature-media-container">
|
||||
|
|
@ -202,20 +209,15 @@
|
|||
<!-- Feature Detail Container -->
|
||||
<div class="row py-2 rounded-3 feature-text-container">
|
||||
<div class="col">
|
||||
<h4>Don't waste time on setup</h4>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
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.
|
||||
<h4>Browse your games in style</h4>
|
||||
Because RetroDECK is built on top of EmulationStation-DE, your game library will be matched
|
||||
by ScreenScraper and TheGamesDB. Metadata like cover art, release dates, and summaries will
|
||||
be automatically downloaded.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="feature-detail-container rounded-3 p-3" id="">
|
||||
<!-- Image/Video Container -->
|
||||
<div class="row" id="feature-media-container">
|
||||
|
|
@ -224,6 +226,49 @@
|
|||
</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 -->
|
||||
<div class="row py-2 rounded-3 feature-text-container">
|
||||
<div class="col">
|
||||
|
|
@ -241,6 +286,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 6 -->
|
||||
<div class="feature-detail-container rounded-3 p-3" id="">
|
||||
<!-- Image/Video Container -->
|
||||
<div class="row" id="feature-media-container">
|
||||
|
|
|
|||
Loading…
Reference in a new issue