Second Commit Few Changes

Manavv20 · Manavv20 · commit a81645238e68 · 2023-07-14T19:46:54.000+05:30
diff --git a/public/fav.ico b/public/fav.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="fav.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -25,7 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <title>React App</title>
+    <title>Happy Journey</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/assets/fav.png b/src/assets/fav.png
diff --git a/src/components/AboutUs.js b/src/components/AboutUs.js
@@ -2,8 +2,13 @@ import "./AboutUsStyles.css"
 
 function AboutUs(){
     return(
-        <div>
-            
+        <div className="about-container">
+            <h1>Our History</h1>
+            <p>The first tour operator went into business in England in 1758, and is still in business today. In Europe, pleasure travel started in earnest during the 1840s, when Thomas Cook began conducting tours to Paris and later around Europe. By the 1850s, railroad tours were already in operation. Modern tour operators – companies that organize group tours and independent travel packages — date back to the mid-nineteenth century, and most likely have their roots as ticket agents for steamship lines and railroads. </p>
+            <h1>Our Mission</h1>
+            <p>Helping People and Companies travel smart and achieve more</p>
+            <h1>Our Vision</h1>
+            <p>To be the worl'd most trusted, innovative and sustainable travel management company.</p>
         </div>
     )
 }
diff --git a/src/components/AboutUsStyles.css b/src/components/AboutUsStyles.css
@@ -0,0 +1,18 @@
+.about-container{
+    margin: 4rem 6rem ;
+    text-align: start;
+}
+.about-container h1{
+    padding-bottom: 1rem;
+    font-size: 5rem;
+}
+.about-container p{
+    padding-bottom: 2rem;
+    font-size: 1.5rem;
+}
+@media screen and (max-width:850px) {
+    .about-container{
+        margin: 4rem 2rem;
+    }
+    
+}
diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js
@@ -0,0 +1,17 @@
+import "./ContactFormStyles.css"
+function ContactForm(){
+    return(
+        <div className="from-container">
+            <h1>Send a Message to us</h1>
+            <form>
+                <input placeholder="Name"/>
+                <input placeholder="Email"/>
+                <input placeholder="Subject"/>
+                <textarea placeholder="Message" rows="4"></textarea>
+                <button>Send Message</button>
+            </form>
+        </div>
+
+    )
+}
+export default ContactForm;
diff --git a/src/components/ContactFormStyles.css b/src/components/ContactFormStyles.css
@@ -0,0 +1,39 @@
+.from-container{
+    margin: 4rem 6rem;
+    color: #2a2a2a;
+
+}
+
+.from-container form{
+    padding-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    margin: auto;
+}
+.from-container input{
+    height: 3rem;
+    padding: 0 1rem;
+    margin-bottom: 2rem;
+    border-radius: 0.3rem;
+    border: 1px solid #2a2a2a;
+}
+.from-container textarea{
+    padding:  1rem;
+    margin-bottom: 2rem;
+    border-radius: 0.3rem;
+    border: 1px solid #2a2a2a;
+}
+.from-container button{
+    display: inline;
+}
+@media screen and (max-width:850px) {
+    .from-container{
+        margin: 4rem 2rem;
+    }
+    .from-container form{
+        padding-top:2rem;
+        width: 90%;
+    }
+}
+
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -12,7 +12,8 @@ class Navbar extends Component{
     render() {
         return(
             <nav className="NavbarItems">
-                <h1 className="navbar-logo">Happy Journey</h1>
+                
+                <h1 className="navbar-logo"><a href="/">Happy Journey</a></h1>
 
                 <div className="menu-icons" onClick={this.handleClick}>
                     <i className={this.state.clicked ? "fas fa-times" : "fas fa-bars"}></i>
diff --git a/src/components/NavbarStyles.css b/src/components/NavbarStyles.css
@@ -18,7 +18,13 @@
     color: #222;
     font-size: 2rem;
     cursor: pointer;
+    text-decoration: none;
+}
+.navbar-logo a{
+    text-decoration: none;
+    color: black;
 }
+
 .nav-menu{
     display: grid;
     grid-template-columns:repeat(6, auto);
diff --git a/src/routes/About.js b/src/routes/About.js
@@ -2,6 +2,7 @@ import Navbar from "../components/Navbar";
 import Hero from "../components/Hero";
 import AboutImg from "../assets/5.jpeg"
 import Footer from "../components/Footer";
+import AboutUs from "../components/AboutUs";
 function About (){
     return(
         <>
@@ -12,6 +13,7 @@ function About (){
    title="About"
    btnClass="hide"
    />
+   <AboutUs/>
    <Footer/>
         </>
     )
diff --git a/src/routes/Contact.js b/src/routes/Contact.js
@@ -2,6 +2,7 @@ import Navbar from "../components/Navbar";
 import Hero from "../components/Hero";
 import AboutImg from "../assets/pexels-adrian-falcon-3359250.jpg"
 import Footer from "../components/Footer";
+import ContactForm from "../components/ContactForm";
 function Contact (){
     return(
         <>
@@ -12,6 +13,7 @@ function Contact (){
    title="Contact"
    btnClass="hide"
    />
+   <ContactForm/>
     <Footer/>
 
         </>
