PNG to WEBP for faster loading times
|
|
@ -57,7 +57,8 @@
|
|||
}
|
||||
#team .gallery div img {
|
||||
margin: 0.5em;
|
||||
min-width: 250px;
|
||||
min-width: 200px;
|
||||
width: auto;
|
||||
|
||||
flex: 1 1 150px;
|
||||
|
||||
|
|
@ -91,6 +92,10 @@
|
|||
#team div div {
|
||||
margin: 1em;
|
||||
}
|
||||
#team .gallery div img {
|
||||
margin: 0.5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.3 MiB |
BIN
images/gallery/again/1.webp
Normal file
|
After Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 2.8 MiB |
BIN
images/gallery/again/2.webp
Normal file
|
After Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 3 MiB |
BIN
images/gallery/again/3.webp
Normal file
|
After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 3.3 MiB |
BIN
images/gallery/again/4.webp
Normal file
|
After Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 1.2 MiB |
BIN
images/gallery/atrophy/1.webp
Normal file
|
After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
BIN
images/gallery/atrophy/2.webp
Normal file
|
After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 2.2 MiB |
BIN
images/gallery/atrophy/3.webp
Normal file
|
After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 1.6 MiB |
BIN
images/gallery/atrophy/4.webp
Normal file
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 1.9 MiB |
BIN
images/gallery/atrophy/5.webp
Normal file
|
After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 2.5 MiB |
BIN
images/gallery/desperateConflicts/1.webp
Normal file
|
After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 2.5 MiB |
BIN
images/gallery/desperateConflicts/2.webp
Normal file
|
After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 2.5 MiB |
BIN
images/gallery/desperateConflicts/3.webp
Normal file
|
After Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 2.5 MiB |
BIN
images/gallery/foragersHaven/1.webp
Normal file
|
After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 2.6 MiB |
BIN
images/gallery/foragersHaven/2.webp
Normal file
|
After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 2.5 MiB |
BIN
images/gallery/foragersHaven/3.webp
Normal file
|
After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 2.6 MiB |
BIN
images/gallery/foragersHaven/4.webp
Normal file
|
After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 2.2 MiB |
BIN
images/gallery/foragersHaven/5.webp
Normal file
|
After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 2.6 MiB |
BIN
images/gallery/foragersHaven/6.webp
Normal file
|
After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 83 KiB |
BIN
images/gallery/mugunghwa/1.webp
Normal file
|
After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 88 KiB |
BIN
images/gallery/mugunghwa/2.webp
Normal file
|
After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 55 KiB |
BIN
images/gallery/mugunghwa/3.webp
Normal file
|
After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 1.7 MiB |
BIN
images/gallery/rainforestRunner/1.webp
Normal file
|
After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 1.8 MiB |
BIN
images/gallery/rainforestRunner/2.webp
Normal file
|
After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 804 KiB |
BIN
images/gallery/rainforestRunner/3.webp
Normal file
|
After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 1.7 MiB |
BIN
images/gallery/rainforestRunner/4.webp
Normal file
|
After Width: | Height: | Size: 64 KiB |
130
index.html
|
|
@ -14,6 +14,7 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&display=swap">
|
||||
</head>
|
||||
<body>
|
||||
<!-- To professional web developers, please forgive me if I could've done all this better. -->
|
||||
<!-- Navigation Root -->
|
||||
<nav>
|
||||
<img src="images/dv8.png" alt="DV8 logo" class="logo">
|
||||
|
|
@ -31,13 +32,13 @@
|
|||
<!-- Root of all the text sections -->
|
||||
<main>
|
||||
<header>
|
||||
<img src="images/wiggleBefore.png">
|
||||
<img src="images/wiggleBefore.png" alt="3 colourful wiggly lines">
|
||||
<h1>Welcome to DV8's Game Event!</h1>
|
||||
<img src="images/wiggleAfter.png">
|
||||
<img src="images/wiggleAfter.png" alt="3 colourful wiggly lines">
|
||||
</header>
|
||||
|
||||
<!-- Teams -->
|
||||
<!-- To professional web developers, please forgive me if I could've done all this better. -->
|
||||
<!-- Some of these games are genuely really cool, I wish more people submitted their games to show up on here -->
|
||||
<section id="team">
|
||||
<h2>The Teams</h2>
|
||||
<!-- Foragers Haven -->
|
||||
|
|
@ -46,25 +47,33 @@
|
|||
<span></span>
|
||||
<div class="teamInfo">
|
||||
<h3>Foragers Haven</h3>
|
||||
|
||||
<p>Team:</p>
|
||||
<p>- Farley Barker | 3D Environment Art, Game Design, Programming</p>
|
||||
<p>- Ben Easton | 3D Art, Story Development</p>
|
||||
<p>- Hannah Burfoot | Character Art, UI Design</p>
|
||||
<p>- Sasha Guerrier Gregory | Level Design, Game Design</p>
|
||||
<p>- Toby Pettman | Programming</p>
|
||||
<p>- Russell Charlwood | 3D Environment Art, Level Design, Programming </p>
|
||||
<p>- Farley Barker
|
||||
<span class="gray">3D Environment Art, Game Design, Programming</span></p>
|
||||
<p>- Ben Easton
|
||||
<span class="gray">3D Art, Story Development</span></p>
|
||||
<p>- Hannah Burfoot
|
||||
<span class="gray">Character Art, UI Design</span></p>
|
||||
<p>- Sasha Guerrier Gregory
|
||||
<span class="gray">Level Design, Game Design</span></p>
|
||||
<p>- Toby Pettman
|
||||
<span class="gray">Programming</span></p>
|
||||
<p>- Russell Charlwood
|
||||
<span class="gray">3D Environment Art, Level Design, Programming</span></p>
|
||||
|
||||
<p>About: Foragers Haven is a peaceful, cute, stylized adventure walking simulator. Explore a humble little forest, follow the quest line, craft potions and harvest plants, flowers and items around you.<p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery">
|
||||
<h3>Game screenshots</h3>
|
||||
<div>
|
||||
<img src="images/gallery/foragersHaven/1.png" loading="lazy">
|
||||
<img src="images/gallery/foragersHaven/2.png" loading="lazy">
|
||||
<img src="images/gallery/foragersHaven/3.png" loading="lazy">
|
||||
<img src="images/gallery/foragersHaven/4.png" loading="lazy">
|
||||
<img src="images/gallery/foragersHaven/5.png" loading="lazy">
|
||||
<img src="images/gallery/foragersHaven/6.png" loading="lazy">
|
||||
<img src="images/gallery/foragersHaven/1.webp" loading="lazy" alt="Path surrounded by trees going towards a cave">
|
||||
<img src="images/gallery/foragersHaven/2.webp" loading="lazy" alt="Path surrounded by trees streatching away into the distance">
|
||||
<img src="images/gallery/foragersHaven/3.webp" loading="lazy" alt="Camping spot, containing a tent, fireplace and table surrounded by trees">
|
||||
<img src="images/gallery/foragersHaven/4.webp" loading="lazy" alt="Forest full of trees">
|
||||
<img src="images/gallery/foragersHaven/5.webp" loading="lazy" alt="A dark cave with a distance exit">
|
||||
<img src="images/gallery/foragersHaven/6.webp" loading="lazy" alt="Hut located in a forest with a path going away from the entrace to it">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -81,9 +90,9 @@
|
|||
<div class="gallery">
|
||||
<h3>Game screenshots</h3>
|
||||
<div>
|
||||
<img src="images/gallery/mugunghwa/1.png" loading="lazy">
|
||||
<img src="images/gallery/mugunghwa/2.png" loading="lazy">
|
||||
<img src="images/gallery/mugunghwa/3.png" loading="lazy">
|
||||
<img src="images/gallery/mugunghwa/1.webp" loading="lazy" alt="Small area surrounded by trees and bushes of different sizes">
|
||||
<img src="images/gallery/mugunghwa/2.webp" loading="lazy" alt="A South Korean hut next to large trees">
|
||||
<img src="images/gallery/mugunghwa/3.webp" loading="lazy" alt="A Mugunghwa infront of a large boulder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -100,10 +109,10 @@
|
|||
<div class="gallery">
|
||||
<h3>Game screenshots</h3>
|
||||
<div>
|
||||
<img src="images/gallery/again/1.png" loading="lazy">
|
||||
<img src="images/gallery/again/2.png" loading="lazy">
|
||||
<img src="images/gallery/again/3.png" loading="lazy">
|
||||
<img src="images/gallery/again/4.png" loading="lazy">
|
||||
<img src="images/gallery/again/1.webp" loading="lazy" alt="Rooftops of Brazilian houses, with signs directing the player where to go">
|
||||
<img src="images/gallery/again/2.webp" loading="lazy" alt="Rooftops of colourful Brazilian Favella houses">
|
||||
<img src="images/gallery/again/3.webp" loading="lazy" alt="Rooftops of Brazilian Favella houses, with a large mono-coloured brick building in the center">
|
||||
<img src="images/gallery/again/4.webp" loading="lazy" alt="Rooftops of colourful Brazilian Favella houses">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -120,10 +129,10 @@
|
|||
<div class="gallery">
|
||||
<h3>Game screenshots</h3>
|
||||
<div>
|
||||
<img src="images/gallery/rainforestRunner/1.png" loading="lazy">
|
||||
<img src="images/gallery/rainforestRunner/2.png" loading="lazy">
|
||||
<img src="images/gallery/rainforestRunner/3.png" loading="lazy">
|
||||
<img src="images/gallery/rainforestRunner/4.png" loading="lazy">
|
||||
<img src="images/gallery/rainforestRunner/1.webp" loading="lazy" alt="Wooden bridge, taking the player over a large lake">
|
||||
<img src="images/gallery/rainforestRunner/2.webp" loading="lazy" alt="A path, taking the player through a rainforest with logs and trees to dodge">
|
||||
<img src="images/gallery/rainforestRunner/3.webp" loading="lazy" alt="Sandy beach with palmtrees and sand dunes to dodge">
|
||||
<img src="images/gallery/rainforestRunner/4.webp" loading="lazy" alt="Player going through wooden bridge about to enter a rainforest full of trees">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -140,9 +149,9 @@
|
|||
<div class="gallery">
|
||||
<h3>Game screenshots</h3>
|
||||
<div>
|
||||
<img src="images/gallery/desperateConflicts/1.png" loading="lazy">
|
||||
<img src="images/gallery/desperateConflicts/2.png" loading="lazy">
|
||||
<img src="images/gallery/desperateConflicts/3.png" loading="lazy">
|
||||
<img src="images/gallery/desperateConflicts/1.webp" loading="lazy">
|
||||
<img src="images/gallery/desperateConflicts/2.webp" loading="lazy">
|
||||
<img src="images/gallery/desperateConflicts/3.webp" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -158,11 +167,11 @@
|
|||
<div class="gallery">
|
||||
<h3>Game screenshots</h3>
|
||||
<div>
|
||||
<img src="images/gallery/atrophy/1.png" loading="lazy">
|
||||
<img src="images/gallery/atrophy/2.png" loading="lazy">
|
||||
<img src="images/gallery/atrophy/3.png" loading="lazy">
|
||||
<img src="images/gallery/atrophy/4.png" loading="lazy">
|
||||
<img src="images/gallery/atrophy/5.png" loading="lazy">
|
||||
<img src="images/gallery/atrophy/1.webp" loading="lazy">
|
||||
<img src="images/gallery/atrophy/2.webp" loading="lazy">
|
||||
<img src="images/gallery/atrophy/3.webp" loading="lazy">
|
||||
<img src="images/gallery/atrophy/4.webp" loading="lazy">
|
||||
<img src="images/gallery/atrophy/5.webp" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -254,7 +263,6 @@
|
|||
<div class="contactInformation">
|
||||
<h3>Contact Information</h3>
|
||||
<p>DV8Expo@gmail.com</p>
|
||||
<p>michal-gdula@pm.me</p>
|
||||
</div>
|
||||
|
||||
<div class="locations">
|
||||
|
|
@ -275,29 +283,31 @@
|
|||
</footer>
|
||||
</body>
|
||||
<!--
|
||||
Hi! If you found this congrats, you have too much time, and this isnt the only thing that is hidden on this page!
|
||||
But for now, have this ASCII maned wolf art :3-->
|
||||
<!--..../|/|..............-->
|
||||
<!--.../0 0 \.............-->
|
||||
<!--(III....\________,....-->
|
||||
<!--....\__......./ \|\,..-->
|
||||
<!--.......||-----| |.\ \.-->
|
||||
<!--.......||.....|/...\|.-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--.......||.....||......-->
|
||||
<!--......cc/....cc/.......-->
|
||||
Hi! If you found this congrats, you have too much time,
|
||||
and this isnt the only thing that is hidden on this page!
|
||||
But for now, have this ASCII maned wolf art :3
|
||||
-->
|
||||
<!--. . /|/| . . . . . . .-->
|
||||
<!--.. /0 0 \ . . . . . ..-->
|
||||
<!--(III% . \________, . .-->
|
||||
<!--.. .\_, .%###%/ \'\,..-->
|
||||
<!--. . . .||#####| |'\ \.-->
|
||||
<!--.. . . ||. . .|/. .\V.-->
|
||||
<!--. . . .|| . . || . . .-->
|
||||
<!--.. . . ||. . .||. . ..-->
|
||||
<!--. . . .|| . . || . . .-->
|
||||
<!--.. . . ||. . .||. . ..-->
|
||||
<!--. . . .|| . . || . . .-->
|
||||
<!--.. . . ||. . .||. . ..-->
|
||||
<!--. . . .|| . . || . . .-->
|
||||
<!--.. . . ||. . .||. . ..-->
|
||||
<!--. . . .|| . . || . . .-->
|
||||
<!--.. . . ||. . .||. . ..-->
|
||||
<!--. . . .|| . . || . . .-->
|
||||
<!--.. . . ||. . .||. . ..-->
|
||||
<!--. . . .|| . . || . . .-->
|
||||
<!--.. . . ||. . .||. . ..-->
|
||||
<!--. . . .|| . . || . . .-->
|
||||
<!--.. . . ||. . .||. . ..-->
|
||||
<!--. . . cc/ . .cc/ . . .-->
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
/*
|
||||
This took forever to make, CSS will be the death of me so please
|
||||
forgive me for graphial errors that were not fixed, I'm aware of
|
||||
some of them but had no clue how to fix them. Such as the images
|
||||
in the gallery portion of the page not shrinking correctly :c
|
||||
|
||||
These a lot of protions of the page that are also redundant and
|
||||
not made the best, so please complain to me about it on Twitter
|
||||
(@fluffybeanUwU) or on Telegram (@Fluffy Bean).
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
I seperated out the different elements CSS into different files
|
||||
this is to keep the CSS semi tidy and easier to configure if
|
||||
any problems occur.
|
||||
*/
|
||||
|
||||
/* UI */
|
||||
@import url("css/navigation.css");
|
||||
@import url("css/footer.css");
|
||||
|
|
@ -33,6 +44,7 @@
|
|||
}
|
||||
* {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -98,12 +110,14 @@ header img {
|
|||
|
||||
h1 {
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
font-display: swap;
|
||||
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
}
|
||||
h2 {
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
font-display: swap;
|
||||
|
||||
margin: -0.5em 0.5em;
|
||||
padding: 0.5em 0.5em 0.5em 1.5em;
|
||||
|
|
@ -114,9 +128,17 @@ h2 {
|
|||
}
|
||||
h3 {
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
font-display: swap;
|
||||
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.gray {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: #696969;
|
||||
/* nice */
|
||||
}
|
||||
|
||||
#about h2 {
|
||||
background-color: var(--dv8-orange);
|
||||
|
|
|
|||