|
|
| Line 1: |
Line 1: |
| − | /*header*/
| |
| − | .header_background{
| |
| − | height:100px;
| |
| − | width: 100%;
| |
| − | background-color: grey;
| |
| − | position: fixed;
| |
| − | }
| |
| | | | |
| − | .header {
| |
| − | margin:0px auto -100px;
| |
| − | width:100%;
| |
| − | position: fixed;
| |
| − | }
| |
| − |
| |
| − | .header_title {
| |
| − | font-size: 30px;
| |
| − | line-height: 100px;
| |
| − | margin-left: 40px;
| |
| − | color: white;
| |
| − | display: inline;
| |
| − | }
| |
| − |
| |
| − | /*nav*/
| |
| − | nav {
| |
| − | margin-right: 40px;
| |
| − | margin-top: 20px;
| |
| − | position: relative;
| |
| − | float: right;
| |
| − | width: 200px;
| |
| − | height: 200px;
| |
| − | }
| |
| − |
| |
| − | nav h2 {
| |
| − | border-radius: 2px;
| |
| − | position: relative;
| |
| − | background: orange;
| |
| − | 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: orange;
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − | a:visited {
| |
| − | color: ivory!important;
| |
| − | text-decoration: none!important;
| |
| − | }
| |
| − |
| |
| − | a:hover {
| |
| − | text-decoration: none!important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .big_framework {
| |
| − | background-color:white;
| |
| − | display:block;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .big_framework .medium_framework {
| |
| − | margin:auto;
| |
| − | padding-top: 120px;
| |
| − | max-width: 1400px;
| |
| − | width:90%;
| |
| − | text-align: center;
| |
| − | }
| |
