Perfil - PopUp

by DanielSTh

HTML

<!-- Creado por DanielSTh -->
<body>
    <div id="dsth_box">
        <a href="#" id="cerrar_box">x</a>
        <div class="cover">
            <img src="http://s5.postimg.org/c0jl7p9vb/Slider1_DTh.jpg"/>
            <img src="http://s5.postimg.org/yqiq0ot2v/Slider2_DTh.jpg"/>
            <img src="http://s5.postimg.org/85l928x13/Slider3_DTh.jpg"/>
        </div>
        <img class="perfil-DTh" src="http://s5.postimg.org/mh9ckw4kz/Perfil_DTh.jpg"/>
         <div class="icos-r-s">
         <a target="_blank" href="#" class="fb"></a>
         <a target="_blank" href="#" class="tw"></a>
         <a target="_blank" href="#" class="yt"></a>
         <a target="_blank" href="#" class="gp"></a>
        </div>

<!-- Acordion -->
    <div id="acordion">
        <a href="#one" class="first">DanielSTh Desing</a>
            <div id="one">
            <b>Holaa!!</b> <br/>Mi nombre es Daniel y espero que te guste esta gadget que he creado para ustedes :D
            <a href="http://daniels-th.blogspot.com/">Pagina Web</a> </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<br/>
            Para mas turoriales, y recursos web dirijanse a mi blog <br/><br/><center><b>.:: Gracias por ver mi Perfil ::.</b>            </center>
            </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: 25px;
    left: 36%;
    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:3px; right:8px; color:#f5f5f5; 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);border-bottom: none;}

#dsth_box .icos-r-s{position:absolute; top:108px; right :10px;}
#dsth_box .icos-r-s a {background-size:contain; width:28px;height:28px;  padding:0;border:0;display:inline-block;transition:all 0.4s;}
#dsth_box .icos-r-s a:hover {box-shadow:inset 0 0 5px #000;}
#dsth_box .fb{background: url(http://s2.postimg.org/44szsxpqd/Fb_Ico_DSTh.gif);}
#dsth_box .tw{background: url(http://s2.postimg.org/x9r5ilfnp/Tw_Ico_DSTh.gif);}
#dsth_box .yt{background: url(http://s2.postimg.org/p5j1dut8l/YT_Ico_DSTh.gif);}
#dsth_box .gp{background: url(http://s2.postimg.org/4t1ubvog5/G_Ico_DSTh.gif);}

/* Acordion */

#acordion {margin-top:0px;border:thin solid #cecece;border-top:none;border-bottom:none;}
#acordion div {background:white;height:100px;display:none;border-bottom:thin solid #cecece;padding:5px;}
#acordion div li{line-height:17px;padding-left:25px;}
#acordion div a{background:none;border:none;width:auto;text-decoration:underline;}
.boton-abrir{ width:80px;}
.boton-abrir, #dsth_box h1, #acordion a{
    display:block;
    background:#f4f4f4;
    background-image: -webkit-linear-gradient(white,#ededed);
    background-image: -moz-linear-gradient(white,#ededed);
    background-image: -o-linear-gradient(white,#ededed);
    background-image: -ms-linear-gradient(white,#ededed);
    background-image:linear-gradient(white,#ededed);
   ...

JavaScript

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

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

// Acordion

$("#acordion div").first().css('display', 'block');
var link = $("#acordion a");
link.on('click', function(e) {
    e.preventDefault();
    var a = $(this).attr("href");
    $(a).slideDown('fast');
    $("#acordion div").not(a).slideUp('fast');
});

//Covers

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