Add files via upload

Author: harishkumarAV

Day5/src/App.css

@@ -0,0 +1,42 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import './App.css';
+import Login from './Component/Asserts/Login/Login';
+import SignUp from './Component/Asserts/SignUp/SignUp';
+import Home from './Component/Asserts/Home/Home';
+import Contact from './Component/Asserts/Contact/Contact';
+import Footer from './Component/Asserts/Footer/Footer';
+import Sidebar from './Component/Asserts/Sidebar/Sidebar';
+import About from './Component/Asserts/About/About';
+import Works from './Component/Asserts/Works/Works';
+import Testimonial from './Component/Asserts/Testimonial/Testimonial';
+import Description from './Component/Asserts/Description/Description';
+import Faqs from './Component/Asserts/Faqs/Faqs';
+import Search from './Component/Asserts/Search/Search';
+import Resume from './Component/Asserts/Resume/Resume';
+function App() {
+  return (
+    <div className="App">
+    <BrowserRouter>
+    <Routes>
+    <Route exact path='/' element={<Login/>}/>
+    <Route path='/SignUp' element={<SignUp/>}/>
+    <Route path='/About' element={<About/>}/>
+    <Route path='/Home' element={<Home/>}/>
+    <Route path='/Contact' element={<Contact/>}></Route>
+    <Route path='/Footer' element={<Footer/>}></Route>
+    <Route path='/Sidebar' element={<Sidebar/>}></Route>
+    <Route path='/Works' element={<Works/>}></Route>
+    <Route path='/Testimonial' element={<Testimonial/>}></Route>
+    <Route path='Description' element={<Description/>}></Route>
+    <Route path='Faqs' element={<Faqs/>}></Route>
+    <Route path='Search' element={<Search/>}></Route>
+    <Route path='Resume' element={<Resume/>}></Route>
+    
+    </Routes>
+    </BrowserRouter> 
+
+    </div>
+  );
+}
+
+export default App;

Day5/src/App.js

@@ -0,0 +1,67 @@
+.about-section-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .about-background-image-container {
+    position: absolute;
+    left: -150px;
+    z-index: -2;
+  }
+  .about-section-image-container {
+    flex: 0.9;
+    margin-right: 1rem;
+  }
+  .about-section-text-container {
+    flex: 1;
+    justify-content: center;
+    
+    display: flex;
+    flex-direction: column;
+  }
+  .primary-subheading {
+    font-weight: 700;
+    color:  rgb(76, 38, 38);
+    font-size: 1.15rem;
+  }
+  .about-buttons-container {
+    margin-top: 2rem;
+    display: flex;
+  }
+  .watch-video-button {
+    margin-left: 2rem;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    border-radius: 5rem;
+    font-size: 1.1rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: #484848;
+    transition: 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .about-section-image-container{
+    top: -100px;
+    right: -170px;
+    z-index: -2;
+    max-width: 700px;
+  }
+  .watch-video-button svg {
+    font-size: 3rem;
+    margin-right: 1rem;
+  }
+  .home-image-section img {
+  
+    max-width: 100%;
+    mix-blend-mode:multiply;
+    height: auto;
+  }
+  .home-image-section {
+    max-width:600px;
+    flex: 1;
+    
+  }

Day5/src/Component/Asserts/About/About.css

@@ -0,0 +1,34 @@
+import React from "react";
+import "./About.css";
+import res from "../Assets/resume.jpg";
+import { useNavigate } from 'react-router-dom'; 
+
+const About = () => {
+  const navigate = useNavigate(); 
+  const handleDesignNowClick = () => {
+    navigate('/Resume');
+  };
+
+  return (
+    <div className="about-section-container">
+      <div className="about-section-text-container">
+        <p className="primary-subheading"></p>
+        <h1 className="primary-heading">Don't have a resume?</h1>
+        <p className="primary-text">
+          Elevate Your Career with Our Exquisite Resume Templates. Our Artistry Meets Functionality, Creating Resumes That Stand Out. Empower Yourself to Showcase Your Best.
+        </p>
+        <p className="primary-text">Start with the Perfect Resume Today!</p>
+        <div className="about-buttons-container">
+          <button className="secondary-button" onClick={handleDesignNowClick}>
+            Design now?
+          </button>
+        </div>
+      </div>
+      <div className="home-image-section">
+        <img src={res} alt="" />
+      </div>
+    </div>
+  );
+};
+
+export default About;

Day5/src/Component/Asserts/About/About.js

@@ -0,0 +1,61 @@
+
+.contact {
+    padding: 20px;
+    text-align: center;
+    animation: fadeInAnimation 1s ease-in-out; 
+  }
+  
+  .contact h2 {
+    margin-top: 15%;
+    max-width: 600px;
+    word-spacing: 3px;
+    animation: fadeInAnimation 1s ease-in-out;
+
+  }
+  
+  .contact form {
+    margin-top: 2%;
+    max-width: 600px;
+    word-spacing: 3px;
+    align-items: center;
+    animation: fadeInAnimation 1s ease-in-out; 
+  }
+  
+  .contact label {
+    font-size: 16px;
+    margin-bottom: 5px;
+  }
+  
+  .contact input,
+  .contact textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+  
+  .contact button {
+    background-color: rgb(214, 119, 210);
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  .contact button:hover {
+    background-color: rgb(161, 65, 142);
+  }
+  
+  @keyframes fadeInAnimation {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  

Day5/src/Component/Asserts/Assets/Group 27.png

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import emailjs from 'emailjs-com';
+import './Contact.css';
+
+function Contact() {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      await emailjs.send('service_h958orh', 'template_czwl0k5', {
+        from_email: email,
+        message: message,
+      }, 'service_h958orh');
+      
+      alert('Email sent successfully!');
+      setEmail('');
+      setMessage('');
+    } catch (error) {
+      console.error('Error sending email:', error);
+      alert('An error occurred while sending email.');
+    }
+  };
+
+  return (
+    <section className="contact">
+      <h2>Give us a shout.</h2>
+      <form onSubmit={handleSubmit}>
+        <label>Email:</label>
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <label>Message:</label>
+        <textarea
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          required
+        ></textarea>
+        <button type="submit">Send</button>
+      </form>
+    </section>
+  );
+}
+
+export default Contact;