RESET

RESET

Цветы на чёрном фоне_IMGBOX

Увидеть красоту во всём... ♥

blockquote.cita

Когда за слабость принимают доброту
Нетрудно лаять и кусать в ответ
Сложней прожить и не утратить свет
Я изувечусь, но пути свои пройду
Я просто верю, что в природе зла
Лежит нехватка света и тепла

Accordion with CSS3

About us

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.

How we work

Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.

References

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Contact us

vertical accordion

• CSS

  .accordion { /* el contenedor */
    list-style: none;
    overflow: hidden;
    margin: 0;
    width: 720px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
  }
  .accordion h2 { /* el título */
    color: #DEF;
    font-family: Helvetica;
    font-size: 20px;
    margin: 0 0 0.5em;
    text-align: center;
  }
  .accordion li { /* cada item de la lista */
    float: left;
    overflow: hidden;
    height: 210px; /* la altura máxima que le daremos */
    width: 200px; /* el ancho por defecto */
    /* las propeidades de animación */
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -moz-transition-delay: 0.15s;
    -webkit-transition-delay: 0.15s;
    -o-transition-delay: 0.15s;
    transition-delay: 0.15s;
  }
  .accordion li:first-of-type { /* bordes redondeados de la primera pestaña */
    -moz-border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    -o-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
  }
  .accordion li:last-of-type{ /* bordes redondeados de la última pestaña */
    -moz-border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    -o-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
  }
  .accordion div { /* el contenido */
    padding: 10px;
  }
  .accordion:hover li {
     /* al colocar el cursor encima de cualquiera se reduce el ancho de todas */
    width: 100px;
  }
  .accordion li:hover {
     /* y aumenta el ancho de la que estamos seleccionando */
    width: 400px;
  }
  /* los colores de cada pestañ */
  .slide-01 {background:#404951; color:#FFF;}
  .slide-02 {background:#606971; color:#FFF;}
  .slide-03 {background:#808991; color:#FFF;}

• HTML 2

  <ul class="accordion">
    <li class="slide-01">
      <div>
        <h2>Pestaña 1</h2>
        ....... el contenido .......
      </div>
    </li>
    <li class="slide-02">
      <div>
        <h2>Pestaña 2</h2>
        ....... el contenido .......
      </div>
    </li>
    <li class="slide-03">
      <div>
        <h2>Pestaña 2</h2>
        ....... el contenido .......
      </div>
    </li>
  </ul>

• Pestaña 2

  

• Pestaña 1

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

• Pestaña 2

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

• Pestaña 3

  Когда за слабость принимают доброту
  Нетрудно лаять и кусать в ответ
  Сложней прожить и не утратить свет
  Я изувечусь, но пути свои пройду
  Я просто верю, что в природе зла
  Лежит нехватка света и тепла
  
  
  
  

mostrar y ocultar contenido.

¿Qué significa SOS?

Save Our Souls

Save Our Ship

No significa nada

Socorro Oh Socorro