Skip to content

Commit 21375ee

Browse files
devsdenepaldevsdenepal
committed
add form
1 parent 56e6a10 commit 21375ee

File tree

6 files changed

+229
-180
lines changed

6 files changed

+229
-180
lines changed

‎src/App.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Upcoming from './assets/Components/Upcoming/Upcoming'
88
import Glimpses from './assets/Components/Glimpses/Glimpses'
99
import Testimonial from './assets/Components/Testimonials/Testimonial'
1010
import Testimonials_2 from './assets/Components/Testimonials/Testimonials_2'
11+
import Contact from './assets/Components/Contact/Contact'
1112
const App = () => {
1213
return (
1314
<div>
@@ -27,7 +28,9 @@ const App = () => {
2728
<Title title='COMMUNITIES AND ORGANIZATIONS' subtitle='Partnership and Collaboration With'></Title>
2829
<Glimpses></Glimpses>
2930
<Title title='TESTIMONIALS' subtitle='From Board and Advisors'></Title>
30-
<Testimonials_2></Testimonials_2>
31+
<Testimonials_2></Testimonials_2>
32+
<Title title='LEAVE A FEEDBACK' subtitle='Suggestions and Plans'></Title>
33+
<Contact></Contact>
3134
</div>
3235
</div>
3336
)

‎src/assets/Components/Contact/Contact.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
.contact {
3+
margin: 80px auto;
4+
max-width: 90%;
5+
display: flex;
6+
align-content: center;
7+
justify-content: space-between
8+
}
9+
10+
.contact-col {
11+
flex-basis: 48%;
12+
color: #676767
13+
}
14+
15+
.contact-col h3 {
16+
color: #000f38;
17+
font-weight: 500;
18+
font-size: 25px;
19+
display: flex;
20+
align-items: center;
21+
margin-bottom: 20px
22+
}
23+
24+
.contact-col h3 img {
25+
width: 35px;
26+
margin-left: 10px
27+
}
28+
29+
.contact-col p {
30+
max-width: 450px;
31+
list-style: .3
32+
}
33+
34+
.contact-col ul li {
35+
display: flex;
36+
align-items: center;
37+
margin: 20px 0
38+
}
39+
40+
.contact-col ul li img {
41+
width: 25px;
42+
margin-right: 10px
43+
}
44+
45+
.contact form input,.contact form textarea {
46+
display: block;
47+
width: 100%;
48+
background: #ebecfe;
49+
padding: 15px;
50+
border: 0;
51+
outline: 0;
52+
margin-bottom: 15px;
53+
margin-top: 5px;
54+
resize: none
55+
}
56+
57+
.contact-col span {
58+
display: block;
59+
margin: 20px 0
60+
}
61+
62+
.submit-btn {
63+
margin-top: 10px
64+
}
65+
66+
@media (max-width: 700px) {
67+
.contact {
68+
display:block
69+
}
70+
71+
.contact-col {
72+
padding: 20px
73+
}
74+
}

‎src/assets/Components/Contact/Contact.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import './Contact.css';
3+
4+
const Contact = () => {
5+
return (
6+
<div className="contact" style={{ backgroundColor: 'lightgrey', padding: '20px' }}>
7+
<div className="contact-col">
8+
<h3>Send us a message
9+
</h3>
10+
<p>Feel free to reach out through the contact form or find our contact information below. Your feedback, questions, and suggestions are important to us as we strive to provide exceptional service to our university community.</p>
11+
<ul>
12+
<li>
13+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="#040a93" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0l57.4-43c23.9-59.8 79.7-103.3 146.3-109.8l13.9-10.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176 0 384c0 35.3 28.7 64 64 64l296.2 0C335.1 417.6 320 378.5 320 336c0-5.6 .3-11.1 .8-16.6l-26.4 19.8zM640 336a144 144 0 1 0 -288 0 144 144 0 1 0 288 0zm-76.7-43.3c6.2 6.2 6.2 16.4 0 22.6l-72 72c-6.2 6.2-16.4 6.2-22.6 0l-40-40c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L480 353.4l60.7-60.7c6.2-6.2 16.4-6.2 22.6 0z"/></svg>&nbsp; [email protected] </li>
14+
<li>
15+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#040a93" d="M280 0C408.1 0 512 103.9 512 232c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-101.6-82.4-184-184-184c-13.3 0-24-10.7-24-24s10.7-24 24-24zm8 192a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm-32-72c0-13.3 10.7-24 24-24c75.1 0 136 60.9 136 136c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-48.6-39.4-88-88-88c-13.3 0-24-10.7-24-24zM117.5 1.4c19.4-5.3 39.7 4.6 47.4 23.2l40 96c6.8 16.3 2.1 35.2-11.6 46.3L144 207.3c33.3 70.4 90.3 127.4 160.7 160.7L345 318.7c11.2-13.7 30-18.4 46.3-11.6l96 40c18.6 7.7 28.5 28 23.2 47.4l-24 88C481.8 499.9 466 512 448 512C200.6 512 0 311.4 0 64C0 46 12.1 30.2 29.5 25.4l88-24z"/></svg> &nbsp; +977 9816494300 </li>
16+
<li>
17+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#040a93" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>&nbsp;Bhairahawa, Rupandehi | Lumibini, Nepal
18+
</li>
19+
</ul>
20+
</div>
21+
<div className="contact-col">
22+
<form>
23+
<label>Your name</label>
24+
<input type="text" name="name" placeholder="Enter your name" required />
25+
<label>Phone Number</label>
26+
<input type="tel" name="phone" placeholder="Enter your mobile number" required />
27+
<label>Your Email</label>
28+
<input type="email" name="email" placeholder="Enter your email id" required />
29+
<label>Write your messages here</label>
30+
<textarea name="message" rows="6" placeholder="Enter your message" required />
31+
<div className="h-captcha" data-captcha="true" data-sitekey="50b2fe65-b00b-4b9e-ad62-3ba471098be2" />
32+
{/* <iframe src="https://newassets.hcaptcha.com/captcha/v1/503a6fc/static/hcaptcha.html#frame=checkbox&amp;id=0sxzfpm9akol&amp;host=greatstack.in&amp;sentry=true&amp;reportapi=https%3A%2F%2Faccounts.hcaptcha.com&amp;recaptchacompat=off&amp;custom=false&amp;hl=en&amp;tplinks=on&amp;pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha.com&amp;sitekey=50b2fe65-b00b-4b9e-ad62-3ba471098be2&amp;theme=light&amp;origin=https%3A%2F%2Fgreatstack.in" tabindex="0" frameborder="0" scrolling="no" title="Widget containing checkbox for hCaptcha security challenge" data-hcaptcha-widget-id="0sxzfpm9akol" data-hcaptcha-response="" style={{ pointerEvents: 'auto', width: '303px', height: '78px', overflow: 'hidden' }}> */}
33+
{/* </iframe> */}
34+
<textarea id="h-captcha-response-0sxzfpm9akol" name="h-captcha-response" style={{ display: 'none' }}></textarea>
35+
</form>
36+
<button type="submit" className="btn dark-btn submit-btn">Submit now &nbsp;<i class="fa-solid fa-arrow-right"></i></button>
37+
</div>
38+
</div>
39+
);
40+
};
41+
42+
export default Contact;

‎src/assets/Components/Glimpses/Glimpses.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
width: 50px;
3838
border-radius: 50%;
3939
cursor: pointer;
40-
background: #212ea0
40+
background: #212ea0;
41+
color: #fff;
4142
}
4243

4344
.back-btn {

‎src/assets/Components/Testimonials/Testimonial.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
2+
.testimonials {
3+
margin: 80px auto;
4+
padding: 0 80px;
5+
position: relative
6+
}
7+
8+
.next-btn,.back-btn {
9+
position: absolute;
10+
top: 50%;
11+
right: 0;
12+
transform: translateY(-50%);
13+
padding: 15px;
14+
width: 50px;
15+
border-radius: 50%;
16+
cursor: pointer;
17+
background: #212ea0;
18+
color: #fff;
19+
20+
}
21+
22+
.back-btn {
23+
right: auto;
24+
left: 0
25+
}
26+
27+
.slider {
28+
overflow: hidden
29+
}
30+
31+
.slider ul {
32+
display: flex;
33+
width: 200%;
34+
overflow-x: hidden;
35+
transition: .5s
36+
}
37+
38+
.slider ul li {
39+
list-style: none;
40+
width: 50%;
41+
padding: 20px
42+
}
43+
44+
.slide {
45+
box-shadow: 0 0 20px #0000000d;
46+
padding: 40px;
47+
border-radius: 10px;
48+
color: #676767;
49+
line-height: 1.4
50+
}
51+
52+
.slide img {
53+
width: 65px;
54+
border-radius: 50%;
55+
margin-right: 10px;
56+
border: 4px solid #212EA0
57+
}
58+
59+
.user-info {
60+
display: flex;
61+
align-items: center;
62+
margin-bottom: 20px;
63+
font-size: 15px
64+
}
65+
66+
.user-info h3 {
67+
color: #212ea0
68+
}
69+
70+
@media (max-width: 800px) {
71+
.testimonials {
72+
padding:0 40px
73+
}
74+
75+
.next-btn,.back-btn {
76+
padding: 10px;
77+
width: 35px
78+
}
79+
80+
.testimonials ul li,.slide {
81+
padding: 10px
82+
}
83+
84+
.slide img {
85+
width: 50px;
86+
border: 3px solid #212EA0
87+
}
88+
}
89+
90+
@media (max-width: 600px) {
91+
.user-info {
92+
display:block;
93+
margin-bottom: 10px;
94+
font-size: 12px
95+
}
96+
97+
.user-info h3 {
98+
font-size: 16px
99+
}
100+
101+
.slider p {
102+
font-size: 12px
103+
}
104+
}

0 commit comments

Comments
 (0)