diff --git a/css/explore.css b/css/explore.css new file mode 100644 index 0000000..a35d476 --- /dev/null +++ b/css/explore.css @@ -0,0 +1,157 @@ +html { + background-color: black; +} + +body { + color: white; + font-family: sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; + padding: 0; +} + +#background-image { + background-image: url("https://cdn.enp.one/img/backgrounds/cl-photo-rt112.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; +} + +#background-image .overlay { + background-color: rgba(0, 0, 0, 0.8); + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; +} + +#toggle-description { + position: fixed; + right: 0; + top: 0; + margin: 0.75em; + font-size: 1.5em; + width: 1em; + height: 1em; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.6); + padding: 0.5em; + transition: all 0.25s ease-in-out; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6); +} + +#toggle-description:hover { cursor: pointer; } + +#toggle-description:hover, #toggle-description.active { + background-color: rgba(255, 255, 255, 0.8); + color: black; +} + +#header h1 { + font-variant: small-caps; + border-bottom-style: solid; + margin-left: auto; + margin-right: auto; + margin-bottom: 2em; + margin-top: 1em; + padding-bottom: 1em; + width: 75%; + text-shadow: 3px 3px 5px #000; +} + +#content { + text-align: center; + max-width: 90%; + left: 50%; + width: 65em; + transform: translate(-50%, 0); + position: absolute; +} + +.article { + height: 10em; + + margin-bottom: 2em; + border-radius: 5em; + border-style: none; + border-color: rgba(0, 0, 0, 0); + border-width: 5px; + + transition: all 0.25s ease-in-out; + + color: rgba(0, 0, 0, 0); + text-align: center; + + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6); +} + +.article:hover, .primary-text { + color: rgba(255, 255, 255, 1); +} + +.article:hover { + box-shadow: 4px 4px 8px 0 rgba(255, 255, 255, 0.3), -4px -4px 8px 0 rgba(255, 255, 255, 0.3); +} + +.article-banner { + background-position: center center; + background-size: cover; + background-repeat: no-repeat; + position: relative; + overflow: hidden; + width: 100%; + border-radius: 5em; + outline-style: none; +} + +.article-content { + height: 10em; + overflow: hidden; + transition: all 0.25s ease-in-out; + display: block; + padding-left: 4em; + padding-right: 4em; +} + +.article-content:hover, .primary-text .article-content { + background-color: rgba(0, 0, 0, 0.7); + text-shadow: 5px 5px 8px #000; +} + +.article-content h2 { + text-transform: capitalize; + margin-top: 1.5em; + margin-bottom: 1.25em; +} + +.article-content p { + font-weight: bold; +} + +.article-content i { + margin-left: 1em; + margin-right: 0.7em; +} diff --git a/explore/index.html b/explore/index.html index 315e0f1..f88480e 100644 --- a/explore/index.html +++ b/explore/index.html @@ -30,13 +30,13 @@ - Exploring All Around Here + Explore All Around Here - + - + -
+
-
-

Exploring All Around here

-
+
+ +