From 7432cf88051d469114c6cef7c0a7ae14bd058d69 Mon Sep 17 00:00:00 2001
From: TomyB <123563755+TomyBDev@users.noreply.github.com>
Date: Wed, 14 Feb 2024 00:12:21 +0000
Subject: [PATCH] Started Populating Evolution Cycle page
---
evolutioncycle.html | 37 +++++++++-
images/Exe.webp | Bin 0 -> 746 bytes
images/SourceCode.webp | Bin 0 -> 1086 bytes
styles/global.css | 151 +++++++++++++++++++++++++++++++++++++++--
4 files changed, 180 insertions(+), 8 deletions(-)
create mode 100644 images/Exe.webp
create mode 100644 images/SourceCode.webp
diff --git a/evolutioncycle.html b/evolutioncycle.html
index a04c1f4..d81d14e 100644
--- a/evolutioncycle.html
+++ b/evolutioncycle.html
@@ -26,9 +26,42 @@
-
+
-
Content Coming Soon.
+
Evolution Cycle
+
+
+
+
+
+
Title:
Evolution Cycle
+
+
Engine:
Unreal Engine 4
+
+
Programmer(s):
Thomas Ballantyne,
Atanas Tyanev
+
+
Artist(s):
Sarah Belgrove,
Marc Hilton,
Cole Morton,
Matilda Clarke
+
+
Designer(s):
Rhiannon Nash,
Federico Ripley
+
+
Platform:
Microsoft Windows
+
+
+
+
+
+
About Game
+
+
+
+
Contribution
+
+
+
+
Links
+
+
+
diff --git a/images/Exe.webp b/images/Exe.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9e741f6d9fa73b7f769297106416e2fc61bafacb
GIT binary patch
literal 746
zcmV
wQR>F$V+dSYq3GxLKe90dFqtN`TM$_gv_7Feh6
z7CJi;_Q<=Q!p^FH#tKC5;S#I=tjdC({unKbk09H^qAd~?B01yiRodGH`05SkRQ6h~*
zBcdS}4YcGq1q87Gg8;{~z`bAS9GE<*;0LG;upVGPfPYZ*GxGrSfa?JC0R439P{`18
zNe}Tq99|+^AB^+i|FpGBa1d$$s!h>uF$2~Ar~m+)|9H>-<3Ib1|0bXMY~S?Rzv;7o
zO)OYn;y(0dh!x2)bNMdVRemr0PNshS7^*w9E9<^!a$cX&=IiJFjQRI@CC-OIgKzkxCw|CUnIu&ks}1wZuge-LEq=nF<^gQT~<(dbh@vO}oC
zHbIwoQwkXjEm9t$zitQe%~wQP`?(&%S9$ySpeSd4obKBx8gIhYhMU)N?;pv@mTo4Q
zzm^rsHvRuve%sFYvSPRWV$2f}t}ddl@pG1;y?8WYW`T$kBK~Wt;rH+jVmoI$`O|?@
zIxExv+{lhk(Ru0uNEZTmLB2jx2HXE}yq%My|B_8-wybrYXHm`c7fy@-5-rbBsQkYF
coGJwQR>F$V+dSYq3GxLKe90dFqtN`TM$_gv_7Feh6
z7CJi;_Q<=Q!p^FH#tKC5;S#I=tjdC({unKbk09H^qAm{=B01yxWodGH`05SkRQ6h~*
zqoN@d3pR*21q8MPH~_tx47z`z{y=^}bqsKCd4C==3^>F6_mQ8l4=@gJAG98zKV-dU
zzp#HZ_9N&4{hR#HtOxk7U=KhKEFak4g1_63NDuyL@Ixg3k>-5uAm8qw-DS*6uRb5!
zJ=6MUSg5^(`b@4b;$9G^zJLJ!>R{VZ!1E+S>45n^)JFl12ygtxF)BFUlTSwZzTEJ~
zMx031bgKcqE=OEw>M;O;zvg7^g4Qk
zF*A4g=NCjTgiQbc=6T;R|M>P3-~Y#i0Gx0QnWwsKbq`I@$^u+*i)b&|V@}}piq2~i
z*-W1khRcVFKAb>f#jit?xiTMTZn0Ae(*TM0KhSz{6PLEu%Vq{>O6v*a#fUY@A9ay`
zF~ThtJXZG>A+L@~)XCK+A!8y){+$7C^KeW(1BP3-rkO-kGI6tZ?GM%Bei}hP!wz3u
z$(Gc1h1gt`XgdCrQ=$55G^KmcxsV4CO%wzJ(UL9bKNd?hpfjmQ7n)0!jd%_OvR
zcBjRQV!EBy6%QokG%Yfqc_jTearXy!#{9(vrl;Jz-4
zatMDc#x9sOtH1VFn7#l1^DN}C_?k1|Yyo~IjQAmm(om3@cKc$)BSmC0iPPNM_b_y7O^
E0Gjp`i2wiq
literal 0
HcmV?d00001
diff --git a/styles/global.css b/styles/global.css
index a629b42..5a51198 100644
--- 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;
}