(Replaced content with " .big_framework { background-color:white; display:block; width: 100%; } .big_framework .medium_framework { margin:auto; max-width: 1400px; width:90%; }") |
|||
Line 1: | Line 1: | ||
+ | /*nav*/ | ||
+ | nav { | ||
+ | margin: auto; | ||
+ | margin-top: 40px; | ||
+ | position: relative; | ||
+ | width: 320px; | ||
+ | min-width: 320px; | ||
+ | height: 200px; | ||
+ | } | ||
+ | |||
+ | nav h2 { | ||
+ | border-radius: 2px; | ||
+ | position: relative; | ||
+ | background: tomato; | ||
+ | height: 40px; | ||
+ | text-transform: uppercase; | ||
+ | color: ivory; | ||
+ | font-weight: 200; | ||
+ | display: flex; | ||
+ | flex: 1; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | box-shadow: 4px 4px 20px -2px rgba(0,0,0,.35); | ||
+ | transition: all .4s; | ||
+ | } | ||
+ | |||
+ | nav:hover h2{ | ||
+ | transform: translateY(-2px); | ||
+ | box-shadow: 2px 2px 5px -1px rgba(0,0,0,.35); | ||
+ | } | ||
+ | nav:hover:active h2{ | ||
+ | transform: translateY(10px); | ||
+ | box-shadow: 0px -1px 2px 0px rgba(0,0,0,.35); | ||
+ | } | ||
+ | |||
+ | input { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | z-index: 1; | ||
+ | opacity: 0; | ||
+ | cursor: pointer; | ||
+ | height: 40px; | ||
+ | } | ||
+ | |||
+ | #toggle:checked ~ul { | ||
+ | height: 0%; | ||
+ | } | ||
+ | |||
+ | nav ul { | ||
+ | padding-left: 0; | ||
+ | padding-top: 0; | ||
+ | margin-top: 0; | ||
+ | list-style: none; | ||
+ | overflow: hidden; | ||
+ | text-align: right; | ||
+ | margin-bottom: 22px; | ||
+ | text-align: center; | ||
+ | transition: all .4s ease-out; | ||
+ | height: 100%; | ||
+ | |||
+ | } | ||
+ | nav ul li { | ||
+ | border-radius: 2px; | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | margin-left: 35px; | ||
+ | line-height: 1.5; | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | margin-bottom: 5px; | ||
+ | background: tomato; | ||
+ | transition: background 3s; | ||
+ | box-shadow: 2px 2px 10px -2px rgba(0,0,0,.35); | ||
+ | } | ||
+ | |||
+ | nav ul li:hover { | ||
+ | background: mediumorchid; | ||
+ | transition: background .45s; | ||
+ | } | ||
+ | |||
+ | /* nav ul li:hover a:active, li { | ||
+ | color: tomato; | ||
+ | } */ | ||
+ | |||
+ | nav ul a { | ||
+ | display: block; | ||
+ | color: ivory; | ||
+ | text-transform: lowercase; | ||
+ | font-size: 18px; | ||
+ | font-weight: 200; | ||
+ | text-decoration: none; | ||
+ | transition: color .3s; | ||
+ | } | ||
+ | |||
.big_framework { | .big_framework { |
Revision as of 15:00, 8 July 2019
/*nav*/ nav {
margin: auto; margin-top: 40px; position: relative; width: 320px; min-width: 320px; height: 200px;
}
nav h2 {
border-radius: 2px; position: relative; background: tomato; height: 40px; text-transform: uppercase; color: ivory; font-weight: 200; display: flex; flex: 1; justify-content: center; align-items: center; box-shadow: 4px 4px 20px -2px rgba(0,0,0,.35); transition: all .4s;
}
nav:hover h2{
transform: translateY(-2px); box-shadow: 2px 2px 5px -1px rgba(0,0,0,.35); }
nav:hover:active h2{
transform: translateY(10px); box-shadow: 0px -1px 2px 0px rgba(0,0,0,.35); }
input {
position: absolute; left: 0; top: 0; width: 100%; z-index: 1; opacity: 0; cursor: pointer; height: 40px;
}
- toggle:checked ~ul {
height: 0%;
}
nav ul {
padding-left: 0; padding-top: 0; margin-top: 0; list-style: none; overflow: hidden; text-align: right; margin-bottom: 22px; text-align: center; transition: all .4s ease-out; height: 100%;
} nav ul li {
border-radius: 2px; position: relative; display: inline-block; margin-left: 35px; line-height: 1.5; width: 100%; margin: 0; margin-bottom: 5px; background: tomato; transition: background 3s; box-shadow: 2px 2px 10px -2px rgba(0,0,0,.35);
}
nav ul li:hover {
background: mediumorchid; transition: background .45s;
}
/* nav ul li:hover a:active, li {
color: tomato;
} */
nav ul a {
display: block; color: ivory; text-transform: lowercase; font-size: 18px; font-weight: 200; text-decoration: none; transition: color .3s;
}
.big_framework {
background-color:white;
display:block;
width: 100%;
}
.big_framework .medium_framework { margin:auto; max-width: 1400px; width:90%; }