cv sexy

by polinux

HTML

<div class="menu">
    <ul class="sexym">
    <li class="part"><a href="#accueil" class="open">About</a>
        <div class="cont" id="accueil">
            <h3>Welcome</h3>
            <p class="fnd">On CS<b style="color:#502a74;">S3XY</b><br>I Back Soon</p>
        </div>
    </li>
    <li class="part"><a href="#portfolio" class="open">Portfolio</a>
        <div class="cont" id="portfolio">
            <h3>View</h3>
            <p class="fnd">My CSS3XY Demo<br>Under construction</p>
        </div>
    </li>
    <li class="part"><a href="#contact" class="open">Contact</a>
        <div class="cont" id="contact">
            <h3>Contact</h3>
            <p class="fnd"></p>
        </div>
    </li>
    </ul>
</div>

CSS

a, a:active, a:visited {
    color: #502A74;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.menu {
    background: -moz-linear-gradient(center top , #343A41, #1A1E22) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.35);
    height: 245px;
    margin: 80px auto 60px;
    padding-top: 5px;
    position: relative;
    transition: margin 0.7s ease-out 0.5s, box-shadow 0.5s ease-out 0.2s;
    width: 505px;
}
.menu:hover {
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.35), 0 -8px 30px rgba(166, 133, 255, 0.25);
    margin: 60px auto;
    transition: margin 0.7s ease-in 0.1s, box-shadow 2s ease-in 0.8s;
}
.menu:after {
    border-radius: 250px 250px 250px 250px / 5px 5px 5px 5px;
    bottom: 20px;
    box-shadow: 0 24px 10px 2px rgba(0, 0, 0, 0.5), 0 30px 50px 5px rgba(0, 0, 0, 0.2);
    content: "";
    height: 5px;
    position: absolute;
    right: -3px;
    transition: box-shadow 0.8s ease-in 0.1s, bottom 0.7s ease-in 0.5s;
    width: 510px;
}
.menu:hover:after {
    bottom: 0;
    box-shadow: 0 30px 15px 2px rgba(0, 0, 0, 0.75), 0 45px 50px 10px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.9s ease-out 0.5s, bottom 0.7s ease-out 0.2s;
}
ul.sexym {
    background: none repeat scroll 0 0 #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    height: 233px;
    margin: auto;
    overflow: hidden;
    padding: 3px;
    width: 489px;
}
ul.sexym:before {
    color: #7729C2;
    content: "CSs3xy";
    font-family: 'Syncopate',serif;
    font-size: 1.6em;
    letter-spacing: 1px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 90px;
    width: 388px;
}
ul.sexym:after {
    color: #6F7A81;
    content: "Css3 is Sexy";
    font-family: 'Candal',serif;
    font-size: 1em;
    letter-spacing: 1px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 110px;
    width: 388px;
}
ul.sexym:hover:before, ul.sexym:hover:after {
   ...