Карточка профиля с помощью HTML & CSS

Всем привет ✌️
В этой статье мы разберем, как создать карточку профиля, используя только HTML и CSS.
Надеюсь, вам будет интересно, поэтому давайте начнем с базовой HTML-структуры для карточек профиля.

<div class="container">  
  <div class="card">  
   <div class="border">  
    <h2>Рик Санчез</h2>  
    <div class="icons">  
     <i class="fa-brands fa-codepen" aria-hidden="true"></i>  
     <i class="fa-brands fa-instagram" aria-hidden="true"></i> 
     <i class="fa-brands fa-dribbble" aria-hidden="true"></i> 
     <i class="fa-brands fa-twitter" aria-hidden="true"></i>  
     <i class="fa-brands fa-facebook" aria-hidden="true"></i>
    </div>  
   </div>  
  </div>  
 </div>

В целом это простая карточка, у которой есть заголовок и иконки, вся красота завернула с CSS.

И так, стили для контейнера и заголовка выглядят примерно так:

.container {  
  height: 100vh;  
  width: 100vw;  
  max-height: 800px;  
  max-width: 1280px;  
  min-height: 600px;  
  min-width: 1000px;  
  display: flex;  
  justify-content: space-around;  
  align-items: center;  
  margin: 0 auto;  
}

.border {  
  height: 369px;  
  width: 290px;  
  background: transparent;  
  border-radius: 10px;  
  transition: border 1s;  
  position: relative;  
}

.border:hover {  
  border: 1px solid #080808;  
} 

h2 {  
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  
  color: #080808;  
  margin: 30px;  
  opacity: 0;  
  transition: opacity 1s;  
}

Дальше объявим стили для иконок:

.icons {  
  position: absolute;  
  fill: #fff;  
  color: #080808;  
  height: 130px;  
  top: 210px;  
  width: 50px;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-around;  
}

.fa-brands {  
  opacity: 0;  
  transition: opacity 1s;  
}

И последним шагом будут стили для карточки:

.card {  
  height: 340px;  
  width: 300px;  
  background: #808080;  
  border-radius: 10px;  
  transition: background 0.8s;  
  overflow: hidden;  
  background: #000;  
  box-shadow: 0 70px 63px -60px #000;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  position: relative;  
}

.card {  
  background: url("https://res.cloudinary.com/dkfrjnjie/image/upload/v1647692331/TravellerLogs/assets/1639465106_65-papik-pro-p-rik-risunok-65_keeadv.jpg") center center no-repeat;  
  background-size: 300px;  
}

.card:hover {  
  background: url("https://res.cloudinary.com/dkfrjnjie/image/upload/v1647692331/TravellerLogs/assets/1639465106_65-papik-pro-p-rik-risunok-65_keeadv.jpg") left center no-repeat;  
  background-size: 600px;  
}

.card:hover h2 {  
  opacity: 1;  
}

.card:hover .fa-brands {  
  opacity: 1;  
}

Вот мы и закончили создавать карточку профиля, вы можете поиграться с тем, что у нас получилось в песочнице:

Читайте дальше:

#css #html #animation