Add background gradient and make MainContainer transparent

tim-tran · Jan 20, 2019 · 0da9e81 · 0da9e81
1 parent c7b7094
commit 0da9e81
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/feelsbook/feelsbook/src/components/MainContainer.jsx b/feelsbook/feelsbook/src/components/MainContainer.jsx
@@ -4,6 +4,8 @@ import { Card } from 'react-bootstrap';
 import { Nav } from 'react-bootstrap';
 import { Button } from 'react-bootstrap';
 import { Form } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
 
 class MainContainer extends Component {
   render() {
@@ -25,13 +27,19 @@ class MainContainer extends Component {
         <Card.Body>
           <Form>
             <Form.Group controlId="exampleForm.ControlInput1">
-              <Form.Control placeholder="Title" />
+              <Row>
+                <Col sm={10}>
+                  <Form.Control placeholder="Title" />
+                </Col>
+                <Col sm={2}>
+                  <Button variant="primary">Save Entry</Button>
+                </Col>
+              </Row>
             </Form.Group>
             <Form.Group controlId="exampleForm.ControlTextarea1">
-              <Form.Control as="textarea" rows="20" placeholder="Write Here!"/>
+              <Form.Control as="textarea" rows="10" placeholder="Write Here!"/>
             </Form.Group>
           </Form>
-          <Button variant="primary">Save Entry</Button>
         </Card.Body>
       </Card>
     );

diff --git a/feelsbook/feelsbook/src/components/css/MainContainer.css b/feelsbook/feelsbook/src/components/css/MainContainer.css
@@ -1,6 +1,8 @@
 .MainContainer {
-    background-color: #ffe49b;
+    /* background-color: #ffe49b; */
+    background-color: transparent;
     margin: 1rem;
-    height: 700px;
-    width: 80%;
+    height: 500px;
+    width: 70%;
+    margin: auto;
 }
diff --git a/feelsbook/feelsbook/src/index.css b/feelsbook/feelsbook/src/index.css
@@ -6,7 +6,9 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #5d626d;
+  background: #f2709c;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to left, #ff9472, #f2709c);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to left, #ff9472, #f2709c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }
 
 code {