Merge pull request #80 from VCGithubCode/ant-retro-game

update about page
VCGithubCode · Aug 18, 2024 · d57de33 · d57de33
2 parents 4a0ee4b + 3778cb1
commit d57de33
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 13 deletions.
diff --git a/about.html b/about.html
@@ -5,37 +5,65 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="assets/css/about.css">
 <link href="assets/favicon/favicon.ico" rel="icon" type="image/x-icon">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Madimi+One&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Teko:[email protected]&display=swap" rel="stylesheet">
 <title>About</title>
 </head>
 
 <body>
 <img src="assets/images/about-title.webp" class="title">
 
+<div class="mushroom">
+  <img src="assets/images/mushroom.webp">
+</div>
+
+<div class="home">
+  <a href="index.html">
+    <img src="assets/images/homepage.webp" alt="Go to Homepage">
+  </a>
+</div>
+
 <div class="about">
     <div class="dev">
         <img src="assets/images/fernando.webp" alt="An image of Fernando">
-        <h3>Fernando Gonçalves</h3>
-        <p>SOME TEXT ABOUT FERNANDO</p>
+        <h3>Fernando</h3>
+        <p>Javascript maestro and chief game designer. A veteran of Hackathons chasing his first win</p>
+        <a class="github" href="https://github.com/Goncalves95" target="_blank">
+          <img src="assets/images/github.webp" alt="Fernando's github">
+        </a>
     </div>
     <div class="dev">
         <img src="assets/images/vernell.webp" alt="An image of Vernell">
-        <h3>Vernell Clark</h3>
-        <p>SOME TEXT ABOUT VERNELL</p>
+        <h3>Vernell</h3>
+        <p>Scrum Master extraordinaire and another Hackathon veteran</p>
+        <a class="github" href="https://github.com/VCGithubCode" target="_blank">
+          <img src="assets/images/github.webp" alt="Vernell's github">
+        </a>
     </div>
     <div class="dev">
         <img src="assets/images/sam.webp" alt="An image of Sam">
-        <h3>Sam Scarisbrick</h3>
-        <p>SOME TEXT ABOUT SAM</p>
+        <h3>Sam</h3>
+        <p>HTML and Css, loves a layout and king of the README</p>
+        <a class="github" href="https://github.com/sam2829" target="_blank">
+          <img src="assets/images/github.webp" alt="Sam's github">
+        </a>
     </div>
     <div class="dev">
-        <img src="" alt="">
-        <h3>Meghana Vinakota</h3>
-        <p>SOME TEXT ABOUT MEGHANA</p>
+        <img src="assets/images/meghana.webp" alt="An image of the mario star">
+        <h3>Meghana</h3>
+        <p>HTML and Css and homepage visionary styler</p>
+        <a class="github" href="https://github.com/Meghanarajvinakota" target="_blank">
+          <img src="assets/images/github.webp" alt="Meghana's github">
+        </a>
     </div>
     <div class="dev">
         <img src="assets/images/amy.webp" alt="An image of Amy">
-        <h3>Amy Norfolk-Tate</h3>
-        <p>SOME TEXT ABOUT AMY</p>
+        <h3>Amy</h3>
+        <p>HTML and Css, presenting virtuoso and wrote all these nice things about everyone</p>
+        <a class="github" href="https://github.com/NorfolkTate" target="_blank">
+          <img src="assets/images/github.webp" alt="Amy's github">
+        </a>
     </div>
 </div>
 <footer>

diff --git a/assets/css/about.css b/assets/css/about.css
@@ -9,14 +9,39 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    font-family: Madimi One;
   }
-
+  
 .title {
     padding: 30px;
     width: 100%;
     max-width: 800px;
 }
 
+.home {
+  display: flex;
+  align-self: flex-end;
+  padding-left: 40px;
+}
+
+.home img {
+  width: 150px;
+}
+
+.mushroom {
+  display: flex;
+  align-self: flex-start;
+  padding-left: 30px;
+  top: 150px;
+  position: fixed;
+  z-index: 1;
+}
+
+.mushroom img {
+  width: 70px;
+  height: auto;
+}
+
 .about {
     display: flex;
     flex-direction: column;
@@ -31,12 +56,22 @@
     align-items: center;
     margin: 20px 0;
     text-align: center;
+    position: relative;
 }
 
 .dev img {
     height: 150px;
 }
 
+.dev p {
+  max-width: 200px;
+  padding-bottom: 10px;
+}
+
+.github img {
+  height: 30px;
+  padding-bottom: 10px;
+}
 
 footer {
     display: flex;
@@ -114,4 +149,53 @@ footer {
 
   .fa-brands {
     color: #049cd8;
-  }
+  }
+
+  /* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+  .home img {
+      width: 220px;
+  }
+  .mushroom {
+      padding-left: 50px;
+      top: 200px;
+  }
+  .dev img {
+      height: 300px;
+  }
+  .dev p {
+    max-width: 350px;
+    padding-bottom: 25px;
+    font-size: 150%;
+  }
+  .github img {
+    height: 90px;
+    padding-bottom: 25px;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  .mushroom {
+    padding-left: 60px;
+    top: 260px;
+  }
+  .mushroom img {
+    width: 100px;
+  }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+  .home img {
+    width: 270px;
+  }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+  .home img {
+    width: 350px;
+    padding-right: 70px;
+  }
+}
diff --git a/assets/images/github.webp b/assets/images/github.webp
diff --git a/assets/images/meghana.webp b/assets/images/meghana.webp
diff --git a/assets/images/mushroom.webp b/assets/images/mushroom.webp