Skip to content

Commit 96c24c7

Browse files
goodgoofbbmoz
goodgoof
authored and
bbmoz
committed
Landing e/#155111477 (#198)
* feature #155111485- Visitor sees landing page(Section F) * some changes in app.js * changes in landingf.js * fixed error * remove first 2 lines * commented out the images * deleted 2 video images * put images back with closing tag * changed the landingf * some changes again * changed class names * changed linkedin class * styles added to social media * some changes * column1 changed * removed <a> tag * removed few links * added links * fixed error * another bug * changed logo image * font-size * changed some css * changes in margin and padding * column width change * fixing test bugs * few more bugs fixed * bug * decreased spacing between columns * fixed spacing bet columns * made changes based on review * LandingF and landing E * fixed the alignment on the button * fixed link issue in button * feature #155111485- Visitor sees landing page(Section F) * some changes in app.js * changes in landingf.js * fixed error * remove first 2 lines * commented out the images * put images back with closing tag * some changes again * changed class names * changed linkedin class * styles added to social media * some changes * column1 changed * removed <a> tag * removed few links * fixed error * changed logo image * font-size * few more bugs fixed * decreased spacing between columns * fixed spacing bet columns * fixed conflicts * few more conflicts resolved
1 parent 11640f3 commit 96c24c7

File tree

6 files changed

+131
-5
lines changed

6 files changed

+131
-5
lines changed

‎client/App.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import LandingC from './components/LandingC/LandingC'
1818
import ProjectDetail from './components/Project/ProjectDetail'
1919
import Footer from './components/LandingF/LandingF'
2020
import LandingB from './components/LandingB/LandingB'
21+
import LandingE from './components/LandingE/LandingE'
2122

2223
// set up components for lazy loading
2324
const ProfileRestrictedLoadable = restricted(Loadable({
@@ -57,6 +58,8 @@ class App extends Component {
5758
<Route path='/landing-c' component={LandingC} />
5859
<Route path='/landing-f' component={Footer} />
5960
<Route path='/landing-b' component={LandingB} />
61+
<Route path='/landing-f' component={Footer} />
62+
<Route path='/landing-e' component={LandingE} />
6063
<Route path='/show-applications' component={ApplicationsRestrictedLoadable} />
6164
<Route path='/projects/:id' component={ProjectDetail} />
6265
</Switch>

‎client/components/LandingE/LandingE.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import { Link } from 'react-router-dom'
3+
import styles from './LandingE.scss'
4+
import Button from 'material-ui/Button'
5+
import github from '../../images/github-64x64.png'
6+
import slack from '../../images/slack-64x64.png'
7+
8+
class LandingE extends React.Component {
9+
render () {
10+
return (
11+
<div className={styles.container}>
12+
<h1 className="#">By Volunteers, For Volunteers</h1>
13+
14+
<div>
15+
<Button to="#" component={Link} className={styles.github}>
16+
<img src={github} alt="github logo"/>
17+
<span className={styles.contribute}>CONTRIBUTE TO PROJECTS</span>
18+
</Button>
19+
</div>
20+
21+
<div>
22+
<Button to="#" component={Link} className={styles.slack}>
23+
<img src={slack} alt="slack logo"/>
24+
<span className={styles.community}>JOIN THE COMMUNITY</span>
25+
</Button>
26+
</div>
27+
28+
< /div>
29+
)
30+
}
31+
}
32+
33+
export default LandingE

‎client/components/LandingE/LandingE.scss

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@import "../../scss/partials/partials";
2+
3+
$black: #000;
4+
$bottom-red: #ff3e3e;
5+
$top-red: #e74e2b;
6+
$white: #fff;
7+
8+
.container {
9+
background: linear-gradient(to bottom, #e74e2b, #ff3e3e);
10+
height: 423px;
11+
left: 0;
12+
right: 0;
13+
display: grid;
14+
position: absolute;
15+
margin: 0 auto;
16+
justify-items: center;
17+
}
18+
19+
img {
20+
vertical-align: middle;
21+
}
22+
h1 {
23+
color: $white;
24+
text-align: center;
25+
margin-top: 70px;
26+
letter-spacing: 3.1px;
27+
font-size: 48px;
28+
}
29+
30+
a.github {
31+
background: $white;
32+
width: 369px;
33+
height: 75px;
34+
border-radius: 49.5px;
35+
36+
&:active,
37+
&:hover,
38+
&:focus {
39+
background: $white;
40+
}
41+
}
42+
43+
a.slack {
44+
background: $white;
45+
width: 369px;
46+
height: 75px;
47+
border-radius: 49.5px;
48+
49+
&:active,
50+
&:hover,
51+
&:focus {
52+
background: $white;
53+
}
54+
}
55+
56+
.slack{
57+
margin-top:-15px;
58+
}
59+
60+
.contribute {
61+
width: 216px;
62+
height: 12px;
63+
font-size: 12px;
64+
font-weight: bold;
65+
font-style: normal;
66+
font-stretch: normal;
67+
line-height: normal;
68+
letter-spacing: 2.4px;
69+
text-align: center;
70+
color: #000000;
71+
padding-left: 10px;
72+
}
73+
74+
.community {
75+
width: 185px;
76+
height: 12px;
77+
font-size: 12px;
78+
font-weight: bold;
79+
font-style: normal;
80+
font-stretch: normal;
81+
line-height: normal;
82+
letter-spacing: 2.4px;
83+
text-align: left;
84+
color: #000000;
85+
padding-left: 10px;
86+
}

‎client/components/LandingF/LandingF.scss

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ $black: #2c2c2c;
44
$grey: #9fa3a7;
55
$white: #ffffff;
66

7-
87
.container {
98
background-color: $black;
109
background-size: cover;
1110
object-fit: contain;
1211
height: 438px;
1312
color: $white;
14-
display: flex;
13+
display: grid;
14+
grid-template-columns: 1fr .6fr .6fr 1fr;
15+
grid-template-rows: auto;
16+
grid-column-gap: 5px;
1517
left: 0;
1618
right: 0;
1719
position: absolute;
@@ -30,8 +32,10 @@ $white: #ffffff;
3032
.link {
3133
color: $white;
3234
}
33-
.column1, .column2, .column3, .column4 {
35+
36+
.column1, .column2, .column3 {
3437
margin-top: 103px;
38+
display: inline-block;
3539
}
3640

3741
.column1 {
@@ -41,14 +45,14 @@ $white: #ffffff;
4145
.nonProfit {
4246
margin-top: 24px;
4347
}
48+
4449
.column2 {
45-
margin-left: 137px;
50+
margin-left: 80px;
4651
padding-left: 0px;
4752
text-align: left;
4853
width: 131px;
4954
}
5055

5156
.column3 {
52-
margin-left: 75px;
5357
width: 131px;
5458
}

‎client/images/github-64x64.png

2.56 KB
Loading

‎client/images/slack-64x64.png

1.31 KB
Loading

0 commit comments

Comments
 (0)