Skip to content

Commit 0ce8ce5

Browse files
harishkumarAVharishkumarAV
authored
Add files via upload
1 parent d5b5410 commit 0ce8ce5

27 files changed

+18983
-0
lines changed

‎Day 5/package-lock.json

Lines changed: 17870 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Day 5/package.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "sample",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^5.17.0",
7+
"@testing-library/react": "^13.4.0",
8+
"@testing-library/user-event": "^13.5.0",
9+
"emailjs-com": "^3.2.0",
10+
"react": "^18.2.0",
11+
"react-dom": "^18.2.0",
12+
"react-icons": "^4.11.0",
13+
"react-router-dom": "^6.16.0",
14+
"react-scripts": "5.0.1",
15+
"web-vitals": "^2.1.4"
16+
},
17+
"scripts": {
18+
"start": "react-scripts start",
19+
"build": "react-scripts build",
20+
"test": "react-scripts test",
21+
"eject": "react-scripts eject"
22+
},
23+
"eslintConfig": {
24+
"extends": [
25+
"react-app",
26+
"react-app/jest"
27+
]
28+
},
29+
"browserslist": {
30+
"production": [
31+
">0.2%",
32+
"not dead",
33+
"not op_mini all"
34+
],
35+
"development": [
36+
"last 1 chrome version",
37+
"last 1 firefox version",
38+
"last 1 safari version"
39+
]
40+
}
41+
}

‎Day 5/src/App.css

Whitespace-only changes.

‎Day 5/src/App.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { BrowserRouter, Route, Routes } from 'react-router-dom';
2+
import './App.css';
3+
import Login from './Component/Asserts/Login/Login';
4+
import SignUp from './Component/Asserts/SignUp/SignUp';
5+
import Home from './Component/Asserts/Home/Home';
6+
import NavBar from './Component/Asserts/NavBar/NavBar';
7+
import Contact from './Component/Asserts/Contact/Contact';
8+
import Footer from './Component/Asserts/Footer/Footer';
9+
import Sidebar from './Component/Asserts/Sidebar/Sidebar';
10+
import About from './Component/Asserts/About/About';
11+
import Works from './Component/Asserts/Works/Works';
12+
function App() {
13+
return (
14+
<div className="App">
15+
<BrowserRouter>
16+
<Routes>
17+
<Route exact path='/' element={<Login/>}/>
18+
<Route path='/SignUp' element={<SignUp/>}/>
19+
<Route path='/About' element={<About/>}/>
20+
<Route path='/Home' element={<Home/>}/>
21+
<Route path='/NavBar' element={<NavBar/>}></Route>
22+
<Route path='/Contact' element={<Contact/>}></Route>
23+
<Route path='/Footer' element={<Footer/>}></Route>
24+
<Route path='/Sidebar' element={<Sidebar/>}></Route>
25+
<Route path='/Works' element={<Works/>}></Route>
26+
</Routes>
27+
</BrowserRouter>
28+
29+
</div>
30+
);
31+
}
32+
33+
export default App;

‎Day 5/src/Component/Asserts/About/About.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.about-section-container {
2+
margin-top: 20rem;
3+
position: relative;
4+
display: flex;
5+
align-items: center;
6+
justify-content: space-between;
7+
}
8+
.about-background-image-container {
9+
position: absolute;
10+
left: -150px;
11+
z-index: -2;
12+
}
13+
.about-section-image-container {
14+
flex: 0.9;
15+
margin-right: 1rem;
16+
}
17+
.about-section-text-container {
18+
flex: 1;
19+
justify-content: center;
20+
21+
display: flex;
22+
flex-direction: column;
23+
}
24+
.primary-subheading {
25+
font-weight: 700;
26+
color: rgb(76, 38, 38);
27+
font-size: 1.15rem;
28+
}
29+
.about-buttons-container {
30+
margin-top: 2rem;
31+
display: flex;
32+
}
33+
.watch-video-button {
34+
margin-left: 2rem;
35+
background-color: transparent;
36+
outline: none;
37+
border: none;
38+
border-radius: 5rem;
39+
font-size: 1.1rem;
40+
cursor: pointer;
41+
font-weight: 600;
42+
color: #484848;
43+
transition: 0.2s;
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
}
48+
.watch-video-button svg {
49+
font-size: 3rem;
50+
margin-right: 1rem;
51+
}

‎Day 5/src/Component/Asserts/About/About.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react";
2+
3+
4+
const About = () => {
5+
return (
6+
<div className="about-section-container">
7+
8+
<div className="about-section-text-container">
9+
<p className="primary-subheading"></p>
10+
<h1 className="primary-heading">
11+
Dont have a resume?
12+
</h1>
13+
<p className="primary-text">
14+
Elevate Your Career with Our Exquisite Resume Templates. Our Artistry Meets Functionality, Creating Resumes That Stand Out. Empower Yourself to Showcase Your Best.
15+
</p>
16+
<p className="primary-text">
17+
Start with the Perfect Resume Today.!
18+
</p>
19+
<div className="about-buttons-container">
20+
<button className="secondary-button">Design now?</button>
21+
22+
</div>
23+
</div>
24+
</div>
25+
);
26+
};
27+
28+
export default About;

‎Day 5/src/Component/Asserts/Assets/bgpic.png

61.1 KB
Loading

‎Day 5/src/Component/Asserts/Assets/logo.png

14.1 KB
Loading

‎Day 5/src/Component/Asserts/Assets/transparent.png

26.6 KB
Loading

‎Day 5/src/Component/Asserts/Contact/Contact.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
2+
.contact {
3+
padding: 20px;
4+
text-align: center;
5+
animation: fadeInAnimation 1s ease-in-out;
6+
}
7+
8+
.contact h2 {
9+
margin-top: 15%;
10+
max-width: 600px;
11+
word-spacing: 3px;
12+
animation: fadeInAnimation 1s ease-in-out;
13+
14+
}
15+
16+
.contact form {
17+
margin-top: 2%;
18+
max-width: 600px;
19+
word-spacing: 3px;
20+
align-items: center;
21+
animation: fadeInAnimation 1s ease-in-out;
22+
}
23+
24+
.contact label {
25+
font-size: 16px;
26+
margin-bottom: 5px;
27+
}
28+
29+
.contact input,
30+
.contact textarea {
31+
width: 100%;
32+
padding: 10px;
33+
margin-bottom: 10px;
34+
}
35+
36+
.contact button {
37+
background-color: rgb(214, 119, 210);
38+
color: white;
39+
padding: 10px 20px;
40+
border: none;
41+
border-radius: 4px;
42+
font-size: 16px;
43+
cursor: pointer;
44+
transition: background-color 0.3s;
45+
}
46+
47+
.contact button:hover {
48+
background-color: rgb(161, 65, 142);
49+
}
50+
51+
@keyframes fadeInAnimation {
52+
from {
53+
opacity: 0;
54+
transform: translateY(10px);
55+
}
56+
to {
57+
opacity: 1;
58+
transform: translateY(0);
59+
}
60+
}
61+

‎Day 5/src/Component/Asserts/Contact/Contact.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { useState } from 'react';
2+
import emailjs from 'emailjs-com';
3+
import './Contact.css';
4+
5+
function Contact() {
6+
const [email, setEmail] = useState('');
7+
const [message, setMessage] = useState('');
8+
9+
const handleSubmit = async (e) => {
10+
e.preventDefault();
11+
12+
try {
13+
await emailjs.send('service_h958orh', 'template_czwl0k5', {
14+
from_email: email,
15+
message: message,
16+
}, 'service_h958orh');
17+
18+
alert('Email sent successfully!');
19+
setEmail('');
20+
setMessage('');
21+
} catch (error) {
22+
console.error('Error sending email:', error);
23+
alert('An error occurred while sending email.');
24+
}
25+
};
26+
27+
return (
28+
<section className="contact">
29+
<h2>Give us a shout.</h2>
30+
<form onSubmit={handleSubmit}>
31+
<label>Email:</label>
32+
<input
33+
type="email"
34+
value={email}
35+
onChange={(e) => setEmail(e.target.value)}
36+
required
37+
/>
38+
<label>Message:</label>
39+
<textarea
40+
value={message}
41+
onChange={(e) => setMessage(e.target.value)}
42+
required
43+
></textarea>
44+
<button type="submit">Send</button>
45+
</form>
46+
</section>
47+
);
48+
}
49+
50+
export default Contact;

‎Day 5/src/Component/Asserts/Footer/Footer.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
2+
.footer-wrapper {
3+
margin: 6rem 0rem;
4+
display: flex;
5+
margin-top: 10rem;
6+
}
7+
.footer-logo-container {
8+
max-width: 110px;
9+
}
10+
.footer-icons {
11+
margin-top: 2.5rem;
12+
}
13+
.footer-icons svg {
14+
font-size: 1.5rem;
15+
margin-right: 1.25rem;
16+
color: #585858;
17+
}
18+
19+
.footer-section-two {
20+
flex: 1;
21+
display: flex;
22+
justify-content: flex-end;
23+
}
24+
.footer-section-columns {
25+
display: flex;
26+
flex-direction: column;
27+
min-width: 190px;
28+
}
29+
.footer-section-columns span {
30+
margin: 0.25rem 0rem;
31+
font-weight: 600;
32+
color: #4c4c4c;
33+
cursor: pointer;
34+
}
35+
36+
@media (max-width: 800px) {
37+
38+
.footer-wrapper {
39+
flex-direction: column;
40+
}
41+
.footer-section-two {
42+
flex-direction: column;
43+
margin-top: 2rem;
44+
}
45+
.footer-section-columns {
46+
margin: 1rem 0rem;
47+
}
48+
.App {
49+
max-width: 95vw;
50+
}
51+
}
52+
@media (max-width: 600px) {
53+
.home-bannerImage-container,
54+
.about-background-image-container {
55+
display: none;
56+
57+
}
58+
}
59+
60+

‎Day 5/src/Component/Asserts/Footer/Footer.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from "react";
2+
import Logo from "../Assets/logo.png";
3+
import { BsTwitter } from "react-icons/bs";
4+
import { SiLinkedin } from "react-icons/si";
5+
import { BsYoutube } from "react-icons/bs";
6+
import { FaFacebookF } from "react-icons/fa";
7+
import './Footer.css';
8+
const Footer = () => {
9+
return (
10+
<div className="footer-wrapper">
11+
<div className="footer-section-one">
12+
<div className="footer-logo-container">
13+
<img src={Logo} alt="" />
14+
</div>
15+
<div className="footer-icons">
16+
<BsTwitter />
17+
<SiLinkedin />
18+
<BsYoutube />
19+
<FaFacebookF />
20+
</div>
21+
</div>
22+
<div className="footer-section-two">
23+
<div className="footer-section-columns">
24+
<span>Qualtiy</span>
25+
<span>Help</span>
26+
<span>Share</span>
27+
<span>Carrers</span>
28+
<span>Testimonials</span>
29+
<span>Work</span>
30+
</div>
31+
<div className="footer-section-columns">
32+
<span>9489184358</span>
33+
<span>[email protected]</span>
34+
<span>[email protected]</span>
35+
<span>[email protected]</span>
36+
</div>
37+
<div className="footer-section-columns">
38+
<span>Terms & Conditions</span>
39+
<span>Privacy Policy</span>
40+
</div>
41+
</div>
42+
</div>
43+
);
44+
};
45+
46+
export default Footer;

0 commit comments

Comments
 (0)