From 427a0013d8b71a7f54514dd9d6966d794e2325c8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Sat, 27 Mar 2021 14:31:06 -0400
Subject: [PATCH] basic outline
---
pages/index.js | 18 +++++++++++++-----
styles/globals.scss | 43 +++++++++++++++++++++++++++++++++----------
2 files changed, 46 insertions(+), 15 deletions(-)
diff --git a/pages/index.js b/pages/index.js
index 27a6f0d..f11094c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -12,8 +12,13 @@ export default function Home() {
<span className="title">TBD TITLE</span>
<div className="header__links">
- <a>LINK 1</a>
- <a>LINK 2</a>
+ <a
+ href="https://docs.google.com/document/d/1QYSruKLjStWZOTTmkatfUZaCdp4lHWwk6TmUvytzTx0/edit#"
+ rel="noopener"
+ target="_blannk"
+ >
+ VIEW FAQ
+ </a>
</div>
</header>
@@ -26,9 +31,12 @@ export default function Home() {
<br />
Save Crypto
</h1>
- <p className="landing__subtitle">
- Some catch subtitle. The SEC are dorks.
- </p>
+ <div className="landing__subtitle">
+ <div>Some catchy subtitle that says some different things.</div>
+ <div className="landing__subtitle-catchy">
+ <i>The SEC are dorks.</i>
+ </div>
+ </div>
</div>
<div className="content">
diff --git a/styles/globals.scss b/styles/globals.scss
index 200987d..71fd93f 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -41,10 +41,11 @@ a {
header {
height: 8vh;
background-color: white;
+ color: black;
display: flex;
justify-content: space-between;
align-items: center;
- padding: 0 0.5rem;
+ padding: 0 0.75rem;
a:not(:last-of-type) {
margin-right: $spacing-small;
@@ -65,49 +66,71 @@ header {
}
.landing__img {
+ z-index: -1;
position: relative;
height: 10rem;
- background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
+ background-color: #111111;
+ color: #ffffff;
+ // background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
@media (min-width: $breakpoint-small) {
- height: 80vh;
+ height: 70vh;
}
}
.landing__text {
- margin-top: -2rem;
+ margin-top: -6rem;
+ margin-bottom: 3rem;
margin-left: $spacing-small;
margin-right: $spacing-small;
-
- background-color: white;
+ background-color: #fcd34d;
+ color: black;
padding: $spacing-small;
-
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+ padding-bottom: 2rem;
@media (min-width: $breakpoint-small) {
position: absolute;
margin: 0 10rem;
- top: 25vh;
+ top: 20vh;
width: 40rem;
padding: $spacing-medium;
}
}
.landing__title {
+ font-size: 3rem;
+
@media (min-width: $breakpoint-small) {
font-size: 3rem;
}
}
.landing__subtitle {
+ margin-top: 1.5rem;
+ font-size: 1.5rem;
+ font-weight: 300;
+
@media (min-width: $breakpoint-small) {
font-size: 2rem;
- line-height: 3rem;
+ }
+}
+
+.landing__subtitle-catchy {
+ margin-top: 1.5rem;
+ font-weight: bolder;
+
+ i {
+ background-color: #5726ab;
+ color: white;
+ padding: 0.5rem;
+ margin-top: 2rem;
}
}
.content {
padding: $spacing-small;
+ background-color: #ffffff;
+ color: #000000;
@media (min-width: $breakpoint-small) {
padding-top: 5rem;