Skip to content

Commit

Permalink
Contact form updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@kasundie30
kasundie30 committed Oct 10, 2024
1 parent 0b6faeb commit e8de1b4
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 33 deletions.
56 changes: 28 additions & 28 deletions front-end/src/Pages/Contact.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import DrErunikaDayaratna from '../assets/erunika-dayaratna.jpg';
import contactImg from '../assets/contactImg.jpg';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faPhone, faEnvelope} from '@fortawesome/free-solid-svg-icons';

import style from "../components/Contact.module.css";
/*Contact Page*/
function Contact() {

Expand Down Expand Up @@ -51,70 +51,70 @@ function Contact() {
</nav>
</div>

<div className = "contactpage">
<div className = {style["contactpage"]}>

<div className = "contactDetails">
<div className = {style["contactDetails"]}>
{/* Image and the contact details of the Project manager */}
<div className = "contactManagerCoordinator">
<img className="Dr-Upul-Jayasinghe-img" src={DrUpulJayasinghe} alt="DrUpulJayasinghe" />
<div className = "contactMCDetails">
<div className = {style["contactManagerCoordinator"]}>
<img className = {style["Dr-Upul-Jayasinghe-img"]} src={DrUpulJayasinghe} alt="DrUpulJayasinghe" />
<div className = {style["contactMCDetails"]}>
<h3>Dr. Upul Jayasinghe</h3>
<h4>Manager</h4>
<p>Telephone Number: <a href="tel:+94760416590">+94 76 0416 590</a></p>
<p>Email Address: <a href="mailto:[email protected]">[email protected]</a></p>
<a href="https://people.ce.pdn.ac.lk/staff/academic/upul/"><FontAwesomeIcon className = "contactIcons" icon={faUser} /></a>
<a href="tel:+94760416590"><FontAwesomeIcon className = "contactIcons" icon={faPhone} /></a>
<a href="mailto:[email protected]"><FontAwesomeIcon className = "contactIcons" icon={faEnvelope} /></a>
<a href="https://people.ce.pdn.ac.lk/staff/academic/upul/"><FontAwesomeIcon className = {style["contactIcons"]} icon={faUser} /></a>
<a href="tel:+94760416590"><FontAwesomeIcon className = {style["contactIcons"]} icon={faPhone} /></a>
<a href="mailto:[email protected]"><FontAwesomeIcon className = {style["contactIcons"]} icon={faEnvelope} /></a>
</div>

</div>

{/* Image and the contact details of the Project coordinator */}
<div className = "contactManagerCoordinator">
<img className="Dr-Erunika-Dayaratna-img" src={DrErunikaDayaratna} alt="DrErunikaDayaratna" />
<div className = "contactMCDetails">
<div className = {style["contactManagerCoordinator"]}>
<img className = {style["Dr-Erunika-Dayaratna-img"]} src={DrErunikaDayaratna} alt="DrErunikaDayaratna" />
<div className = {style["contactMCDetails"]}>
<h3>Dr. Erunika Dayaratna</h3>
<h4>Coordinator</h4>
<p>Telephone Number: <a href="tel:+94766986500">+94 76 698 6500</a></p>
<p>Email Address: <a href="mailto:[email protected]">[email protected]</a></p>
<a href="https://sci.pdn.ac.lk/scs/staff/Erunika-Dayaratna"><FontAwesomeIcon className = "contactIcons" icon={faUser} /></a>
<a href="tel:+94766986500"><FontAwesomeIcon className = "contactIcons" icon={faPhone} /></a>
<a href="mailto:[email protected]"><FontAwesomeIcon className = "contactIcons" icon={faEnvelope} /></a>
<a href="https://sci.pdn.ac.lk/scs/staff/Erunika-Dayaratna"><FontAwesomeIcon className = {style["contactIcons"]} icon={faUser} /></a>
<a href="tel:+94766986500"><FontAwesomeIcon className = {style["contactIcons"]} icon={faPhone} /></a>
<a href="mailto:[email protected]"><FontAwesomeIcon className = {style["contactIcons"]} icon={faEnvelope} /></a>
</div>
</div>
</div>


{/* Contact Us form */}
<div className = "ContactUsTitle">
<div className = {style["ContactUsTitle"]}>
<h3>Contact Us</h3>
<p className = "ContactUsSubTitle">For inquiries or support, contact us and we'll respond promptly</p>
<p className = {style["ContactUsSubTitle"]}>For inquiries or support, contact us and we'll respond promptly</p>
</div>

<div className = "contactUsForm">
<img className="contactImg" src={contactImg} alt="contactImg" />
<div className = {style["contactUsForm"]}>
<img className = {style["contactImg"]} src={contactImg} alt="contactImg" />
<form onSubmit={onSubmit}>

<div className = "inputbox">
<div className = {style["inputbox"]}>
<label>Full Name</label>
<input type = "text" className = "field" placeholder = "Enter your Full Name" name = "user_name" required/>
<input type = "text" className = {style["field"]} placeholder = "Enter your Full Name" name = "user_name" required/>
</div>

<div className = "inputbox">
<div className = {style["inputbox"]}>
<label>Email Address</label>
<input type = "email" className = "field" placeholder = "Enter your Email address" name = "user_email" required
<input type = "email" className = {style["field"]} placeholder = "Enter your Email address" name = "user_email" required
title="Please enter a valid email address"/>
</div>

<div className = "inputbox">
<div className = {style["inputbox"]}>
<label>Subject</label>
<input type = "text" className = "field" placeholder = " Enter the Subject" name = "subject" required/>
<input type = "text" className = {style["field"]} placeholder = " Enter the Subject" name = "subject" required/>
</div>
<div className = "inputbox">
<div className = {style["inputbox"]}>
<label>Your Message</label>
<textarea name = "message" id = "" className = "field mess" placeholder = "Enter your message" required></textarea>
<textarea name = "message" id = "" className = {style["field-mess"]} placeholder = "Enter your message" required></textarea>
</div>
<button type = "submit" className = "contactButton" >Send Message</button>
<button type = "submit" className = {style["contactButton"]}>Send Message</button>
</form>

</div>
Expand Down
24 changes: 24 additions & 0 deletions front-end/src/components/Components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,30 @@
font-size: 16px;
color: #333;
}

/* file upload button */
.inputbox[type="file"]::file-selector-button {
border-radius: 4px;
padding: 0 16px;
height: 40px;
cursor: pointer;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.16);
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
margin-right: 16px;
transition: background-color 200ms;
}

/* file upload button hover state */
.inputbox[type="file"]::file-selector-button:hover {
background-color: #f3f4f6;
}

/* file upload button active state */
.inputbox[type="file"]::file-selector-button:active {
background-color: #e5e7eb;
}

/********************************************************************/

/* Buttons at the bottom of a form */
Expand Down
15 changes: 10 additions & 5 deletions front-end/src/components/Contact.css → front-end/src/components/Contact.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
.contactUsForm img{
width: auto;
height: 400px;
margin-top: 200px;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
}
Expand All @@ -126,7 +126,6 @@
.inputbox {
margin-top: 20px;
width: 400px;
margin-right: 20px;
font-size: 18px;
}

Expand All @@ -143,12 +142,18 @@
}

/* Message input section */
.inputbox .field.mess {
.inputbox .field-mess {
width: 93%;
height: 100px;
resize: none;
background: transparent;
border: 2px solid #c9e1ef;
outline: none;
padding: 15px;
font-size: 16px;
color: #333;
margin-top: 8px;
resize: none;
font-family: Sans-serif;

}

/* Send Message button */
Expand Down

0 comments on commit e8de1b4

Please sign in to comment.