Footer moved to its own component
Footer styles moved to Footer.css
This commit is contained in:
16
src/app/Footer.css
Normal file
16
src/app/Footer.css
Normal file
@@ -0,0 +1,16 @@
|
||||
footer,header {
|
||||
background:lightgray;
|
||||
}
|
||||
|
||||
|
||||
footer .things{
|
||||
display: inline-flex;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.things .child{
|
||||
background: #a2a1a1;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
font-weight: bold
|
||||
}
|
||||
34
src/app/Footer.js
Normal file
34
src/app/Footer.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import React, { Component } from 'react';
|
||||
import './Footer.css';
|
||||
|
||||
export default class Footer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<footer>
|
||||
<div className="things">
|
||||
<span className="child">API</span>->
|
||||
<span className="child">
|
||||
<a href="https://haveibeenpwned.com/">haveibeenpwned</a>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div className="things">
|
||||
<span className="child">Layout Design</span>->
|
||||
<span className="child">
|
||||
<a href="mailto:venture666666@gmail.com">Rajesh K P</a>
|
||||
</span>
|
||||
</div>
|
||||
<div className="things">
|
||||
<span className="child">Everything else</span>->
|
||||
<span className="child">
|
||||
<a href="https://twitter.com/indrajithKLIS">Indrajith K L</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
||||
import axios from 'axios';
|
||||
import PawnedListItem from './PawnedListItem';
|
||||
import './SearchField.css';
|
||||
import Footer from './Footer';
|
||||
|
||||
export default class SearchField extends Component {
|
||||
|
||||
@@ -34,6 +35,8 @@ export default class SearchField extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div id="wrapper">
|
||||
<div className="searchWrapper">
|
||||
<div className="search">
|
||||
<div className="title">
|
||||
@@ -53,6 +56,9 @@ export default class SearchField extends Component {
|
||||
{this.breachItems}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('wrapper'));
|
||||
ReactDOM.render(<App />, document.getElementById('renderArea'));
|
||||
@@ -24,9 +24,6 @@ body
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
footer,header {
|
||||
background:lightgray;
|
||||
}
|
||||
|
||||
/* Other Styles */
|
||||
.vex.vex-theme-wireframe .vex-content {
|
||||
@@ -50,14 +47,3 @@ footer,header {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer .things{
|
||||
display: inline-flex;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.things .child{
|
||||
background: #a2a1a1;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
font-weight: bold
|
||||
}
|
||||
@@ -13,28 +13,8 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper"></div>
|
||||
<footer>
|
||||
<div class="things">
|
||||
<span class="child">API</span>->
|
||||
<span class="child">
|
||||
<a href="https://haveibeenpwned.com/">haveibeenpwned</a>
|
||||
</span>
|
||||
<div id="renderArea"></div>
|
||||
|
||||
</div>
|
||||
<div class="things">
|
||||
<span class="child">Layout Design</span>->
|
||||
<span class="child">
|
||||
<a href="">Rajesh K P</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="things">
|
||||
<span class="child">Everything else</span>->
|
||||
<span class="child">
|
||||
<a href="https://twitter.com/indrajithKLIS">Indrajith K L</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="./app/main.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user