Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

made it user friendly #142

Closed
wants to merge 1 commit into from
Closed

made it user friendly #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 190 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions src/Pages/contact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.form{
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color: white;
}
.input-hover:hover{
border: 2px solid #a52c19;
transition: border 1s ease;
color: #320a04;
}
31 changes: 24 additions & 7 deletions src/Pages/contact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import Button from '../componets/Button';

import './contact.css';
const ContactContainer = styled.div`
padding: 4rem 2rem;
max-width: 800px;
Expand All @@ -13,6 +13,8 @@ const Title = styled(motion.h1)`
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
text-shadow: 2px 2px 4px black;
font-weight: bold;
`;

const Form = styled(motion.form)`
Expand All @@ -24,16 +26,26 @@ const Form = styled(motion.form)`
const Input = styled.input`
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ccc;
border: 2px solid #ccc;
border-radius: 4px;
outline:none;
&:focus {
border-color: #a52c19; // Change border color when focused
box-shadow: 0 0 3px black; // Add a subtle glow
}
`;

const TextArea = styled.textarea`
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ccc;
border: 2px solid #ccc;
border-radius: 4px;
min-height: 150px;
outline: none;
&:focus {
border-color: #a52c19; // Change border color when focused
box-shadow: 0 0 3px black; // Add a subtle glow
}
`;

function Contact() {
Expand All @@ -59,9 +71,9 @@ function Contact() {
};

return (
<ContactContainer>
<ContactContainer className='container'>
<Title
className = "mt-7"
className = "mt-12"//corrected margin top
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
Expand All @@ -73,6 +85,7 @@ function Contact() {
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className='form'
>
<Input
type="text"
Expand All @@ -81,7 +94,9 @@ function Contact() {
value={formData.name}
onChange={handleChange}
required
pattern="[a-zA-Z\s]+" title="Name must only contain letters"
pattern="[a-zA-Z\s]+"
title="Name must only contain letters"
className='input-hover'
/>
<Input
type="email"
Expand All @@ -90,15 +105,17 @@ function Contact() {
value={formData.email}
onChange={handleChange}
required
className='input-hover'
/>
<TextArea
name="message"
placeholder="Your Message"
value={formData.message}
onChange={handleChange}
required
className='input-hover'
/>
<Button primary type="submit">Send Message</Button>
<Button primary type="submit" className='button-hover'>Send Message</Button>
</Form>
</ContactContainer>
);
Expand Down
7 changes: 4 additions & 3 deletions src/componets/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@ const StyledButton = styled(motion.button)`
background-color: ${props => props.primary ? '#7c2214' : '#7c2214'};
color: ${props => props.primary ? 'white' : 'white'};
border: 2px solid #7c2214;
border-radius: 4px;
border-radius: 120px;
cursor: pointer;
transition: all 0.3s ease;

&:hover {
background-color: ${props => props.primary ? '#7c2214' : 'white'};
color: ${props => props.primary ? 'white' : '#7c2214'}
background-color: ${props => props.primary ? '#a03626' : 'white'};
color: ${props => props.primary ? 'white' : '#7c2214'};
text-shadow: 2px 2px 4px black;
}
`;

Expand Down
Loading