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