From 71d57e664632dae56646eb3bc078cde3870fcc30 Mon Sep 17 00:00:00 2001 From: Viraj Chandra Date: Sat, 14 Oct 2023 01:03:51 +0530 Subject: [PATCH] format --- src/assets/data/eventsData.js | 2 +- src/components/eventCard/EventCard.css | 155 ++++++++----------------- src/components/eventCard/EventCard.js | 71 +++-------- src/components/timeline/Timeline.css | 1 - src/pages/events/Events.css | 25 ---- src/pages/events/Events.js | 2 - 6 files changed, 66 insertions(+), 190 deletions(-) diff --git a/src/assets/data/eventsData.js b/src/assets/data/eventsData.js index 357f465..541601a 100644 --- a/src/assets/data/eventsData.js +++ b/src/assets/data/eventsData.js @@ -10,7 +10,7 @@ const events = [ link: "https://docs.google.com/forms/d/e/1FAIpQLSes9na9VNj7XOFOUYNh_8sQFDA-gmEA0wK2fAPiUT635yvy_A/viewform", }, { - title: "Graph Programming Camp", + title: "Graph Bootcamp", date: "3th - 6th October", img: event2, link: "", diff --git a/src/components/eventCard/EventCard.css b/src/components/eventCard/EventCard.css index 6d5b163..33c2b79 100644 --- a/src/components/eventCard/EventCard.css +++ b/src/components/eventCard/EventCard.css @@ -1,42 +1,24 @@ .codeutsava__section3-card { - padding: 1.5rem; - background-image: url("../../assets/images/bg-eventCard.webp"); - background-repeat: no-repeat; - background-size: cover; display: flex; - flex-direction: column; - margin: 1.5rem 0; box-sizing: border-box; font-family: "Poppins", sans-serif; + justify-content: center; color: black; - box-shadow: orange 0 0 8px; align-items: center; - justify-content: flex-end; - /* min-width: 350px; */ + gap: 2rem; border-radius: 4px; - background-color: white; -} - -.hotel-view { - border-radius: 30px; width: 100%; - height: 90vh; - background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"); - background-size: cover; - overflow: hidden; padding: 5em 0; position: relative; - display: flex; - align-items: center; - justify-content: space-between; + background-color: #b079c11d; + backdrop-filter: blur(10px); } -.hotel-view .arrows { +.arrows { width: 100%; height: 30%; position: absolute; top: 50%; - left: -1%; transform: translateY(-50%); display: flex; align-items: center; @@ -44,30 +26,29 @@ justify-content: space-between; } -.hotel-view .gallery { - border-right: 1px solid #fff; - width: 45%; +.gallery { + width: 30%; height: 100%; display: flex; align-items: center; justify-content: center; } -.gallery .gallery-viewer { - width: 80%; - height: 80%; - overflow: hidden; - position: relative; - display: flex; - align-items: center; - cursor: pointer; +.line-gallery{ + width: 1px; + border-right: 1px solid white; + height: 110%; +} + +.gallery-viewer { + width: 400px; + height: 400px; } .gallery-viewer img { - margin: 2em; height: 100%; + width: auto; object-fit: cover; - border-radius: 25px; transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 1s; } @@ -94,14 +75,13 @@ object-fit: cover; } -.hotel-view .dets { - width: 55%; +.dets { + width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; - padding: 0 3.5em; } .gallery img { @@ -118,13 +98,13 @@ height: 40%; display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; + text-wrap: wrap; justify-content: space-between; } .dets .dets-bottom { height: 45%; - width: 110%; display: flex; flex-direction: column; justify-content: space-between; @@ -132,7 +112,6 @@ } .dets-top .restaurant-ki-list { - width: 110%; height: 50%; overflow: hidden; } @@ -143,7 +122,6 @@ } .restaurant-ki-list h1 { - font-family: "Playfair Display"; font-size: 4vmax; /* word-wrap: nowrap; */ color: #ffffff; @@ -152,12 +130,10 @@ } .dets .res-desc { - width: 110%; height: 40%; } .res-desc h5 { - font-family: "Gilroy"; color: #ffffff; font-size: 16px; font-weight: 400; @@ -171,19 +147,6 @@ justify-content: space-between; } -.dets-bottom .book-now { - position: relative; - z-index: 5; - width: 10vw; - border-radius: 20px; - height: 6vh; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffffff; - cursor: pointer; -} - .details .head-blocks { height: 100%; border-right: 1px solid white; @@ -191,34 +154,22 @@ flex-direction: column; justify-content: space-evenly; align-items: left; - padding: 0 0 0 0.5em; -} - -.details .rating { - width: 25%; -} - -.details .price { - width: 35%; } .details .dimension { width: 40%; } - .details .dimension { border-right: none; } .head-blocks > h1 { - font-family: "Gilroy"; color: #ffffff; font-weight: 100; font-size: 20px; } .vals h1 { - font-family: "Sawarabi Mincho"; font-weight: normal; font-size: 30px; white-space: nowrap; @@ -230,7 +181,6 @@ } .book-now h3 { - font-family: "Gilroy"; font-weight: 400; color: burlywood; text-align: center; @@ -254,6 +204,28 @@ height: 45%; } +.codeutsava__events-register-link { + background-color: var(--secondary-c); + border: 1px solid var(--secondary-c); + border-radius: 4px; + box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0; + box-sizing: border-box; + color: #fff; + cursor: pointer; + font-family: inherit; + font-size: 16px; + font-weight: 400; + padding: 10px 25px; + text-align: center; + transform: translateY(0); + transition: transform 150ms, box-shadow 150ms; +} + +.codeutsava__events-register-link:hover { + box-shadow: rgba(0, 0, 0, 0.15) 0 3px 9px 0; + transform: translateY(-2px); +} + @media screen and (max-width: 850px) { .codeutsava__section3-decor-web { width: 50px; @@ -263,6 +235,9 @@ left: 210px; z-index: 2; } + .codeutsava__section3-card{ + flex-direction: column; + } } .codeutsava__section3-decor-web img { @@ -398,23 +373,7 @@ box-sizing: border-box; } - .hotel-view { - padding: 1em; - border-radius: 30px; - width: 100%; - height: 85vh; - background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"); - background-size: cover; - overflow: hidden; - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - gap: 2em; - } - - .hotel-view .arrows { + .arrows { width: 100%; height: 8%; position: absolute; @@ -427,7 +386,7 @@ justify-content: space-between; } - .hotel-view .gallery { + .gallery { border: none; width: 100%; height: 30vh; @@ -477,9 +436,8 @@ object-fit: cover; } - .hotel-view .dets { + .dets { width: 100%; - /* background-color: red; */ height: 100%; display: flex; flex-direction: column; @@ -489,11 +447,9 @@ .dets .dets-section { width: 100%; - /* background-color: red; */ } .dets .dets-top { - /* background-color: red; */ width: 88vw; display: flex; flex-direction: column; @@ -504,7 +460,6 @@ .dets .dets-bottom { height: 50%; width: 88vw; - /* background-color: red; */ display: flex; flex-direction: column; justify-content: space-evenly; @@ -521,23 +476,19 @@ } .restaurant-ki-list h1 { - font-family: "Playfair Display"; font-size: 4.6vmax; color: #ffffff; font-weight: 600; white-space: nowrap; text-align: center; - /* background-color: red; */ } .dets .res-desc { width: 85%; height: 60%; - /* background-color: red; */ } .res-desc h5 { - font-family: "Gilroy"; color: #ffffff; font-size: 15px; font-weight: 400; @@ -546,7 +497,6 @@ .dets-bottom .details { width: 100%; - /* background-color: red; */ display: flex; flex-direction: column; align-items: center; @@ -564,7 +514,6 @@ } .details .head-blocks { - /* background-color: red; */ border: none; width: 100%; display: flex; @@ -577,24 +526,20 @@ .details .dimension { border-right: none; - /* background-color: red; */ } .head-blocks > h1 { - font-family: "Gilroy"; color: #ffffff; font-weight: 100; font-size: 20px; } .vals { - /* background-color: red; */ display: flex; align-items: center; justify-content: center; } .vals h1 { - font-family: "Sawarabi Mincho"; font-weight: normal; font-size: 30px; text-align: center; @@ -622,5 +567,5 @@ overflow: hidden; width: 100%; height: 100%; - } + } } diff --git a/src/components/eventCard/EventCard.js b/src/components/eventCard/EventCard.js index 2a785ce..d197c78 100644 --- a/src/components/eventCard/EventCard.js +++ b/src/components/eventCard/EventCard.js @@ -1,9 +1,8 @@ import leftarrow from "../../assets/images/left-arrow.png"; import rightarrow from "../../assets/images/finalarrowright.png"; import "./EventCard.css"; -import { gsap, Expo } from "gsap"; import EventsData from "../../assets/data/eventsData"; -import { useLayoutEffect, useRef, useState } from "react"; +import { useState } from "react"; export const EventCard = () => { const [index, setIndex] = useState(0); @@ -11,42 +10,13 @@ export const EventCard = () => { if (index === 0) setIndex(EventsData.length - 1); else setIndex(index - 1); }; - const rightBtnClick = () => { if (index === EventsData.length - 1) setIndex(0); else setIndex(index + 1); }; - // GSAP Animations - const eventName = useRef(); - const rating = useRef(); - const price = useRef(); - const dims = useRef(); - const eventImage = useRef(); - const desc = useRef(); - - useLayoutEffect(() => { - gsap.fromTo( - [eventName.current, rating.current, price.current, dims.current], - { y: -100, ease: Expo.easeInOut }, - { y: 0, ease: Expo.easeInOut, duration: 1 } - ); - - gsap.fromTo( - eventImage.current, - { xPercent: -100, ease: Expo.easeInOut }, - { xPercent: 0, ease: Expo.easeInOut, duration: 1 } - ); - - gsap.fromTo( - desc.current, - { opacity: 0, ease: Expo.easeInOut }, - { opacity: 1, ease: Expo.easeInOut, duration: 1.5 } - ); - }); - return ( -
+
leftBtnClick()}> @@ -60,45 +30,34 @@ export const EventCard = () => {
+

{EventsData[index].title}

-
{EventsData[index].link}
+
{EventsData[index].link}
-
-

RATING

-
- {/*

{EventsData[index].date}

*/} -
-
-
-

PRICE

-
-

- {/* {EventsData[index].} */} - /day -

-
-
-

DATE

+

DATE

-

- {EventsData[index].date} - {/* sq.ft. */} -

+

{EventsData[index].date}

-
-

Book now

-
+ + Register Now +
diff --git a/src/components/timeline/Timeline.css b/src/components/timeline/Timeline.css index 2c6c1bb..5c0090f 100644 --- a/src/components/timeline/Timeline.css +++ b/src/components/timeline/Timeline.css @@ -7,7 +7,6 @@ color: white !important; } - #description { margin: 1.5em 0 2em 0; } diff --git a/src/pages/events/Events.css b/src/pages/events/Events.css index ef24e2b..b86cfe4 100644 --- a/src/pages/events/Events.css +++ b/src/pages/events/Events.css @@ -44,15 +44,6 @@ /* background-color: red; */ } -.page-3 { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - position: relative; -} - /* .codeutsava__section3-events-container::-webkit-scrollbar{ display: none; } */ @@ -64,22 +55,6 @@ overflow-y: visible; } -.slick-prev:before, -.slick-next:before { - display: none; -} - -.slick-list { - overflow-y: hidden !important; -} - -.codeutsava__section3-events-container .slider .slick-arrow .slick-prev button { - display: none; -} -.codeutsava__section3-events-container .slider .slick-list .slick-slide > div { - padding: 0 35px; -} - @media (min-width: 1024px) { .codeutsava__section3-events-container .slider diff --git a/src/pages/events/Events.js b/src/pages/events/Events.js index 97539dd..ae985a3 100644 --- a/src/pages/events/Events.js +++ b/src/pages/events/Events.js @@ -52,9 +52,7 @@ const Events = () => { link={event.link} /> // ))} */} -
-