Add mountains header (#4)

author Ben Larson <[email protected]>

Sun, 15 Dec 2019 01:57:47 +0000 (19:57 -0600)

committer GitHub <[email protected]>

Sun, 15 Dec 2019 01:57:47 +0000 (19:57 -0600)
author Ben Larson <[email protected]>
Sun, 15 Dec 2019 01:57:47 +0000 (19:57 -0600)
committer GitHub <[email protected]>
Sun, 15 Dec 2019 01:57:47 +0000 (19:57 -0600)
diff --git a/src/index.html b/src/index.html

index e8cfd3c56dc78b02c7e01852174fd11e7f159a3b..2948dfc69a516aa9af633a5644c2e0f78b73b667 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -12,9 +12,13 @@
      </style>
    </head>
    <body>
-    <section>
+    <header>
        <h1>Ben Larson</h1>
-    </section>
+      <p>
+        Hey, I'm Ben. Here you'll find a random assortment of things I'm doing
+        and things I like.
+      </p>
+    </header>
    </body>
    <script src="main.js"></script>
  </html>
diff --git a/src/main.css b/src/main.css

index 3eb369f4da93e2b7fb515eec354ce7c2d3682913..c2e677dd1fdf5fe227082eb40d1047a6252f06a2 100644 (file)
--- 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;
  }
author	Ben Larson <[email protected]>
	Sun, 15 Dec 2019 01:57:47 +0000 (19:57 -0600)
committer	GitHub <[email protected]>
	Sun, 15 Dec 2019 01:57:47 +0000 (19:57 -0600)
src/index.html		patch \| blob \| blame \| history
src/main.css		patch \| blob \| blame \| history