Skip to content

Commit 869ab91

Browse files
sunzid02sunzid02
committed
Header and Footer
1 parent dcb978c commit 869ab91

File tree

8 files changed

+151
-11
lines changed

8 files changed

+151
-11
lines changed

‎confusion/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
99
"bootstrap": "4.0.0",
10+
"bootstrap-social": "5.1.1",
11+
"font-awesome": "4.7.0",
1012
"react": "^16.13.1",
1113
"react-dom": "^16.13.1",
1214
"react-popper": "0.9.2",

‎confusion/src/App.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.row-header{
2+
margin:0px auto;
3+
padding:0px auto;
4+
}
5+
6+
.row-content {
7+
margin:0px auto;
8+
padding: 50px 0px 50px 0px;
9+
border-bottom: 1px ridge;
10+
min-height:400px;
11+
}
12+
13+
.footer{
14+
background-color: #D1C4E9;
15+
margin:0px auto;
16+
padding: 20px 0px 20px 0px;
17+
}
18+
.jumbotron {
19+
padding:70px 30px 70px 30px;
20+
margin:0px auto;
21+
background: #9575CD ;
22+
color:floralwhite;
23+
}
24+
25+
address{
26+
font-size:80%;
27+
margin:0px;
28+
color:#0f0f0f;
29+
}
30+
31+
.navbar-dark {
32+
background-color: #512DA8;
33+
}

‎confusion/src/components/DishdetailComponent.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,6 @@ import { Card, CardImg, CardText, CardBody, CardTitle } from "reactstrap";
6262
return (<div></div>);
6363
}
6464

65-
66-
67-
6865
return (
6966
<div className='row'>
7067
<RenderDish dish={ props.dish } />

‎confusion/src/components/FooterComponent.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { Component } from 'react';
2+
3+
4+
function Footer(props) {
5+
return(
6+
7+
<div className="footer">
8+
<div className="container">
9+
<div className="row justify-content-center">
10+
<div className="col-4 offset-1 col-sm-2">
11+
<h5>Links</h5>
12+
<ul className="list-unstyled">
13+
<li><a href="#">Home</a></li>
14+
<li><a href="#">About</a></li>
15+
<li><a href="#">Menu</a></li>
16+
<li><a href="contactus.html">Contact</a></li>
17+
</ul>
18+
</div>
19+
<div className="col-7 col-sm-5">
20+
<h5>Our Address</h5>
21+
<address>
22+
121, Clear Water Bay Road<br />
23+
Clear Water Bay, Kowloon<br />
24+
HONG KONG<br />
25+
<i className="fa fa-phone fa-lg"></i>: +852 1234 5678<br />
26+
<i className="fa fa-fax fa-lg"></i>: +852 8765 4321<br />
27+
<i className="fa fa-envelope fa-lg"></i>: <a href="mailto:confusion@food.net">
28+
confusion@food.net</a>
29+
</address>
30+
</div>
31+
<div className="col-12 col-sm-4 align-self-center">
32+
<div className="text-center">
33+
<a className="btn btn-social-icon btn-google" href="http://google.com/+"><i className="fa fa-google-plus"></i></a>
34+
<a className="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i className="fa fa-facebook"></i></a>
35+
<a className="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i className="fa fa-linkedin"></i></a>
36+
<a className="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i className="fa fa-twitter"></i></a>
37+
<a className="btn btn-social-icon btn-google" href="http://youtube.com/"><i className="fa fa-youtube"></i></a>
38+
<a className="btn btn-social-icon" href="mailto:"><i className="fa fa-envelope-o"></i></a>
39+
</div>
40+
</div>
41+
</div>
42+
<div className="row justify-content-center">
43+
<div className="col-auto">
44+
<p>© Copyright 2018 Ristorante Con Fusion</p>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
50+
);
51+
}
52+
53+
export default Footer;

‎confusion/src/components/HeaderComponent.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { Component } from 'react';
2+
import { Navbar, NavbarBrand, Jumbotron } from "reactstrap";
3+
4+
5+
class Header extends Component{
6+
7+
render(){
8+
return(
9+
// react fragment
10+
// <>
11+
// </>
12+
<React.Fragment>
13+
<Navbar dark>
14+
<div className="container">
15+
<NavbarBrand href="/"> Ristorante Con Fusion </NavbarBrand>
16+
</div>
17+
</Navbar>
18+
<Jumbotron>
19+
<div className="container">
20+
<div className="row row-header">
21+
<div className="col-12 col-sm-6">
22+
<h1> Ristorante Con Fusion </h1>
23+
<p>
24+
We take inspiration from te World's best cuisines, and create a unique
25+
fusion experience. Our lipsmacking creations
26+
will tickle your culinary senses!
27+
</p>
28+
</div>
29+
</div>
30+
</div>
31+
</Jumbotron>
32+
</React.Fragment>
33+
);
34+
}
35+
}
36+
37+
export default Header;

‎confusion/src/components/MainComponent.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { Component } from 'react';
2-
import { Navbar, NavbarBrand } from "reactstrap";
32

43
import Menu from './MenuComponent';
4+
import Header from './HeaderComponent';
5+
import Footer from './FooterComponent';
56

67
import { DISHES } from '../shared/dishes'
78
import DishDetail from './DishdetailComponent';
@@ -31,17 +32,12 @@ class Main extends Component {
3132

3233
return (
3334
<div>
34-
<Navbar dark color="primary">
35-
<div className="container">
36-
<NavbarBrand href="/"> Ristorante Con Fusion </NavbarBrand>
37-
</div>
38-
</Navbar>
39-
35+
<Header></Header>
4036
<Menu dishes={this.state.dishes}
4137
onClick={ (dishId) => this.onDishSelect(dishId) } />
4238

4339
<DishDetail dish={ this.state.dishes.filter( (dish)=> dish.id === this.state.selectedDish )[0] } />
44-
40+
<Footer></Footer>
4541
</div>
4642
);
4743

‎confusion/src/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import 'bootstrap/dist/css/bootstrap.min.css';
4+
5+
import 'font-awesome/css/font-awesome.min.css';
6+
import 'bootstrap-social/bootstrap-social.css';
7+
48
import './index.css';
59
import App from './App';
610
import * as serviceWorker from './serviceWorker';

‎confusion/yarn.lock‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2463,11 +2463,24 @@ boolbase@^1.0.0, boolbase@~1.0.0:
24632463
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
24642464
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
24652465

2466+
bootstrap-social@5.1.1:
2467+
version "5.1.1"
2468+
resolved "https://registry.yarnpkg.com/bootstrap-social/-/bootstrap-social-5.1.1.tgz#7530c678adf56cf8fad3fa82c29d4d3e5d027501"
2469+
integrity sha1-dTDGeK31bPj60/qCwp1NPl0CdQE=
2470+
dependencies:
2471+
bootstrap "~3"
2472+
font-awesome "~4.7"
2473+
24662474
bootstrap@4.0.0:
24672475
version "4.0.0"
24682476
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
24692477
integrity sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA==
24702478

2479+
bootstrap@~3:
2480+
version "3.4.1"
2481+
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
2482+
integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
2483+
24712484
brace-expansion@^1.1.7:
24722485
version "1.1.11"
24732486
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -4606,6 +4619,11 @@ follow-redirects@^1.0.0:
46064619
dependencies:
46074620
debug "^3.0.0"
46084621

4622+
font-awesome@4.7.0, font-awesome@~4.7:
4623+
version "4.7.0"
4624+
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
4625+
integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
4626+
46094627
for-in@^0.1.3:
46104628
version "0.1.8"
46114629
resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"

0 commit comments

Comments
 (0)