Perfil - PopUp

by DanielSTh

HTML

<body>
    <div id="dsth_box"><a href="#" id="cerrar_box">x</a>
        
<div class="fadein">
    <img src="http://s5.postimg.org/c0jl7p9vb/Slider1_DTh.jpg"/>
    <img src="http://s5.postimg.org/yqiq0ot2v/Slider2_DTh.jpg"/>

</div>
    <img class="perfil-DTh" src="http://s5.postimg.org/mh9ckw4kz/Perfil_DTh.jpg"/>
     <a href="" class="fb"></a>
     <a href="" class="tw"></a>
     <a href="" class="yt"></a>
     <a href="" class="gp"></a>
                    <!-- ACORDION -->
        <div id="accordion">
    <a href="#one" class="first">DanielSTh Desing</a>
    <div id="one">
Hola i nombre es daniel y espero qy¿ue te guste esta gadget que he creado para ustedes :D    </div>
    
    <a href="#two">Trabajos</a>
    <div id="two">
<li>Diseños Html & Css</li><li>Blogger </li><li>Programación</li><li>Diseños Grafico</li><li>Tutoriales</li> <li>Mas...</li>    </div>
    
    <a href="#three">Trabajos Recientes</a>
    <div id="three">
       Este Gadget es el trabajo mas reciente que he hecho :D Si les gusto denle Like XD
    </div>

</div>
    </div>
    
<a href="#dsth_box" id="abrir_box" class="boton-abrir">Ver Perfil</a>
    
    
            
            

    
</body>

CSS

body{
    background: #fff;
font: 12px/1.5em 'Open Sans',Verdana,Tahoma,arial,sans-serif;
}
#dsth_box{
    position: fixed;
    background: #fff;
    display: none;
    top: 20px;
    left: 50px;
    width: 450px;
    border: 1px solid #d9dadc;
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
    border-radius: 5px;
    color: #9eb2c0;

    
}

#cerrar_box{position:absolute; top:-5px; right:8px; color:#9eb2c0; text-decoration:none;font-size:20px; width:15px;z-index:22;text-shadow: 0 0 5px #000;background: none;border:0;}
img.perfil-DTh{position:absolute; top:18px; left :15px;  width: 100px;height: 100px;padding:10px;background:rgba(0,0,0,0.5);background: none;border-bottom: none;}

#dsth_box .fb{background: url(http://s2.postimg.org/44szsxpqd/Fb_Ico_DSTh.gif);background-size:contain; width:30px;height:30px; position:absolute; top:108px; right :10px; padding:0;border:0;}
#dsth_box .tw{background: url(http://s2.postimg.org/x9r5ilfnp/Tw_Ico_DSTh.gif);background-size:contain; width:30px;height:30px; position:absolute; top:108px; right :50px; padding:0;border:0;}
#dsth_box .yt{background:  url(http://s2.postimg.org/p5j1dut8l/YT_Ico_DSTh.gif);background-size:contain; width:30px;height:30px; position:absolute; top:108px; right :90px; padding:0;border:0;}
#dsth_box .gp{background: url(http://s2.postimg.org/4t1ubvog5/G_Ico_DSTh.gif);background-size:contain; width:30px;height:30px; position:absolute; top:108px; right :130px; padding:0;border:0;}
body {
    margin:10px 0px;
    padding:0;
    width:500px;
    margin:auto;
    background:#ededed;   
}

#accordion {
     margin-top:0px;
     border:thin solid #cecece;   
     border-top:none;
     border-bottom:none;
}

#accordion div {
    background:white;
    height:100px;
    display:none;
    border-bottom:thin solid #cecece;
    padding:5px;
}

.boton-abrir{ width:80px;}
.boton-abrir, #dsth_box h1 {
    display:block;
    background:#f4f4f4;
    background-image: -webkit-linear-gradient(white,#ededed);
    background-image:...

JavaScript

$("#abrir_box").click(function(){
    $("#dsth_box").css("display", "block");
  });

  $("#cerrar_box").click(function(){
    $("#dsth_box").css("display", "none");
  }); 

// Acordion

// display the first div by default.
$("#accordion div").first().css('display', 'block');


// Get all the links.
var link = $("#accordion a");

// On clicking of the links do something.
link.on('click', function(e) {

    e.preventDefault();

    var a = $(this).attr("href");

    $(a).slideDown('fast');

    //$(a).slideToggle('fast');
    $("#accordion div").not(a).slideUp('fast');
    
});

//slider

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});