Tarjetas Presentacion CSS HTML - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

martes, 13 de marzo de 2018

Tarjetas Presentacion CSS HTML

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

   

Post Top Ad

Responsive Ads Here