From 14cd0bd988a85cdd1b58714fb32759d611746845 Mon Sep 17 00:00:00 2001 From: yr1404 Date: Sun, 20 Oct 2024 20:14:40 +0530 Subject: [PATCH 1/2] Created consistent design for the sports activity page --- src/App.css | 10 +++++----- src/assets/styles/ImageSlider.css | 1 + src/assets/styles/Sport.css | 8 +++++--- src/assets/styles/SportsList.css | 3 ++- src/components/Sport.js | 2 +- 5 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/App.css b/src/App.css index d9deba6..45d00f7 100644 --- a/src/App.css +++ b/src/App.css @@ -85,29 +85,29 @@ header nav ul li { } -.movie-list { +.movie-list, .sport-list { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; align-items: center; } -.movie { +.movie, .sport { border-radius: 5px; text-align: center; } -.movie h2 { +.movie h2, .sport h2 { font-size: 15px; margin: 0.5rem 0; } -.movie p { +.movie p, .sport p { font-size: 14px; color: #555; } -.movie button { +.movie button, .sport button { background-color: #ff0000; border: none; color: white; diff --git a/src/assets/styles/ImageSlider.css b/src/assets/styles/ImageSlider.css index 119af77..1a0f1fd 100644 --- a/src/assets/styles/ImageSlider.css +++ b/src/assets/styles/ImageSlider.css @@ -4,6 +4,7 @@ position: relative; top: 75px; min-height: 45vh; + overflow: hidden; } .slick-slide { diff --git a/src/assets/styles/Sport.css b/src/assets/styles/Sport.css index 1ea0869..c8a149c 100644 --- a/src/assets/styles/Sport.css +++ b/src/assets/styles/Sport.css @@ -35,11 +35,13 @@ .sport-ranking { position: absolute; text-align: left; - bottom: 100px; + display: flex; + align-items: center; + bottom: 114px; width: 230px; color: var(--text-color); background-color: rgba(0, 0, 0, 0.8); - padding: 10px; + padding: 5px; border-radius: 0 0 5px 5px; font-size: 14px; font-weight: bold; @@ -54,7 +56,7 @@ font-size: 12px; } -.participants { +.participants-inlist { font-size: 12px; color: var(--text-color); } diff --git a/src/assets/styles/SportsList.css b/src/assets/styles/SportsList.css index 3d5c411..b330cd8 100644 --- a/src/assets/styles/SportsList.css +++ b/src/assets/styles/SportsList.css @@ -12,9 +12,10 @@ min-height: 100vh; margin-inline: auto; position: relative; + flex-wrap: wrap; padding: 10px; - margin-bottom: 100px; + /* margin-bottom: 100px; */ } .sport-list::-webkit-scrollbar { diff --git a/src/components/Sport.js b/src/components/Sport.js index 776f6d6..7e4a87a 100644 --- a/src/components/Sport.js +++ b/src/components/Sport.js @@ -9,7 +9,7 @@ function Sport({ id, image, name, ranking, participants, category }) {

🏅 {ranking} - ({participants} Participants) +  ({participants} Participants)

{name}

{category}

From eb51e7bef965f622bfeb4cf1d06dc8d85b177e2b Mon Sep 17 00:00:00 2001 From: yr1404 Date: Sun, 20 Oct 2024 21:55:49 +0530 Subject: [PATCH 2/2] styled sports details page --- src/assets/styles/Sport.css | 2 +- src/assets/styles/SportsDetails.css | 313 +++++++++++++++------------- src/components/SportsDetails.js | 50 ++--- 3 files changed, 192 insertions(+), 173 deletions(-) diff --git a/src/assets/styles/Sport.css b/src/assets/styles/Sport.css index c8a149c..e101460 100644 --- a/src/assets/styles/Sport.css +++ b/src/assets/styles/Sport.css @@ -64,7 +64,7 @@ .sport-name { font-size: 20px; text-align: left; - margin: 15px 0 5px 10px; + /* margin: 15px 0 5px 10px; */ font-weight: bold; color: #333; } diff --git a/src/assets/styles/SportsDetails.css b/src/assets/styles/SportsDetails.css index 59990ac..f97cb77 100644 --- a/src/assets/styles/SportsDetails.css +++ b/src/assets/styles/SportsDetails.css @@ -1,163 +1,180 @@ /* 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; +} + +/* 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 { + 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); + overflow: hidden; +} + +.sub-container { + display: flex; + padding-bottom: 100px; + gap: 10%; +} + + +.right-section { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +/* Sport Image */ +.sport-image img { + width: 500px; + height: 400px; + object-fit: cover; + border-radius: 15px; + 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; + border-radius: 10px; + width: fit-content; + font-weight: bold; +} + +/* 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; + width: 100%; } - - .left-section, - .right-section { - display: flex; + + .sub-container { flex-direction: column; align-items: center; + padding-bottom: 0; } - - /* Sport Image */ - .sport-image img { - 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; - } - - /* Carousel Styles */ - .carousel-container { - margin: 20px 0; - } - - .participant-member, - .photo { + + .right-section { + align-items: center; 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; + + .sport-image img { + width: 80vw; + height: auto; } - - /* 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 +} \ No newline at end of file diff --git a/src/components/SportsDetails.js b/src/components/SportsDetails.js index dcaff7e..6809dc0 100644 --- a/src/components/SportsDetails.js +++ b/src/components/SportsDetails.js @@ -102,36 +102,38 @@ const SportDetails = () => { <>
-
-
-
- {`${sport.name}`} -
-
-
-
-
{sport.name}
-
- Ranking: {sport.ranking} +
+
+
+
+ {`${sport.name}`}
-
- Participants: {sport.participants} -
-
- Category: {sport.category} +
+
+
{sport.name}
+
+ Ranking: {sport.ranking} +
+
+
+ Participants: {sport.participants} +
+
+ Category: {sport.category} +
- +
- - - - - - -
+ + + + + + +