Skip to content

Commit 943f74d

Browse files
gaoxkgaoxk
committed
added pay and map pages
1 parent b30d964 commit 943f74d

File tree

11 files changed

+118
-11
lines changed

11 files changed

+118
-11
lines changed

‎package-lock.json

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"react-dom": "^16.4.2",
99
"react-router": "^4.3.1",
1010
"react-router-dom": "^4.3.1",
11+
"react-router-transition": "^1.2.1",
1112
"react-scripts": "1.1.4"
1213
},
1314
"scripts": {

‎public/index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@
2626
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
2727

2828
<!-- Latest compiled and minified JavaScript -->
29-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
29+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
30+
31+
<link rel="stylesheet"
32+
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
33+
3034
<title>React App</title>
3135
</head>
3236
<body>

‎src/App.css

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
.home {
1+
.hero, .map, .pay{
22
height: 100vh;
33
max-width: 100%;
44
overflow: hidden;
55
}
66

77
img {
8+
max-width: 100%;
89
position: absolute;
910
z-index: -999;
1011
}
1112

12-
button {
13+
.hero button {
1314
position: relative;
1415
z-index: 999;
1516
top: 625px;
@@ -20,7 +21,46 @@ button {
2021
width: 75px;
2122
}
2223

23-
button a {
24+
.hero button a {
25+
color: white;
26+
text-decoration: none !important;
27+
}
28+
29+
.map button {
30+
position: relative;
31+
z-index: 999;
32+
top: 475px;
33+
left: 39%;
34+
color: rgb(0,0,0,0.1);
35+
background-color: transparent;
36+
border: none;
37+
width: 75px;
38+
height: 150px;
39+
}
40+
41+
.map button a {
42+
color: rgb(0,0,0,0);
43+
text-decoration: none !important;
44+
}
45+
46+
.btns {
47+
padding: 4%;
48+
}
49+
50+
.pay button {
51+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
52+
font-weight: 100;
53+
position: relative;
54+
z-index: 999;
55+
top: 650px;
56+
color: white;
57+
background-color: rgb(255,255,255,0.2);
58+
border-radius: 365px;
59+
border: 1px solid white;
60+
min-width: 150px;
61+
}
62+
63+
.pay button a {
2464
color: white;
2565
text-decoration: none !important;
2666
}

‎src/App.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,18 @@ import React, { Component } from 'react';
22
import { BrowserRouter as Router, Route } from 'react-router-dom';
33
import './App.css';
44
import Hero from './Hero';
5+
import Map from './Map';
6+
import Pay from './Pay';
57

68
class App extends Component {
79
render() {
810
return (
911
<Router>
10-
<div className="App">
11-
<Route exact={true} path="/" component={Hero}/>
12-
<Route path="/m/hithere" render={() => (<h1>sdfsdfsd</h1>)}/>
13-
<Route path="/m/lol" render={() => (<h1>ssssssssss</h1>)}/>
14-
</div>
12+
<div className="App">
13+
<Route exact={true} path="/" component={Hero}/>
14+
<Route path="/m/map" component={Map}/>
15+
<Route path="/m/pay" component={Pay}/>
16+
</div>
1517
</Router>
1618
);
1719
}

‎src/Hero.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import bg from './bg.png';
44
class Home extends Component {
55
render() {
66
return (
7-
<div>
7+
<div className="hero">
88
<img className="home" src={bg}/>
9-
<button><a href="/m/lol"><h1> > </h1></a></button>
9+
<button><a href="/m/map"><h1> > </h1></a></button>
1010
</div>
1111
);
1212
}

‎src/Map.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { Component } from 'react';
2+
import map from './map.jpg';
3+
4+
class Map extends Component {
5+
render() {
6+
return (
7+
<div className="map animate bounceInLeft">
8+
<img src={map}/>
9+
<button><a href="/m/pay"><h1> > </h1></a></button>
10+
</div>
11+
);
12+
}
13+
}
14+
15+
export default Map;

‎src/Pay.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { Component } from 'react';
2+
import pay from './pay.jpg';
3+
4+
class Map extends Component {
5+
render() {
6+
return (
7+
<div className="pay animate bounceInLeft">
8+
<img src={pay}/>
9+
<div className="btns">
10+
<button style={{float: "left"}}><a href="/m/pay"><h3>PAY</h3></a></button>
11+
<button style={{float: "right"}}><a href="/m/pay"><h3>REQUEST</h3></a></button>
12+
</div>
13+
</div>
14+
);
15+
}
16+
}
17+
18+
export default Map;

‎src/map.jpg

1.93 MB
Loading

‎src/money.png

44.7 KB
Loading

0 commit comments

Comments
 (0)