Scribd
Upload
3 views

CSS

Uploaded by

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

CSS

Uploaded by

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

header {

background-color: #90ee90;
display: flex;
justify-content: space-between;
padding: 10px;
text-align: right;
}

.menu {
list-style: none;
margin: 0;
padding: 0;
}

.menu li {
display: inline-block;
margin-right: 10px;
}

.menu li:last-child {
margin-right: 0;
}

.menu li a {
display: inline-block;
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}

.menu li a:hover {
background-color: #45a049;
}

.search-form {
display: flex;
align-items: center;
}

.search-form input[type="text"] {
padding: 8px;
border-radius: 4px 0 0 4px;
border: none;
}

.search-form button {
padding: 8px 15px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}

.search-form button:hover {
background-color: #45a049;
}

body {

margin: 0;
padding: 0;
background: linear-gradient(
#1aca81,
#2c3a47 var(--line-offset),
#dedede var(--line-offset)

);
width: 100vw;
height: 100vh;
font-family: 'Lexend Deca', sans-serif;
color: #878787;

--menu-item-size: 50px;
--green-color: #329680;
--blue-color: #099c95;
--dark-green-color: #175b52;
--white-color: #05f12d;
--gray-color: #EDEDED;
--container-width: 700px;
--container-height: 400px;
--line-offset: calc((100% - var(--container-height))/ 2 + var(--menu-item-size)
+ 0.6em);

.container {
width: var(--container-width);
height: var(--container-height);
margin-left: -350px;
margin-top: -200px;
top: 50%;
left: 50%;
position: absolute;
z-index: 1;

.main-menu {
display: flex;
list-style: none;
margin: auto 0;
padding: 0.6em 0 0 0;
}

.main-menu > li {
box-sizing: border-box;
height: var(--menu-item-size);
width: calc(3.5 * var(--menu-item-size));
line-height: var(--menu-item-size);
padding: 0 2em;
margin: 1px;
transition: 0.5s linear all;
background: var(--green-color);
color: var(--dark-green-color);
cursor: pointer;
font-size: 16px;
user-select: none;
}

.main-menu > li:not(.with-submenu) {


clip-path: polygon(10% 0%, 0% 100%, 95% 100%, 100% 50%, 95% 0%);
shape-outside: polygon(10% 0%, 0% 100%, 95% 100%, 100% 50%, 95% 0%);
}

.main-menu > li:nth-child(2) {


transform: translateX(-5%);
}

.main-menu > li:nth-child(3) {


transform: translateX(-10%)
}

.main-menu > li:nth-child(4) {


transform: translateX(-15%)
}

.main-menu i {
margin-right: 5px;
}

.main-menu > li:hover:not(.active) {


background: linear-gradient(to right, var(--green-color), var(--blue-color));
color: var(--white-color);
}

.main-menu > li:active:not(.active),


.main-menu > li:active:not(.with-submenu){
background: var(--blue-color);
color: var(--white-color);
}

.main-menu > li:hover i:not(li.active) {


color: #175c58;
}

.main-menu .active {
color: var(--white-color);
background: var(--blue-color);
cursor: default;
text-shadow: 1px 1px 1px var(--dark-green-color);
font-size: 18px;
}

article {
background: var(--gray-color);
padding: 1em;
border-radius: 0 0 5px 5px;
box-shadow: 5px 5px 5px #CCC;
position: relative;
z-index: -1;
}

h1 {
font-size: 115%;
margin: 1em 2em;
padding: 0;
position: relative;
color: #777;
text-align: center;
}

.content {
padding: 0 0 0 3em;
font-size: 16px;

You might also like