/* Basic reset */*{margin:0;padding:0;box-sizing:border-box;}:root{--base-green:hsl(120,10%,40%);/* Base green color - slightly muted for a more professional feel *//* Variations based on navbar-background */--navbar-background:hsl(120,40%,28%);/* Darker green for navbar */--navbar-background-light:hsl(20,4%,3%);/* Slightly lighter variation for subtle contrasts */--hover-background:hsl(120,40%,35%);/* Darker green on hover for better interaction */--button-background:var(--base-green);/* Green button */--button-hover-background:hsl(120,50%,50%);/* Slightly darker green on button hover *//* Background and text colors */--background-color:hsl(210,20%,95%);/* Light background for a clean look */--navbar-text-color:hsl(0,0%,100%);/* White text for navbar *//* Header and card colors */--header-color:hsl(120,45%,40%);/* A bit muted medium green for headers */--header-background:hsl(120,40%,25%);/* Darker background for header sections */--card-background:hsl(0,0%,100%);/* White for product cards */--card-title-color:hsl(120,30%,15%);/* Darker green for card titles, enhancing readability */--card-description-color:hsl(120,30%,35%);/* Dim green for descriptions *//* Price color */--price-color:hsl(120,50%,40%);/* Lighter green for prices, ensuring visibility *//* Accent colors */--accent-color:hsl(30,100%,50%);/* A warm orange for call-to-action elements */--warning-color:hsl(0,100%,50%);/* Red for errors or warnings *//* Additional variations for interaction */--dropdown-background:hsl(120,40%,30%);/* Background for dropdown menus */--input-background:hsl(210,20%,100%);/* Light background for inputs */--input-border-color:hsl(120,40%,40%);/* Border color for input fields */}/* Body styles */body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;background-color:var(--background-color);color:#333;/* Text color */}/* Parallax Section */.parallax{background-image:url('https://images.pexels.com/photos/338936/pexels-photo-338936.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');/* Replace with your image URL */height:400px;/* Height of the parallax section */background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;display:flex;justify-content:center;align-items:center;}.logo-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}.logo-image{width:150px;height:150px;opacity:0.9;/* Slight transparency for effect */box-shadow:04px10pxrgba(0,0,0,0.3);/* Adds a shadow for better contrast */position:relative;top:1.5rem}/* Optional Parallax Overlay Text Styling */.parallaxh2{color:white;font-size:2.5rem;text-align:center;text-shadow:2px2px4pxrgba(0,0,0,0.5);z-index:1;}/* Body styles */body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;background-color:var(--background-color);color:#333;/* Text color */margin:0;}h1{margin-top:4rem;}/* Navbar styling */.navbar-container{width:100%;display:flex;justify-content:center;position:fixed;top:0;z-index:1000;background-color:var(--navbar-background);box-shadow:04px6pxrgba(0,0,0,0.1);backdrop-filter:blur(10px);}.navbar{width:80%;max-width:1200px;padding:15px;display:flex;align-items:center;position:relative;}/* Absolute positioning for the logo */.logo{font-size:1.8rem;color:var(--navbar-text-color);font-weight:bold;position:absolute;left:50%;transform:translateX(-50%);}/* Default Navigation Links */.nav-links{flex-grow:1;}.nav-linksul{display:flex;/* Use flex to arrange links horizontally */list-style:none;justify-content:center;/* Center links */}.nav-linksli{margin-left:20px;/* Space between nav items */}.nav-linkslia{color:var(--navbar-text-color);text-decoration:none;padding:12px20px;display:block;font-weight:500;text-transform:uppercase;letter-spacing:1px;transition:all0.3sease;}.nav-linkslia:hover{background-color:var(--hover-background);border-radius:3px;}/* Hamburger menu (positioned on the right) */.hamburger{display:none;/* Hidden by default, shown in media query */flex-direction:column;cursor:pointer;margin-left:auto;/* Push hamburger to the right */}.hamburger.bar{width:25px;height:3px;background-color:var(--navbar-text-color);/* White bars */margin:4px0;transition:all0.3sease;}/* Content styling */.content{margin-top:100px;/* Margin to accommodate fixed navbar */padding:20px;width:100%;max-width:1640px;margin:0auto;}/* Product Section */.product-sectionh1{text-align:center;margin-bottom:40px;font-size:2.5rem;color:var(--header-color);}/* Product Grid Layout */.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:20px;}/* Product Card Styling */.product-card{background-color:var(--card-background);border-radius:10px;box-shadow:04px10pxrgba(0,0,0,0.1);padding:20px;text-align:center;transition:box-shadow0.3sease;display:flex;flex-direction:column;align-items:center;}.product-card:hover{transform:translateY(-10px);transition:all0.53sease;box-shadow:08px16pxrgba(0,0,0,0.15);}.product-cardimg{width:100%;height:auto;border-radius:10px;margin-bottom:15px;}.product-cardh2{font-size:1.5rem;margin-bottom:10px;color:var(--card-title-color);}.product-cardp{font-size:1rem;color:var(--card-description-color);margin-bottom:15px;}.product-card.price{font-size:1.2rem;font-weight:bold;color:var(--price-color);margin-bottom:15px;display:block;}.product-card.buy-btn{padding:10px20px;background-color:var(--button-background);color:white;border:none;border-radius:5px;cursor:pointer;transition:background-color0.3sease;}.product-card.buy-btn:hover{background-color:var(--button-hover-background);}/* Responsive Design */@media(max-width:768px){/* Hamburger Menu appears */.hamburger{display:flex;}/* Hide the nav links by default */.nav-links{display:none;/* Hidden by default */flex-direction:column;/* Stack links vertically */width:100%;/* Full width */background-color:var(--navbar-background);/* Forest green with transparency */position:absolute;top:62px;/* Adjust based on your navbar height */left:0;z-index:1000;padding:10px0;/* Add padding for the dropdown */}/* Show nav when hamburger is clicked */.nav-links.show{display:flex;/* Show nav when hamburger is clicked */border-top:1pxsolidrgba(0,0,0,0.2);}.nav-linksul{display:block;}.nav-linksli{margin:10px0;/* Space between vertical items */text-align:center;/* Center text in the vertical menu */}.nav-linkslia{padding:15px20px;}}/* Footer Styling */.footer{background-color:var(--navbar-background);color:var(--navbar-text-color);padding:40px20px;text-align:center;}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:1200px;margin:0auto;}.footer-logoh2{font-size:1.8rem;margin-bottom:10px;color:var(--header-color);}.footer-logop{font-size:1rem;color:var(--card-description-color);}.footer-linksul{list-style:none;padding:0;}.footer-linksulli{margin:10px0;}.footer-linksullia{color:var(--navbar-text-color);text-decoration:none;font-weight:500;transition:color0.3sease;}.footer-linksullia:hover{color:var(--button-hover-background);}.footer-contacth3,.footer-socialh3{margin-bottom:10px;color:var(--header-color);}.footer-contactp{font-size:1rem;margin:5px0;}.social-icons{display:flex;justify-content:center;gap:10px;margin-top:10px;}.social-iconsa{display:inline-block;}.footer-bottom{margin-top:20px;border-top:1pxsolidvar(--hover-background);padding-top:10px;}.footer-bottomp{font-size:0.9rem;color:var(--card-description-color);}/* Responsive Styling for Footer */@media(max-width:768px){.footer-content{grid-template-columns:1fr;/* Stack all footer sections vertically */}}
Top comments (0)