(Blanked the page) |
|||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | <style type='text/css'> | ||
+ | |||
+ | |||
+ | |||
+ | #top_title, #sideMenu{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | p { | ||
+ | color:#666666; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color: #222222; | ||
+ | } | ||
+ | |||
+ | #header{ | ||
+ | width:800px; | ||
+ | height:200px; | ||
+ | color-background:black; | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | #colorNav > ul{ | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | position:fixed; | ||
+ | top:50px; | ||
+ | } | ||
+ | |||
+ | #colorNav > ul > li{ /* will style only the top level li */ | ||
+ | list-style: none; | ||
+ | display: inline-block; | ||
+ | line-height:2; | ||
+ | margin: 0px; | ||
+ | border-radius: 15px; | ||
+ | position:relative; | ||
+ | } | ||
+ | #colorNav > ul > li > a{ | ||
+ | color:inherit; | ||
+ | text-decoration:none !important; | ||
+ | font-size:14px; | ||
+ | padding: 30px; | ||
+ | } | ||
+ | #colorNav li ul{ | ||
+ | position:absolute; | ||
+ | list-style:none; | ||
+ | text-align:center; | ||
+ | width:180px; | ||
+ | left:50%; | ||
+ | margin-left:-90px; | ||
+ | top:30px; | ||
+ | font:bold 12px 'Open Sans Condensed', sans-serif; | ||
+ | |||
+ | /* This is important for the show/hide CSS animation */ | ||
+ | max-height:0px; | ||
+ | overflow:hidden; | ||
+ | border-radius: 30px; | ||
+ | -webkit-transition:max-height 0.4s linear; | ||
+ | -moz-transition:max-height 0.4 linear; | ||
+ | transition:max-height 0.4 linear; | ||
+ | } | ||
+ | #colorNav li:hover ul{ | ||
+ | max-height:500px; | ||
+ | } | ||
+ | #colorNav li ul li{ | ||
+ | background-color:#369799; | ||
+ | } | ||
+ | |||
+ | #colorNav li ul li a{ | ||
+ | padding:12px; | ||
+ | color:#fff !important; | ||
+ | text-decoration:none !important; | ||
+ | display:block; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | #colorNav li ul li:nth-child(odd){ /* zebra stripes */ | ||
+ | background-color:#369799; | ||
+ | } | ||
+ | |||
+ | #colorNav li ul li:hover{ | ||
+ | background-color:#369741; | ||
+ | } | ||
+ | |||
+ | #colorNav li ul li:first-child{ | ||
+ | border-radius:3px 3px 0 0; | ||
+ | margin-top:25px; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | #colorNav li ul li:first-child:before{ /* the pointer tip */ | ||
+ | content:''; | ||
+ | position:absolute; | ||
+ | width:1px; | ||
+ | height:1px; | ||
+ | border:5px solid transparent; | ||
+ | border-bottom-color:#313131; | ||
+ | left:50%; | ||
+ | top:-10px; | ||
+ | margin-left:-5px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | div { | ||
+ | position:relative; | ||
+ | width:800px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | padding-bottom:2rem; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | background-image:url(http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-montagnes-9.jpg); | ||
+ | } | ||
+ | |||
+ | #colorNav li ul li:last-child{ | ||
+ | border-bottom-left-radius:3px; | ||
+ | border-bottom-right-radius:3px; | ||
+ | } | ||
+ | #colorNav li.green{ | ||
+ | /* This is the color of the menu item */ | ||
+ | background-color:#00c08b; | ||
+ | |||
+ | /* This is the color of the icon */ | ||
+ | color:#000000; | ||
+ | } | ||
+ | |||
+ | #colorNav li.pink{background-color:#ea5080;color:#000000;} | ||
+ | #colorNav li.blue{background-color:#53bfe2;color:#000000;} | ||
+ | #colorNav li.brown{background-color:#f8c54d;color:#000000;} | ||
+ | #colorNav li.purple{background-color:#df6dc2;color:#000000;} | ||
+ | #colorNav li.orange{background-color:#df6dc2;color:#000000;} | ||
+ | #colorNav li.green{background-color:#00FF00;color:#000000;} | ||
+ | #colorNav li.yellow{background-color:#e2ff00;color:#000000;} | ||
+ | #colorNav li.red{background-color:#f00000;color:#000000;} | ||
+ | #colorNav li.grey{background-color:#d3d3d3;color:#000000;} | ||
+ | |||
+ | |||
+ | /* SLIDER (For Willhelm)*/ | ||
+ | .simple-ss { | ||
+ | width:800px; | ||
+ | height:250px; | ||
+ | background-color:red; | ||
+ | margin:auto; | ||
+ | background-image:url("http://www.mediafire.com/convkey/4989/2l919s6cqg2vm826g.jpg"); | ||
+ | background-position:0; | ||
+ | background-repeat:no-repeat; | ||
+ | background-size:cover; | ||
+ | |||
+ | /* ANIMATING STUFF */ | ||
+ | animation-name: slide; | ||
+ | animation-duration: 13s; | ||
+ | animation-direction: normal; | ||
+ | animation-timing-function: ease; | ||
+ | animation-iteration-count: infinite; | ||
+ | } | ||
+ | |||
+ | /* NOTE CODEPEN AUTOGENERATING -PREFIXES */ | ||
+ | @keyframes slide { | ||
+ | 0% {background-position:0 0;} | ||
+ | 16.66% {background-position:0 0;} | ||
+ | 33.32% {background-position:-900px 0;} | ||
+ | 49.98% {background-position:-900px 0;} | ||
+ | 66.64% {background-position:-1800px 0;} | ||
+ | 83.30% {background-position:-1800px 0;} | ||
+ | 100% {background-position:0 0;} | ||
+ | } | ||
+ | </style> | ||
+ | </html> |
Revision as of 15:53, 3 October 2016