Conectarse

Recuperar mi contraseña

¿Quién está en línea?
En total hay 1 usuario en línea: 0 Registrados, 0 Ocultos y 1 Invitado

Ninguno

[ Ver toda la lista ]


La mayor cantidad de usuarios en línea fue 8 el Lun Sep 28, 2015 2:08 pm.
Últimos temas
» IMG Gif Lindas
Miér Sep 28, 2016 9:29 pm por Alex

» Firmas Estaticas
Mar Sep 20, 2016 9:20 pm por Alex

» Avatares Estaticos
Lun Sep 12, 2016 11:59 pm por Alex

» Fondos Lindos lindosos
Miér Ago 17, 2016 11:48 pm por Alex

» IMG lindas
Jue Ago 04, 2016 12:45 pm por Alex

» Tablon para foro con circulitos
Dom Mayo 08, 2016 12:42 am por Alex

» Firmas con codigos
Lun Sep 28, 2015 2:25 pm por Alex

» Avatares Con Movimiento
Lun Ago 31, 2015 9:48 pm por Alex

» Firmas Moviles
Dom Ago 23, 2015 4:28 pm por Alex

Compañeros

Crear foro

Foroactivo en Facebook Pagina Foroactivo en Facebook YouTube de ForoactivoTV Foroactivo en Twitter


Tablon para foro con circulitos

Ver el tema anterior Ver el tema siguiente Ir abajo

Tablon para foro con circulitos

Mensaje por Alex el Dom Mayo 08, 2016 12:40 am


Código:
<link href="http://goo.gl/Snwx3c" rel="stylesheet" type="text/css" />
<center><br />                                                                
        <div id="cuerpotab">
                                                                                                                                                        
                <div style="position: absolute; top: 0px; left: 0px;">
                                                                                              
                        <ul class="ch-grid">
                                                                                                          
                                <li style="margin-right: 15px;">
                                                                                                                  
                                        <div class="ch-item ch-img-1">
                                                                                                                          
                                                <div class="ch-info">
                                                                                                                                  
 <h3>  Nombre<br />Apellido    </h3>
 <p><a href="url">Enviar MP</a></p></div>
                                                                                                                          
</div></li><li>
                                                                                                                  
  <div class="ch-item ch-img-2">
                                                                                                                          
                                                <div class="ch-info">
                                                                                                                                  
<h3> Nombre<br />Apellido    </h3><p>
  <a href="url">Enviar MP</a></p></div>
                                                                                                                          
                                        </div>
                                                                                                                  
                                </li>
                                                                                                        
                        </ul>
                                                                          
                        <div style="margin-bottom: 7px;" class="titulotab">
                                                                                    Últimos temas                                                    
                        </div>
                                                              
                        <div id="contenedor-UltimosTemas">
                                                                                                                                                                  
                                                                </div>
                                                                        
                </div>
                                                                                        
                <div class="caja1tab">
                                                                                                                                                      
<div style="width: 207px; height: 100px; background:url('http://i.imgur.com/tSO7iH0.png'); position: relative">
                                                                                                                            
 <div class="temperatura">
   <span style="font-size: 15px; font-family: arial;">30º</span><br />Verano                                              
                                </div>
                                                                                                                                                              
                        </div>
                                                                                                                                                
   <div style="padding-top: 10px;" class="textoamb">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.                                                              
                        </div>
                                                                                                                              
  <div class="titulotab">      Navegación                                                    
                        </div>
                                                                                                                                
                        <div class="linksamb">
      <a href="url">Link 1</a><a href="url">Link 2</a><a href="url">Link 3</a><a href="url">Link 4</a><a href="url">Link 5</a><a href="url">Link 6</a>                                                    
                        </div>
                                                                                                                                                              
                </div>
                                                                      
                <div style="position: absolute; top: 0px; right: 0px;">
                                                                                              
                        <ul class="ch-grid">
                                                                                                          
                                <li style="margin-right: 15px;">
                                                                                                                  
                                        <div class="ch-item ch-img-3">
                                                                                                                          
 <div class="ch-info">
                                                                                                                                  
<h3> Nombre<br />Apellido    </h3><p><a href="url">Enviar MP</a>                              
                                                        </p>
                                                                                                                                  
                                                </div>
                                                                                                                          
                                        </div>
                                                                                                                  
                                </li>
                                                                                                          
                                <li>
                                                                                                                  
                                        <div class="ch-item ch-img-4">
                                                                                                                          
                                                <div class="ch-info">
                                                                                                                                  
      <h3>
                         Nombre<br />Apellido                                  
      </h3>
                                                                                                                    
       <p>
                          <a href="url">Enviar MP</a>                              
         </p>
                                                                                                                                  
                                                </div>
                                                                                                                          
                                        </div>
                                                                                                                  
                                </li>
                                                                                                        
                        </ul>
                                                                          
                        <div class="titulotab">
        Información Extra                                                    
                        </div>
                                                                
                        <div id="SSlider">
                                                                                    
                                <div id="SCont">
                                                                                                
                                        <div id="Sc1" class="Sc" style="display:block;">
                                                                                    
   <div class="fecha">      00/00                
                                                </div>
                                          Ut labore et dolore magnam aliquam quaerat.              
    <div class="separador">
                                                                                    
       </div>
                                                                          
  <div class="fecha">     00/00              </div>
                                                                Ut labore et dolore magnam aliquam quaerat.              
    <div class="separador">
                                                                                    
                                                </div>
                                                                          
 <div class="fecha">         00/00                
                                                </div>
                                                                Ut labore et dolore magnam aliquam quaerat.                                    
                                        </div>
                                                                                                
 <div id="Sc2" class="Sc" style="display:none;">
      <img class="fotoganador" src="http://i.imgur.com/wHu0vci.png" />      
        <h2>
                                                             Nombre apellido<br />Premio ganado    
    </h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />      
                                                <h2>
                                                             Nombre apellido<br />Premio ganado    
     </h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />      
                                                <h2>
                                                             Nombre apellido<br />Premio ganado    
    </h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />      
                                                <h2>
                                                             Nombre apellido<br />Premio ganado    
    </h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />      
                                                <h2>
                                                             Nombre apellido<br />Premio ganado    
    </h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />      
                                                <h2>
                                                             Nombre apellido<br />Premio ganado    
                                                </h2>
                                                                                      
                                        </div>
                                                                                                
 <div id="Sc3" class="Sc" style="display:none;">
          ♫ Ut labore et dolore magnam aliquam quaerat.<br /><br />♫ Ut labore et dolore magnam aliquam quaerat.<br /><br />♫ Ut labore et dolore magnam aliquam quaerat.<br /><br /> </div>
                                                                                
  <div id="Sc4" class="Sc" style="display:none;">
                                                                      
  <div class="sabiasq">   ¿Sabías que...     </div>
                                                                                                        
  <div id="rotando" style="margin:0px auto;">
                                                                                        
 </div><script type="text/javascript">rotar();</script>                                    
                                        </div></div>
                                                                                    
                                <div id="botones">
                                                                                                
   <div id="Sb1" class="Sb selected">       Noticias               </div>
                                                                                                
  <div id="Sb2" class="Sb">    Premios       </div>
                                                                                                
  <div id="Sb3" class="Sb">       Normas     </div>
                                                                                                
  <div id="Sb4" class="Sb">  Sabías que         </div>
                                                                                            
                                </div>
                                                                                
                        </div>
                                                                                              
                </div>
                                                                                                                                                                  
        </div><span style="font-size: 10px; font-weight: 700;  text-transform: uppercase; font-family: calibri; letter-spacing: 5px; position: relative; top: 20px;"><a href="http://thecaptainknowsbest.tumblr.com/" style="color: #9E8A59;">© HARDROCK</a></span><script>
    jQuery(function() {
       var a = jQuery("#comments_scroll_div").clone();
    var c = [];
    jQuery('.module .h3:contains("Últimos temas")').closest('.inner').find('script').each(function() {
        if (!jQuery(this).attr('src')) c.push('<script>'+ jQuery(this).html() + '</' + 'script>');
    });
    jQuery("#contenedor-UltimosTemas").replaceWith('<div id="comments_scroll_div">' + a.html() + '</div>' + c.join(" "));
    jQuery(".module .inner #comments_scroll_div ").remove()
    });
</script>
</center>



Código:
/*----------------------- CSS ----------------*/
 
#comments_scroll_div {
height: 140px;
background: #040913;
padding: 5px;
margin-top: 3px;
width: 180px;
overflow: hidden;
}
 
#Sc2 h2 {
  font-size: 8px;
  text-transform: uppercase;
  font-weight: bold;
  padding-top: 13px;
  color: #ababab;
}
 
.fotoganador {
  width: 70px;
  height: 40px;
  float: left;
  margin: 5px;
}
 
.sabiasq {
  font-size: 20px;
  font-family: Great Vibes;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
}
 
.separador {
  height: 4px;
  border-bottom: 1px dotted #797170;
  margin-bottom: 4px;
}
 
.fecha {
  float: left;
  font-size: 15px;
  font-family: Great Vibes;
  line-height: 100%;
  padding: 10px;
}
 
#botones {
   text-align:center; /*CSS base*/
}
#botones div {
    display: inline-block;/*CSS base*/
}
.Sb.selected {
    background-color: #230c17; /*CSS base*/
}
 
.Sb {
  width: 40px;
  font-size: 8px;
  background: #040913;
  text-transform: uppercase;
  margin-top: 3px;
  padding: 3px;/*CSS base*/
}
 
#SCont {
  width: 185px;
  padding: 5px;
  background: #040913;
  height: 122px;
  overflow-y:auto;
  text-align: justify;
  line-height: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 10px;
  font-family: calibri;
  overflow-x:hidden;
}
 
#main-content .panel .inner ul {
  padding-left: 0px;
}
 
.ch-grid {
        margin-top: 5px;
        padding: 0;
        list-style: none;
        display: block;
        text-align: center;
        width: 210px;
}
 
.ch-grid:after,
.ch-item:before {
        content: '';
    display: table;
}
 
.ch-grid:after {
        clear: both;
}
 
.ch-grid li {
        width: 80px;
        height: 80px;
        display: inline-block;
        margin: 1px;
}
 
.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        cursor: default;
        box-shadow:
                inset 0 0 0 5px rgba(255,255,255,0.6),
                0 1px 2px rgba(0,0,0,0.1);
        transition: all 0.4s ease-in-out;
}
 
.ch-img-1 {
        background-image: url(http://i.imgur.com/UoZZXeo.png);
}
 
.ch-img-2 {
        background-image: url(http://i.imgur.com/UoZZXeo.png);
}
 
.ch-img-3 {
        background-image: url(http://i.imgur.com/UoZZXeo.png);
}
 
.ch-img-4 {
        background-image: url(http://i.imgur.com/UoZZXeo.png);
}
 
.ch-info {
        position: absolute;
        background: #040913;
        width: inherit;
        height: inherit;
        border-radius: 50%;
        overflow: hidden;
        opacity: 0;
        transition: all 0.4s ease-in-out;
        transform: scale(0);
}
 
.ch-info h3 {
        color: #ABABAB;
        font-weight: bold;
        letter-spacing: 2px;
        font-size: 10px;
        margin: 0 5px;
        padding: 20px 0 0 0;
        height: 20px;
        font-family: Calibri;
        line-height: 100%;
}
 
.ch-info p {
  color: #ABABAB;
  padding-top: 5px;
  margin: 0 10px;
  line-height: 100%;
  font-size: 9px;
  opacity: 0;
  transition: all 1s ease-in-out 0.4s;
}
 
.ch-info p a {
        display: block;
        color: rgba(255,255,255,0.7);
        font-style: normal;
        border-top: 1px solid rgba(255,255,255,0.5);
        font-weight: 700;
        font-style: italic;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding-top: 4px;
        font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
        color: #9E8A59;
}
 
.ch-item:hover {
        box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.1),
                0 1px 2px rgba(0,0,0,0.1);
}
 
.ch-item:hover .ch-info {
        transform: scale(1);
        opacity: 1;
}
 
.ch-item:hover .ch-info p {
        opacity: 1;
}
#cuerpotab {
  border: 20px solid #230c17;
  position: relative;
  padding: 10px;
  background: #797170;
  width: 660px;
  height: 260px;
  line-height: 100%;
  color: #ABABAB;
}
 
.textoamb {
  margin-top: 5px;
  text-align: justify;
  border: 5px solid #040913;
  line-height: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 10px;
  font-family: calibri;
  max-height: 100px;
  overflow-y:auto;  
  background: #040913;
}
 
.textoamb:first-letter {
  font-family: Great Vibes;
  font-size: 30px;
  line-height: 100%;
  margin-top: 40px;
  padding: 3px;
}
 
.temperatura {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 8px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}
 
.linksamb a {
  display:inline-block;
  width: 101px;
  margin-right: 1px;
  margin-bottom: 1px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 8px;
  line-height: 100%;
  background: #040913;
  color: #9E8A59;
  padding-top: 3px;
  padding-bottom: 3px;
  letter-spacing: 1px;
}
 
.titulotab {
  background: #040913;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  font-size: 11px;
}
 
.caja1tab {
  border: 20px solid #230c17;
  padding: 8px;
  background: #797170;
  width: 207px;
  height: 300px;
  margin-top: -50px;
  line-height: 100%;
}
 
/*Fin tablón*/
avatar
Alex
Admin

Mensajes : 398
Fecha de inscripción : 25/12/2014
Edad : 31

Ver perfil de usuario http://alexsgalery.foroactivo.mx

Volver arriba Ir abajo

Re: Tablon para foro con circulitos

Mensaje por Alex el Dom Mayo 08, 2016 12:42 am



Código:
<link type="text/css" rel="stylesheet" href="http://goo.gl/Snwx3c" />
<center><br />     
 
   <div id="cuerpotab">
                                                                                                                                                                                                                                                                                                                   
      <div style="position: absolute; top: 0px; left: 0px;">
                                                                                                                                                                                                                                                                    
         <ul class="ch-grid">
                                                                                                                                                                                                                                                                                           
            <li style="margin-right: 15px;">
                                                                                                                                                                                                                                                                                                              
               <div class="ch-item ch-item ch-img-1">
                                                                                                                                                                                                                                                                                                                                 
                  <div class="ch-info">
                                                                                                                                                                                                                                                                                                                                                    
                     <h3>
                                      Sky I.<br />Vanderbilt                                                                                                                                                     
                        <p>
                                                                
                        </p>
                                                                 
                     </h3>
                                                                                                                                                                                                                                                                                                                                      
                     <p>
               
                            <a href="http://sandiegouniversity.foroactivo.mx/privmsg?mode=post&u=2"><span style="color: #000000;">Enviar MP</span></a>                                                                                                                                                       
                     </p>
                                                                                                                                                                                                                                                                                                                                            
                  </div>
                                                                                                                                                                                                                                                                                                                         
               </div>
                                                                                                                                                                                                                                                                                                      
            </li>
                                                                                                                                                                                                                                                                                           
            <li>
                                                                                                                                                                                                                                                                                                              
               <div class="ch-item ch-img-2">
                                                                                                                                                                                                                                                                                                                                 
                  <div class="ch-info">
                                                                                                                                                                                                                                                                                                                                                    
                     <h3>    Lander<br />Murdock                                                                                                                                                           
                     </h3>
                                                                                                                                                                                                                                                                                                                                      
                     <p>
               
                          <a href="http://sandiegouniversity.foroactivo.mx/privmsg?mode=post&u=3"><span style="color: #000000;">Enviar MP</span></a>                                                                                                                                                       
                     </p>
                                                                                                                                                                                                                                                                                                                                            
                  </div>
                                                                                                                                                                                                                                                                                                                         
               </div>
                                                                                                                                                                                                                                                                                                      
            </li>
                                                                                                                                                                                                                                                                                 
         </ul>
                                                                                                                                                                                                                                                
         <div class="titulotab" style="margin-bottom: 7px;">          Últimos temas                                                                                                                                             
         </div>
                                                                                                                                                                                                                                    
         <div id="contenedor-UltimosTemas">
                                                                                                                                                                                                                                                                                                                                                                                   
         </div>
                                                                                                                                                                                                                                      
      </div>
                                                                                                                                                                                                                                                   
      <div class="caja1tab">
                                                                                                                                                                                                                                                                                                                            
         <div style="width: 207px; height: 100px; background:url('http://i.imgur.com/DcleCq8.gif'); position: relative">
                                                                                                                                                                                                                                                                                                             
            <div class="temperatura">
         
                 <span style="font-size: 15px; font-family: arial;">15º</span><br />Invierno                                                                                                                                               
            </div>
                                                                                                                                                                                                                                                                                                                                       
         </div>
                                                                                                                                                                                                                                                                                                                      
         <div class="textoamb" style="padding-top: 10px;">
                    Enero, 2016. Lo que pasa en SDU, se queda en SDU. Después de una nevada completamente inesperada y de los sucesos acontecidos en la fiesta de navidad, los estudiantes de la Universidad de San Diego viven temerosos con su día a día. Saben que hay alguien que los vigila, pero eso no impide que las clases retomen sus cursos habituales y que el descontrol continúe creciendo a pasos agigantados.                                                                                                                                                         
         </div>
                                                                                                                                                                                                                                                                                                    
         <div class="titulotab">                Navegación                                                                                                                                             
         </div>
     
                                                                                                                                                                                                                                                                                                      
         <div class="linksamb">
                <a href="http://sandiegouniversity.foroactivo.mx/t6-trama-ambientacion-del-foro?akata">Trama y Amb.</a><a href="http://sandiegouniversity.foroactivo.mx/t10-grupos?akata">Grupos</a><a href="http://sandiegouniversity.foroactivo.mx/f1-expedientes">Expedientes</a><a href="http://sandiegouniversity.foroactivo.mx/f3-registros">Registros</a><a href="http://sandiegouniversity.foroactivo.mx/f85-afiliaciones">Afiliaciones</a><a href="http://sandiegouniversity.foroactivo.mx/f10-busquedas">Búsquedas</a>                                                                                                                                             
         </div>
                                                                                                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                                                                                 
      <div style="position: absolute; top: 0px; right: 0px;">
                                                                                                                                                                                                                                                                    
         <ul class="ch-grid">
                                                                                                                                                                                                                                                                                           
            <li style="margin-right: 15px;">
                                                                                                                                                                                                                                                                                                              
               <div class="ch-item ch-img-3">
                                                                                                                                                                                                                                                                                                                                 
                  <div class="ch-info">
                                                                                                                                                                                                                                                                                                                                                    
                     <h3>      Blaine Hawthorne                                                                                                                                                       
                     </h3>
                                                                                                                                                                                                                                                                                                                                      
                     <p>
               
                        <a href="http://sandiegouniversity.foroactivo.mx/privmsg?mode=post&u=259">Enviar MP</a>                                                                                                                                                       
                     </p>
                                                                                                                                                                                                                                                                                                                                            
                  </div>
                                                                                                                                                                                                                                                                                                                         
               </div>
                                                                                                                                                                                                                                                                                                      
            </li>
                                                                                                                                                                                                                                                                                           
            <li>
                                                                                                                                                                                                                                                                                                              
               <div class="ch-item ch-img-4">
                                                                                                                                                                                                                                                                                                                                 
                  <div class="ch-info">
                                                                                                                                                                                                                                                                                                                                                    
                     <h3>                Fredrik Firdén                                                                                                                                                       
                     </h3>
                                                                                                                                                                                                                                                                                                                                      
                     <p>
               
               
<a href="http://sandiegouniversity.foroactivo.mx/privmsg?mode=post&u=21"><span style="color: #000000;">Enviar MP</span></a>                                                                                                                                                       
                     </p>
                                                                                                                                                                                                                                                                                                                                            
                  </div>
                                                                                                                                                                                                                                                                                                                         
               </div>
                                                                                                                                                                                                                                                                                                      
            </li>
                                                                                                                                                                                                                                                                                 
         </ul>
                                                                                                                                                                                                                                                
         <div class="titulotab">                                    Información Extra                                                                                                                                             
         </div>
                                                                                                                                                                                                                                      
         <div id="SSlider">
                                                                                                                                                                                                                                                                     
            <div id="SCont">
                                                                                                                                                                                                                                                                                            
               <div style="display:block;" class="Sc" id="Sc1">
                                           
                  <div class="fecha">                      23/02                                                                                                                                 
                  </div>
           
           
                      Los grupos: <strong><span style="color: #006600;">Corvux</span></strong> y <strong><span style="color: #ffcc00;">Universitarios</span></strong> Cerradas hasta nuevo aviso.<strong><span style="color: #663399;">Wolves</span></strong> cerrada para PJ femeninos.                                                                                                                             
                  <div class="separador">
                                                                                                                                                                                                                                                                                              
                  </div>
                               
                  <div class="fecha">        22/02                                                                                                                                 
                  </div>
           
            Limpieza de Registros y pjs inactivos.           
           
                  <div class="separador">
                                                                                                                                                                                                                                                                                              
                  </div>
                  
                  <div style="display:none;" class="Sc" id="Sc2"><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />                                                                                                                       
                     <h2>            Nombre apellido<br />Premio ganado                                                                                                                     
                     </h2><br /><img class="fotoganador" src="http://i.imgur.com/wHu0vci.png" />                                                                                                                       
                     <h2>          Nombre apellido<br />Premio ganado                                                                                                                     
                     </h2><br /><img class="fotoganador" src="http://i.imgur.com/wHu0vci.png" />                                                                                                                       
                     <h2>            Nombre apellido<br />Premio ganado                                                                                                                     
                     </h2><br /><img class="fotoganador" src="http://i.imgur.com/wHu0vci.png" />                                                                                                                       
                     <h2>                Nombre apellido<br />Premio ganado                                                                                                                     
                     </h2><br /><img class="fotoganador" src="http://i.imgur.com/wHu0vci.png" />                                                                                                                       
                     <h2>      Nombre apellido<br />Premio ganado                                                                                                                     
                     </h2><br /><img class="fotoganador" src="http://i.imgur.com/wHu0vci.png" />                                                                                                                       
                     <h2>  Nombre apellido<br />Premio ganado                                                                                                                     
                     </h2>
                                                                                                                                                                                                                                                                                        
                  </div>
                                                                                                                                                                                                                                                                                               
                  <div style="display:none;" class="Sc" id="Sc3">
                                                                                                                                                                                                                        
                     <div align="center">
                            Post mínimo 10 líneas. <br /> <br />Gráficos: <br />Avatar: 200 x 400<br /> Interior del avatar: 170x100 <br />Firma: 500 x 250  <br /> 2 Spoiler Máximo en la Firma                                                               
                     </div>
                                                                                                                                                                                          
                  </div>
                                                                                                                                                                                                                                                                               
                  <div style="display:none;" class="Sc" id="Sc4">
                                                                                                                                                                                                                                                                                                                
                     <div class="sabiasq">
                                                      Próximamente...                                                                                                                         
                     </div>
                                                                                                                                                                                                                                                                                                          
                     <div style="margin:0px auto;" id="rotando">
                                                                                                                                                                                                                                                                                             
                     </div><script type="text/javascript">rotar();</script>                                                                                                                                         
                  </div>
                                                                                                                                                                                                                                                                           
               </div>
                                                                                                                                                                                                                                                                                                                                                                                                                              
               <div id="botones">
                                                                                                                                                                                                                                                                                               
                  <div class="Sb selected" id="Sb1">                Noticias                                                                                                                             
                  </div>
                                                                                                                                                                                                                                                                                               
                  <div class="Sb" id="Sb2">                  Premios                                                                                                                             
                  </div>
                                                                                                                                                                                                                                                                                               
                  <div class="Sb" id="Sb3">                Normas                                                                                                                             
                  </div>
                                                                                                                                                                                                                                                                                               
                  <div class="Sb" id="Sb4">        Líderes                                                                                                                             
                  </div>
                                                                                                                                                                                                                                                                                   
               </div>
                                                                                                                                                                                                                                                            
            </div>
                                                                                                                                                                                                                                                               
         </div>
           <span style="font-size: 10px; font-weight: 700;  text-transform: uppercase; font-family: calibri; letter-spacing: 5px; position: relative; top: 20px;"><a style="color: #9E8A59;" href="http://thecaptainknowsbest.tumblr.com/">© HARDROCK</a></span><script>
    jQuery(function() {
      var a = jQuery("#comments_scroll_div").clone();
    var c = [];
    jQuery('.module .h3:contains("Últimos temas")').closest('.inner').find('script').each(function() {
        if (!jQuery(this).attr('src')) c.push('<script>'+ jQuery(this).html() + '</' + 'script>');
    });
    jQuery("#contenedor-UltimosTemas").replaceWith('<div id="comments_scroll_div">' + a.html() + '</div>' + c.join(" "));
    jQuery(".module .inner #comments_scroll_div ").remove()
    });
</script>           
      </div>
         
   </div>
</center>


Código:
#comments_scroll_div {
height: 140px;
width: 180px;
background: #f4f3f2;
padding: 2px;
margin-top: 3px;
overflow: hidden;
}
 
#Sc2 h2 {
  font-size: 8px;
  text-transform: uppercase;
  font-weight: bold;
  padding-top: 13px;
  color: #000000;
}
 
.fotoganador {
  width: 70px;
  height: 40px;
  float: left;
  margin: 5px;
}
 
.sabiasq {
  font-size: 20px;
  font-family: Great Vibes;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
}
 
.separador {
  height: 4px;
  border-bottom: 1px dotted #797170;
  margin-bottom: 4px;
}
 
.fecha {
  float: left;
  font-size: 15px;
  font-family: Great Vibes;
  line-height: 100%;
  padding: 10px;
}
 
#botones {
  text-align:center; /*CSS base*/
}
#botones div {
    display: inline-block;/*CSS base*/
}
.Sb.selected {
    background-color: #21A394; /*CSS base*/
}
 
.Sb {
  width: 42px;
  font-size: 9px;
  background: #F29232;
  text-transform: uppercase;
  margin-top: 3px;
  padding: 3px;/*CSS base*/
  font-family: 'Abel', sans-serif;
}
 
#SCont {
  width: 185px;
  padding: 5px;
  background: #f4f3f2;
  height: 122px;
  overflow-y:auto;
  text-align: justify;
  line-height: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 10px;
  font-family: calibri;
  overflow-x:hidden;
}
 
#main-content .panel .inner ul {
  padding-left: 0px;
}
 
.ch-grid {
        margin-top: 5px;
        padding: 0;
        list-style: none;
        display: block;
        text-align: center;
        width: 210px;
}
 
.ch-grid:after,
.ch-item:before {
        content: '';
    display: table;
}
 
.ch-grid:after {
        clear: both;
}
 
.ch-grid li {
        width: 80px;
        height: 80px;
        display: inline-block;
        margin: 1px;
}
 
.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        cursor: default;
        box-shadow:
                inset 0 0 0 5px rgba(255,255,255,0.6),
                0 1px 2px rgba(0,0,0,0.1);
        transition: all 0.4s ease-in-out;
}
 
.ch-img-1 {
        background-image: url(http://i.imgur.com/hAbTTVw.jpg?2);
}
 
.ch-img-2 {
        background-image: url(http://i.imgur.com/zutDkn9.jpg?1);
}
 
.ch-img-3 {
        background-image: url(http://i586.photobucket.com/albums/ss307/kamarmatron/b40e544a-2a91-48b2-85b2-0ea655b68949_zpswfodqcad.jpg);
}
 
.ch-img-4 {
        background-image: url(http://i.imgur.com/IJDGrzi.jpg?1);
}

.ch-info {
        position: absolute;
        background: #f4f3f2;
        width: inherit;
        height: inherit;
        border-radius: 50%;
        overflow: hidden;
        opacity: 0;
        transition: all 0.4s ease-in-out;
        transform: scale(0);
}
 
.ch-info h3 {
        color: #000000;
        font-weight: bold;
        letter-spacing: 2px;
        font-size: 10px;
        margin: 0 5px;
        padding: 20px 0 0 0;
        height: 20px;
        font-family: Calibri;
        line-height: 100%;
}
 
.ch-info p {
  color: #000000;
  padding-top: 5px;
  margin: 0 10px;
  line-height: 100%;
  font-size: 9px;
  opacity: 0;
  transition: all 1s ease-in-out 0.4s;
}
 
.ch-info p a {
        display: block;
        color: rgba(255,255,255,0.7);
        font-style: normal;
        border-top: 1px solid rgba(255,255,255,0.5);
        font-weight: 700;
        font-style: italic;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding-top: 4px;
        font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
        color: #9E8A59;
}
 
.ch-item:hover {
        box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.1),
                0 1px 2px rgba(0,0,0,0.1);
}
 
.ch-item:hover .ch-info {
        transform: scale(1);
        opacity: 1;
}
 
.ch-item:hover .ch-info p {
        opacity: 1;
}

#cuerpotab {
  border: 20px solid #00686C;
  position: relative;
  padding: 10px;
  background: #f4f3f2;
  width: 700px;
  height: 260px;
  line-height: 100%;
  color: #000000;
}
 
.textoamb {
  margin-top: 5px;
  text-align: justify;
  border: 5px solid #f4f3f2;
  line-height: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 10px;
  font-family: calibri;
  max-height: 100px;
  overflow-y:auto; 
  background: #f4f3f2;
}
 
.textoamb:first-letter {
  font-family: Great Vibes;
  font-size: 30px;
  line-height: 100%;
  margin-top: 40px;
  padding: 3px;
}
 
.temperatura {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 8px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}
 
.linksamb a {
  display:inline-block;
  width: 101px;
  margin-right: 1px;
  margin-bottom: 1px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 8px;
  line-height: 100%;
  background: #f4f3f2;
  color: #9E8A59;
  padding-top: 3px;
  padding-bottom: 3px;
  letter-spacing: 1px;
}
 
.titulotab {
  background: #21A394;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 0px;
  width: 223px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  font-size: 11px;
}

.titulotab2 {
  background: #21A394;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 223px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  font-size: 11px;
  font-family: 'Titillium Web', sans-serif;
}

.titulotab3 {
  background: #21A394;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  font-size: 11px;
  font-family: 'Titillium Web', sans-serif;
}
 
.caja1tab {
  border: 20px solid #00686C;
  padding: 8px;
  background: #f4f3f2;
  width: 220px;
  height: 300px;
  margin-top: -50px;
  line-height: 100%;
}
avatar
Alex
Admin

Mensajes : 398
Fecha de inscripción : 25/12/2014
Edad : 31

Ver perfil de usuario http://alexsgalery.foroactivo.mx

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.