From 5db34ccb43ec16e558d7f838354ae74250ec1b8b Mon Sep 17 00:00:00 2001 From: UJJWAL SRIVASTAVA <119431039+ujjwalsri1@users.noreply.github.com> Date: Wed, 23 Oct 2024 21:29:39 +0530 Subject: [PATCH] Update style.css Added some additional CSS that you can add to enhance your existing styles. These additions include enhancements for the header navigation, mobile menu, footer, buttons, and responsive adjustments, creating a more interactive and visually appealing design. --- css/style.css | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/css/style.css b/css/style.css index 1322236d..0adf52c4 100644 --- a/css/style.css +++ b/css/style.css @@ -90,6 +90,75 @@ header #logo { float: left; } +/* Additional styles for header navigation */ +header nav a { + transition: color 0.3s, transform 0.3s; +} + +header nav a:hover { + color: #f6e58d; + transform: scale(1.05); +} + +/* Style for mobile menu */ +.navbar .nav-collapse { + background: #d3360b; +} + +.navbar .nav-collapse ul { + padding: 10px 0; +} + +.navbar .nav-collapse li { + padding: 5px 0; +} + +/* Additional footer styles */ +footer { + border-top: 1px solid #ddd; +} + +footer a:hover { + color: var(--highlight); + text-decoration: underline; +} + +/* Button styles */ +.btn { + padding: 10px 15px; + border-radius: 5px; + border: 1px solid transparent; + transition: background-color 0.3s, color 0.3s; +} + +.btn:hover { + background-color: var(--highlight); + color: #fff; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + header { + padding-top: 15px; + } + + nav { + margin: 0; + text-align: center; + } + + nav a { + display: block; + margin: 10px 0; + } +} + +/* Subtle hover effects on list items */ +.guides-list li:hover { + background-color: #f9f9f9; + transition: background-color 0.3s; +} + nav { margin: 0 0 0 250px; }