Html5 y Css3

Card Moderno con Html5 y Css3

card_box

index.html

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vida Informático</title>
    <link rel="stylesheet" href="estilos.css">
    <script src="all.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <div class="card">
          <div class="sombra">
          </div>
          <div class="texto">
            <i class="fas fa-code"></i>
            <h5>Vida Informático</h5><br />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, tempora?</p>
          </div>
          </div>
        <div class="perfil">
          <img src="../img/logo.jpg" alt="">
        </div>
      </div>
       <div class="content">
        <div class="card">
          <div class="sombra1">
          </div>
          <div class="texto">
            <i class="fas fa-blog"></i>
            <h5>Vida Informático</h5><br />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, tempora?</p>
          </div>
          </div>
        <div class="perfil">
          <img src="../img/logo.jpg" alt="">
        </div>
      </div>
    </div>
  </body>
</html>

estilos.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100%;
  max-width: 1200px;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.content{
  position: relative;
  margin: 50px auto;
  width: 250px;
  height: 250px;
  border-radius: 80px 5px;
  background-color: rgba(247, 228, 228);
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.content:before,
.content:after {
  content:"";
  position:absolute;
  z-index:-2;
}
.content:before {
  left:80px;
  bottom:5px;
  width:50%;
  height:35%;
  max-width:200px;
  max-height:50px;
  -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
     -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
      box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  -webkit-transform:skew(50deg);
     -moz-transform:skew(50deg);
    -ms-transform:skew(50deg);
     -o-transform:skew(50deg);
      transform:skew(50deg);
  -webkit-transform-origin:0 100%;
     -moz-transform-origin:0 100%;
    -ms-transform-origin:0 100%;
     -o-transform-origin:0 100%;
      transform-origin:0 100%;
}
.card{
  width: 100%;
  overflow: hidden;
}
.texto{
  padding: 20px;
  margin-left: 50px;
  margin-top: -30px;
  text-align: center;
}
p{
  text-align: justify;
}
.sombra{
  width: 90px;
  height: 90px;
  background: linear-gradient(0.25turn, #f704ae, #da0606);
  border-radius: 50%;
  position: relative;
  left: -18px;
  top: -10px;
  }
.sombra1 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: relative;
  left: -18px;
  top: -10px;
  background: linear-gradient(0.25turn, #f704ae, #3e06da);
}
.perfil{
  position: absolute;
  left: -18px;
  top: -9px;
  width: 70px;
  z-index: 5;
  height: 70px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 2px gray,
  0px 0px 0px 5px #ecf0f3,
  8px 8px 15px #a7aaaf,
  -8px -8px 15px white;
  display: flex;
  overflow: hidden;
}
.perfil img{
  width: 100%;
}
.fa-blog{
    font-size: 25px;
    margin-bottom: 15px;
    color: rgb(180, 20, 220);
}
.fa-code{
  font-size: 25px;
  margin-bottom: 15px;
  color: rgb(220, 20, 20);
}
span{
  margin: auto;
  font-size: 20px;
  color: red;
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *