Sliding content VCARD

EDIT THIS ONE

by secretgspot

HTML

<script src="http://medialoot.com/preview/professional-vcard-template/javascripts/jquery.easing.1.3.js"></script>
<script src="http://medialoot.com/preview/professional-vcard-template/javascripts/jquery.coda-slider-2.0.js"></script>
  
<div class="starburst">

<div class="vcard-container">

<div class="coda-slider-wrapper">
       
       <div class="layer">
       <a href="#" class="download-vcard" title="Download my vCard">Download my vCard</a>
       <img class="avatar" src="images/avatar.png" alt="avatar">
        <h1>John Doe</h1>
        <p class="role">Graphic Designer</p>
        
        
       
       <div id="coda-nav-1" class="coda-nav">
           <ul>
            <li class="tab1"><a href="#1" class="current">About Me</a></li>
            <li class="tab2"><a href="#2" class="">Social</a></li>
            <li class="tab3"><a href="#3" class="">Contact</a></li>
        </ul>
       </div>
       <div id="coda-nav-left-1" class="coda-nav-left"><a href="#" title="Slide left">«</a></div>
       <div id="coda-nav-right-1" class="coda-nav-right"><a href="#" title="Slide right">»</a></div><br style="clear:both;">
      
       <div class="coda-slider" id="coda-slider-1" style="height: 421px; display: block; ">
           <div class="panel-container" style="width: 1500px; margin-left: 0px; "><div class="panel" style="display: block; ">
                   <div class="panel-wrapper about">
                <h2 class="title">About Me</h2>
                   <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Curabitur blandit tempus porttitor. Integer posuere <a href="#">porta ac consectetur</a> ac, erat a ante venenatis dapibus posuere velit aliquet.</p>
                                      
                   <ul>
                       <li> Morbi leo risus, porta ac consectetur ac, vestibulum at eros. </li>
                       <li> Praesent commodo cursus magna.</li>
    ...

CSS

.vcard-container {
width: 500px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px; 
border-radius: 5px; 
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
box-shadow: 0px 0px 100px #000;
}

body {
background: #2f2f33 url(images/bg.png) fixed repeat;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #fff;
}


.layer {
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; 
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; 
border-top-left-radius: 5px; border-top-right-radius: 5px; 
padding-top: 15px;
background: #6d7d8c url(images/header-bg.png) repeat-x;
}

h1 {
color: #fff;
text-shadow: 0 1px 0px #697986;
font-size: 26px;
margin: 5px 0 0 0;
}

p.role {
text-shadow: 0px 1px 0px #858f9b;
color: #304051;
font-size: 14px;
}

.panel p {
margin: 0 20px 20px 10px;
color: #666;
font-size: 12px;
line-height: 17px;
}

.panel h2 {
color: #324556;
margin: 0 20px 10px 10px;
font-size: 18px;
font-weight: normal;
}

img.avatar {
float: left;
margin: 0 15px 9px 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

a.download-vcard {
float: right;
display: block;
text-indent: -5000px;
width: 145px;
height: 35px;
background: url(images/btn-download.png) no-repeat;
margin: 16px 15px 0 0;
background-position: 0 0;}

a.download-vcard:hover {
background-position: 0 -35px;
}

a.download-vcard:active {
background-position: 0 -70px;
}

.coda-slider-wrapper { padding: 0;  }
.coda-slider { background: #fff;}
    
.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
.coda-slider, .coda-slider .panel { width: 500px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;  } 
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 500px...

JavaScript

$().ready(function() {
            $('#coda-slider-1').codaSlider({
            dynamicArrows: false,
            dynamicTabs: false
       });
   });