Difference between revisions of "Template:UPMC-Paris/CSS"

(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