From 75773ec91e7beefef4f059fbf1a781af5b08d807 Mon Sep 17 00:00:00 2001 From: Ben Larson <10101828+ben-larson@users.noreply.github.com> Date: Sat, 14 Dec 2019 19:57:47 -0600 Subject: [PATCH] Add mountains header (#4) --- src/index.html | 8 ++++++-- src/main.css | 40 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index e8cfd3c..2948dfc 100644 --- a/src/index.html +++ b/src/index.html @@ -12,9 +12,13 @@ -
+

Ben Larson

-
+

+ Hey, I'm Ben. Here you'll find a random assortment of things I'm doing + and things I like. +

+ diff --git a/src/main.css b/src/main.css index 3eb369f..c2e677d 100644 --- a/src/main.css +++ b/src/main.css @@ -12,11 +12,49 @@ body { color: #333; } +header { + height: 100vh; + box-sizing: border-box; + overflow: hidden; + background-image: linear-gradient(-15deg, #fdb, #f83); + position: relative; + color: rgba(0, 0, 0, 0.4); +} + +header:before, +header:after { + content: ''; + display: block; + width: 100vh; + height: 100vh; + right: 20vw; + bottom: -50vh; + margin-bottom: -5em; + position: absolute; + transform: rotate(-45deg); + background-image: linear-gradient( + 195deg, + rgba(75, 75, 255, 0.5), + rgba(75, 75, 255, 0) + ); +} + +header:after { + right: -30vh; + margin-bottom: 0; +} + h1 { - font-size: 2em; + font-size: 4em; padding: 1em 1em; } +header p { + padding: 0 4em; + width: 15em; + line-height: 1.5em; +} + a { text-decoration: none; } -- 2.45.2