Skip to content

Commit 3904a06

Browse files
shree404shree404
committed
Contact us section Added
1 parent c79fbfe commit 3904a06

File tree

7 files changed

+437
-2
lines changed

7 files changed

+437
-2
lines changed

‎src/Components/landingpage/feedback.jsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import Title from "./title";
2+
import { Container, Row, Col } from "react-bootstrap";
3+
import {
4+
Person,
5+
Envelope,
6+
TelephoneFill,
7+
PersonFill,
8+
PencilFill,
9+
GeoAltFill,EnvelopeFill,
10+
} from "react-bootstrap-icons";
11+
12+
function Contact(){
13+
return(
14+
<>
15+
<Container>
16+
<Title title={"Contact"} head={"Lets get connected"} />
17+
<Row>
18+
<Col lg={8} md={12}>
19+
<div className="ContactForm-form">
20+
<form action="submit">
21+
<div className="ContactForm-form-inputcontainer">
22+
<div className="ContactForm-form-input">
23+
<button className="ContactForm-form-iconbutton">
24+
<Person className="ContactForm-form-icon" />
25+
</button>
26+
<input
27+
type="text"
28+
className="ContactForm-form-name"
29+
name="name"
30+
placeholder=" NAME"
31+
/>
32+
</div>
33+
<div className="ContactForm-form-input">
34+
<button className="ContactForm-form-iconbutton">
35+
<Envelope className="ContactForm-form-icon" />
36+
</button>
37+
<input
38+
type="email"
39+
className="ContactForm-form-name"
40+
name="email"
41+
placeholder=" EMAIL ADDRESS"
42+
/>
43+
44+
</div>
45+
</div>
46+
<div className="ContactForm-form-inputcontainer">
47+
<div className="ContactForm-form-input">
48+
<button className="ContactForm-form-iconbutton">
49+
<TelephoneFill className="ContactForm-form-icon" />
50+
</button>
51+
<input
52+
type="tel"
53+
className="ContactForm-form-name"
54+
name="number"
55+
placeholder=" PHONE"
56+
/>
57+
</div>
58+
<div className="ContactForm-form-input">
59+
<button className="ContactForm-form-iconbutton">
60+
<PersonFill className="ContactForm-form-icon" />
61+
</button>
62+
<input
63+
type="text"
64+
className="ContactForm-form-name"
65+
name="subject"
66+
placeholder=" SUBJECT"
67+
/>
68+
</div>
69+
</div>
70+
<div className="ContactForm-form-inputcontainer">
71+
<div className="ContactForm-form-input1">
72+
<button className="ContactForm-form-iconbutton">
73+
<PencilFill className="ContactForm-form-icon" />
74+
</button>
75+
<span className="ContactForm-form-comment">&nbsp; &nbsp; HOW CAN WE HELP YOU</span>
76+
<textarea
77+
name="text-area"
78+
className="ContactForm-form-textarea"
79+
></textarea>
80+
</div>
81+
</div>
82+
<div className="ContactForm-form-buttoncontainer">
83+
<button className="ContactForm-form-button">Send Message</button>
84+
</div>
85+
</form>
86+
</div>
87+
</Col>
88+
<Col lg={4} md={12}>
89+
<div className="ContactForm-details">
90+
<div className="ContactForm-details__section1">
91+
<div>
92+
<TelephoneFill className="ContactForm-details__icon" />
93+
</div>
94+
<div><p className="ContactForm-details__head">
95+
call now
96+
</p>
97+
<p className="ContactForm-details__desc"> +554551556695 <br />
98+
+554551556695</p>
99+
</div>
100+
</div>
101+
<div className="ContactForm-details__section1">
102+
<div>
103+
<EnvelopeFill className="ContactForm-details__icon" />
104+
</div>
105+
<div><p className="ContactForm-details__head">
106+
message now
107+
</p>
108+
<p className="ContactForm-details__desc"> [email protected],<br />
109+
[email protected],</p>
110+
</div>
111+
</div>
112+
<div className="ContactForm-details__section1">
113+
<div>
114+
<GeoAltFill className="ContactForm-details__icon" />
115+
</div>
116+
<div><p className="ContactForm-details__head">
117+
address now
118+
</p>
119+
<p className="ContactForm-details__desc"> Rangpur, fullbari Road,<br />
120+
2548,New City.</p>
121+
</div>
122+
</div>
123+
</div>
124+
</Col>
125+
</Row>
126+
</Container>
127+
</>
128+
)
129+
}
130+
131+
export default Contact;

‎src/Pages/Landingpage.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Announcement from "../Components/landingpage/announcement";
66
import PastEvent from "../Components/landingpage/pastevent";
77
import Partners from "../Components/landingpage/partners";
88
import Testimonials from "../Components/landingpage/Testimonials";
9+
import Contact from "../Components/landingpage/feedback";
910

1011
function LandingPage(){
1112
return(
@@ -18,6 +19,7 @@ function LandingPage(){
1819
<PastEvent/>
1920
<Partners/>
2021
<Testimonials/>
22+
<Contact/>
2123
</>
2224
)
2325
}

‎src/Styles/App.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,4 +312,150 @@
312312
width: 48%;
313313
height: auto;
314314
}
315+
}
316+
.ContactForm {
317+
font-family: "Poppins", sans-serif;
318+
color: #fefefe;
319+
margin-top: 5rem;
320+
position: relative;
321+
}
322+
.ContactForm-form {
323+
background-color: #10101b;
324+
padding: 6.3rem 2rem;
325+
}
326+
.ContactForm-form-inputcontainer {
327+
display: flex;
328+
justify-content: space-around;
329+
margin-bottom: 3rem;
330+
width: 100%;
331+
}
332+
.ContactForm-form-input {
333+
display: flex;
334+
align-items: center;
335+
border-bottom: 1px solid #666666;
336+
width: 45%;
337+
}
338+
.ContactForm-form-iconbutton {
339+
border: none;
340+
background-color: transparent;
341+
}
342+
.ContactForm-form-icon {
343+
color: white;
344+
height: 1.5rem;
345+
width: 1.5rem;
346+
}
347+
.ContactForm-form-name {
348+
background-color: transparent;
349+
border: none;
350+
outline: none;
351+
width: 95%;
352+
padding-left: 2rem;
353+
color: white;
354+
font-size: 1rem;
355+
padding-bottom: 0.5rem;
356+
text-transform: none;
357+
font-weight: 500;
358+
}
359+
.ContactForm-form-input1 {
360+
width: 95%;
361+
border-bottom: 1px solid #666666;
362+
}
363+
.ContactForm-form-textarea {
364+
outline: none;
365+
height: 7rem;
366+
width: 100%;
367+
border: none;
368+
background-color: transparent;
369+
padding-left: 2rem;
370+
color: white;
371+
font-size: 1rem;
372+
padding-bottom: 0.5rem;
373+
text-transform: none;
374+
font-weight: 500;
375+
}
376+
.ContactForm-form-comment {
377+
color: white;
378+
font-size: 1rem;
379+
padding-bottom: 0.5rem;
380+
text-transform: none;
381+
font-weight: 500;
382+
}
383+
.ContactForm-form-button {
384+
height: 3rem;
385+
width: 10rem;
386+
font-size: 1rem;
387+
font-weight: 600;
388+
color: white;
389+
background-color: #9090e1;
390+
border-radius: 3px;
391+
border: none;
392+
text-transform: uppercase;
393+
}
394+
.ContactForm-form-button:hover {
395+
background-color: #b0b0f0;
396+
}
397+
.ContactForm-details {
398+
background-color: #10101b;
399+
padding: 5rem 2rem;
400+
z-index: 3;
401+
display: flex;
402+
flex-direction: column;
403+
}
404+
.ContactForm-details__section1 {
405+
display: flex;
406+
gap: 2rem;
407+
align-items: center;
408+
margin-bottom: 2rem;
409+
}
410+
.ContactForm-details__icon {
411+
height: 4rem;
412+
width: 4rem;
413+
color: #9090e1;
414+
}
415+
.ContactForm-details__head {
416+
font-size: 1.5rem;
417+
font-weight: 600;
418+
color: #fff;
419+
text-transform: capitalize;
420+
line-height: 1.3;
421+
}
422+
.ContactForm-details__desc {
423+
font-size: 1.125rem;
424+
color: white;
425+
}
426+
.ContactForm-map {
427+
width: 100%;
428+
height: 40rem;
429+
z-index: 1;
430+
margin-top: -5rem;
431+
}
432+
433+
@media screen and (max-width: 576px) {
434+
.ContactForm-form {
435+
margin-bottom: 3rem;
436+
}
437+
.ContactForm-form-inputcontainer {
438+
display: flex;
439+
flex-direction: column;
440+
gap: 2rem;
441+
}
442+
.ContactForm-form-input {
443+
width: 100%;
444+
}
445+
}
446+
@media screen and (min-width: 576px) and (max-width: 1023px) {
447+
.ContactForm-details {
448+
margin-top: 2rem;
449+
padding: 1.5rem;
450+
display: flex;
451+
flex-direction: row;
452+
gap: 2.5rem;
453+
}
454+
.ContactForm-details__section1 {
455+
gap: 1rem;
456+
}
457+
.ContactForm-details__icon {
458+
height: 2rem;
459+
width: 2rem;
460+
}
315461
}/*# sourceMappingURL=App.css.map */

‎src/Styles/App.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)