PNG to WEBP for faster loading times
|
|
@ -57,7 +57,8 @@
|
||||||
}
|
}
|
||||||
#team .gallery div img {
|
#team .gallery div img {
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
min-width: 250px;
|
min-width: 200px;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
flex: 1 1 150px;
|
flex: 1 1 150px;
|
||||||
|
|
||||||
|
|
@ -91,6 +92,10 @@
|
||||||
#team div div {
|
#team div div {
|
||||||
margin: 1em;
|
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">
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&display=swap">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- To professional web developers, please forgive me if I could've done all this better. -->
|
||||||
<!-- Navigation Root -->
|
<!-- Navigation Root -->
|
||||||
<nav>
|
<nav>
|
||||||
<img src="images/dv8.png" alt="DV8 logo" class="logo">
|
<img src="images/dv8.png" alt="DV8 logo" class="logo">
|
||||||
|
|
@ -31,13 +32,13 @@
|
||||||
<!-- Root of all the text sections -->
|
<!-- Root of all the text sections -->
|
||||||
<main>
|
<main>
|
||||||
<header>
|
<header>
|
||||||
<img src="images/wiggleBefore.png">
|
<img src="images/wiggleBefore.png" alt="3 colourful wiggly lines">
|
||||||
<h1>Welcome to DV8's Game Event!</h1>
|
<h1>Welcome to DV8's Game Event!</h1>
|
||||||
<img src="images/wiggleAfter.png">
|
<img src="images/wiggleAfter.png" alt="3 colourful wiggly lines">
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Teams -->
|
<!-- 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">
|
<section id="team">
|
||||||
<h2>The Teams</h2>
|
<h2>The Teams</h2>
|
||||||
<!-- Foragers Haven -->
|
<!-- Foragers Haven -->
|
||||||
|
|
@ -46,25 +47,33 @@
|
||||||
<span></span>
|
<span></span>
|
||||||
<div class="teamInfo">
|
<div class="teamInfo">
|
||||||
<h3>Foragers Haven</h3>
|
<h3>Foragers Haven</h3>
|
||||||
|
|
||||||
<p>Team:</p>
|
<p>Team:</p>
|
||||||
<p>- Farley Barker | 3D Environment Art, Game Design, Programming</p>
|
<p>- Farley Barker
|
||||||
<p>- Ben Easton | 3D Art, Story Development</p>
|
<span class="gray">3D Environment Art, Game Design, Programming</span></p>
|
||||||
<p>- Hannah Burfoot | Character Art, UI Design</p>
|
<p>- Ben Easton
|
||||||
<p>- Sasha Guerrier Gregory | Level Design, Game Design</p>
|
<span class="gray">3D Art, Story Development</span></p>
|
||||||
<p>- Toby Pettman | Programming</p>
|
<p>- Hannah Burfoot
|
||||||
<p>- Russell Charlwood | 3D Environment Art, Level Design, Programming </p>
|
<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>
|
<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>
|
</div>
|
||||||
<div class="gallery">
|
<div class="gallery">
|
||||||
<h3>Game screenshots</h3>
|
<h3>Game screenshots</h3>
|
||||||
<div>
|
<div>
|
||||||
<img src="images/gallery/foragersHaven/1.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.png" loading="lazy">
|
<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.png" loading="lazy">
|
<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.png" loading="lazy">
|
<img src="images/gallery/foragersHaven/4.webp" loading="lazy" alt="Forest full of trees">
|
||||||
<img src="images/gallery/foragersHaven/5.png" loading="lazy">
|
<img src="images/gallery/foragersHaven/5.webp" loading="lazy" alt="A dark cave with a distance exit">
|
||||||
<img src="images/gallery/foragersHaven/6.png" loading="lazy">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -81,9 +90,9 @@
|
||||||
<div class="gallery">
|
<div class="gallery">
|
||||||
<h3>Game screenshots</h3>
|
<h3>Game screenshots</h3>
|
||||||
<div>
|
<div>
|
||||||
<img src="images/gallery/mugunghwa/1.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.png" loading="lazy">
|
<img src="images/gallery/mugunghwa/2.webp" loading="lazy" alt="A South Korean hut next to large trees">
|
||||||
<img src="images/gallery/mugunghwa/3.png" loading="lazy">
|
<img src="images/gallery/mugunghwa/3.webp" loading="lazy" alt="A Mugunghwa infront of a large boulder">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -100,10 +109,10 @@
|
||||||
<div class="gallery">
|
<div class="gallery">
|
||||||
<h3>Game screenshots</h3>
|
<h3>Game screenshots</h3>
|
||||||
<div>
|
<div>
|
||||||
<img src="images/gallery/again/1.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.png" loading="lazy">
|
<img src="images/gallery/again/2.webp" loading="lazy" alt="Rooftops of colourful Brazilian Favella houses">
|
||||||
<img src="images/gallery/again/3.png" loading="lazy">
|
<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.png" loading="lazy">
|
<img src="images/gallery/again/4.webp" loading="lazy" alt="Rooftops of colourful Brazilian Favella houses">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -120,10 +129,10 @@
|
||||||
<div class="gallery">
|
<div class="gallery">
|
||||||
<h3>Game screenshots</h3>
|
<h3>Game screenshots</h3>
|
||||||
<div>
|
<div>
|
||||||
<img src="images/gallery/rainforestRunner/1.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.png" loading="lazy">
|
<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.png" loading="lazy">
|
<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.png" loading="lazy">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -140,9 +149,9 @@
|
||||||
<div class="gallery">
|
<div class="gallery">
|
||||||
<h3>Game screenshots</h3>
|
<h3>Game screenshots</h3>
|
||||||
<div>
|
<div>
|
||||||
<img src="images/gallery/desperateConflicts/1.png" loading="lazy">
|
<img src="images/gallery/desperateConflicts/1.webp" loading="lazy">
|
||||||
<img src="images/gallery/desperateConflicts/2.png" loading="lazy">
|
<img src="images/gallery/desperateConflicts/2.webp" loading="lazy">
|
||||||
<img src="images/gallery/desperateConflicts/3.png" loading="lazy">
|
<img src="images/gallery/desperateConflicts/3.webp" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -158,11 +167,11 @@
|
||||||
<div class="gallery">
|
<div class="gallery">
|
||||||
<h3>Game screenshots</h3>
|
<h3>Game screenshots</h3>
|
||||||
<div>
|
<div>
|
||||||
<img src="images/gallery/atrophy/1.png" loading="lazy">
|
<img src="images/gallery/atrophy/1.webp" loading="lazy">
|
||||||
<img src="images/gallery/atrophy/2.png" loading="lazy">
|
<img src="images/gallery/atrophy/2.webp" loading="lazy">
|
||||||
<img src="images/gallery/atrophy/3.png" loading="lazy">
|
<img src="images/gallery/atrophy/3.webp" loading="lazy">
|
||||||
<img src="images/gallery/atrophy/4.png" loading="lazy">
|
<img src="images/gallery/atrophy/4.webp" loading="lazy">
|
||||||
<img src="images/gallery/atrophy/5.png" loading="lazy">
|
<img src="images/gallery/atrophy/5.webp" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -254,7 +263,6 @@
|
||||||
<div class="contactInformation">
|
<div class="contactInformation">
|
||||||
<h3>Contact Information</h3>
|
<h3>Contact Information</h3>
|
||||||
<p>DV8Expo@gmail.com</p>
|
<p>DV8Expo@gmail.com</p>
|
||||||
<p>michal-gdula@pm.me</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="locations">
|
<div class="locations">
|
||||||
|
|
@ -275,29 +283,31 @@
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
<!--
|
<!--
|
||||||
Hi! If you found this congrats, you have too much time, and this isnt the only thing that is hidden on this page!
|
Hi! If you found this congrats, you have too much time,
|
||||||
But for now, have this ASCII maned wolf art :3-->
|
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....\________,....-->
|
<!--. . /|/| . . . . . . .-->
|
||||||
<!--....\__......./ \|\,..-->
|
<!--.. /0 0 \ . . . . . ..-->
|
||||||
<!--.......||-----| |.\ \.-->
|
<!--(III% . \________, . .-->
|
||||||
<!--.......||.....|/...\|.-->
|
<!--.. .\_, .%###%/ \'\,..-->
|
||||||
<!--.......||.....||......-->
|
<!--. . . .||#####| |'\ \.-->
|
||||||
<!--.......||.....||......-->
|
<!--.. . . ||. . .|/. .\V.-->
|
||||||
<!--.......||.....||......-->
|
<!--. . . .|| . . || . . .-->
|
||||||
<!--.......||.....||......-->
|
<!--.. . . ||. . .||. . ..-->
|
||||||
<!--.......||.....||......-->
|
<!--. . . .|| . . || . . .-->
|
||||||
<!--.......||.....||......-->
|
<!--.. . . ||. . .||. . ..-->
|
||||||
<!--.......||.....||......-->
|
<!--. . . .|| . . || . . .-->
|
||||||
<!--.......||.....||......-->
|
<!--.. . . ||. . .||. . ..-->
|
||||||
<!--.......||.....||......-->
|
<!--. . . .|| . . || . . .-->
|
||||||
<!--.......||.....||......-->
|
<!--.. . . ||. . .||. . ..-->
|
||||||
<!--.......||.....||......-->
|
<!--. . . .|| . . || . . .-->
|
||||||
<!--.......||.....||......-->
|
<!--.. . . ||. . .||. . ..-->
|
||||||
<!--.......||.....||......-->
|
<!--. . . .|| . . || . . .-->
|
||||||
<!--.......||.....||......-->
|
<!--.. . . ||. . .||. . ..-->
|
||||||
<!--.......||.....||......-->
|
<!--. . . .|| . . || . . .-->
|
||||||
<!--.......||.....||......-->
|
<!--.. . . ||. . .||. . ..-->
|
||||||
<!--......cc/....cc/.......-->
|
<!--. . . .|| . . || . . .-->
|
||||||
|
<!--.. . . ||. . .||. . ..-->
|
||||||
|
<!--. . . cc/ . .cc/ . . .-->
|
||||||
</html>
|
</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
|
I seperated out the different elements CSS into different files
|
||||||
this is to keep the CSS semi tidy and easier to configure if
|
this is to keep the CSS semi tidy and easier to configure if
|
||||||
any problems occur.
|
any problems occur.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* UI */
|
/* UI */
|
||||||
@import url("css/navigation.css");
|
@import url("css/navigation.css");
|
||||||
@import url("css/footer.css");
|
@import url("css/footer.css");
|
||||||
|
|
@ -33,6 +44,7 @@
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -98,12 +110,14 @@ header img {
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Lexend Deca', sans-serif;
|
font-family: 'Lexend Deca', sans-serif;
|
||||||
|
font-display: swap;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
font-family: 'Lexend Deca', sans-serif;
|
font-family: 'Lexend Deca', sans-serif;
|
||||||
|
font-display: swap;
|
||||||
|
|
||||||
margin: -0.5em 0.5em;
|
margin: -0.5em 0.5em;
|
||||||
padding: 0.5em 0.5em 0.5em 1.5em;
|
padding: 0.5em 0.5em 0.5em 1.5em;
|
||||||
|
|
@ -114,9 +128,17 @@ h2 {
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-family: 'Lexend Deca', sans-serif;
|
font-family: 'Lexend Deca', sans-serif;
|
||||||
|
font-display: swap;
|
||||||
|
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
}
|
}
|
||||||
|
.gray {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
color: #696969;
|
||||||
|
/* nice */
|
||||||
|
}
|
||||||
|
|
||||||
#about h2 {
|
#about h2 {
|
||||||
background-color: var(--dv8-orange);
|
background-color: var(--dv8-orange);
|
||||||
|
|
|
||||||