(Blanked the page) |
|||
Line 1: | Line 1: | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Grenoble Alpes</title> | ||
+ | </head> | ||
+ | <style type="text/css"> | ||
+ | nav { | ||
+ | background:rgb(133, 142, 155); | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | margin-top:10px; | ||
+ | color: white; | ||
+ | } | ||
+ | nav ul{ | ||
+ | list-style:none; | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | nav ul a | ||
+ | { | ||
+ | display:block; | ||
+ | color:rgb(234, 236, 239); | ||
+ | text-decoration:none; | ||
+ | font-weight:700; | ||
+ | font-size:12px; | ||
+ | line-height:32px; | ||
+ | padding:0 15px; | ||
+ | font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif | ||
+ | } | ||
+ | |||
+ | nav ul li | ||
+ | { | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | padding: .5rem; | ||
+ | transition: .6s background; | ||
+ | } | ||
+ | |||
+ | nav ul li.current-menu-item | ||
+ | { | ||
+ | background:#ddd | ||
+ | } | ||
+ | |||
+ | nav ul li:hover | ||
+ | { | ||
+ | background:#f6f6f6; | ||
+ | background:rgba(0,0,0,0.3); | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | nav ul ul | ||
+ | { | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | top:100%; | ||
+ | left:0; | ||
+ | background:#fff; | ||
+ | padding:0 | ||
+ | } | ||
+ | |||
+ | nav ul ul li | ||
+ | { | ||
+ | float:none; | ||
+ | width:150px | ||
+ | } | ||
+ | |||
+ | nav ul ul a | ||
+ | { | ||
+ | line-height:120%; | ||
+ | padding:10px 15px | ||
+ | } | ||
+ | |||
+ | nav ul ul ul | ||
+ | { | ||
+ | top:0; | ||
+ | left:100% | ||
+ | } | ||
+ | |||
+ | nav ul li:hover > ul | ||
+ | { | ||
+ | display:block; | ||
+ | background:rgb(198, 202, 209); | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | |||
+ | #nav-icon3 span:nth-child(1) { | ||
+ | top: 0px; | ||
+ | } | ||
+ | |||
+ | #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { | ||
+ | top: 18px; | ||
+ | } | ||
+ | |||
+ | #nav-icon3 span:nth-child(4) { | ||
+ | top: 36px; | ||
+ | } | ||
+ | |||
+ | #nav-icon3.open span:nth-child(1) { | ||
+ | top: 18px; | ||
+ | width: 0%; | ||
+ | left: 50%; | ||
+ | } | ||
+ | |||
+ | #nav-icon3.open span:nth-child(2) { | ||
+ | -webkit-transform: rotate(45deg); | ||
+ | -moz-transform: rotate(45deg); | ||
+ | -o-transform: rotate(45deg); | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | |||
+ | #nav-icon3.open span:nth-child(3) { | ||
+ | -webkit-transform: rotate(-45deg); | ||
+ | -moz-transform: rotate(-45deg); | ||
+ | -o-transform: rotate(-45deg); | ||
+ | transform: rotate(-45deg); | ||
+ | } | ||
+ | |||
+ | #nav-icon3.open span:nth-child(4) { | ||
+ | top: 18px; | ||
+ | width: 0%; | ||
+ | left: 50%; | ||
+ | } | ||
+ | |||
+ | #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 { | ||
+ | width: 60px; | ||
+ | height: 45px; | ||
+ | position: relative; | ||
+ | margin: 50px auto; | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | -moz-transform: rotate(0deg); | ||
+ | -o-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | -webkit-transition: .5s ease-in-out; | ||
+ | -moz-transition: .5s ease-in-out; | ||
+ | -o-transition: .5s ease-in-out; | ||
+ | transition: .5s ease-in-out; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #nav-icon1 span, #nav-icon3 span, #nav-icon4 span { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | height: 9px; | ||
+ | width: 100%; | ||
+ | background: #d3531a; | ||
+ | border-radius: 9px; | ||
+ | opacity: 1; | ||
+ | left: 0; | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | -moz-transform: rotate(0deg); | ||
+ | -o-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | -webkit-transition: .25s ease-in-out; | ||
+ | -moz-transition: .25s ease-in-out; | ||
+ | -o-transition: .25s ease-in-out; | ||
+ | transition: .25s ease-in-out; | ||
+ | } | ||
+ | </style> | ||
+ | <body> | ||
+ | |||
+ | </body> | ||
+ | </html> |
Revision as of 15:59, 5 September 2018
<!DOCTYPE html>