Added Team

css/team.css

@@ -22,7 +22,7 @@
 	display: flex;
 	flex-direction: row;
 
-	text-align: justify;
+	text-align: left;
 	align-items: center;
 }
 #team div div {
@@ -38,9 +38,8 @@
 /*
   Gallery
 */
-
 #team .gallery {
-	margin-bottom: 1.5em;
+	margin-bottom: 1em;
 	padding: 0.5em;
 
 	display: flex;
@@ -67,10 +66,6 @@
 #team .gallery h3 {
 	margin: 0;
 }
-
-/*
-  Gallery
-*/
 #team div .teamInfo {
 	display: block;
 }
@@ -92,3 +87,60 @@
 		margin: 1em;
 	}
 }
+
+/*
+  Fullscreen images
+*/
+#team .fullScreenImage {
+	margin: 0;
+	padding: 0;
+
+	height: 100%;
+	width: 100%;
+	z-index: 100;
+
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	display: none;
+
+	background: #151515dd;
+
+	border-radius: 0;
+}
+#team .fullScreenImage span {
+	margin: 0;
+	padding: 0;
+
+	align-items: center;
+	justify-content: center;
+
+	position: absolute;
+	top: 10px;
+	right: 20px;
+
+	font-size: 50px;
+	font-weight: bolder;
+	color: #FFFFFF;
+	cursor: pointer;
+}
+#team .fullScreenImage img {
+	margin: 0;
+	padding: 0;
+
+	max-width: 90%;
+	max-height: 90%;
+	min-width: none;
+	min-height: none;
+
+	align-items: center;
+	justify-content: center;
+
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	border-radius: 0;
+}

index.php

@@ -6,6 +6,7 @@
   <meta name="description" content="DV8 Game Event 2022">
   <title>Game Event</title>
 	<link rel="icon" type="image/x-icon" href="images/dv8.png">
+	<!-- Style -->
 	<link rel="stylesheet" href="stylesheet.css">
 	<!-- Fonts -->
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

script.js

@@ -0,0 +1,14 @@
+document.querySelectorAll(".gallery div img").forEach(image =>{
+  image.onclick = () =>{
+    document.querySelector(".fullScreenImage").style.display= "block";
+    document.querySelector(".fullScreenImage img").src = image.getAttribute("src");
+
+    document.querySelector("html").style.overflow= "hidden";
+  }
+});
+
+document.querySelector(".fullScreenImage span").onclick = () =>{
+  document.querySelector(".fullScreenImage").style.display= "none";
+
+  document.querySelector("html").style.overflow= "auto";
+}

stylesheet.css

@@ -39,7 +39,7 @@
 	Page Structure
 */
 
-html {
+html, #wrapper {
 	margin: 0;
 	padding: 0;
 	scroll-behavior: smooth;

ui/footer.html

@@ -24,7 +24,7 @@
   <div class="madeBy">
     <p>Made by Michal</p>
     <hr>
-    <a href="https://github.com/Fluffy-Bean">GitHub</a>
+    <a href="https://github.com/Fluffy-Bean/GameExpo">GitHub</a>
     <hr>
     <p>michal-gdula@pm.me</p>
   </div>

ui/teams.html

@@ -8,23 +8,31 @@
 </div>
 -->
 
-<!-- RedScorpion -->
+<!-- Foragers Haven -->
 <div>
-  <img src="images/teams/RSLogo.svg" alt="Red Scorpion logo" loading="lazy">
+  <img src="images/teams/foragersHaven.png" alt="Foragers Haven logo" loading="lazy">
   <span></span>
   <div class="teamInfo">
-    <h3>Again</h3>
+    <h3>Foragers Haven</h3>
-    <p>Team: Leon, Bartek, Michal and Nathan</p>
+    <p>Team Members:</p>
-    <p>About: An innovative game made towards gamers from all ends. Speedrunners and achievers, to casual gamers admiring works and the environment. With: high quality, custom made, assets; fast, fun gameplay and many ways to finish. You are surely going to have a fun time playing!</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>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/again/1.png" loading="lazy">
+    <img src="images/gallery/foragersHaven/1.png" loading="lazy">
-    <img src="./images/gallery/again/2.png" loading="lazy">
+    <img src="images/gallery/foragersHaven/2.png" loading="lazy">
-    <img src="./images/gallery/again/3.png" loading="lazy">
+    <img src="images/gallery/foragersHaven/3.png" loading="lazy">
-    <img src="./images/gallery/again/4.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">
   </div>
 </div>
 
@@ -41,9 +49,29 @@
 <div class="gallery">
   <h3>Game screenshots</h3>
   <div>
-    <img src="./images/gallery/mugunghwa/1.png" loading="lazy">
+    <img src="images/gallery/mugunghwa/1.png" loading="lazy">
-    <img src="./images/gallery/mugunghwa/2.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/3.png" loading="lazy">
+  </div>
+</div>
+
+<!-- RedScorpion -->
+<div>
+  <img src="images/teams/RSLogo.svg" alt="Red Scorpion logo" loading="lazy">
+  <span></span>
+  <div class="teamInfo">
+    <h3>Again</h3>
+    <p>Team: Leon, Bartek, Michal and Nathan</p>
+    <p>About: An innovative game made towards gamers from all ends. Speedrunners and achievers, to casual gamers admiring works and the environment. With: high quality, custom made, assets; fast, fun gameplay and many ways to finish. You are surely going to have a fun time playing!</p>
+  </div>
+</div>
+<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">
   </div>
 </div>
 
@@ -60,10 +88,10 @@
 <div class="gallery">
   <h3>Game screenshots</h3>
   <div>
-    <img src="./images/gallery/rainforestRunner/1.png" loading="lazy">
+    <img src="images/gallery/rainforestRunner/1.png" loading="lazy">
-    <img src="./images/gallery/rainforestRunner/2.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/3.png" loading="lazy">
-    <img src="./images/gallery/rainforestRunner/4.png" loading="lazy">
+    <img src="images/gallery/rainforestRunner/4.png" loading="lazy">
   </div>
 </div>
 
@@ -80,13 +108,22 @@
 <div class="gallery">
   <h3>Game screenshots</h3>
   <div>
-    <img src="./images/gallery/desperateConflicts/1.png" loading="lazy">
+    <img src="images/gallery/desperateConflicts/1.png" loading="lazy">
-    <img src="./images/gallery/desperateConflicts/2.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/3.png" loading="lazy">
   </div>
 </div>
 
 <!-- More! -->
 <div class="teamOther">
-  <h3>And many other teams!</h3>
+  <h3>And many others!</h3>
 </div>
+
+<!-- Screen overlay -->
+<div class="fullScreenImage">
+  <span>&times;</span>
+  <img src="images/noImage.jpg" alt="">
+</div>
+
+<!-- Script -->
+<script src="script.js"></script>