|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| | | | |
| − | <style type='text/css'>
| |
| − |
| |
| − |
| |
| − |
| |
| − | #top_title, #sideMenu{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #content{
| |
| − | width:850px;
| |
| − | padding-top: 100;
| |
| − | margin: auto;
| |
| − | border-radius: 10px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | 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>
| |
