Skip to content

Commit fd7673f

Browse files
ronellecaguioaronellecaguioa
authored
Merge pull request #92 from wang3101/contact
Contact Page
2 parents f86d627 + 021d62d commit fd7673f

2 files changed

Lines changed: 135 additions & 41 deletions

File tree

‎app/components/Contact.tsx‎

Lines changed: 52 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,59 @@
11
import React from 'react';
2+
import '../stylesheets/Contact.css';
23

34
const Contact: React.FC = () => {
45
return (
5-
<div className="home">
6-
<div>
7-
<h1>Contact Us!</h1>
8-
<p>The Chronos Team is always looking for any feedback or suggestions for Chronos.</p>
9-
<p>
10-
You can find issues the team is currently working on&nbsp;
11-
<a href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
12-
here
13-
</a>
14-
.
15-
</p>
16-
<p>
17-
If you would like your voice heard, fill out the form and we will get back to you ASAP!
18-
</p>
19-
</div>
20-
<div>
21-
<form>
22-
<label htmlFor="fname">First Name</label>
23-
<input type="text" id="fname" name="firstname" placeholder="Your name.." />
24-
<br />
25-
<label htmlFor="lname">Last Name</label>
26-
<input type="text" id="lname" name="lastname" placeholder="Your last name.." />
27-
<br />
28-
<label htmlFor="email">E-mail</label>
29-
<input type="text" id="email" name="email" placeholder="Your e-mail address.." />
30-
<br />
31-
<label htmlFor="subject">Subject</label>
32-
<input type="text" id="subject" name="subject" placeholder="Subject" />
33-
<br />
34-
<label htmlFor="message">Message</label>
35-
<textarea
36-
id="message"
37-
name="message"
38-
placeholder="Write something.." /*style="height:200px"*/
39-
></textarea>
40-
<br />
41-
<label htmlFor="myfile">Select a file: </label>
42-
<input type="file" id="myfile" name="myfile" accept="image/*"></input>
43-
<br />
44-
<input type="submit" value="Submit" />
45-
</form>
6+
<div className="contact">
7+
<div className="contact-border">
8+
<div className="contact-container">
9+
<div className="contact-blurb">
10+
<h1>Contact Us!</h1>
11+
<br />
12+
<p>The Chronos Team is always looking for any feedback or suggestions for Chronos.</p>
13+
<p>
14+
You can find issues the team is currently working on&nbsp;
15+
<a href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
16+
here
17+
</a>
18+
.
19+
</p>
20+
<p>
21+
If you would like your voice heard, fill out the form and we will get back to you
22+
ASAP!
23+
</p>
24+
</div>
25+
<div className="chronos-contact-container">
26+
<img src={'../assets/chronos-v4.png'} alt="Chronos logo" />
27+
</div>
28+
</div>
29+
<div className="email-container">
30+
<form>
31+
<label htmlFor="fname">First Name: &nbsp;</label>
32+
<input type="text" id="fname" name="firstname" placeholder="Your name.." />
33+
<br />
34+
<label htmlFor="lname">Last Name: &nbsp;</label>
35+
<input type="text" id="lname" name="lastname" placeholder="Your last name.." />
36+
<br />
37+
<label htmlFor="email">E-mail: &nbsp;</label>
38+
<input type="text" id="email" name="email" placeholder="Your e-mail address.." />
39+
<br />
40+
<label htmlFor="subject">Subject: &nbsp;</label>
41+
<input type="text" id="subject" name="subject" placeholder="Subject" />
42+
<br />
43+
<label htmlFor="message">Message: </label>
44+
<br />
45+
<textarea
46+
id="message"
47+
name="message"
48+
placeholder="Write something.." /*style="height:200px"*/
49+
></textarea>
50+
<br />
51+
<label htmlFor="myfile">Select a file: </label>
52+
<input type="file" id="myfile" name="myfile" accept="image/*"></input>
53+
<br />
54+
<input id="contact-submit" type="submit" value="Submit" />
55+
</form>
56+
</div>
4657
</div>
4758
</div>
4859
);

‎app/stylesheets/Contact.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.contact {
2+
background-color: #f4f4f4;
3+
height: 100%;
4+
display: flex;
5+
justify-content: flex-start;
6+
}
7+
.contact-border {
8+
width: 120vh;
9+
margin: 10vh 20vh;
10+
background-color: rgb(245, 237, 237);
11+
border-radius: 10px;
12+
border: 1px solid black;
13+
z-index: 0;
14+
display: flex;
15+
flex-direction: row;
16+
padding-top: 50px;
17+
padding-left: 40px;
18+
}
19+
.contact-container {
20+
padding: 20px;
21+
margin-right: 0;
22+
height: 70vh;
23+
justify-content: left;
24+
width: 45%;
25+
min-width: 30vh;
26+
line-height: 3vh;
27+
}
28+
.contact-blurb {
29+
padding-left: 2vh;
30+
font-size: 20px;
31+
}
32+
.email-container {
33+
flex-direction: row;
34+
margin: 0 0;
35+
margin-left: 20vh;
36+
width: 50vh;
37+
min-width: 20vh;
38+
line-height: 5vh;
39+
font-size: 20px;
40+
}
41+
.email-container textarea {
42+
font-size: 15px;
43+
width: 30vh;
44+
height: 20vh;
45+
}
46+
.email-container input {
47+
font-size: 15px;
48+
}
49+
.chronos-contact-container {
50+
height: 20vh;
51+
width: 40vh;
52+
}
53+
.chronos-contact-container img {
54+
margin-top: 5vh;
55+
height: 20vh;
56+
width: 40vh;
57+
}
58+
.email-container input[type='text'] {
59+
width: 20vh;
60+
}
61+
.email-container #email {
62+
width: 23.5vh;
63+
}
64+
.email-container #subject {
65+
width: 22.5vh;
66+
}
67+
68+
#myfile {
69+
font-size: 17px;
70+
}
71+
72+
#contact-submit {
73+
font-size: 16px;
74+
width: 9vh;
75+
}
76+
77+
#contact-submit:hover {
78+
font-size: 13px;
79+
background-color: cyan;
80+
padding: 3px 7px;
81+
border-radius: 4px;
82+
border-color: #313639;
83+
}

0 commit comments

Comments
 (0)