Scribd
Upload
13 views

style.css_7

The CSS document defines styles for a navigation bar with responsive design features. It utilizes CSS variables for background and hover colors, and adjusts the layout based on screen size, hiding the menu and displaying a label on smaller screens. The menu items are styled for alignment and aesthetics, with hover effects for interactivity.

Uploaded by

liceredump
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

style.css_7

The CSS document defines styles for a navigation bar with responsive design features. It utilizes CSS variables for background and hover colors, and adjusts the layout based on screen size, hiding the menu and displaying a label on smaller screens. The menu items are styled for alignment and aesthetics, with hover effects for interactivity.

Uploaded by

liceredump
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

style.

css

:root {
--color-bg: oklch(0.518 0.069 283.726);
--color-hover: oklch(0.535 0.074 297.532);
}

label {
display: none;
}

nav {
margin: 100px auto;
width: 50%;
height: 100px;
background-color: var(--color-bg);
border-radius: 10px;
}

.menu {
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 10px;
}

.menu a {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
height: 90px;
border-radius: 10px;
margin: 5px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: white;
}

a:hover {
background-color: var(--color-hover);
}

@media all and (max-width: 991px) {


nav {
height: 60px;
}

.menu {
display: none;
}

.menu a {
width: 50%;
}

label {
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
color: white;
cursor: pointer;
}

#toggle:checked + .menu {
display: flex;
flex-direction: column;
background-color: var(--color-bg);
height: 220px;
}
}

You might also like