thatscringebro/terminal_racer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update website

Browse Source
This commit is contained in:
thatscringebro 2023-10-11 18:55:34 -04:00
parent dbbb7a0633
commit 9d458d6781
4 changed files with 86 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ascii_racer.mp4 Normal file
View File

Binary file not shown.

119
index.html
View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<header> <header>
<h2> <div class="header-content">
<pre> <pre>
_____ __________________ .___.___ __________ _____ _________ _____________________ _____ __________________ .___.___ __________ _____ _________ _____________________
/ _ \ / _____/\_ ___ \| | | \______ \ / _ \ \_ ___ \\_ _____/\______ \ / _ \ / _____/\_ ___ \| | | \______ \ / _ \ \_ ___ \\_ _____/\______ \
@ -17,42 +17,49 @@
\____|__ /_______ / \______ /___|___| |____|_ /\____|__ /\______ /_______ / |____|_ / \____|__ /_______ / \______ /___|___| |____|_ /\____|__ /\______ /_______ / |____|_ /
\/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
</pre> </pre>
</h2> </div>
</header> </header>
<section class="game-description"> <main class="container">
<h2>About the Game</h2> <section class="game-description">
<p>ASCII RACER is an exciting top-down racing game created entirely with ASCII characters. Race against the clock and your opponents on a track filled with challenges and obstacles.</p> <h2>About the Game</h2>
</section> <p>ASCII RACER is an exciting top-down racing game created entirely with ASCII characters. Race against the clock and your opponents on a track filled with challenges and obstacles.</p>
<section class="game-media"> </section>
<h2>Game Media</h2> <section class="game-media">
<div class="screenshot"> <h2>Game Media</h2>
<img src="screenshot1.jpg" alt="Screenshot 1"> <div class="media-container">
</div> <div class="media-item">
<div class="screenshot"> <img src="screenshot1.png" alt="Screenshot 1">
<img src="screenshot2.jpg" alt="Screenshot 2"> </div>
</div> <div class="media-item">
<div class="video"> <img src="screenshot2.png" alt="Screenshot 2">
<iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe> </div>
</div> <div class="media-item video-item">
</section> <video controls>
<section class="download"> <source src="ascii_racer.mp4" type="video/mp4">
<h2>Download the Game</h2> Your browser does not support the video tag.
<p>Download ASCII RACER now and start racing in a world of ASCII art!</p> </video>
<a href="download-link-here" class="download-button">Download Now</a> </div>
</section> </div>
</section>
<section class="download">
<h2>Download the Game</h2>
<p>Download ASCII RACER now and start racing in a world of ASCII art!</p>
<a href="https://gitlab.com/thatscringebro/terminal_racer" class="download-button">Download Now</a>
</section>
</main>
<footer> <footer>
<p>&copy; 2023 ASCII RACER | All rights reserved</p> <p>&copy; 2023 ASCII RACER | Merlin Gélinas</p>
</footer> </footer>
</body> </body>
</html> </html>
<style> <style>
@font-face { @font-face {
font-family: 'Cascadia'; font-family: 'Cascadia';
src: url('cascaydia.otf') format('opentype'); src: url('cascaydia.otf') format('opentype');
/* You may need to adjust the file path above to point to your cascaydia.otf file */ /* You may need to adjust the file path above to point to your cascaydia.otf file */
} }
/* Reset default styles */ /* Reset default styles */
body, h1, h2, p, img, iframe { body, h1, h2, p, img, iframe {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -70,6 +77,11 @@ header {
padding: 20px; padding: 20px;
} }
.header-content {
max-width: 800px;
margin: 0 auto;
}
h1 { h1 {
font-size: 36px; font-size: 36px;
} }
@ -96,20 +108,37 @@ p {
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
} }
.media-container {
display: flex;
flex-wrap: wrap;
}
.screenshot, .video { /* Set the width of the container to match the two images */
.media-container .media-item {
width: calc(50% - 20px);
margin: 10px;
}
.media-container .video-item {
width: calc(100% - 20px);
margin: 10px;
}
/* Set a max-width for the video */
.video-item video {
max-width: 100%;
width: 100%;
height: auto;
}
.media-item {
margin: 10px; margin: 10px;
} }
img { .media-item img {
max-width: 100%; max-width: 100%;
} }
iframe {
width: 100%;
height: 400px;
}
.download-button { .download-button {
display: inline-block; display: inline-block;
padding: 10px 20px; padding: 10px 20px;
@ -142,4 +171,28 @@ footer {
} }
} }
/* Center the download section */
.download {
text-align: center;
}
/* Display screenshots side by side */
.media-item {
display: inline-block;
margin: 10px;
vertical-align: top;
width: calc(50% - 20px);
box-sizing: border-box;
}
.media-item img {
max-width: 100%;
}
/* Video item styles */
.video-item {
width: 100%;
text-align: center;
display: block;
}
</style> </style>

BIN
screenshot1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
screenshot2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB