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

+ +
+ + Evolution Cycle Image + +

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 zcmVwQR>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; }