Merge pull request #51 from Srijita-Mandal/about

#36 Added about us section
aman34503 · Feb 23, 2022 · f4a3aaf · f4a3aaf
2 parents 57fb409 + b04bfe9
commit f4a3aaf
Show file tree

Hide file tree

Showing 10 changed files with 219 additions and 23,072 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^5.1.3",
     "date-fns": "^2.23.0",
     "material-ui": "^1.0.0-beta.47",
     "react": "^17.0.2",

diff --git a/src/Banner.css b/src/Banner.css
@@ -7,7 +7,7 @@
     width: 100%;
     background-position: center;
     background-size: cover;
-    margin-bottom: 30px;
+    /* margin-bottom: 30px; */
     padding-bottom: 40px;
   }
 
@@ -19,6 +19,7 @@
     width: 35%;
     height: auto;
     margin-top: 100px;
+    margin-bottom: 40px;
     margin-left: auto;
     margin-right: auto;
     overflow-wrap: break-word;  
@@ -98,7 +99,7 @@
   @media (max-width: 750px){
     .banner__info{
       width: 40%;
-      padding: 9vh 30px 30px 30px; 
+      padding: 14vh 30px 30px 30px; 
     }
     .banner__info > button{
       margin-top: 20px;
@@ -109,6 +110,19 @@
   @media (max-width: 520px){
     .banner__info{
       width: 45%;
-      padding: 9vh 30px 30px 30px; 
+      padding: 14vh 30px 30px 30px; 
     }
   }
+
+  @media (max-width: 480px){
+    .banner{
+      width: 100%;
+
+    }
+    .banner__info{
+      padding: 14vh 30px 30px 30px;
+      width: 50%;
+
+    }
+
+  }
diff --git a/src/Card.css b/src/Card.css
@@ -1,7 +1,11 @@
 .card {
     width: 30%;
-    margin: 10px;
+    /* margin: 10px; */
+    margin-left: 10%;
+    margin-right: 3%;
+    margin-bottom: 35px;
     border-radius: 10px;
+    height: 275px;
     overflow: hidden;
     box-shadow: 0px 6px 18px -9px rgba(0, 0, 0, 0.75);
     transition: transform 100ms ease-in;
@@ -14,12 +18,14 @@
 
   .card > img {
     object-fit: fill;
-    min-width: 300px;
-    min-height: 200px;
+    /* min-width: 300px; */
     width: 100%;
+    /* min-height: 200px; */
+    width: 100%;
+    height: 100%;
   }
 
-  .card__info {
+  /* .card__info {
       margin-top: -9px;
       border-radius: 10px;
       padding: 20px;
@@ -37,16 +43,32 @@
       font-weight: 300;
       margin-top: 8px;
       margin-bottom: 8px;
-    }
+    } */
 
 @media screen and (max-width: 750px){
   .card{
-    width: 40%;
+    width: 70%;
+    margin-left: 7%;
+    margin-right: 7%;
+  }
+  h4{
+    width: 75%;
+    margin-bottom: 35px;
+    margin-left: 10%;
+    margin-right: 10%;
   }
 }
 
-@media screen and (max-width: 500px){
+@media screen and (max-width: 480px){
   .card{
+    width: 75%;
+    margin-left: 7%;
+    margin-right: 7%;
+  }
+  h4{
     width: 80%;
+    margin-bottom: 30px;
+    margin-left: 10%;
+    margin-right: 10%;
   }
-}
+}
diff --git a/src/Card.js b/src/Card.js
@@ -3,14 +3,17 @@ import './Card.css'
 
 function Card({ src, title, description, price }) {
     return (
+        <>
         <div className='card'>
             <img src={src} alt="" />
-            <div className="card__info">
+            {/* <div className="card__info">
                 <h2>{title}</h2>
                 <h4>{description}</h4>
                 <h3>{price}</h3>
-            </div>
+            </div> */}
         </div>
+
+        </>
     )
 }
 

diff --git a/src/Footer.js b/src/Footer.js
@@ -36,7 +36,7 @@ function Footer() {
     <h3 class="col-title">Company</h3>
     <nav class="col-list">
       <ul>
-        <li><a href="#">About Us</a></li>
+        <li><a href="#welcome_title">About Us</a></li>
         <li><a href="#">Sustainability</a></li>
         <li><a href="#">Terms of Service</a></li>
         <li><a href="#">Privacy</a></li>

diff --git a/src/Header.css b/src/Header.css
@@ -40,3 +40,9 @@
     width: 15vw;
     margin-right: 80px;
   }
+
+  @media (max-width: 480px){
+    .header{
+      width: 100%;
+    }
+  }
diff --git a/src/Home.css b/src/Home.css
@@ -5,6 +5,98 @@
     justify-content: center;
   }
 
+#welcome_title{
+  color: #ff7779;
+  background-color: #f0f0f0;
+  padding-top: 40px;
+}
+
+#welcome{
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding-top: 30px;
+  padding-bottom: 25px;
+  padding-left: 13%;
+  padding-right: 13%;
+  background-color: #f0f0f0;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+#welcome_key{
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 13%;
+  padding-right: 13%;
+  /* background-color: #e9e9e9; */
+  color: #ff7779;
+  font-weight: bold;
+  font-size: 22px;
+  line-height: 28px;
+}
+
+.welcome_list{
+  /* display: flex;
+  justify-content: center;
+  text-align: center; */
+  font-size: 19px;
+  line-height: 28px;
+  padding-left: 15%;
+  padding-right: 15%;
+  padding-bottom: 50px;
+}
+
+#service_header{
+  color: #ff7779;
+  padding-bottom: 30px;
+}
+
+h4{
+  margin-left: 2%;
+  margin-right: 10%;
+  width: 30%;
+  font-weight:normal;
+  letter-spacing: 0.5px;
+  line-height: 24px;
+}
+
+h4 span{
+  font-size: 22px;
+  font-weight: 600;
+}
+
+button{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-weight: 400;
+  background-color: #ff7779;
+  color: white;
+  margin-right: auto;
+  margin-left: auto;
+  font-size: 18px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 18px;
+  padding-right: 18px;
+  border: #ff7779 solid 2px;
+  border-radius: 25px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+  cursor: pointer;
+}
+
+button:hover{
+  background-color: white;
+  color: #ff7779;
+  border: #ff7779 solid 2px;
+}
+
 /* For Mobile Phones Portrait or Landscape View
 @media screen and (max-device-width: 640px) {
   .home__section {

diff --git a/src/Home.js b/src/Home.js
@@ -1,4 +1,5 @@
 import React from 'react';
+// import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import './Home.css';
 import Banner from './Banner'
 import Card from './Card'
@@ -10,24 +11,61 @@ function Home() {
         <div className='home'>
             <Banner />
 
+            <h1 id="welcome_title"align="center">Welcome to Go-Airbnb</h1> 
+
+            <p id='welcome'>Go-Airbnb is an online marketplace that connects people who want to rent out their homes with people who are looking for accommodations in specific locales. On one side, the platform enables people to list their available space and earn extra income in the form of rent. On the other, Airbnb enables travelers to book unique homestays from local hosts, saving them money and giving them a chance to interact with locals.<br/><br/>
+            The company has come a long way since 2007, when its co-founders first came up with the idea to invite paying guests to sleep on an air mattress in their living room. According to Airbnb's latest data, it has in excess of 5.6 million listings, covering more than 100,000 cities and towns and 220-plus countries worldwide.<br/><br/></p>
+            <p id='welcome_key'>KEY TAKEAWAYS:</p>
+            <ul className='welcome_list'>
+                <li>Airbnb offers people an easy, relatively stress-free way to earn some income from their property.</li>
+                <li>Guests often find Airbnb is cheaper, has more character, and is homier than hotels.</li>
+                <li>Airbnb makes the bulk of its revenue by charging a service fee for each booking.</li>
+                <li>Cons of using this service include not getting what you expected, and, for hosts, renting your place to someone you haven’t had the chance to meet first.</li>
+            </ul>
+
+            <h1 id='service_header' align="center">Top services</h1>
             <div className='home__section'>
+
             <Card
                 src="https://a0.muscache.com/im/pictures/eb9c7c6a-ee33-414a-b1ba-14e8860d59b3.jpg?im_w=720"
                 title="Online Experiences"
                 description="Unique activities we can do together, led by a world of hosts."
             />
+            <h4><span>Online Experiences</span><br/><br/>
+            Join a live Online Experience to learn about a range of hosting topics. Successful, experienced Hosts and other experts will share insights and tips, and answer your top questions in real time. 
+             Plan a trip with tips from a local. Video chat with a local Host who knows your dream destination inside out. They’ll find out what you’re into and provide an insider’s perspective with personalised ideas and recommendations to help inspire your plans.</h4>
+
             <Card
                 src="https://a0.muscache.com/im/pictures/15159c9c-9cf1-400e-b809-4e13f286fa38.jpg?im_w=720"
                 title="Unique stays"
                 description="Spaces that are more than just a place to sleep."
             />
+            <h4><span>Unique stays</span><br/><br/>
+            A unique opportunity to have an unforgettable experience will give you a stay in Unique stays. Take the opportunity of amazing Treehouse, Igloo in icelands, Domehouse on mountain top, Tent in forests, hills,
+            Traditional Lumbung Bungalow, modern EcoPod, wooden cottages, garden house, boat house, bamboo villa in jungle, luxurious earth house, bubble dome, trulli-the stone houses, castles, yurts and much more. Do explore and experience. </h4>
+
             <Card
                 src="https://a0.muscache.com/im/pictures/fdb46962-10c1-45fc-a228-d0b055411448.jpg?im_w=720"
                 title="Entire homes"
                 description="Comfortable private places, with room for friends or family."
             />
+            <h4><span>Entire Homes</span><br/><br/>
+            Comfortable private places, with room for friends or family. Enjoy the entire home on your trip with all safeties of Covid. With kitchen, free wi-fi, Free parking on premises, TV, washing machine, dryer, Air conditioning facility,
+            pool, rooftop, little park, playstation, smoke alarm etc. feel your own home. You can also choose you hosue among multiple options and wide range. </h4>
+
+            <Card
+                src="https://images.unsplash.com/photo-1610192244261-3f33de3f55e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80"
+                title="Entire homes"
+                description="Comfortable private places, with room for friends or family."
+            />
+            <h4><span>Best trip experiences</span><br/><br/>
+            Have a superb experience of local things and heritages of your trip area. Visit markets, special places, enjoy street foods & drinks, sunrise and sunsets, local musics, traditional foods & dresses, art & culture, sports etc. Meet local peoples,be familiar with their lifestyles.
+            Get to know specific historical and geographical as well as cultural significance of a place.</h4>
+
             </div>
-            <div className='home__section'>
+
+            <button>Explore more ▶ </button>
+            {/* <div className='home__section'>
             <Card
                 src="https://media.nomadicmatt.com/2019/airbnb_breakup3.jpg"
                 title="3 Bedroom Flat in Bournemouth"
@@ -46,7 +84,7 @@ function Home() {
                 description="Superhost with great amenities and a fabolous shopping complex nearby"
                 price="£70/night"
             />
-            </div>
+            </div> */}
         </div>
     )
 }

diff --git a/src/trip_exp.jpg b/src/trip_exp.jpg