Skip to content

Commit bbd8171

Browse files
SUGAM-ARORASUGAM-ARORA
authored
Merge pull request #163 from AkshitGarg24/144/Contact-Us-Page
FIXED #144 : Added a Contact Page
2 parents 11b2e19 + 3d96477 commit bbd8171

File tree

3 files changed

+174
-0
lines changed

3 files changed

+174
-0
lines changed

‎src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
55
import Settings from "./Components/Settings/SettingsPage";
66
import About_us from "./Components/footer_section/about_us/About_us";
77
import BlogPage from "./Components/footer_section/BlogPage/BlogPage"
8+
import ContactUs from "./Components/footer_section/ContactUs/contact_us";
89

910
function App() {
1011
return (
@@ -16,6 +17,7 @@ function App() {
1617
<Route path="/settings" element={<Settings />} />
1718
<Route path="/about" element={<About_us />} />
1819
<Route path="/blogs" element={<BlogPage />} />
20+
<Route path="/contacts" element={<ContactUs />} />
1921
</Routes>
2022
<Footer />
2123
</div>

‎src/Components/footer_section/ContactUs/contact_us.css

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
.containerContact {
2+
width: 95vw;
3+
margin: auto;
4+
display: grid;
5+
grid-template-columns: 35vw 50vw;
6+
color: white;
7+
gap: 20px;
8+
margin-top: 50px;
9+
margin-bottom: 50px;
10+
justify-content: space-around;
11+
}
12+
13+
.general {
14+
display: grid;
15+
grid-template-rows: repeat(4, 1fr);
16+
gap: 20px;
17+
}
18+
19+
.contentInside {
20+
height: auto;
21+
}
22+
23+
.box1, .box2, .box3, .box4 {
24+
padding: 20px;
25+
background-color: #1e1b3a;
26+
border-radius: 10px;
27+
}
28+
.box1:hover, .box2:hover, .box3:hover, .box4:hover {
29+
background-color: #2a2747;
30+
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
31+
outline: 3px solid white;
32+
border-radius: 15px;
33+
transition: 0.1s ease-in-out;
34+
}
35+
.box1 h2, .box2 h2, .box3 h2, .box4 h2, .form h2 {
36+
text-decoration: underline;
37+
margin-bottom: 10px;
38+
}
39+
40+
.box1 p, .box2 p, .box3 p, .box4 p {
41+
font-size: large;
42+
margin: 5px 0;
43+
}
44+
45+
.form {
46+
padding: 20px;
47+
border: 3px solid white;
48+
border-radius: 15px;
49+
background-color: #2a2747;
50+
}
51+
52+
.form h2 {
53+
margin-bottom: 15px;
54+
}
55+
56+
.form p {
57+
margin: 15px 0;
58+
font-size: large;
59+
}
60+
61+
.form form {
62+
display: flex;
63+
flex-direction: column;
64+
}
65+
66+
.form label {
67+
margin-bottom: 5px;
68+
font-size: medium;
69+
}
70+
71+
.form input, .form select, .form textarea, .form button {
72+
padding: 10px;
73+
margin-bottom: 15px;
74+
border-radius: 5px;
75+
border: 1px solid #ccc;
76+
font-size: medium;
77+
background-color: #3a3756;
78+
color: white;
79+
}
80+
81+
.form input[type='file'] {
82+
padding: 5px;
83+
}
84+
85+
.form button {
86+
margin-top: 70px;
87+
background-color: #0066cc;
88+
color: white;
89+
border: none;
90+
cursor: pointer;
91+
transition: background-color 0.3s;
92+
}
93+
94+
.form button:hover {
95+
background-color: #005bb5;
96+
}
97+
98+
#message {
99+
padding: 10px;
100+
height: 100px;
101+
resize: none;
102+
background-color: #3a3756;
103+
color: white;
104+
}
105+
.contentInside a{
106+
font-size: large;
107+
}

‎src/Components/footer_section/ContactUs/contact_us.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import './contact_us.css';
2+
import React from 'react';
3+
4+
function ContactUs() {
5+
return (
6+
<div className='box'>
7+
<div className='containerContact'>
8+
<div className='general'>
9+
<div className='box1'>
10+
<h2>Business Hours</h2>
11+
<div className='contentInside'>
12+
<p>Monday to Friday</p>
13+
<p>9am-5pm IST</p>
14+
</div>
15+
</div>
16+
<div className='box2'>
17+
<h2>Contact Number</h2>
18+
<div className='contentInside'>
19+
<p>Contact us at :</p>
20+
<a href="tel:1234567890">+91 1234567890</a>
21+
</div>
22+
</div>
23+
<div className='box3'>
24+
<h2>Email</h2>
25+
<div className='contentInside'>
26+
<p>Mail us at :</p>
27+
<a href='mailto:[email protected]'>[email protected]</a>
28+
</div>
29+
</div>
30+
<div className='box4'>
31+
<h2>Address</h2>
32+
<div className='contentInside'>
33+
<p>123, Main Street</p>
34+
<p>City, State, Zip-Code</p>
35+
<p>Country</p>
36+
</div>
37+
</div>
38+
</div>
39+
<div className='form'>
40+
<h2>Facing any Issue? Help Us Improve!</h2>
41+
<p>Use the form below to get in touch. We attempt to respond to support requests within 1 business day.</p>
42+
<form>
43+
<label htmlFor="flname">Name :</label>
44+
<input type='text' id='flname' name='flname' required></input>
45+
<label htmlFor="email">Email :</label>
46+
<input type='email' id='email' name='email' required></input>
47+
<label htmlFor="issue">Issue Type:</label>
48+
<select name='issue' id='issue' required>
49+
<option value='Bug'>Bug</option>
50+
<option value='Suggestion'>Suggestion</option>
51+
<option value='Other'>Other</option>
52+
</select>
53+
<label htmlFor="message">Message :</label>
54+
<textarea id='message' name='message'></textarea>
55+
<label htmlFor="attachments">Any Attachments :</label>
56+
<input type='file' id='attachments' name='attachments'></input>
57+
<button type='submit'>Submit</button>
58+
</form>
59+
</div>
60+
</div>
61+
</div>
62+
);
63+
}
64+
65+
export default ContactUs;

0 commit comments

Comments
 (0)