Skip to content

Commit 304a945

Browse files
IngridFuentesIngridFuentes
committed
Main.js deleted
2 parents 420a430 + 623c716 commit 304a945

24 files changed

+651
-134
lines changed

‎public/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<meta name="theme-color" content="#000000" />
99
<meta name="description" content="Women Who Code Front End Study Group Project" />
1010
<link rel="apple-touch-icon" href="%PUBLIC_URL%/icons/apple-touch-icon.png" />
11+
<script src="https://kit.fontawesome.com/953e8760a2.js" crossorigin="anonymous"></script>
1112
<!--
1213
manifest.json provides metadata used when your web app is installed on a
1314
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎src/assets/images/WWCode-Logo.png

84.4 KB
Loading

‎src/assets/images/card.svg

+1
Loading

‎src/assets/images/table.svg

+1
Loading

‎src/components/About/About.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.container {
2+
padding: 37px 80px;
3+
}
4+
.description {
5+
line-height: 1.8;
6+
}
7+
.title {
8+
color: #007a7c;
9+
}
10+
.list li {
11+
line-height: 1.8;
12+
}
13+
.link {
14+
color: #007a7c;
15+
font-weight: bold;
16+
}

‎src/components/About/About.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import "./About.css";
3+
4+
const About = () => {
5+
return (
6+
<div className="container">
7+
<p className="description">
8+
The Frontend Study Group is a beginner-friendly project started by Women Who Code Front End to learn about front end
9+
technologies as well as how to collaborate on an open source project in the spirit of Hacktoberfest.
10+
The study group aims to cover the following topics:
11+
</p>
12+
<ul className="list">
13+
<li>HTML, CSS and Javascript</li>
14+
<li>React</li>
15+
<li>Deploying your application</li>
16+
<li>Contributing to opensource</li>
17+
</ul>
18+
<h2 className="title">The Open Source ChatShow</h2>
19+
<p>For the month of October, 2021, we have weekly virtual sessions showcasing voices from the open source community.
20+
Feel free to <a href="https://us02web.zoom.us/webinar/register/WN_0i4q_-RxRnGyr3t_uD_XXw" target="_blank" rel="noopener noreferrer" className="link">
21+
join us!
22+
</a>
23+
</p>
24+
<p>
25+
You can also check out our <a href="https://frontendstudygroup.github.io/blog/" target="_blank" rel="noopener noreferrer"
26+
className="link">blog</a> or contribute to <a href="https://github.com/frontendstudygroup/frontendstudygroup.github.io" target="_blank" rel="noopener noreferrer" className="link">this project.</a>
27+
</p>
28+
</div>
29+
)
30+
}
31+
32+
export default About;

‎src/components/ContactUs/Contact.css

+1-47
Original file line numberDiff line numberDiff line change
@@ -18,41 +18,6 @@
1818
border-bottom: 3px solid rgb(0, 122, 124);
1919
}
2020

21-
label {
22-
text-align: left;
23-
content: attr(type);
24-
display: block;
25-
font-size: 18px;
26-
letter-spacing: 3px;
27-
margin-top: 30px;
28-
padding-bottom: 6px;
29-
color: #19191a;
30-
}
31-
32-
input[type="text"],
33-
input[type="email"] {
34-
width: 100%;
35-
font-size: 18px;
36-
letter-spacing: 2px;
37-
padding: 20px 0px 20px 7px;
38-
box-sizing: border-box;
39-
outline: none;
40-
resize: none;
41-
border: 0;
42-
transition: all 0.3s;
43-
border-bottom: 3px solid #19191a;
44-
}
45-
46-
input[type="text"]::placeholder,
47-
input[type="email"]::placeholder {
48-
font-size: 15px;
49-
}
50-
51-
input[type="text"]:focus,
52-
input[type="email"]:focus {
53-
border-bottom: 3px solid #78788c;
54-
}
55-
5621
.sendMessageButton {
5722
color: rgb(0, 122, 124);
5823
font-size: 20px;
@@ -67,26 +32,15 @@ input[type="email"]:focus {
6732
transition: all 0.3s;
6833
}
6934

70-
.formContentError:before{
71-
text-align: left;
72-
content: attr(type);
73-
display: block;
74-
margin: -4px 0;
75-
font-style: italic;
76-
font-size: 14px;
77-
color: rgb(216, 14, 14);
78-
}
79-
8035
.sendMessageButton:hover {
8136
background: rgb(0, 122, 124);
8237
color: #fff;
8338
}
84-
.formSuccessMessage{
39+
.formSuccessMessage {
8540
text-align: center;
8641
padding: 8px 0px;
8742
}
8843

89-
9044
@media (max-width: 875px) {
9145
/*Mobile View */
9246
.form {

‎src/components/ContactUs/Contact.js

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState } from "react";
22
import { useHistory } from "react-router";
3+
import InputField from "../InputField/InputField";
34
import './Contact.css';
45

56
const isEmailValid = ( email ) => /^[a-zA-Z0-9]+@(?:[a-zA-Z0-9]+\.)+[A-Za-z]+$/.test(email);
@@ -25,38 +26,36 @@ export default function Contact() {
2526
setFormData({...formData, formSubmitted: true });
2627
setTimeout(() => {
2728
history.push("/");
28-
}, 1500);
29+
}, 2000);
2930
}
3031

3132
return (
3233
<div>
33-
3434
<form className="form" onSubmit={demoFormSubmit}>
35-
3635
<h2 className="formHeading">
3736
CONTACT US
3837
</h2>
39-
40-
<label for="name">Name:</label>
41-
<input type="text" id="name" placeholder="Your Name"
42-
value={formData.name}
43-
onChange={ e => setFormData({ ...formData, name: e.target.value })} />
44-
<p className={formData.nameError ? "formContentError" : ""} type={formData.nameError ? "This field is required" : ""} ></p>
45-
46-
47-
<label for="email">Email:</label>
48-
<input type="email" id="email" placeholder="Let us know how to contact you back.."
49-
value={formData.email}
50-
onChange={ e => setFormData({ ...formData, email: e.target.value })}
38+
<InputField
39+
label="Name:"
40+
placeholder="Your Name"
41+
value={ formData.name }
42+
onChange={ e => setFormData({ ...formData, name: e.target.value })}
43+
error={ formData.nameError }
5144
/>
52-
<p className={formData.emailError ? "formContentError" : ""} type={formData.emailError ? "Please enter a valid email" : ""}>
53-
</p>
54-
55-
<label for="message">Message:</label>
56-
<input type="text" id="message" placeholder="What would you like to tell us.." value={formData.message}
57-
onChange={ e => setFormData({ ...formData, message: e.target.value })}
45+
<InputField
46+
label="Email:"
47+
placeholder="Let us know how to contact you back..."
48+
value={ formData.email }
49+
onChange={ e => setFormData({ ...formData, email: e.target.value })}
50+
type="email" error={ formData.emailError }
51+
/>
52+
<InputField
53+
label="Message:"
54+
placeholder="What would you like to tell us..."
55+
value={ formData.message }
56+
onChange={ e => setFormData({ ...formData, message: e.target.value })}
57+
error={ formData.messageError }
5858
/>
59-
<p className={formData.messageError ? "formContentError" : ""} type={formData.messageError ? "This field is required)" : ""}></p>
6059

6160
{
6261
!formData.formSubmitted
@@ -66,9 +65,10 @@ export default function Contact() {
6665
</button>
6766
:
6867
<div className="formSuccessMessage">
69-
Thanks for contacting us! <br /> We will try to revert back as soon as possible!
68+
Thanks for contacting us! <br /> We will try to revert back as soon as possible! <br /><small>Taking you to homepage...</small>
7069
</div>
7170
}
71+
7272
</form>
7373
</div>
7474
);

‎src/components/Disclaimer/Disclaimer.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.disclaimerContainer {
2+
padding: 30px 80px 30px 80px;
3+
}
4+
5+
.disclaimerLink {
6+
text-decoration: underline;
7+
color: rgb(0, 122, 124);
8+
}
9+
10+
.disclaimerLink:hover {
11+
color: rgba(0, 122, 124, 0.5);
12+
}

‎src/components/Disclaimer/Disclaimer.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import '../../assets/css/App.css';
3+
import './Disclaimer.css';
4+
5+
export default function Disclaimer(props) {
6+
7+
return (
8+
<div>
9+
<div className="disclaimerContainer">
10+
<p>The source for the data used in this project is <a className="disclaimerLink" target="_blank" href="https://itsfoss.com/best-open-source-internships/" rel="noreferrer">"It's Foss"</a>, an award-winning web-portal that focuses on Open Source and <a className="disclaimerLink" target="_blank" href="https://www.geeksforgeeks.org/" rel="noreferrer">"GeeksforGeeks"</a>.</p>
11+
</div>
12+
13+
</div>
14+
);
15+
}

‎src/components/Footer/Footer.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.footer {
2+
position: relative;
3+
height: 305px;
4+
background: #131212;
5+
}
6+
.footer-items {
7+
display: flex;
8+
flex-wrap: wrap;
9+
justify-content: space-evenly;
10+
padding-top: 20px;
11+
}
12+
.frontEnd-logo {
13+
width: 15vw;
14+
height: 25vh;
15+
}
16+
.icons > a {
17+
color: #a3a9a4;
18+
padding: 20px;
19+
}
20+
.icons > a > i {
21+
font-size: 2em;
22+
}
23+
.icons {
24+
display: flex;
25+
}
26+
27+
.info > p {
28+
color: #a3a9a4;
29+
font-size: 18px;
30+
}
31+
.info > a {
32+
color: #71b6f6;
33+
}
34+
35+
.copyright > p {
36+
color: #a3a9a4;
37+
padding-top: 50px;
38+
text-align: center;
39+
}
40+
.copyright > p > a {
41+
color: #71b6f6;
42+
}
43+
44+
@media (max-width: 875px) {
45+
.frontEnd-logo {
46+
width: 29vw;
47+
height: 15vh;
48+
padding: 10px;
49+
}
50+
.footer-items {
51+
flex-direction: column-reverse;
52+
align-content: space-around;
53+
}
54+
55+
.copyright > p {
56+
font-size: 10px;
57+
padding-top: 0px;
58+
}
59+
}

‎src/components/Footer/Footer.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import './Footer.css'
3+
import WWCodeFrontEnd from '../../assets/images/WWCode-Logo.png'
4+
5+
6+
export default function Footer(){
7+
return(
8+
<div className="footer">
9+
<div className="footer-items">
10+
<div className="icons">
11+
<a
12+
target="_blank"
13+
rel="noopener noreferrer"
14+
href="https://www.facebook.com/womenwhocode">
15+
<i class="fab fa-facebook-square"></i></a>
16+
17+
<a target="_blank"
18+
rel="noopener noreferrer"
19+
href="https://www.instagram.com/wwcodefrontend1/">
20+
<i class="fab fa-instagram-square"></i></a>
21+
22+
<a target="_blank"
23+
rel="noopener noreferrer"
24+
href="https://twitter.com/WWCodeFrontEnd">
25+
<i class="fab fa-twitter-square"></i></a>
26+
27+
<a target="_blank"
28+
rel="noopener noreferrer"
29+
href="mailto:[email protected]">
30+
<i class="fas fa-envelope"></i></a>
31+
</div>
32+
33+
<div>
34+
<a href="/">
35+
<img src={WWCodeFrontEnd} alt="Women Who Code Front-End Logo" className="frontEnd-logo" />
36+
</a>
37+
</div>
38+
39+
40+
<div className="info">
41+
<p>Register for events and join our community</p>
42+
<a href="https://www.womenwhocode.com/frontend"
43+
target="_blank"
44+
rel="noopener noreferrer">https://www.womenwhocode.com/frontend</a>
45+
</div>
46+
</div>
47+
48+
<div className="copyright">
49+
<p>Copyright @ 2021 <a href="https://www.womenwhocode.com/frontend"
50+
target="_blank"
51+
className="copyright-link"
52+
rel="noopener noreferrer"
53+
>WWCodeFrontEnd</a> All Rights Reserved</p>
54+
</div>
55+
56+
57+
</div>
58+
)
59+
}

0 commit comments

Comments
 (0)