martes, 13 de marzo de 2018

Tarjetas Presentacion CSS HTML




Buenas compañeros, les compartimos este sistema de filtro hecho con HTML y solamente utilizando CSS .



DESCARGA EL CODIGO AQUI :


CODIGO HTML

<table align="center">
  <tr> 
    <td><div class="profile">
  <img src="https://gravatar.com/avatar/cada8451e454d5d8f592805e17d4be01?s=512&amp;d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png" />
  <h1>
    Juan Carlos Valencia Villena
  </h1>
  <div class="bar">
    <span class="one"></span><span class="two"></span><span class="three"></span><span class="four"></span><span class="five"></span>
  </div>
  <h2>
    Ingenieria Ingenieria en Informatica | Creditos Adicionales.
  </h2>
</div></td>
  <td><div class="profile">
  <img src="https://slipkorn.files.wordpress.com/2007/07/avatar-south-park.jpg" />
  <h1>
    Erik Estrada Ortega
  </h1>
  <div class="bar">
    <span class="one"></span><span class="two"></span><span class="three"></span><span class="four"></span><span class="five"></span>
  </div>
  <h2>
    Ingenieria Ingenieria en Informatica | Creditos Adicionales.
  </h2>
</div></td>
  </tr>
</table>
 CODIGO HTML

@import url(https://fonts.googleapis.com/css?family=Sigmar+One)
@import url(https://fonts.googleapis.com/css?family=Passion+One:400,700)

$gray: #555
$dark-gray: #333
$black: #242224
$white: #F4F2F4
$one: #5C96BC
$two: #42E31B
$three: #FEDE16
$four: #E66504
$five: #C60600

body
  background: $black
.profile
  padding: 30px
  margin: 30px auto
  width: 40%
  min-width: 240px
  text-align: center
  background: $white
  border-radius: 2px
  &:hover
    img
      transform: rotate(-3deg)
    .bar span
      opacity: 1
  img
    width: 160px
    border-radius: 90px
    margin-bottom: 28px
    box-shadow: 0 8px 6px -6px $gray
    transition: transform 1s
  .bar span
    width: 20%
    opacity: 0.5
    display: inline-block
    height: 5px
    padding: 0
    margin: 15px 0
    transition: opacity 1s
    &.one
      background-color: $one
    &.two
      background-color: $two
    &.three
      background-color: $three
    &.four
      background-color: $four
    &.five
      background-color: $five
  h1, h2
    color: $dark-gray
    text-rendering: optimizeLegibility
  h1
    font-family: 'Sigmar One', Serif
    font-size: 24px
    line-height: 26px
  h2
    font-family: 'Passion One', Serif
    font-size: 20px
    line-height: 22px

   


Checa esto

¿Que temas debe de haber en la pagina?

Posts Populares

Popular Posts

Recent Posts