From 260632fd91ac49a745a54f3615f6360ac004cfca Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Fri, 14 Aug 2020 21:18:25 +0530
Subject: [PATCH] added footer

---
 public/index.html                |  2 +-
 src/components/App.css           | 12 +++++++-
 src/components/App.js            |  6 ++--
 src/components/ComponentToImg.js |  2 +-
 src/components/ConfigCover.js    | 47 +++++++++++++-------------------
 src/components/CoverImage.css    |  9 +++---
 src/components/Footer.js         | 12 ++++++++
 7 files changed, 52 insertions(+), 38 deletions(-)
 create mode 100644 src/components/Footer.js

diff --git a/public/index.html b/public/index.html
index 14ef258..c4785fe 100644
--- a/public/index.html
+++ b/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">
diff --git a/src/components/App.css b/src/components/App.css
index 1e96048..66d2d3a 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -6,4 +6,14 @@
 
 .logo{height:25px;
 width:25px;
-margin-right:10px;}
\ No newline at end of file
+margin-right:10px;}
+
+
+footer{
+    height:40px;
+    text-align: center;
+    background-color:#ffffff;
+    margin-top:20px;
+    padding:10px;
+    font-size: 14px;
+}
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index 113caee..f607b71 100644
--- a/src/components/App.js
+++ b/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>
 
 
diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index ebffd12..9116978 100644
--- a/src/components/ComponentToImg.js
+++ b/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>
 
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index f1cb625..90918a8 100644
--- a/src/components/ConfigCover.js
+++ b/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>
-                    <label>Background</label>
-                    <input type="color" defaultValue="#00ff99"
-                        onChange={e => this.setState({ bgcolor: e.target.value })} />
+                    <div>
+                        <label>Background</label>
+                        <input type="color" defaultValue="#00ff99"
+                            onChange={e => this.setState({ bgcolor: e.target.value })} />
 
-                    <label>border</label>
-                    <input type="color" defaultValue="#8c52ff"
-                        onChange={e => this.setState({ border: e.target.value })} />
-</div>
+                        <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">
@@ -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>
-                    <CoverImage
+                    <ComponentToImg>
+                        <CoverImage
 
-                        title={this.state.title}
-                        bgcolor={this.state.bgcolor}
-                        border={this.state.border}
-                        pattern={this.state.pattern}
+                            title={this.state.title}
+                            bgcolor={this.state.bgcolor}
+                            border={this.state.border}
+                            pattern={this.state.pattern}
 
 
 
-                    />
-                </ComponentToImg>
+                        />
+                    </ComponentToImg>
 
                 </div>
 
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index 2056629..f86d370 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -31,9 +31,8 @@
     border-radius: 8px;
     text-align: center;
     color:#676683;
-
-padding:50px 25px 50px 25px;
-border:4px solid #676683;
+    padding:50px 25px 50px 25px;
+    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;
-        padding:9vh;
+        height:auto;
+        padding:8vh;
     }
     .title-card{
         padding:2.5vw 3vw 2.5vw 3vw;
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..64bcc78
--- /dev/null
+++ b/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;
\ No newline at end of file