From 1a279ce9ab6465582ad7e09255c212b032511525 Mon Sep 17 00:00:00 2001 From: Mahaveer Gurjar Date: Sun, 20 Oct 2024 14:57:09 +0530 Subject: [PATCH 1/3] Update ImageSlider.css --- src/assets/styles/ImageSlider.css | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/assets/styles/ImageSlider.css b/src/assets/styles/ImageSlider.css index 119af77..8d922be 100644 --- a/src/assets/styles/ImageSlider.css +++ b/src/assets/styles/ImageSlider.css @@ -7,11 +7,11 @@ } .slick-slide { - padding: 0 5px; + padding: 0 5px; } .slick-list { - overflow: visible; + overflow: visible; } .slick-track { @@ -36,21 +36,28 @@ padding: 10px; cursor: pointer; z-index: 1; + opacity: 0; + transition: opacity 0.3s ease; +} + +.slider-container:hover .custom-arrow { + opacity: 1; } .custom-prev { - left: 20px; + left: 20px; } .custom-next { - right: 20px; + right: 20px; } -.slick-prev, .slick-next { +.slick-prev, +.slick-next { display: none !important; } .slick-dots li button:before { font-size: 12px; - color: rgb(26, 23, 23); + color: rgb(26, 23, 23); } From 36c60545c3c9a7b98468e6180346283c0d93f79b Mon Sep 17 00:00:00 2001 From: Mahaveer Gurjar Date: Sun, 20 Oct 2024 14:57:35 +0530 Subject: [PATCH 2/3] Update SportsDetails.css --- src/assets/styles/SportsDetails.css | 327 +++++++++++++++------------- 1 file changed, 177 insertions(+), 150 deletions(-) diff --git a/src/assets/styles/SportsDetails.css b/src/assets/styles/SportsDetails.css index 59990ac..3e0ae11 100644 --- a/src/assets/styles/SportsDetails.css +++ b/src/assets/styles/SportsDetails.css @@ -1,163 +1,190 @@ /* Global Styles */ body { - font-family: 'Roboto', sans-serif; - line-height: 1.6; - color: #333; - background-color: #f4f4f4; - } - - /* Header and Footer Styles */ - header, - footer { - background-color: #222; - color: #fff; - padding: 1.5em; - text-align: center; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - } - - footer { - margin-top: 40px; - } - - /* Sports Details Container */ + font-family: 'Roboto', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f4f4f4; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Header and Footer Styles */ +header, +footer { + background-color: #222; + color: #fff; + padding: 1.5em; + text-align: center; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +footer { + margin-top: 40px; +} + +/* Sports Details Container */ +.sports-details-container { + max-width: 800px; + margin: 40px auto; + padding: 25px; + background-color: #ded0d0; + border-radius: 15px; + border: 1px solid #ddd; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +/* Left and Right Sections */ +.left-section, +.right-section { + display: flex; + flex-direction: column; + align-items: center; +} + +/* Sport Image */ +.sport-image img { + margin-top: 20px; + width: 100%; + max-width: 300px; + height: auto; + border-radius: 5%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.sport-image img:hover { + transform: scale(1.05); +} + +/* Sport Info */ +.sport-name { + font-size: 30px; + font-weight: bold; + margin-bottom: 15px; + color: #2c3e50; +} + +.sport-category { + font-size: 16px; + color: #7f8c8d; + margin-bottom: 20px; +} + +.sport-ranking{ + position:static; + height: 40px; + width: 90%; + font-size: 14px; + border-radius: 8px; + justify-content: center; +} + +.participants { + font-size: 14px; + color: #fbff00; + margin-top: 10px; + margin-bottom: 15px; + margin-left: 5px; + font-weight: 500; + background-color: #000000; + padding: 5px 10px; + border-radius: 8px; + /* display: inline-block; */ + /* To make sure it wraps neatly */ +} + +/* Carousel Styles */ +.carousel-container { + margin: 20px 0; +} + +.participant-member, +.photo { + text-align: center; + margin: 10px; +} + +.participant-member img, +.photo img { + width: 110px; + height: 110px; + border-radius: 50%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.participant-member img:hover, +.photo img:hover { + transform: scale(1.1); +} + +/* Sport Trailer */ +.sport-trailer iframe { + border-radius: 15px; + width: 100%; + max-width: 700px; + max-height: 390px; +} + +/* Button Styles */ +.buttons-sec { + margin-top: 30px; + display: flex; + justify-content: space-between; + gap: 10px; +} + +.book-tickets-button, +.back-button { + padding: 10px 20px; + background-color: #2980b9; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.book-tickets-button:hover, +.back-button:hover { + background-color: #3498db; +} + +/* Media Queries */ +@media (max-width: 768px) { .sports-details-container { - max-width: 800px; - margin: 40px auto; - padding: 25px; - background-color: #fff; - border-radius: 15px; - border: 1px solid #ddd; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px; - } - - .left-section, - .right-section { - display: flex; - flex-direction: column; - align-items: center; + grid-template-columns: 1fr; } - - /* Sport Image */ + .sport-image img { + margin-top: 10px; width: 100%; - max-width: 300px; height: auto; - object-fit: cover; - transition: transform 0.3s ease; - } - - .sport-image img:hover { - transform: scale(1.05); - } - - /* Sport Info */ - .sport-name { - font-size: 30px; - font-weight: bold; - margin-bottom: 15px; - color: #2c3e50; - } - - .sport-category { - font-size: 16px; - color: #7f8c8d; - margin-bottom: 20px; - } - - .sport-ranking, - .participants { - font-size: 18px; - margin-bottom: 15px; - } - - .participants { - background-color: black; - color: yellow; - padding: 10px; - width: fit-content; - font-weight: bold; + border-radius: 5%; + } - - /* Carousel Styles */ - .carousel-container { - margin: 20px 0; - } - - .participant-member, - .photo { - text-align: center; - margin: 10px; - } - - .participant-member img, - .photo img { - width: 110px; - height: 110px; - border-radius: 50%; - object-fit: cover; - transition: transform 0.3s ease; - } - - .participant-member img:hover, - .photo img:hover { - transform: scale(1.1); - } - - /* Sport Trailer */ - .sport-trailer iframe { - border-radius: 15px; - width: 100%; - max-width: 700px; - max-height: 390px; - } - - /* Button Styles */ + .buttons-sec { - margin-top: 30px; - display: flex; - justify-content: space-between; - gap: 10px; + flex-direction: column; + align-items: center; } - + .book-tickets-button, .back-button { - padding: 10px 20px; - background-color: #2980b9; - color: #fff; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; - } - - .book-tickets-button:hover, - .back-button:hover { - background-color: #3498db; - } - - /* Media Queries */ - @media (max-width: 768px) { - .sports-details-container { - grid-template-columns: 1fr; - } - - .sport-image img { - width: 100%; - height: auto; - } - - .buttons-sec { - flex-direction: column; - align-items: center; - } - - .book-tickets-button, - .back-button { - width: 100%; - } + width: 100%; } - \ No newline at end of file +} + +/* Small Fixes for Alignment and Consistency */ +.sports-details-container { + box-sizing: border-box; +} + +.buttons-sec button { + margin-bottom: 10px; + /* Ensure spacing between buttons on mobile */ +} From f7e20aedb28be652b32435b4339d53ff7f7d1451 Mon Sep 17 00:00:00 2001 From: Mahaveer Gurjar Date: Sun, 20 Oct 2024 14:57:55 +0530 Subject: [PATCH 3/3] Update SportsList.css --- src/assets/styles/SportsList.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/styles/SportsList.css b/src/assets/styles/SportsList.css index 3d5c411..09ce446 100644 --- a/src/assets/styles/SportsList.css +++ b/src/assets/styles/SportsList.css @@ -4,7 +4,7 @@ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; - gap: 10px; + gap: 5%; justify-content: center; align-items: center; @@ -33,4 +33,4 @@ top: 0px; margin-bottom: -45px; } - } \ No newline at end of file + }