Difference between revisions of "Team:UNIK Copenhagen/frontpage"

 
Line 16: Line 16:
 
}
 
}
  
 +
/*---------------------------*/
 +
/*      cool menu          */
 +
/*---------------------------*/
 +
 +
#mainmenu {
 +
    position:fixed;
 +
    top: 300px;
 +
    right: -50px;
 +
    height:1px; width:1px;
 +
}
 +
#mainmenu div {
 +
    position:absolute;
 +
    right:0;
 +
    color: #333333;
 +
    text-decoration: none;
 +
    font-size: 22px;
 +
    font-weight: 500;   
 +
    width: 100px;
 +
    height: 100px;   
 +
    background: #333333;
 +
    text-align: center;
 +
    line-height: 100px;
 +
    transition: all 1s ease;
 +
    -webkit-transform: rotate(45deg);
 +
    -moz-transform: rotate(45deg);
 +
    -ms-transform: rotate(45deg);
 +
    -o-transform: rotate(45deg);
 +
    transform: rotate(45deg);
 +
}
 +
a {
 +
    display: block;
 +
    color:white;
 +
    text-decoration: none;
 +
    transition: all 0.7s ease;
 +
}
 +
#main_nav {
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
#main_nav li a {
 +
    /*text-indent: -999999px;*/
 +
    overflow: hidden;
 +
    display: block;
 +
    float: right;
 +
}
 +
#menu {
 +
    z-index: 5;
 +
}
 +
#home {
 +
    z-index: 4;
 +
}
 +
#video {
 +
    z-index: 3;
 +
}
 +
#photos {
 +
    z-index: 2;
 +
}
 +
#calendar {
 +
    z-index: 2;
 +
}
 +
#menu:hover {
 +
    background: #FFFFFF;
 +
}
 +
#menu:hover a {
 +
    color:black;
 +
}
 +
#mainmenu:hover #menu ~ #home {
 +
    transition: all 0.3s ease;
 +
    -webkit-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
 +
    -moz-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
 +
    -ms-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
 +
    -o-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
 +
    transform: rotate(45deg) translate(0px, 105px) perspective(350px);
 +
}
 +
#mainmenu:hover #menu ~ #photos {
 +
    -webkit-transition: all 0.3s 0.3s ease;
 +
    transition: all 0.3s 0.3s ease;
 +
    -webkit-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
 +
    -moz-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
 +
    -ms-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
 +
    -o-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
 +
    transform: rotate(45deg) translate(0px, 210px) perspective(350px);
 +
}
 +
#mainmenu:hover #menu ~ #video {
 +
    -webkit-transition: all 0.3s ease;
 +
    transition: all 0.3s ease;
 +
    -webkit-transform: rotate(45deg) translate(-105px, 0px) perspective(350px);
 +
    -moz-transform: rotate(45deg) translate(-105px, 0px) perspective(350px);
 +
    -ms-transform: rotate(45deg) translate(-105px, 0px) perspective(350px);
 +
    -o-transform: rotate(45deg) translate(-105px, 0px) perspective(350px);
 +
    transform: rotate(45deg) translate(-105px, 0px) perspective(350px);
 +
}
 +
#mainmenu:hover #menu ~ #calendar {
 +
    -webkit-transition: all 0.3s 0.3s ease;
 +
    transition: all 0.3s 0.3s ease;
 +
    -webkit-transform: rotate(45deg) translate(-210px, 0px) perspective(350px);
 +
    -moz-transform: rotate(45deg) translate(-210px, 0px) perspective(350px);
 +
    -ms-transform: rotate(45deg) translate(-210px, 0px) perspective(350px);
 +
    -o-transform: rotate(45deg) translate(-210px, 0px) perspective(350px);
 +
    transform: rotate(45deg) translate(-210px, 0px) perspective(350px);
 +
}
 
/*-------------------------------------*/
 
/*-------------------------------------*/
 
/*        Three parts        */
 
/*        Three parts        */
Line 131: Line 233:
 
<br>
 
<br>
 
<br>
 
<br>
 +
 +
<body>
 +
<div id="mainmenu">
 +
        <div id="menu"><a href="#">MENU</a></div>
 +
        <div id="home"><a href="#">HOME</a></div>
 +
        <div id="video"><a href="#">VIDEO</a></div>
 +
        <div id="photos"><a href="#">>PHOTO'S</a></div>
 +
        <div id="calendar"><a href="#">CALENDAR</a></div>
 +
    </div>
 +
</body>
 +
  
 
<div id="threeParts">
 
<div id="threeParts">

Latest revision as of 16:40, 19 August 2015