added white nav, background photo, fonts, regist. pane

thinkful-ei-dragonfly · Sep 4, 2019 · 6c9627e · 6c9627e
1 parent 3129568
commit 6c9627e
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=Nunito|Open+Sans|Roboto&display=swap" rel="stylesheet">
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

diff --git a/public/leonard-cotte-R5scocnOOdM-unsplash.jpg b/public/leonard-cotte-R5scocnOOdM-unsplash.jpg
diff --git a/public/static/leonard-cotte-R5scocnOOdM-unsplash.jpg b/public/static/leonard-cotte-R5scocnOOdM-unsplash.jpg
diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -1,5 +1,19 @@
+main {
+  display: flex;
+  justify-content: center;
+}
+
 h2, .desc {
   display: inline-block;
   margin-left: 50%;
   transform: translate(-50%);
+}
+
+body {
+  background: url('/static/leonard-cotte-R5scocnOOdM-unsplash.jpg') no-repeat center center fixed;
+  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-family: 'Nunito', 'Open Sans' ,'Roboto', 'sans-serif';
 }
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -20,7 +20,7 @@ header h1 {
 nav {
   width: 100%;
   height: 40px;
-  background-color: lightgray;
+  background-color: ghostwhite;
   padding: 10px;
 }
 

diff --git a/src/components/RegistrationForm/RegistrationForm.css b/src/components/RegistrationForm/RegistrationForm.css
@@ -1,3 +1,15 @@
+.register-container {
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+  min-width: 300px;
+  max-width: 600px;
+  background-color: #e66760;
+  color: white;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
 .register-form {
   width: 100%;
 }
@@ -11,6 +23,7 @@
 .input label{
   margin-top: 10px;
   margin-bottom: 10px;
+  margin-right: 15px;
   display: inline-block;
   width: 90px;
 }

diff --git a/src/index.css b/src/index.css
@@ -7,7 +7,6 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: "Ubuntu", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

diff --git a/src/routes/RegistrationRoute/RegistrationRoute.js b/src/routes/RegistrationRoute/RegistrationRoute.js
@@ -15,7 +15,7 @@ class RegistrationRoute extends Component {
 
   render() {
     return (
-      <section>
+      <section className="register-container">
         <p className="desc">
           Practice learning a language with the spaced reptition revision technique.
         </p>