Started Populating Evolution Cycle page

TomyBDev · Feb 14, 2024 · 7432cf8 · 7432cf8
1 parent b3adb29
commit 7432cf8
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 8 deletions.
diff --git a/evolutioncycle.html b/evolutioncycle.html
@@ -26,9 +26,42 @@
 
         <div id="about-block" class="block"></div>
 
-        <div id="cv-block" class="block">
+        <div id="info-block" class="block">
 
-          <h2 id="cv-title">Content Coming Soon.</h2>
+          <h2 id="info-title">Evolution Cycle</h2>
+
+          <div id="info-right-column">
+
+            <img class="info-block-img" src="/images/EvolutionCycle.webp" alt="Evolution Cycle Image">
+
+            <p class="info-column-category">Title:</p><p class="info-column-text">Evolution Cycle</p>
+
+            <p class="info-column-category">Engine:</p><p class="info-column-text">Unreal Engine 4</p>
+
+            <p class="info-column-category">Programmer(s):</p><div><p class="info-column-text">Thomas Ballantyne,</p><p class="info-column-text">Atanas Tyanev</p></div>
+
+            <p class="info-column-category">Artist(s):</p><div><p class="info-column-text">Sarah Belgrove,</p><p class="info-column-text">Marc Hilton,</p><p class="info-column-text">Cole Morton,</p><p class="info-column-text">Matilda Clarke</p></div>
+
+            <p class="info-column-category">Designer(s):</p><div><p class="info-column-text">Rhiannon Nash,</p><p class="info-column-text">Federico Ripley</p></div>
+
+            <p class="info-column-category">Platform:</p><p class="info-column-text">Microsoft Windows</p>
+
+            <br>
+
+          </div>
+
+          <h3 class="info-sub-title">About Game<hr class="info-hr"></h3>
+
+          <p class="info-body-text"></p>
+
+          <h3 class="info-sub-title">Contribution<hr class="info-hr"></h3>
+
+          <p class="info-body-text"></p>
+
+          <h3 class="info-sub-title">Links<hr class="info-hr"></h3>
+
+          <div style="display: flex;"><button class="info-block-button"><img src="../images/Exe.webp" alt="LinkedIn" title="LinkedIn" class="social-block-icon"><p class="social-block-text">.exe</p></button>
+          <button class="info-block-button"><img src="../images/SourceCode.webp" alt="GitHub" title="GitHub" class="social-block-icon"><p class="social-block-text">Source Code</p></button></div>
 
         </div>
 

diff --git a/images/Exe.webp b/images/Exe.webp
diff --git a/images/SourceCode.webp b/images/SourceCode.webp
diff --git a/styles/global.css b/styles/global.css
@@ -219,7 +219,7 @@ html {
     transform: translate(0, 0);
   }
 
-  .social-block-button:hover {
+  .social-block-button:hover, .info-block-button:hover {
     color: var(--background-color);
     background-color: var(--primary-text-color);
   }
@@ -235,7 +235,18 @@ html {
     filter: grayscale(0);
   }
 
-  .social-block-button:active {
+  .info-block-button:hover .social-block-text {
+    opacity: 1;
+    transform: translate(20%, 0);
+  }
+
+  .info-block-button:hover .social-block-icon {
+    transform: translate(-100%, 0);
+
+    filter: grayscale(0);
+  }
+
+  .social-block-button:active, .info-block-button:active {
     background-color: var(--primary-text-color);
     box-shadow: 1px 3px #68aefe;
     transform: translfate(0px, 4px);
@@ -428,6 +439,130 @@ html {
     vertical-align: middle;
   }
 
+  /* <---- Info Block ----> */
+
+  #info-block {
+    grid-column: span 2;
+    grid-row: span 3;
+
+    display: inline;
+
+    width: min(760px, 100%);
+
+    overflow: hidden;
+  }
+
+  #info-title {
+    text-align: center;
+    margin-top: 3%;
+    margin-bottom: 5%;
+
+    color: var(--primary-text-color);
+    font-family: RobotoMono-Regular;
+    text-decoration: none;
+    font-size: 56px;
+  }
+
+  #info-right-column {
+    display: grid;
+    grid-template-columns: 47.5% auto;
+    grid-auto-rows: auto;
+    row-gap: 15px;
+    column-gap: 0;
+    margin-right: 5%;
+
+    width: 36%;
+    height: auto;
+    float: right;
+
+    border-radius: 25px;
+    background-color: var(--background-color);
+    filter: drop-shadow(2px 2px 2px #00000052);
+  }
+
+  .info-block-img {
+    width: 100%;
+    height: auto;
+    border-radius: 25px 25px 0px 0px;
+
+    grid-column: span 2;
+  }
+
+  .info-column-category {
+    text-align: left;
+    margin-left: 8%;
+    margin-right: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+
+
+    color: var(--primary-text-color);
+    font-family: RobotoMono-Regular;
+    text-decoration: none;
+    font-size: 12px;
+  }
+
+  .info-column-text {
+    text-align: left;
+    margin-left: 0;
+    margin-right: 8%;
+    margin-top: 0;
+    margin-bottom: 0;
+
+
+    color: var(--primary-text-color);
+    font-family: RobotoMono-Light;
+    text-decoration: none;
+    font-size: 12px;
+  }
+
+  .info-sub-title {
+    text-align: left;
+    margin-left: 5%;
+    margin-top: 5%;
+    margin-bottom: 0;
+
+
+    color: var(--primary-text-color);
+    font-family: RobotoMono-Regular;
+    text-decoration: none;
+    font-size: 20px;
+  }
+
+  .info-body-text {
+    text-align: left;
+    margin-left: 5%;
+    margin-right: 5%;
+
+
+    color: var(--secondary-text-color);
+    font-family: RobotoMono-Light;
+    text-decoration: none;
+    font-size: 11.5px;
+  }
+
+  .info-hr {
+    display:inline-block; 
+    margin-left: 2.5%;
+    width:30%; 
+    vertical-align: middle;
+  }
+
+  .info-block-button {
+    display:block;
+    margin: 5%;
+    cursor: pointer;
+    width: 100%;
+
+    color: var(--primary-text-color);
+    background-color: var(--background-color);
+    text-decoration: none;
+    border: none;
+    overflow: hidden;
+
+    border-radius: calc(25px - 2.5%);
+  }
+
   /* <---- Fancy Scroll ----> */
 
   ::-webkit-scrollbar {
@@ -455,13 +590,17 @@ html {
 
 @media (max-width: 1285px) {
 
-  #game-block {
+  #game-block, #info-block {
     grid-column: span 1;
     grid-row: span 3;
 
     width: min(380px, 100%);
   }
 
+  #info-right-column {
+    width: 45%;
+  }
+
   #cv-block {
     grid-column: span 1;
     grid-row: span 3;
@@ -471,15 +610,15 @@ html {
     width: min(380px, 100%);
   }
 
-  #cv-title {
+  #cv-title, #info-title {
     font-size: 28px;
   }
 
-  .cv-sub-title {
+  .cv-sub-title, .info-sub-title {
     font-size: 14px;
   }
 
-  .cv-body-text {
+  .cv-body-text, .info-body-text, .info-column-text, .info-column-category {
     font-size: 8.5px;
   }