Skip to content

2
2022-066
Commit d5e53ccf authored by Navodya Pasqual's avatar Navodya Pasqual
Browse files
Options

contact us page added

parent 6a5cff62
Show whitespace changes
Inline Side-by-side
Showing with 372 additions and 42 deletions
frontend/src/components/navBar/navbar.css
View file @ d5e53ccf
...@@ -108,44 +108,29 @@ a { ...@@ -108,44 +108,29 @@ a {
cursor: pointer; cursor: pointer;
} }
.navbar-sign button,
.navbar-menu_container button {background-image: linear-gradient(to right, #DC2424 0%, #4A569D 51%, #DC2424 100%)}
.navbar-sign button, .navbar-sign button,
.navbar-menu_container button { .navbar-menu_container button {
padding: 0.5rem 1rem; padding: 0.7rem 1.3rem;
color: #fff; text-align: center;
background: #fd603d; transition: 0.5s;
font-family: var(--font-family); background-size: 200% auto;
font-weight: 450; color: white;
font-size: 18px; font-size: 16px;
line-height: 25px; font-weight:700;
border: none;
outline: none;
cursor: pointer;
border-radius: 20px; border-radius: 20px;
} display: block;
border: none;
.navbar-sign button:hover, }
.navbar-menu_container button:hover {
background-color: #ff3f14;
color: #ffffff;
}
.navbar-sign button:hover, .navbar-sign button:hover,
.navbar-menu_container button:hover { .navbar-menu_container button:hover {
-webkit-transform: scale(1.1); background-position: right center; /* change the direction of the change here */
-moz-transform: scale(1.1); color: white;
-o-transform: scale(1.1); text-decoration: none;
} }
.navbar-sign button,
.navbar-menu_container button {
-webkit-transform: scale(1);
/* Browser Variations: */
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.navbar-menu { .navbar-menu {
margin-left: 1rem; margin-left: 1rem;
......
frontend/src/components/navBar/navbar.js
View file @ d5e53ccf
...@@ -29,12 +29,14 @@ const Navbar = () => { ...@@ -29,12 +29,14 @@ const Navbar = () => {
<p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p> <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
<p><Link style={isActive(history, '#')} to="#">Digital human</Link></p> <p><Link style={isActive(history, '#')} to="#">Digital human</Link></p>
<p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p> <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
<p><Link style={isActive(history, '#')} to="#">Contact us</Link></p> <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
</div> </div>
</div> </div>
<div className="navbar-sign"> <div className="navbar-sign">
<p><Link style={isActive(history, '/login')} to="/login">Sign in</Link></p> <p><Link style={isActive(history, '/login')} to="/login">Sign in</Link></p>
<Link style={isActive(history, '/register')} to="/register">
<button type="button">Sign up</button> <button type="button">Sign up</button>
</Link>
</div> </div>
<div className="navbar-menu"> <div className="navbar-menu">
{toggleMenu {toggleMenu
...@@ -47,11 +49,13 @@ const Navbar = () => { ...@@ -47,11 +49,13 @@ const Navbar = () => {
<p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p> <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
<p><Link style={isActive(history, '#')} to="#">Digital human</Link></p> <p><Link style={isActive(history, '#')} to="#">Digital human</Link></p>
<p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p> <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
<p><Link style={isActive(history, '#')} to="#">Contact us</Link></p> <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
</div> </div>
<div className="navbar-menu_container-links-sign"> <div className="navbar-menu_container-links-sign">
<p>Sign in</p> <p><Link style={isActive(history, '/login')} to="/login">Sign in</Link></p>
<Link style={isActive(history, '/register')} to="/register">
<button type="button">Sign up</button> <button type="button">Sign up</button>
</Link>
</div> </div>
</div> </div>
)} )}
......
frontend/src/main/ContactUs/contactUs.js 0 → 100644
View file @ d5e53ccf
import React, { Component } from 'react';
import './styles/contactUs.css';
import { AiFillPhone, AiFillMail } from "react-icons/ai";
import { FaMapMarkerAlt, FaLinkedinIn, FaTwitter, FaGithub, FaGooglePlusG } from "react-icons/fa";
class ContactUs extends Component {
render() {
return (
<div>
<div className='contact'>
<div className='container contact__container'>
<aside className='contact__aside'>
<h2 className="gradient_text">Contact Us</h2>
<p>
If you have any feedback or comments on our service, or want to contact our administrative staff, please let us know.
</p>
<ul className='contact__details'>
<li>
<AiFillPhone/>
<h5>+342243935</h5>
</li>
<li>
<AiFillMail/>
<h5>support@gmail.com</h5>
</li>
<li>
<FaMapMarkerAlt/>
<h5>Malabe, Sri lanka</h5>
</li>
</ul>
<ul className='contact__socials'>
<li>
<a href='#'><FaLinkedinIn/></a>
</li>
<li>
<a href='#'><FaTwitter/></a>
</li>
<li>
<a href='#'><FaGithub/></a>
</li>
<li>
<a href='#'><FaGooglePlusG/></a>
</li>
</ul>
</aside>
<form className='contact__form'>
<div className='form__name'>
<input type='text' name='First Name' placeholder='First Name' required />
<input type='text' name='Last Name' placeholder='Last Name' required />
</div>
<input type='email' name='Email Address' placeholder='Email Address' required />
<textarea name='Message' placeholder='Message' rows='7' required></textarea>
<button type='submit' className='contact_us_btn'>
Send Message
</button>
</form>
</div>
</div>
</div>
)
}
}
export default ContactUs;
\ No newline at end of file
frontend/src/main/ContactUs/styles/contactUs.css 0 → 100644
View file @ d5e53ccf
* {
box-sizing: border-box;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
body {
background: -moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
/* safari 5.1+,chrome 10+ */
background: -webkit-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
/* opera 11.10+ */
background: -o-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
/* ie 10+ */
background: -ms-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
/* global 92%+ browsers support */
background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
}
.contact__container {
font-family: var(--font-family);
padding: 4rem;
display: grid;
background: #1f2641;
grid-template-columns: 40% 60%;
gap: 4rem;
height: 28rem;
margin: 7rem 7rem;
border-radius: 1rem;
}
.contact__aside {
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: 3rem;
padding-right: 3rem;
border-radius: 1rem;
bottom: 7rem;
position: relative;
}
.contact__aside {
background: #546e88;
/* ff 3.6+ */
background: -moz-radial-gradient(circle at 30% -100%, #2a2a72 0%, #009ffd 74%);
/* safari 5.1+,chrome 10+ */
background: -webkit-radial-gradient(circle at 30% -100%, #2a2a72 0%, #009ffd 74%);
/* opera 11.10+ */
background: -o-radial-gradient(circle at 30% -100%, #2a2a72 0%, #009ffd 74%);
/* ie 10+ */
background: -ms-radial-gradient(circle at 30% -100%, #2a2a72 0%, #009ffd 74%);
/* global 92%+ browsers support */
background: radial-gradient(circle at 30% -100%, #000000 0%, #04619f 74%);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.aside__image {
width: 12rem;
margin-bottom: 2rem;
}
.contact__aside h2 {
text-align: left;
font-weight: 800;
font-size: 42px;
letter-spacing: -0.04em;
margin-bottom: 3rem;
}
.contact__aside .gradient_text {
background: linear-gradient(89.97deg, #AE67FA 1.84%, #F49867 102.67%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.contact__aside p {
font-size: 0.9rem;
margin-bottom: 2rem;
color: var(--color-text);
}
.contact__details li {
display: flex;
gap: 1rem;
align-items: center;
color: var(--color-text);
margin-bottom: 1rem;
}
.contact__socials {
display: flex;
gap: 0.9rem;
margin-top: 3rem;
}
.contact__socials a {
background: #040C18;
padding: 0.8rem;
border-radius: 100%;
font-size: 0.9rem;
transition: all 400ms ease;
color: aliceblue;
}
.contact__socials li {
display: flex;
}
.contact__socials a:hover {
background: transparent;
}
.contact__form {
display: flex;
flex-direction: column;
gap: 1.2rem;
margin-right: 4rem;
}
.contact__form .form__name {
display: flex;
gap: 1.2rem;
}
.contact__form input[type='text'] {
width: 50%;
}
.contact__form input,
.contact__form textarea {
width: 100%;
padding: 1rem;
background: #040C18;
color: white;
border: none;
}
.contact__form .contact_us_btn {background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%)}
.contact__form .contact_us_btn {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: black;
font-weight: 800;;
border-radius: 10px;
display: block;
border: none;
}
.contact__form .contact_us_btn:hover {
background-position: right center; /* change the direction of the change here */
color: black;
text-decoration: none;
}
@media screen and (max-width: 1024px) {
.contact {
padding-bottom: 0;
}
.contact__container {
gap: 1.5rem;
margin-top: 3rem;
height: auto;
padding: 1.5rem;
}
.contact__aside {
width: auto;
padding: 1.5rem;
bottom: 0;
}
.contact__form {
align-self: center;
margin-right: 1.5rem;
}
}
@media screen and (max-width: 600px) {
.contact__container {
grid-template-columns: 1fr;
gap: 3rem;
margin-top: 0;
padding: 0;
}
.contact__form {
margin: 0 0.5rem 3rem;
}
.form__name {
flex-direction: column;
}
.form__name input[type='text'] {
width: 100%;
}
}
.contact__container {
background: var(--color-footer);
/* ff 3.6+ */
background: -moz-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
/* safari 5.1+,chrome 10+ */
background: -webkit-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
/* opera 11.10+ */
background: -o-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
/* ie 10+ */
background: -ms-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
/* global 92%+ browsers support */
background: radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
\ No newline at end of file
frontend/src/main/Home/styles/home.css
View file @ d5e53ccf
...@@ -15,7 +15,7 @@ a { ...@@ -15,7 +15,7 @@ a {
} }
.home_content .gradient_text { .home_content .gradient_text {
background: var(--gradient-text); background: linear-gradient(89.97deg, #AE67FA 1.84%, #F49867 102.67%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
......
frontend/src/main/Login/login.js
View file @ d5e53ccf
...@@ -3,7 +3,9 @@ import React, { Component } from 'react'; ...@@ -3,7 +3,9 @@ import React, { Component } from 'react';
class Login extends Component { class Login extends Component {
render() { render() {
return ( return (
<p>Yet bed any for travelling assistance indulgence unpleasing. Not thoughts all exercise blessing. Indulgence way everything joy alteration boisterous the attachment. Party we years to order allow asked of.</p> <div className="gradient_background">
<p>Login </p>
</div>
) )
} }
} }
......
frontend/src/main/SignUp/signUp.js
View file @ d5e53ccf
import React, { Component } from 'react'; import React, { Component } from 'react';
import './styles/signUp.css';
class SignUp extends Component { class SignUp extends Component {
render() { render() {
return ( return (
<p>Yet bed any for travelling assistance indulgence unpleasing. Not thoughts all exercise blessing. Indulgence way everything joy alteration boisterous the attachment. Party we years to order allow asked of.</p> <div className="gradient_background">
<p>signUp</p>
</div>
) )
} }
} }
......
frontend/src/main/SignUp/styles/signUp.css 0 → 100644
View file @ d5e53ccf
* {
box-sizing: border-box;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
body {
background: var(--color-bg);
}
a {
color: unset;
text-decoration: none;
}
.gradient_background {
background: -moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
/* safari 5.1+,chrome 10+ */
background: -webkit-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
/* opera 11.10+ */
background: -o-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
/* ie 10+ */
background: -ms-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
/* global 92%+ browsers support */
background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
}
\ No newline at end of file
frontend/src/routes/pageRoutes.js
View file @ d5e53ccf
...@@ -7,6 +7,7 @@ import Navbar from '../components/navBar/navbar'; ...@@ -7,6 +7,7 @@ import Navbar from '../components/navBar/navbar';
import AboutUs from '../main/AboutUs/aboutUs'; import AboutUs from '../main/AboutUs/aboutUs';
import SignUp from '../main/SignUp/signUp'; import SignUp from '../main/SignUp/signUp';
import Login from '../main/Login/login'; import Login from '../main/Login/login';
import ContactUs from '../main/ContactUs/contactUs';
function PageRoutes() { function PageRoutes() {
return ( return (
...@@ -17,6 +18,7 @@ function PageRoutes() { ...@@ -17,6 +18,7 @@ function PageRoutes() {
<Switch> <Switch>
<Route path="/" component={Home} exact/> <Route path="/" component={Home} exact/>
<Route path="/about-us" component={AboutUs}/> <Route path="/about-us" component={AboutUs}/>
<Route path="/contact-us" component={ContactUs}/>
<Route path="/register" component={SignUp}/> <Route path="/register" component={SignUp}/>
<Route path="/login" component={Login}/> <Route path="/login" component={Login}/>
</Switch> </Switch>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment