commit 4be603becd434bcea2832d68b3498272a7e01cb8 Author: Jake Charman Date: Thu Oct 31 23:23:52 2024 +0000 Initial ideas diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..994c4c4 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,3 @@ +*.jpeg filter=lfs diff=lfs merge=lfs -text +*.jpg filter=lfs diff=lfs merge=lfs -text +*.png filter=lfs diff=lfs merge=lfs -text diff --git a/images/njr-code.png b/images/njr-code.png new file mode 100644 index 0000000..c850fa3 --- /dev/null +++ b/images/njr-code.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:41c841687ba092265ae92e74025d233d164035314c8f9b01b4946f39b4067831 +size 556045 diff --git a/images/topfuel_startline.jpg.jpeg b/images/topfuel_startline.jpg.jpeg new file mode 100644 index 0000000..1e0b25d --- /dev/null +++ b/images/topfuel_startline.jpg.jpeg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8f446409fd888cf3231a6fda2e69283d7407b392c6173125769d07a9def3b006 +size 344505 diff --git a/index.html b/index.html new file mode 100644 index 0000000..7456d50 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + Jake Charman + + + + + + + +
+ +
+
+
+
+
+
+

Technology

+
+
+
+
+
+
+
+
+

Racing

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/style/desktop.css b/style/desktop.css new file mode 100644 index 0000000..d64e60b --- /dev/null +++ b/style/desktop.css @@ -0,0 +1,39 @@ +@media (min-width: 1000px) { + #technology{ + background-position-x: 35vw; + height: 75vh; + min-height: 75vh; + } + + #motorsport{ + background-position-y: -180px; + background-position-x: -200px; + background-size: auto; + min-height: 75vh; + height: 75vh; + } + + .text{ + width: 50%; + height: 100%; + align-items: flex-start; + } + + .text-right{ + margin-left: auto; + margin-right: 0; + } + + .text-left{ + margin-left: 0; + margin-right: auto; + } + + .gradient-left{ + background-image: linear-gradient(to right, rgba(31, 31, 31, 1), rgba(31, 31, 31, 1), rgba(31, 31, 31, 0)); + } + + .gradient-right{ + background-image: linear-gradient(to left, rgba(31, 31, 31, 1), rgba(31, 31, 31, 1), rgba(31, 31, 31, 0)); + } +} \ No newline at end of file diff --git a/style/mobile.css b/style/mobile.css new file mode 100644 index 0000000..9aa0746 --- /dev/null +++ b/style/mobile.css @@ -0,0 +1,68 @@ +body{ + margin: 0; +} + +header{ + width: 100%; + height: 25vh; + display: flex; + align-items: center; + background-color: black; + opacity: 70%; +} + +#logo{ + text-align: center; + margin: 0 auto 0 auto; +} + +#logo>h1{ + font-family: "Orbitron", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; + color: white; + letter-spacing: rem; +} + +section h2{ + margin: 0; + color: white; + font-family: "Orbitron", sans-serif; +} + +#technology{ + background-image: url(../images/njr-code.png); + margin: 0; + min-height: 100vh; + background-position: center; + background-position-x: -400px; +} + +#motorsport{ + background-image: url(../images/topfuel_startline.jpg.jpeg); + margin: 0; + min-height: 100vh; + background-position: center; + background-position-x: -150px; + background-position-y: -100px; + background-size: 300%; +} + +.gradient{ + width: 100%; + height: 100%; + background-image: linear-gradient(to top, rgba(31, 31, 31, 1), rgba(31, 31, 31, 1), rgba(31, 31, 31, 0)); + display: flex; + align-items: flex-end; +} + +.text{ + height: 50%; + width: 100%; +} + +.text>div{ + padding: 10px; +} +