RetroDECK-Website/index.html
2024-09-25 18:56:07 -04:00

357 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>RetroDECK</title>
<meta name="twitter:description"
content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app.">
<meta property="og:image" content="assets/img/RetroDeck%20Wallpaper.png">
<meta name="twitter:title" content="RetroDECK">
<meta name="twitter:card" content="summary">
<meta property="og:type" content="website">
<meta name="twitter:image" content="">
<meta name="description"
content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app.">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/icon_circle_2_180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/icon_circle_16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/icon_circle_1_32x32.png">
<link rel="icon" type="image/png" sizes="180x180" href="assets/icons/icon_circle_2_180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/icons/icon_circle_3_192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="assets/icons/icon_circle_4_512x512.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container large">
<a class="navbar-brand" href="index.html">
<img src="assets/icons/squircle-icon.svg" height="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" rel="noopener noreferrer"
href="https://retrodeck.readthedocs.io/en/latest/">Wiki</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" rel="noopener noreferrer"
href="https://retrodeck.readthedocs.io/en/latest/blog/">Blog</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Social <i class="bi bi-caret-down-square-fill"></i>
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://discord.gg/WDc5C9YWMx">
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>Discord</title>
<path
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
</svg>Discord
</a>
</li>
<li>
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://matrix.to/#/#retrodeck:matrix.org">
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>Matrix</title>
<path
d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z" />
</svg>Matrix
</a>
</li>
<li>
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://www.reddit.com/r/RetroDeck/">
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>Reddit</title>
<path
d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z" />
</svg>Reddit
</a>
</li>
<li>
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://lemmy.zip/c/retrodeck">
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>Lemmy</title>
<path
d="M2.9595 4.2228a3.9132 3.9132 0 0 0-.332.019c-.8781.1012-1.67.5699-2.155 1.3862-.475.8-.5922 1.6809-.35 2.4971.2421.8162.8297 1.5575 1.6982 2.1449.0053.0035.0106.0076.0163.0114.746.4498 1.492.7431 2.2877.8994-.02.3318-.0272.6689-.006 1.0181.0634 1.0432.4368 2.0006.996 2.8492l-2.0061.8189a.4163.4163 0 0 0-.2276.2239.416.416 0 0 0 .0879.455.415.415 0 0 0 .2941.1231.4156.4156 0 0 0 .1595-.0312l2.2093-.9035c.408.4859.8695.9315 1.3723 1.318.0196.0151.0407.0264.0603.0423l-1.2918 1.7103a.416.416 0 0 0 .664.501l1.314-1.7385c.7185.4548 1.4782.7927 2.2294 1.0242.3833.7209 1.1379 1.1871 2.0202 1.1871.8907 0 1.6442-.501 2.0242-1.2072.744-.2347 1.4959-.5729 2.2073-1.0262l1.332 1.7606a.4157.4157 0 0 0 .7439-.1936.4165.4165 0 0 0-.0799-.3074l-1.3099-1.7345c.0083-.0075.0178-.0113.0261-.0188.4968-.3803.9549-.8175 1.3622-1.2939l2.155.8794a.4156.4156 0 0 0 .5412-.2276.4151.4151 0 0 0-.2273-.5432l-1.9438-.7928c.577-.8538.9697-1.8183 1.0504-2.8693.0268-.3507.0242-.6914.0079-1.0262.7905-.1572 1.5321-.4502 2.2737-.8974.0053-.0033.011-.0076.0163-.0113.8684-.5874 1.456-1.3287 1.6982-2.145.2421-.8161.125-1.697-.3501-2.497-.4849-.8163-1.2768-1.2852-2.155-1.3863a3.2175 3.2175 0 0 0-.332-.0189c-.7852-.0151-1.6231.229-2.4286.6942-.5926.342-1.1252.867-1.5433 1.4387-1.1699-.6703-2.6923-1.0476-4.5635-1.0785a15.5768 15.5768 0 0 0-.5111 0c-2.085.034-3.7537.43-5.0142 1.1449-.0033-.0038-.0045-.0114-.008-.0152-.4233-.5916-.973-1.1365-1.5835-1.489-.8055-.465-1.6434-.7083-2.4286-.6941Zm.2858.7365c.5568.042 1.1696.2358 1.7787.5875.485.28.9757.7554 1.346 1.2696a5.6875 5.6875 0 0 0-.4969.4085c-.9201.8516-1.4615 1.9597-1.668 3.2335-.6809-.1402-1.3183-.3945-1.984-.7948-.7553-.5128-1.2159-1.1225-1.4004-1.7445-.1851-.624-.1074-1.2712.2776-1.9196.3743-.63.9275-.9534 1.6118-1.0322a2.796 2.796 0 0 1 .5352-.0076Zm17.5094 0a2.797 2.797 0 0 1 .5353.0075c.6842.0786 1.2374.4021 1.6117 1.0322.385.6484.4627 1.2957.2776 1.9196-.1845.622-.645 1.2317-1.4004 1.7445-.6578.3955-1.2881.6472-1.9598.7888-.1942-1.2968-.7375-2.4338-1.666-3.302a5.5639 5.5639 0 0 0-.4709-.3923c.3645-.49.8287-.9428 1.2938-1.2113.6091-.3515 1.2219-.5454 1.7787-.5875ZM12.006 6.0036a14.832 14.832 0 0 1 .487 0c2.3901.0393 4.0848.67 5.1631 1.678 1.1501 1.0754 1.6423 2.6006 1.499 4.467-.1311 1.7079-1.2203 3.2281-2.652 4.324-.694.5313-1.4626.9354-2.2254 1.2294.0031-.0453.014-.0888.014-.1349.0029-1.1964-.9313-2.2133-2.2918-2.2133-1.3606 0-2.3222 1.0154-2.2918 2.2213.0013.0507.014.0972.0181.1471-.781-.2933-1.5696-.7013-2.2777-1.2456-1.4239-1.0945-2.4997-2.6129-2.6037-4.322-.1129-1.8567.3778-3.3382 1.5212-4.3965C7.5094 6.7 9.352 6.047 12.006 6.0036Zm-3.6419 6.8291c-.6053 0-1.0966.4903-1.0966 1.0966 0 .6063.4913 1.0986 1.0966 1.0986s1.0966-.4923 1.0966-1.0986c0-.6063-.4913-1.0966-1.0966-1.0966zm7.2819.0113c-.5998 0-1.0866.4859-1.0866 1.0866s.4868 1.0885 1.0866 1.0885c.5997 0 1.0865-.4878 1.0865-1.0885s-.4868-1.0866-1.0865-1.0866zM12 16.0835c1.0237 0 1.5654.638 1.5634 1.4829-.0018.7849-.6723 1.485-1.5634 1.485-.9167 0-1.54-.5629-1.5634-1.493-.0212-.8347.5397-1.4749 1.5634-1.4749Z" />
</svg>Lemmy
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Source Code <i class="bi bi-caret-down-square-fill"></i>
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK/tree/main"
target="_blank" rel="noopener noreferrer">
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>Github
</a>
</li>
<li>
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK-cooker/"
target="_blank" rel="noopener noreferrer">
<svg role="img" height="1rem" class="pe-2" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16">
<path
d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15" />
</svg></i>Cooker
</a>
</li>
<li>
<a class="dropdown-item" href="https://repo.retrodeck.net/" target="_blank"
rel="noopener noreferrer">
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>Forgejo</title>
<path
d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z" />
</svg>Forejo
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<!-- 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>
<!-- 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>
</div>
<div class="row">
<div class="col">Flathub</div>
</div>
</div>
</div>
</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 dont 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="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">
<img src="assets/screens/large/screen01.png" class="img-fluid screenshot mx-auto" alt="" />
<div class="feature-card px-2 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="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen02.png" class="img-fluid screenshot" alt="" />
<div class="feature-card px-2 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="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen03.png" class="img-fluid screenshot" alt="" />
<div class="feature-card px-2 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="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen04.png" class="img-fluid screenshot" alt="" />
<div class="feature-card px-2 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="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen05.png" class="img-fluid screenshot" alt="" />
<div class="feature-card px-2 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="col-8 col-sm-6 feature-container" id="">
<img src="assets/screens/large/screen06.png" class="img-fluid screenshot" alt="" />
<div class="feature-card px-2 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="col-8 col-sm-6 feature-container empty-feature-container" id=""></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>
</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>
</div>
<!-- End Donate Appeal -->
</main>
<!-- End Main Content -->
<!-- Footer -->
<footer class="container-fluid pt-2 pb-2">
<div class="row justify-content-between">
<div class="col">
<div>
Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
Iannazzone</a> and the RetroDECK team.
</div>
<div class="form-check form-switch">
<input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
<label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- <script src="scripts/gradient.js"></script> -->
<script src="scripts/features.js"></script>
<script src="scripts/accessibility.js"></script>
</body>
</html>