From f51d3f01d1ac92d1fe02fe83b07ea4a9c64e6dfb Mon Sep 17 00:00:00 2001 From: Christopher Bell Date: Tue, 13 Sep 2022 23:22:49 -0500 Subject: [PATCH] Added cards and mobile CSS --- css/master.css | 92 ++++++++++++++++++++++++++++++++++++++++++++------ index.html | 30 +++++++++++++--- 2 files changed, 107 insertions(+), 15 deletions(-) diff --git a/css/master.css b/css/master.css index a7893a3..bce5ac8 100644 --- a/css/master.css +++ b/css/master.css @@ -1,9 +1,12 @@ :root { --color-pallete-red: #a80000; --color-pallete-dark-red: #731010; - --color-pallete-dark-grey: #1f1f1f; + --color-pallete-dark-grey: #101010; --color-pallete-grey: #707070; + --color-pallete-darkish-grey: #303030; --color-pallete-light-grey: #d4d4d4; + + --mobile-style-width: 1000px; } * { @@ -11,7 +14,7 @@ padding: 0; box-sizing: border-box; color: var(--color-pallete-light-grey); - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-family: monospace; } ::selection { @@ -20,9 +23,17 @@ a { text-decoration: none; + font-style: italic; + color: #a80000; } a:visited { - color: var(--color-pallete-light-grey); + color: #a80000; +} + +a:hover::before{ + content: "\\ "; +} a:hover::after{ + content: " /"; } html { @@ -35,7 +46,7 @@ body { #header { display: flex; - height: 80vh; + height: 70vh; justify-content: center; align-items: center; background-color: black; @@ -47,6 +58,7 @@ body { #footer { background-color: black; + height: 20vh; } #fader { @@ -56,20 +68,29 @@ body { display: block; } +#fader-reverse { + height: 150px; + background-color: var(--color-pallete-red); + background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); + display: block; +} + /* CONTENT */ .content-title { - padding: 20px 0 20px 0; + padding: 30px 0 30px 0; + font-family: monospace; } .content-break { - width: 50vw; + width: 70vw; height: 2px; border-color: var(--color-pallete-red); margin: auto; + margin-bottom: 30px; } -@media (max-width: 650px) +@media (max-width: 1000px) { .content-break { width: 90vw; @@ -80,7 +101,6 @@ body { #aboutme { width: 100%; - padding: 20px 0 20px 0; } .aboutme-box { @@ -92,13 +112,19 @@ body { .aboutme-box img { height: auto; width: auto; - border-radius: 15%; + /* border-radius: 15%; */ + border-top-right-radius: 10%; + border-bottom-right-radius: 10%; + border-top-left-radius: 1%; + border-bottom-left-radius: 1%; border: var(--color-pallete-dark-red) solid 2px; } .aboutme-box p { text-align: left; + font-size: larger; } .aboutme-box h2 { text-align: left; margin-bottom: 20px; + font-size: xx-large; } .aboutme-box-left { margin-right: 30px; @@ -113,7 +139,7 @@ body { } /*Mobile*/ -@media (max-width: 650px) +@media (max-width: 1000px) { .aboutme-box { display: block; @@ -122,4 +148,50 @@ body { .aboutme-box-left { margin: 0 10px 0 10px; } +} + +/* PROJECTS SECTION */ +#projects { + width: 100%; +} + +.projects-box { + display: flex; + flex-wrap: wrap; + margin: auto; + max-width: 70%; + +} .projects-box .card { + margin: auto; + padding-bottom: 30px; +} + +@media (max-width: 1000px) +{ + .projects-box { + display: block; + margin: 0 30px 0 30px; + } .projects-box .card { + margin: auto; + padding: 20px 0 20px 0; + } +} + +/* Cards */ +.card { + width: 350px; + height: 550px; +} .card .upper { + width: auto; + height: 60%; + background-color: var(--color-pallete-grey); + border-bottom: var(--color-pallete-red) solid 4px; + border-top-right-radius: 10%; + border-top-left-radius: 1%; +} .card .lower { + background-color: var(--color-pallete-darkish-grey); + height: 40%; + width: auto; + border-bottom-right-radius: 10%; + border-bottom-left-radius: 1%; } \ No newline at end of file diff --git a/index.html b/index.html index a303d63..92f668b 100755 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@

This Is HEX Studios

-
+
@@ -45,18 +45,38 @@

About Me

-

Hi! I'm Chris Bell. I am a programmer, musician, and nerd. My passion has been Game Development for over 5 years, using Unreal Engine, Unity, and Godot. I am currently a Jr. Unity Developer, but have knowledge in C/C++, C#, Java, HTML/CSS, and a few other languages.

+

Hi! I'm Chris Bell. I am a programmer, musician, and nerd. My passion has been Game Development for over 5 years, using Unreal Engine, Unity, and Godot. I am currently a Jr. Unity Developer, but have knowledge in C/C++, C#, Java, HTML/CSS, and a few other languages. Most of my projects can be found on either my personal GitHub or my Hex Studios GitHub pages.

+

PROJECTS

+
+ +
+
+
+
+
+ +
+
+ - + - +
\ No newline at end of file