Html5 y Css3

Card con Html5 y Css3

card
Compartir en:

Código

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vida Informático</title>
    <link rel="stylesheet" href="ini.css">
    <script src="js/iconos.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">
          <span>01</span>
        </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">
          <span>02</span>
        </div>
      </div>
    </div>
  </body>
</html>

Estilos

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  background-image: url("img/img02.jpg");
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}
.content{
  position: relative;
  margin: 50px auto;
  width: 250px;
  height: 250px;
  background-color: white;
  box-shadow: 1px 1px 10px 5px black;
  border-radius: 0px 80px;
}
.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;
  box-shadow: 1px 1px 50px 1px black;
}
.sombra1 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: relative;
  left: -18px;
  top: -10px;
  box-shadow: 1px 1px 50px 1px black;
  background: linear-gradient(0.25turn, #f704ae, #3e06da);
}
.perfil{
  position: absolute;
  left: -18px;
  top: -9px;
  width: 70px;
  z-index: 5;
  height: 70px;
  background-color: white;
  box-shadow: 2px 2px 2px 2px black;
  border-radius: 50%;
  border: solid 6px rgb(247, 228, 228);
  display: flex;
}
.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 *