Scribd
Upload
1 views

style.css_6

The document is a CSS stylesheet that defines a color scheme and styles for various HTML elements. It includes variables for colors, sets font sizes and families, and styles for headers, sections, lists, and links. The stylesheet also incorporates hover effects for list items.

Uploaded by

liceredump
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

style.css_6

The document is a CSS stylesheet that defines a color scheme and styles for various HTML elements. It includes variables for colors, sets font sizes and families, and styles for headers, sections, lists, and links. The stylesheet also incorporates hover effects for list items.

Uploaded by

liceredump
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

style.

css

:root {
--color-li: #5d71f5;
--color-hover: #c1c8f6;
--color-border: #020e48;
--color-section: #c1c8f6;
--color-header: #8590d7;
--color-text: #000121;
}

body, p, section, footer, ul, h1 {


font-size: 1.5rem;
font-family: Arial, sans-serif;
margin: 0;
}

header {
background-color: var(--color-header);
}

section {
background-color: var(--color-section);
color: var(--color-text);
}
h1 {
font-size: 3rem;
padding: 10px;
}

.container {
display: flex;
justify-content: center;
padding: 20px 0;

ul {
display: flex;
}

li {
margin: 0 15px;
list-style-type: none;
width: 10rem;
background-color: var(--color-li);
border: 2px solid var(--color-border);
box-shadow: 2px 2px 6px var(--color-border);
border-radius: 5px;
color: var(--color-section);
}

p {
padding: 10px;
}

a, a:visited{
text-decoration: none;
color: inherit;
}

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

You might also like