Hotel cards

src/components/HotelCards/HotelCards.css

@@ -0,0 +1,152 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Sans+Pro:wght@400;700&display=swap");
+
+
+
+
+
+
+
+
+
+
+
+.hotelcards{
+    --ff-primary: "Open Sans", sans-serif;
+  --ff-accent: "Source Sans Pro", sans-serif;
+
+  --clr-neutral-100: #fff;
+  --clr-neutral-300: #ddd;
+  --clr-neutral-500: #555555;
+  --clr-neutral-800: #111827;
+  --clr-primary: #041964;
+
+  --transition: 250ms ease-in-out;
+    display: grid;
+    place-items: center;
+    min-height: 100vh;
+    margin: 0;
+    width: 20rem;
+
+
+    font-family: var(--ff-primary);
+    line-height: 1.5;
+    font-size: 1rem;
+}
+.htlcard {
+  display: grid;
+  position: relative;
+
+  width: min(100% - 2rem, 380px);
+  background-color: var(--clr-neutral-100);
+
+  overflow: hidden;
+  border-radius: 0.8em;
+  box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.1);
+  transition: var(--transition);
+  text-decoration: none;
+  color: inherit;
+}
+
+.htlcard:is(:hover, :focus) {
+  transform: translateY(-5px);
+  box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.1);
+}
+
+.htlcard:focus-visible {
+  outline: 2px dashed;
+  outline-offset: 0.4em;
+}
+
+.htlcard__img-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  aspect-ratio: 16 / 9;
+  max-width: 100%;
+  display: block;
+}
+
+/* image overlay */
+.htlcard__img-container::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  z-index: 1;
+  transition: var(--transition);
+}
+
+
+.htlcard__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.htlcard__body {
+  padding: 1em 1.5em;
+}
+
+.htlcard__title {
+  margin: 0;
+  font-size: clamp(1.4rem, 4vw, 1.7rem);
+  text-transform: capitalize;
+  color: var(--clr-neutral-800);
+  font-family: var(--ff-accent);
+  line-height: 1.1;
+}
+
+.htlcard__date {
+  font-size: 0.875rem;
+  color: var(--clr-neutral-500);
+}
+
+.htlcard__cta {
+  position: relative;
+  width: fit-content;
+  margin-top: auto;
+  color: var(--clr-primary);
+}
+
+/* underline */
+.htlcard__cta::before {
+  content: "";
+  position: absolute;
+  inset: 100% 0 0 0;
+  height: 2px;
+
+  background-color: currentColor;
+  transition: var(--transition);
+  transform-origin: right;
+}
+
+/* right arrow */
+.htlcard__cta::after {
+  content: " →";
+  display: inline-block;
+  margin-left: 5px;
+  transition: var(--transition);
+}
+
+/* image overlay */
+.htlcard:is(:hover, :focus) .htlcard__img-container::before {
+  opacity: 1;
+}
+
+/* remove underline */
+.htlcard:is(:hover, :focus) .htlcard__cta::before {
+  transform: scale(0);
+}
+
+/* move arrow */
+.htlcard:is(:hover, :focus) .htlcard__cta::after {
+  transform: translateX(6px);
+}
+
+/* show tag */
+.htlcard:is(:hover, :focus) .htlcard__tags {
+  opacity: 1;
+}
+

src/components/HotelCards/HotelCards.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import './HotelCards.css'
+function HotelCards({hotel}) {
+  return (
+    <div className='hotelcards'>
+    <a href="/" className="htlcard">
+  <div className="htlcard__img-container">
+    <img className="htlcard__img" src={hotel.hotel_image} alt="unsplash_random_image" />
+
+  </div>
+  <div className="htlcard__body">
+    <h3 className="htlcard__title">{hotel.hotel_name}</h3>
+    <div className='htlp'>
+    <p className="htlcard__date">Near {hotel.near_point}  
+    </p>
+    <p className="htlcard__date">Famous food served here include {hotel.famous_foods} etc
+    </p>
+    </div>
+
+    <p className="htlcard__cta">Read more</p>
+  </div>
+</a>
+    </div>
+  )
+}
+
+export default HotelCards

src/components/Places/PlaceCards.js

@@ -2,7 +2,7 @@ import React,{ useEffect } from 'react'
 import './PlaceCards.css'
 import Aos from 'aos';
 import { useNavigate } from 'react-router-dom'
-function PlaceCards({ key,id,placename, country,placeimage }) {
+function PlaceCards({ id,placename, country,placeimage }) {
   const navigate=useNavigate();
   const navigateTo=()=>{
     navigate(`places/${id}`)

src/pages/PlaceDetailPage/PlaceDetailPage.css

@@ -122,6 +122,15 @@
     background-color: white;
     color: #2B4865 ;
 }
+
+.hotel__div__container
+{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    flex-direction: row;
+}
+
 @media only screen and (max-width: 1300px) {
 
 }

src/pages/PlaceDetailPage/PlaceDetailPage.js

@@ -6,6 +6,7 @@ import { useParams } from 'react-router-dom'
 import BookingComponent from './BookingComponent'
 import axios from 'axios'
 import baseUrl from '../../utils/Urls'
+import HotelCards from '../../components/HotelCards/HotelCards'
 const PlaceDetailPage = () => {
   const[placeName,setPlaceName]=useState('')
   const[placeImage,setPlaceImage]=useState()
@@ -119,19 +120,15 @@ const PlaceDetailPage = () => {
                     </div>
 
                     <div className="place__header_name">Hotels in {placeName}
-                    <ul>
+                    <div className='hotel__div__container'>
                       {hotels.map((hotel)=>
                         hotel.place_foreign===parseInt(id)?
-                          (<li className='flight_details'>
-                            <img src={hotel.hotel_image} alt="" style={{width:'5rem',height:'5rem'}}/>
-                            <p>Hotel Name: {hotel.hotel_name}</p>
-                            <p>Near Point: {hotel.near_point}</p>
-                            <p>Famous Foods: {hotel.famous_foods}</p>
-
-                          </li>
+                          (
+
+                         <HotelCards key={hotel.id} hotel={hotel}/>
                         ):null
                       )}
-                      </ul>
+                      </div>
                     </div>
 
                     </div>