Skip to content

Commit 8e0e30e

Browse files
anwersayeedanwersayeed
authored
Merge branch 'codeisscience:development' into development
2 parents bf9b626 + 7ac8681 commit 8e0e30e

File tree

5 files changed

+197
-47
lines changed

5 files changed

+197
-47
lines changed

‎src/components/Header.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,16 @@ import React from 'react';
33
import '../styles/Header.css';
44
import { Button, Jumbotron } from 'react-bootstrap';
55
import Container from 'react-bootstrap/Container';
6+
import {Link} from "react-router-dom";
67

78
function Header() {
9+
810
return (
911
<div className='header'>
1012
<Jumbotron fluid>
11-
<Button fluid="true">Read and Sign the Manifesto</Button>
13+
<Link to='/manifesto'>
14+
<Button fluid="true">Read and Sign the Manifesto</Button>
15+
</Link>
1216
</Jumbotron>
1317
</div>
1418
);

‎src/index.js

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import 'bootstrap/dist/css/bootstrap.min.css';
5-
import { Route, BrowserRouter as Router, Switch, Redirect } from 'react-router-dom';
6-
import Navigation from './components/Navigation';
7-
import Home from './pages/Home';
8-
import Manifesto from './pages/Manifesto';
9-
import Journal from './pages/Journal';
10-
import Contact from './pages/Contact';
11-
import Login from './pages/Login';
12-
import SignUp from './pages/SignUp';
13-
import Footer from './components/Footer';
14-
15-
function App() {
16-
return (
17-
<Router>
18-
<Navigation />
19-
<Switch>
20-
<Route path='/' exact component={Home} />
21-
<Route path='/manifesto' exact component={Manifesto} />
22-
<Route path='/journal' exact component={Journal} />
23-
<Route path='/contact' exact component={Contact} />
24-
<Route path='/login' exact component={Login} />
25-
<Route path='/signup' exact component={SignUp} />
26-
<Redirect to='/' />
27-
</Switch>
28-
<Footer />
29-
</Router>
30-
);
31-
}
32-
33-
ReactDOM.render(<App />, document.getElementById('root'));
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import './index.css';
4+
import 'bootstrap/dist/css/bootstrap.min.css';
5+
import { Route, BrowserRouter as Router, Switch, Redirect } from 'react-router-dom';
6+
import Navigation from './components/Navigation';
7+
import Home from './pages/Home';
8+
import Manifesto from './pages/Manifesto';
9+
import Journal from './pages/Journal';
10+
import Contact from './pages/Contact';
11+
import Login from './pages/Login';
12+
import SignUp from './pages/SignUp';
13+
import Footer from './components/Footer';
14+
import Header from './components/Header';
15+
16+
function App() {
17+
return (
18+
<Router>
19+
<Navigation />
20+
<Switch>
21+
<Route path='/' exact component={Home} />
22+
<Route path='/manifesto' exact component={Manifesto} />
23+
<Route path='/journal' exact component={Journal} />
24+
<Route path='/contact' exact component={Contact} />
25+
<Route path='/login' exact component={Login} />
26+
<Route path='/signup' exact component={SignUp} />
27+
<Route path='/header' component={Header} />
28+
<Redirect to='/' />
29+
</Switch>
30+
<Footer />
31+
</Router>
32+
);
33+
}
34+
35+
ReactDOM.render(<App />, document.getElementById('root'));

‎src/pages/Contact.js

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,34 @@
1+
Skip to content
2+
Search or jump to…
3+
Pull requests
4+
Issues
5+
Marketplace
6+
Explore
7+
8+
@Riturajseal2001
9+
codeisscience
10+
/
11+
journal-policy-tracker-frontend
12+
Public
13+
Code
14+
Issues
15+
20
16+
Pull requests
17+
7
18+
Actions
19+
Projects
20+
Wiki
21+
Security
22+
Insights
23+
journal-policy-tracker-frontend/src/pages/Contact.js /
24+
@prajwalkulkarni
25+
prajwalkulkarni Add contact form validation
26+
Latest commit 31e26c4 6 days ago
27+
History
28+
5 contributors
29+
@prajwalkulkarni@jayeclark@padmajabhol@NumanAnees@dikshashukla455
30+
168 lines (153 sloc) 5.59 KB
31+
132
/* eslint-disable react/function-component-definition */
233
import React, { useState } from 'react';
334
import '../styles/Contact.css';
@@ -58,46 +89,74 @@ const Contact = () => {
5889
return (
5990
<Container>
6091
<h1 className="mt-4">Contact Us</h1>
61-
<p>Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:</p>
92+
<p className='mt-p'>
93+
Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:
94+
</p>
6295
<Row className='contact-card-one'>
6396
<Col md={6}>
6497
<div className='contact-card' style={{ color: '#E74D3C' }}>
98+
<a
99+
href='mailto:[email protected]'
100+
style={{ 'text-decoration': 'none', color: 'inherit' }}
101+
>
65102
<ImMail size={150} />
66103
<p>
67104
<a href='mailto:[email protected]'>[email protected]</a>
68105
</p>
106+
</a>
69107
</div>
70108
</Col>
71109
<Col md={6}>
72110
<div className='contact-card' style={{ color: '#4C4C4D' }}>
111+
<a
112+
href='https://github.com/codeisscience'
113+
target='_blank'
114+
rel='noreferrer'
115+
style={{ 'text-decoration': 'none', color: 'inherit' }}
116+
>
73117
<ImGithub size={150} />
74118
<p>
75119
<a href='https://github.com/codeisscience' target='_blank' rel='noreferrer'>
76120
GitHub
77121
</a>
78122
</p>
123+
</a>
79124
</div>
80125
</Col>
81126
</Row>
82127
<Row className='contact-card-two'>
83128
<Col md={6}>
84129
<div className='contact-card' style={{ color: '#3D9DD9' }}>
130+
<a
131+
href='https://twitter.com/codeisscience'
132+
target='_blank'
133+
rel='noreferrer'
134+
style={{ 'text-decoration': 'none', color: 'inherit' }}
135+
>
85136
<ImTwitter size={150} />
86137
<p>
87138
<a href='https://twitter.com/codeisscience' target='_blank' rel='noreferrer'>
88139
@codeisscience
89140
</a>
90141
</p>
142+
</a>
91143
</div>
92144
</Col>
93145
<Col md={6}>
94146
<div className='contact-card' style={{ color: '#4C4C4D' }}>
95147
<FaGitter size={150} />
96-
<p>
148+
<a
149+
href='https://gitter.im/codeisscience/Lobby'
150+
target='_blank'
151+
rel='noreferrer'
152+
style={{ 'text-decoration': 'none', color: 'inherit' }}
153+
>
154+
<p>
97155
<a href='https://gitter.im/codeisscience/Lobby' target='_blank' rel='noreferrer'>
98156
Gitter
99157
</a>
100158
</p>
159+
</a>
101160
</div>
102161
</Col>
103162
</Row>
@@ -165,4 +224,17 @@ const Contact = () => {
165224
)
166225
};
167226

168-
export default Contact;
227+
export default Contact;
228+
© 2022 GitHub, Inc.
229+
Terms
230+
Privacy
231+
Security
232+
Status
233+
Docs
234+
Contact GitHub
235+
Pricing
236+
API
237+
Training
238+
Blog
239+
About
240+
Loading complete

‎src/styles/Contact.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,7 @@
2020
font-size: small;
2121
padding: 0;
2222
margin: 0;
23-
}
23+
}
24+
.mt-p {
25+
margin-top: 5em;
26+
}

‎src/styles/Header.css

Lines changed: 78 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
.header {
22
background-image: url('../assets/bg.webp');
33
height: 550px;
4+
background-size: 150vw;
5+
background-repeat: no-repeat;
46
}
57

68
.header button {
@@ -15,15 +17,82 @@
1517
}
1618

1719
.header button:hover {
18-
color: #fff;
1920
background-color: #3d9dd9;
20-
font-size: 18px;
21-
border-radius: 30px;
22-
padding: 20px;
23-
border: none;
24-
margin-top: 20em;
25-
margin-left: calc(((100% - 270px) / 3) * 2);
2621
}
27-
.header-padding{
28-
padding-top: 6.7em;
22+
.header-padding {
23+
padding-top: 6.7em;
24+
}
25+
26+
@media screen and (max-width: 1162px) {
27+
.header button {
28+
margin-top: 15em;
29+
font-size: 16px;
30+
}
31+
.header {
32+
height: 400px;
33+
}
34+
}
35+
36+
@media screen and (max-width: 880px) {
37+
.header button {
38+
margin-top: 12em;
39+
font-size: 16px;
40+
}
41+
.header {
42+
height: 300px;
43+
}
44+
}
45+
46+
@media screen and (max-width: 695px) {
47+
.header button {
48+
margin-top: 10em;
49+
font-size: 16px;
50+
}
51+
.header {
52+
height: 250px;
53+
}
54+
}
55+
56+
@media screen and (max-width: 551px) {
57+
.header button {
58+
margin-top: 8em;
59+
font-size: 14px;
60+
margin-left: 12em;
61+
}
62+
.header {
63+
height: 190px;
64+
}
65+
}
66+
67+
@media screen and (max-width: 423px) {
68+
.header button {
69+
margin-top: 8em;
70+
font-size: 12px;
71+
margin-left: 10em;
72+
}
73+
.header {
74+
height: 180px;
75+
}
76+
}
77+
78+
@media screen and (max-width: 382px) {
79+
.header button {
80+
margin-top: 5em;
81+
font-size: 12px;
82+
margin-left: 9em;
83+
}
84+
.header {
85+
height: 150px;
86+
}
87+
}
88+
89+
@media screen and (max-width: 301px) {
90+
.header button {
91+
margin-top: 4em;
92+
font-size: 8px;
93+
margin-left: 14em;
94+
}
95+
.header {
96+
height: 120px;
97+
}
2998
}

0 commit comments

Comments
 (0)