adding ui elements

ireneelizabethsabu · Sep 6, 2021 · a953a30 · a953a30
1 parent 46be861
commit a953a30
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
-body{
+.App{
     color: "#ffffff" !important;
+    background-color: "#010409" !important;
 }
 .text-color{
     color: "#ffffff" !important;

diff --git a/src/components/Home.css b/src/components/Home.css
@@ -1,17 +1,44 @@
 .home-row{ 
-    margin-top: 250px;
+    padding-top: 150px;
 }
 .title {
-    font-size: 2.3rem;
+    font-size: 1.3rem !important;
+    letter-spacing: 3px;
+}
+.gradient-font{
+    font-size: 1.2rem;
     font-weight: 500;
+    background: -webkit-linear-gradient( right,#D3CCE3,#E9E4F0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.home-container{
+    background-color: #010409 !important;
 }
-.head {
-    color: #253c69;
-    font-size: 4rem;
+h1 {
+    font-size: 4rem !important;
     font-weight: 700;
+    background: -webkit-linear-gradient( right,#8A2387,#E94057,#F27121);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.generate-btn,.generate-btn:active,.generate-btn:focus{
+    border-radius: 2.5rem !important;
+    padding: 0.5rem 4rem !important;
+    border: 2px solid #e74f45 !important;
+    box-shadow: none !important;
+}
+.generate-btn:hover{
+    box-shadow: 0px 1px 10px #e7504594 !important;
 }
-.btn{
-    background-color: #253c69 !important;
-    color: #ffffff !important;
+.username{
+   border: 0 !important;
+   background-color: #010409 !important;
+   border-bottom: 1px solid rgba(255, 255, 255, 0.507) !important;
+   border-radius: 0px !important;
 }
+.username:focus{
+   box-shadow: none !important;
+ }
 
+
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -2,6 +2,7 @@ import React, {  useState } from "react";
 import {Button, Form,Row,Col, Container} from 'react-bootstrap';
 import './Home.css';
 import { useHistory } from "react-router-dom";
+//import {Octocat} from '.octocat.gif';
 
 export const Home = () => {
     const [id,setId]=useState('');
@@ -11,34 +12,32 @@ export const Home = () => {
     }
 
     return(
-        <Container fluid >
-            <Row xs={1} sm={1} md={2} className="home-row">
+        <Container fluid className="min-vh-100 home-container">
+
+            <Row className="home-row justify-content-center">
                 <Col className="text-center">
-                <h1 className="title">Get your customized cv with <br /><span id="head">CV-GENERATOR</span></h1>
-                <p className="lead">
+                <h1 >CV-GENERATOR</h1>
+                <p className="title gradient-font">
                     Generates CV Based on Github Profile 
                 </p>
-                </Col>
-
-                <Col md={4} className="d-flex justify-content-center">
-                <Form style={{width: '100%'}}>
-                    <Form.Group>
-                        <Form.Label className="text-center"> Enter Github user id</Form.Label>
-                        <Form.Control 
-                            className="id" 
-                            type="username" 
-                            placeholder="user-id" 
-                            value={id} 
-                            onChange={handleChange} required/>
-                    </Form.Group>
-                    <Form.Group>
+                <Col className="d-flex justify-content-center">
+                <Form style={{width: "300px"}} >
+                    <Form.Control 
+                        className="username text-center mt-5" 
+                        type="username" 
+                        placeholder="Enter github username" 
+                        value={id} 
+                        onChange={handleChange} required/>
+
+                    {/* <Form.Group>
                         <Form.Check type="checkbox" label="Include github avatar"/>
-                    </Form.Group>
-                    <Button variant="outline-dark" type="submit" onClick={() => { history.push(`/cv/${id}`)}}>
+                    </Form.Group> */}
+                    <Button variant="outline-dark gradient-font generate-btn my-4" type="submit" onClick={() => { history.push(`/cv/${id}`)}}>
                         Generate CV
                     </Button>
                 </Form>
                 </Col>
+                </Col>   
             </Row>
         </Container>
     );