diff --git a/assets/css/index.css b/assets/css/index.css index 8b24776d..9af84959 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -11,132 +11,129 @@ transform: translateY(0); } } -.destinations h1{ - - color: #2f6be5; +/* General Styles */ +* { + box-sizing: border-box; + cursor: url(./assets/images/ads_click_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg), auto; } -.forum_1 -{ - font-family: Arial, sans-serif; + +body { + font-family: 'Arial', sans-serif; margin: 0; - padding: 0; - background-color: rgba(0, 81, 255, 0.543); -} -#discuss_head -{ - color: #000; -} -.hi -{ - background: #35424a; - color: #ffffff; - padding: 10px 0; - text-align: center; + background-color: #f0f0f0; /* Soft background color */ } + +/* Main Container */ main { padding: 20px; } +/* Header Styles */ +.destinations h1 { + color: #2f6be5; + text-align: center; + margin-bottom: 30px; + font-size: 2.5rem; /* Increased font size for prominence */ +} + +/* Post Container */ .post-container { - background: rgba(137, 43, 226, 0.545); + background: white; padding: 20px; - border-radius: 5px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + margin-bottom: 30px; } + +/* Textarea Styles */ textarea { width: 100%; - height: 100px; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; + height: 120px; + padding: 15px; + border: 2px solid #ccc; + border-radius: 8px; + transition: border-color 0.3s; + font-size: 1rem; /* Adjusted for better readability */ +} + +textarea:focus { + border-color: #2f6be5; /* Highlight on focus */ + outline: none; /* Remove default outline */ } +/* Button Styles */ button { - background: #35424a; + background: #2f6be5; color: #ffffff; - padding: 10px; + padding: 12px 20px; border: none; - border-radius: 5px; + border-radius: 8px; cursor: pointer; + transition: background 0.3s, transform 0.2s; + font-size: 1rem; + margin-top: 10px; /* Spacing above the button */ } button:hover { - background: #2c3e50; + background: #1d4f9c; /* Darker shade on hover */ + transform: scale(1.05); /* Slightly increase size on hover */ } +/* Post Styles */ .post { - margin: 10px 0; - padding: 10px; + margin: 15px 0; + padding: 15px; background: #e8e8e8; - border-radius: 5px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + transition: background 0.3s; +} + +.post:hover { + background: #d4d4d4; /* Slightly darker on hover */ } -/* #progressBarContainer { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 5px; - background-color: #f3f3f3; - z-index: 100; -} */ -/* Progress bar itself */ -/* #progressBar { - height: 8px; - width: 0%; - background: #f76b45; -} */ -/* #progressBar { +/* Scroll Button */ +.scroll-btn { + font-size: 20px; + color: #ffffff; position: fixed; - top: 0; - left: 0; - width: 0%; - height: 8px; - background-color: #f76b45; + right: 30px; + bottom: 30px; + width: 50px; + height: 50px; + line-height: 50px; + border-radius: 50%; + background-color: rgb(102, 107, 234); + text-align: center; z-index: 9999; -} */ + transition: background 0.3s, transform 0.2s; +} -* { - cursor: url(./assets/images/ads_click_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg), auto; +.scroll-btn:hover { + background-color: rgb(82, 85, 186); /* Darker shade on hover */ + transform: scale(1.1); /* Slight size increase on hover */ } +/* Additional Styles */ +.hi { + background: #35424a; + color: #ffffff; + padding: 15px; + text-align: center; + border-radius: 8px; + margin-bottom: 20px; /* Space below the header */ +} -/* .scroll-btn{ - position: fixed; - right: 120px; - top: 475px; - z-index: 9999; - color: white; - border: none; - border-radius: 50%; - width: 50px; - height: 50px; - font-size: 20px; - cursor: pointer; - transition: background-color 0.3s; -} */ -.scroll-btn{ -font-size: 20px; -top: 110px; -color: #fff; -position: fixed; -right: 26px; -/* bottom: 1px; */ -width: 47px; -height: 47px; -line-height: 45px; -border-radius: 50%; -/* background: -webkit-linear-gradient(left, #361cc1 0%, #2e82ef 100%); */ -/* background: -o-linear-gradient(left, #361cc1 0%, #2e82ef 100%); */ -background-color: rgb(102, 107, 234); -text-align: center; -z-index: 9999; --webkit-transition: all 0.3s ease-out 0s; --moz-transition: all 0.3s ease-out 0s; --ms-transition: all 0.3s ease-out 0s; --o-transition: all 0.3s ease-out 0s; -transition: all 0.3s ease-out; -bottom: 0.9% !important; +/* Responsive Adjustments */ +@media (max-width: 600px) { + .post-container, .post { + padding: 15px; + } + + button { + width: 100%; /* Full-width buttons on small screens */ + } } .circle {