From 257e347799c75399dcd6cf6652417cc3958b1a51 Mon Sep 17 00:00:00 2001 From: Ethan Paul <24588726+enpaul@users.noreply.github.com> Date: Thu, 10 Dec 2020 00:51:35 -0500 Subject: [PATCH] Add intial site layout, basic css, page structure, etc --- css/style.css | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 70 ++++++++++++++++++++++++++++ js/custom.js | 32 +++++++++++++ robots.txt | 9 ++++ 4 files changed, 237 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/custom.js create mode 100644 robots.txt diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..eb168a7 --- /dev/null +++ b/css/style.css @@ -0,0 +1,126 @@ +html { + height: 100%; + background-color: black; + color: white; + font-family: Verdana, Helvetica, serif; +} + +a { + color: inherit; + text-decoration: none; + transition: all 0.1s ease-in-out; +} + +a:hover { + text-decoration: none; + text-shadow: 3px 3px 10px #fff, -3px -3px 10px #fff; +} + +#background-image { + background-image: url("https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + + filter: blur(6px); + -webkit-filter: blur(6px); + + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; +} + +#content { + text-align: center; + text-shadow: 3px 3px 5px #000, -3px -3px 5px #000; + font-weight: bold; + color: white; + + padding: 1em; + + max-width: 50em; + background-color: rgba(255, 255, 255, 0.2); + border-style: solid; + border-width: 2px; + border-color: rgba(255, 255, 255, 0); + border-radius: 128px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; +} + +#logo { + margin: auto; + margin-top: -10em; + max-width: 50%; + min-width: 30%; + display: block; + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-radius: 50%; + border-width: 5px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +#content p { + margin: 2em; + line-height: 1.5; +} + +ul.buttons { + list-style: none; + padding-left: 0; + margin-top: 3em; + margin-bottom: 4em; + font-size: 1.1em; +} + +ul.buttons li { + display: inline; + line-height: 1; + padding: 0.5em; + margin-left: 0.5em; + margin-right: 0.5em; + + text-transform: uppercase; +} + +.button-youtube:hover { + text-shadow: 0px 0px 5px #fff, + -3px -3px 7px #ff0000, + -3px 3px 7px #ff0000, + 3px -3px 7px #ff0000, + 3px 3px 7px #ff0000; +} + +.button-instagram:hover { + text-shadow: 0px 0px 5px #fff, + -3px -3px 7px #5851db, + -3px 3px 7px #fd1d1d, + 3px -3px 7px #c13584, + 3px 3px 7px #ffdc80; +} + +.button-twitter:hover { + text-shadow: 0px 0px 5px #fff, + -3px -3px 7px #1da1f2, + -3px 3px 7px #1da1f2, + 3px -3px 7px #1da1f2, + 3px 3px 7px #1da1f2; +} + +.footer { + font-size: 0.9em; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..346c1ea --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + + + + + + + AllAroundHere + + + + + + + + + + + + +
+ +
+ + +

AllAroundHere

+ +

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + +

+ + + +
+ ©2020 + E.N.Paul +
+
+ + + diff --git a/js/custom.js b/js/custom.js new file mode 100644 index 0000000..d1ba860 --- /dev/null +++ b/js/custom.js @@ -0,0 +1,32 @@ +// Some quick scripting to select a random background on page load + +const BACKGROUND_IMAGES = [ + "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-geese.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-lawrencedam.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-lighthouse.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-mbta.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-rockyshore.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg", + "https://cdn.enp.one/img/backgrounds/cl-photo-startrek.jpg", +]; + + +function selectBackground() { + let max = BACKGROUND_IMAGES.length - 1 + let min = 0; + index = Math.round(Math.random() * (max - min) + min); + console.log("Loading background #" + index + ": " + BACKGROUND_IMAGES[index]); + return BACKGROUND_IMAGES[index]; +} + + +function setBackground() { + let ref = document.getElementById("background-image"); + ref.style.backgroundImage = "url(" + selectBackground() + ")"; +} diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..4fa903b --- /dev/null +++ b/robots.txt @@ -0,0 +1,9 @@ +# Allow all bots +User-agent: * + +# Disallow access to non-content directories +Disallow: /_error +Disallow: /css +Disallow: /js + +Sitemap: https://allaroundhere.org/sitemap.xml