Skip to content

Commit 45dc441

Browse files
author
David Silva
committed
created a footer component
1 parent f610b81 commit 45dc441

File tree

7 files changed

+122
-16
lines changed

7 files changed

+122
-16
lines changed

‎src/components/footer/index.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import logoTextHover from '../../images/logo-text-hover.png';
3+
import logoText from '../../images/logo-text.png';
4+
import Hoverimage from '../hoverImage';
5+
import '../../styles/_footer.scss';
6+
7+
class Footer extends React.Component {
8+
render() {
9+
return(
10+
<footer className="footer dark-bg">
11+
<div className="container inner">
12+
<div className="row">
13+
<div className="col-md-4 col-sm-6 inner">
14+
<h4>About Us</h4>
15+
<a href="/about">
16+
<Hoverimage width="168" className="logo" alt="codecorgi logo" image1={logoText} image2={logoTextHover} />
17+
</a>
18+
<p>
19+
Work through tickets/challenges like a real programmer does on the job.
20+
codecorgi provides simulation project management tickets for you
21+
to build real products and grow your developer portfolio.
22+
</p>
23+
<a href="/about" className="txt-btn">About us</a>
24+
</div>
25+
<div className="col-md-4 hidden-md hidden-sm col-sm-6 inner">
26+
{/* <h4>Latest works</h4>
27+
<div className="row thumbs gap-xs">
28+
<div className="col-xs-6 thumb">
29+
<figure className="icon-overlay icn-link">
30+
<a href="portfolio-post.html"><img src="/assets/images/art/work02.jpg" alt=""></a>
31+
</figure>
32+
</div>
33+
</div> */}
34+
</div>
35+
<div className="col-md-4 col-sm-6 inner">
36+
<h4>Get In Touch</h4>
37+
<ul className="contacts">
38+
<li><p>We want to hear from you, send us your feedback to:</p></li>
39+
{/*
40+
<!--<li><i className="icon-___location contact"></i> 84 Street, City, State 24813</li>-->
41+
<!--<li><i className="icon-mobile contact"></i> +00 (123) 456 78 90</li>-->
42+
*/}
43+
<li><a href="mailto:[email protected]"><i className="icon-mail-1 contact"/> [email protected]</a></li>
44+
<li>For support or questions about the platform:</li>
45+
<li><a href="mailto:[email protected]"><i className="icon-mail-1 contact"/> [email protected]</a></li>
46+
</ul>
47+
</div>
48+
{/*
49+
<div className="col-md-3 col-sm-6 inner">
50+
<h4>Free updates</h4>
51+
<p>Conecus iure posae volor remped modis aut lor volor accabora incim resto explabo.</p>
52+
<form id="newsletter" className="form-inline newsletter" role="form">
53+
<label className="sr-only" for="exampleInputEmail">Email address</label>
54+
<input type="email" className="form-control" id="exampleInputEmail" placeholder="Enter your email address">
55+
<button type="submit" className="btn btn-default btn-submit">Subscribe</button>
56+
</form>
57+
</div> */}
58+
</div>
59+
</div>
60+
<div className="footer-bottom">
61+
<div className="container inner">
62+
<p className="pull-left">© 2017 codecorgi. All rights reserved.</p>
63+
<ul className="footer-menu pull-right">
64+
<li><a href="/">Home</a></li>
65+
<li><a href="/learning">Learning</a></li>
66+
<li><a href="/about">About</a></li>
67+
<li><a href="http://services.codecorgi.co/">Services</a></li>
68+
</ul>
69+
</div>
70+
</div>
71+
</footer>
72+
);
73+
}
74+
}
75+
76+
export default Footer;

‎src/components/header/index.js

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,17 @@ import { Link } from 'react-router-dom';
33
import logoTextHover from '../../images/logo-text-hover.png';
44
import logoText from '../../images/logo-text.png';
55
import '../../styles/_header.scss';
6+
import Hoverimage from '../hoverImage';
67

78
class Header extends React.Component {
89
constructor(props) {
910
super(props);
10-
this.mouseOver = this.mouseOver.bind(this);
11-
this.mouseOut = this.mouseOut.bind(this);
1211
this.toggleVisibility = this.toggleVisibility.bind(this);
1312
this.state = {
14-
hover: false,
1513
visible: false,
1614
};
1715
}
1816

19-
mouseOver = () => {
20-
this.setState({hover: true});
21-
}
22-
mouseOut() {
23-
this.setState({hover: false});
24-
}
25-
2617
toggleVisibility() {
2718
this.setState({ visible: !this.state.visible });
2819
}
@@ -41,8 +32,7 @@ class Header extends React.Component {
4132
<li><a href="#"><i class="icon-s-dribbble"></i></a></li>*/}
4233
</ul>
4334
<Link className="navbar-brand" onClick={this.toggleVisibility} to="/">
44-
{this.state.hover && <img src={logoTextHover} width="168" className="logo" alt="codecorgi logo" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />}
45-
{!this.state.hover && <img src={logoText} width="168" className="logo" alt="codecorgi logo" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />}
35+
<Hoverimage width="168" className="logo" alt="codecorgi logo" image1={logoText} image2={logoTextHover} />
4636
</Link>
4737
<a className="navbar-toggle btn responsive-menu pull-right red-button" onClick={this.toggleVisibility}><i className="icon-menu-1"/></a>
4838
</div>

‎src/components/hoverImage/index.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
class hoverImage extends React.Component {
5+
static propTypes = {
6+
image1: PropTypes.string,
7+
image2: PropTypes.string,
8+
width: PropTypes.string,
9+
className: PropTypes.string,
10+
alt: PropTypes.string,
11+
}
12+
13+
constructor(props) {
14+
super(props);
15+
this.mouseOver = this.mouseOver.bind(this);
16+
this.mouseOut = this.mouseOut.bind(this);
17+
this.state = {
18+
hover: false,
19+
};
20+
}
21+
22+
mouseOver = () => {
23+
this.setState({ hover: true });
24+
}
25+
mouseOut() {
26+
this.setState({ hover: false });
27+
}
28+
29+
render() {
30+
const { image1, image2, width, className, alt } = this.props;
31+
return (<img src={this.state.hover ? image2 : image1 } width={width || '168'} className={className} alt={alt || 'codecorgi'} onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />);
32+
}
33+
}
34+
35+
export default hoverImage;

‎src/containers/app/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Route } from 'react-router-dom';
33
import Home from '../home';
44
import About from '../about';
55
import Header from '../../components/header';
6+
import Footer from '../../components/footer';
67

78
const App = () => (
89
<div>
@@ -11,6 +12,7 @@ const App = () => (
1112
<Route exact path="/" component={Home} />
1213
<Route exact path="/about-us" component={About} />
1314
</main>
15+
<Footer />
1416
</div>
1517
);
1618

‎src/styles/_content.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
}
77
}
88
.navbar-nav > li > a.red-button {
9-
background-color: #fa6c65;
10-
color: white;
9+
background-color: #fa6c65;
10+
color: white;
1111
}
1212
a img {
1313
max-width: 100%;

‎src/styles/_footer.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
footer.footer {
2+
margin-top: 40px;
3+
}

‎src/styles/theme/main.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ body {
7171
main {
7272
background-color: #FFF;
7373
}
74-
main:before {
74+
/* main:before {
7575
content: "";
7676
position: fixed;
7777
top: 0;
@@ -82,7 +82,7 @@ main:before {
8282
background: #ffffff;
8383
transition: 0.4s ease-out 0.2s;
8484
transition-property: opacity, visibility;
85-
}
85+
} */
8686
main.js-reveal:before {
8787
opacity: 0;
8888
visibility: hidden;

0 commit comments

Comments
 (0)