added footer

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Create an awesome cover image for your next blog post "
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

src/components/App.css

@@ -6,4 +6,14 @@
 
 .logo{height:25px;
 width:25px;
-margin-right:10px;}
+margin-right:10px;}
+
+
+footer{
+    height:40px;
+    text-align: center;
+    background-color:#ffffff;
+    margin-top:20px;
+    padding:10px;
+    font-size: 14px;
+}

src/components/App.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import ConfigCover from './ConfigCover';
 import Navbar from './Navbar';
-import ComponentToImg from './ComponentToImg';
+import Footer from './Footer';
-
 class App extends React.Component {
 
 
@@ -11,6 +10,9 @@ class App extends React.Component {
             <div>
                 <Navbar />
                 <ConfigCover />
+                <Footer/>
+                
+
             </div>
 
 

src/components/ComponentToImg.js

@@ -16,7 +16,7 @@ class ComponentToImg extends React.Component {
         return (
             <React.Fragment>
 
-                <div ref={this.componentRef} className=" img img-fluid">
+                <div ref={this.componentRef}>
                     {this.props.children}
                 </div>
 

src/components/ConfigCover.js

@@ -24,24 +24,17 @@ class ConfigCover extends React.Component {
                     <input type="text" placeholder="Enter title here" className="inputTitle form-control"
                         onChange={e => this.setState({ title: e.target.value })}></input>
 
-                    {/* <div className="d-flex flex-row">
+                  
-                        <label >width</label>
-                        <input type="number"  className="input-sm"
-                        onChange={e=>this.setState({width: e.target.value})}></input>
-                        <label >height</label>
-                        <input type="number"  className="input-sm"
-                        onChange={e=>this.setState({height: e.target.value})}></input>
-                    </div> */}
 
-<div>
+                    <div>
-                    <label>Background</label>
+                        <label>Background</label>
-                    <input type="color" defaultValue="#00ff99"
+                        <input type="color" defaultValue="#00ff99"
-                        onChange={e => this.setState({ bgcolor: e.target.value })} />
+                            onChange={e => this.setState({ bgcolor: e.target.value })} />
 
-                    <label>border</label>
+                        <label>border</label>
-                    <input type="color" defaultValue="#8c52ff"
+                        <input type="color" defaultValue="#8c52ff"
-                        onChange={e => this.setState({ border: e.target.value })} />
+                            onChange={e => this.setState({ border: e.target.value })} />
-</div>
+                    </div>
                     <label>Background Pattern</label>
                     <select onChange={e => this.setState({ pattern: e.target.value })}
                         className="form-control">
@@ -50,38 +43,36 @@ class ConfigCover extends React.Component {
                         <option>pattern-grid-md</option>
                         <option>pattern-grid-lg</option>
                         <option>pattern-grid-xl</option>
-
                         <option>pattern-cross-dots-xl</option>
                         <option>pattern-dots-lg</option>
-
                         <option>pattern-diagonal-lines-md</option>
                         <option>pattern-diagonal-lines-lg</option>
                         <option>pattern-diagonal-lines-xl</option>
-
                         <option>pattern-vertical-lines-md</option>
                         <option>pattern-vertical-lines-lg</option>
                         <option>pattern-vertical-lines-xl</option>
-
                         <option>pattern-horizontal-lines-md</option>
                         <option>pattern-horizontal-lines-lg</option>
                         <option>pattern-horizontal-lines-xl</option>
 
 
                     </select>
+
                 </div>
+
                 <div className="blog-cover">
-                <ComponentToImg>
+                    <ComponentToImg>
-                    <CoverImage
+                        <CoverImage
 
-                        title={this.state.title}
+                            title={this.state.title}
-                        bgcolor={this.state.bgcolor}
+                            bgcolor={this.state.bgcolor}
-                        border={this.state.border}
+                            border={this.state.border}
-                        pattern={this.state.pattern}
+                            pattern={this.state.pattern}
 
 
 
-                    />
+                        />
-                </ComponentToImg>
+                    </ComponentToImg>
 
                 </div>
 

src/components/CoverImage.css

@@ -31,9 +31,8 @@
     border-radius: 8px;
     text-align: center;
     color:#676683;
-
+    padding:50px 25px 50px 25px;
-padding:50px 25px 50px 25px;
+    border:4px solid #676683;
-border:4px solid #676683;
 }
 h1{height:auto;}
 
@@ -50,8 +49,8 @@ text-align: center;}
 @media screen and (max-width:600px){
     .cover{
         width:100vw;
-        height:45vh;
+        height:auto;
-        padding:9vh;
+        padding:8vh;
     }
     .title-card{
         padding:2.5vw 3vw 2.5vw 3vw;

src/components/Footer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './App.css';
+
+const Footer = () => {
+    return (
+        <footer>Made with &#10084; By <a href="https://rutikw.now.sh">Rutik Wankhade</a></footer>
+
+    );
+
+}
+
+export default Footer;