Post by Xisco Hernandez Duque

FJHDUQUE--> Formación la mejor inversión. #IFCD0210 #html #html5 #css #formacion #formaciondual. #SOIBJOVE PalmaActiva Iniciamos los servidores de los alumnos pra su presentación. CSS ======================================== @import url('https://lnkd.in/e59R6gzw'); *{  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins', sans-serif; } body{  display: flex;  align-items: center;  justify-content: center;  min-height: 100vh;  background: #ecf0f3; } .wrapper, .wrapper .img-area, .social-icons a, .buttons button{  background: #ecf0f3;  box-shadow: -3px -3px 7px #ffffff,               3px 3px 5px #ceced1; } .wrapper{  position: relative;  width: 350px;  padding: 30px;  border-radius: 10px;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column; } .wrapper .icon{  font-size: 17px;  color: #31344b;  position: absolute;  cursor: pointer;  opacity: 0.7;  top: 15px;  height: 35px;  width: 35px;  text-align: center;  line-height: 35px;  border-radius: 50%;  font-size: 16px; } .wrapper .icon i{  position: relative;  z-index: 9; } .wrapper .icon.arrow{  left: 15px; } .wrapper .icon.dots{  right: 15px; } .wrapper .img-area{  height: 150px;  width: 150px;  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center; } .img-area .inner-area{  height: calc(100% - 25px);  width: calc(100% - 25px);  border-radius: 50%; } .inner-area img{  height: 100%;  width: 100%;  border-radius: 50%;  object-fit: cover; } .wrapper .name{  font-size: 23px;  font-weight: 500;  color: #31344b;  margin: 10px 0 5px 0; } .wrapper .about{  color: #44476a;  font-weight: 400;  font-size: 16px; } .wrapper .social-icons{  margin: 15px 0 25px 0; } .social-icons a{  position: relative;  height: 40px;  width: 40px;  margin: 0 5px;  display: inline-flex;  text-decoration: none;  border-radius: 50%; } .social-icons a:hover::before, .wrapper .icon:hover::before, .buttons button:hover:before{  content: "";  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  border-radius: 50%;  background: #ecf0f3;  box-shadow: inset -3px -3px 7px #ffffff,              inset 3px 3px 5px #ceced1; } .buttons button:hover:before{  z-index: -1;  border-radius: 5px; } .social-icons a i{  position: relative;  z-index: 3;  text-align: center;  width: 100%;  height: 100%;  line-height: 40px; } .social-icons a.fb i{  color: #4267B2; } .social-icons a.twitter i{  color: #1DA1F2; } .social-icons a.insta i{  color: #E1306C; } .social-icons a.yt i{  color: #ff0000; } .wrapper .buttons{  display: flex;  width: 100%;  justify-content: space-between; } .buttons button{  position: relative;  width: 100%;  border: none;  outline: none;  padding: 12px 0;  color: #31344b;  font-size: 17px;  font-weight: 400;  border-radius: 5px;  cursor: pointer;  z-index: 4; } ............................... ============================================== #formación #content #css