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 0000000..9e741f6 Binary files /dev/null and b/images/Exe.webp differ diff --git a/images/SourceCode.webp b/images/SourceCode.webp new file mode 100644 index 0000000..d25333e Binary files /dev/null and b/images/SourceCode.webp differ 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; }