fix:layout fix

src/components/App.css

@@ -1,4 +1,5 @@
 .navbar{
     color:#ffffff;
     padding-left:40px;
+    background-color: #6272a4;
 }

src/components/ConfigCover.css

@@ -1,20 +1,35 @@
-.container{
+.main-container{
     width:auto;
-    display:flex;
-    flex-direction: column;
-    
     justify-content: center;
     align-items: center;
+    display:flex;
+    flex-direction: row;
 }
+
+body{background-color: #f2f2f2;}
 .inputData{
-    margin:60px 0px 20px 0px;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    padding:15px;
 }
+.blog-cover{display: flex;
+flex-direction: column;}
 label{margin:5px;}
 input{margin:4px;}
 
 .inputTitle{
     height:40px;
-    width:350px;
+    width:auto;
     border-radius:4px;
     padding-left:20px;
+}
+
+
+@media screen and (max-width:600px){
+   .main-container{
+       display:flex;
+       flex-direction:column;
+   } 
+
 }

src/components/ConfigCover.js

@@ -15,9 +15,12 @@ class ConfigCover extends React.Component {
 
     render() {
         return (
-            <div className="container">
+            <div className="main-container">
 
-                <div className="inputData">
+                <div className="inputData card">
+
+                    <h1>CoverView</h1>
+                    <p>Create blog covers for your next blog post</p>
                     <input type="text" placeholder="Enter title here" className="inputTitle form-control"
                         onChange={e => this.setState({ title: e.target.value })}></input>
 
@@ -30,7 +33,7 @@ class ConfigCover extends React.Component {
                         onChange={e=>this.setState({height: e.target.value})}></input>
                     </div> */}
 
-
+<div>
                     <label>Background</label>
                     <input type="color" defaultValue="#c5a8ff"
                         onChange={e => this.setState({ bgcolor: e.target.value })} />
@@ -38,11 +41,11 @@ class ConfigCover extends React.Component {
                     <label>border</label>
                     <input type="color" defaultValue="#8c52ff"
                         onChange={e => this.setState({ border: e.target.value })} />
-
+</div>
                     <label>Background Pattern</label>
                     <select onChange={e => this.setState({ pattern: e.target.value })}
                         className="form-control">
-                        <option>none</option>
+                        <option>None</option>
 
                         <option>pattern-grid-md</option>
                         <option>pattern-grid-lg</option>
@@ -66,7 +69,7 @@ class ConfigCover extends React.Component {
 
                     </select>
                 </div>
-
+                <div className="blog-cover">
                 <ComponentToImg>
                     <CoverImage
 
@@ -80,7 +83,7 @@ class ConfigCover extends React.Component {
                     />
                 </ComponentToImg>
 
-
+                </div>
 
 
 

src/components/CoverImage.css

@@ -7,10 +7,12 @@
     height:420px;
     width:800px;
     padding:90px;
+    margin:30px 0px 15px 0px;
+
     
 }
 
-.card{
+.title-card{
 
    border-radius: 10px;
    background-color: #ffffff; 
@@ -23,11 +25,19 @@
    
    
 }
+.card{margin:20px;
+    border-radius: 8px;
+    text-align: center;
+    color:#676683;
+
+padding:50px 25px 50px 25px;}
 h1{height:auto;}
 
-button{background-color: #8c52ff;
+button{background-color: #282a36;
 color:#ffffff;
 border:none;
 border-radius:4px;
 padding:10px;
-margin:20px;}
+margin:auto;
+width:100px;
+text-align: center;}

src/components/CoverImage.js

@@ -10,7 +10,7 @@ class CoverImage extends React.Component {
             <div className={` cover ${this.props.pattern}`}
                 style={{ backgroundColor:this.props.bgcolor }}>
                     <div className={`${this.props.pattern}`}>
-                <div className="card"
+                <div className="title-card"
                     style={{ borderTop: `15px solid ${this.props.border}`}}>
                     <h1>{this.props.title}</h1>
                 </div>