비전공자 개발일기

Profile Card 본문

HTML _CSS

Profile Card

HiroDaegu 2022. 4. 28. 00:40
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile Card</title>
  <link rel="stylesheet" href="style.css">
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
  />
</head>
<body>
  <div class="container">
    <div class="card card0">
      <div class="border">
        <h2>HiroDaegu</h2>
        <div class="icons">
          <i class="fab fa-codepen" aria-hidden="true"></i>
          <i class="fab fa-instagram" aria-hidden="true"></i>
          <i class="fab fa-dribbble" aria-hidden="true"></i>
          <i class="fab fa-twitter" aria-hidden="true"></i>
          <i class="fab fa-facebook" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
.container {
  width: 100vw;
  height: 100vh;
  max-width: 1280px;
  max-height: 800px;
  min-width: 1000px;
  min-height: 600px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
}

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

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

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

.card0 {
  background: url("https://fsa.zobj.net/crop.php?r=GNczhUlyceDCimUnSLZLrCCGxgXi3UaKCJAKrHzRLuSJT2hKSysaX58mC3KHjQvh5lTvqN-v9leuts1GOFUxIK5dWwl9FqVSHs5dCGf1MFz8ROuSEeAQOHp54SgxW2CorMsLJdvm5pk8Ypvz3kp_iEUWlLNKCNVI1yBrdPXz_3jvB5UhNZczCaqpYc6f3nOB5nflv8DPg7Fg_wvv") center center no-repeat;
  background-size: 300px;
}

.card0:hover {
  background: url("https://fsa.zobj.net/crop.php?r=GNczhUlyceDCimUnSLZLrCCGxgXi3UaKCJAKrHzRLuSJT2hKSysaX58mC3KHjQvh5lTvqN-v9leuts1GOFUxIK5dWwl9FqVSHs5dCGf1MFz8ROuSEeAQOHp54SgxW2CorMsLJdvm5pk8Ypvz3kp_iEUWlLNKCNVI1yBrdPXz_3jvB5UhNZczCaqpYc6f3nOB5nflv8DPg7Fg_wvv") left center no-repeat;
  background-size: 600px;
}

.card0:hover h2 {
  opacity: 1;
}

.card0:hover .fab {
  opacity: 1;
}

.card1 {
  background: url("https://fsa.zobj.net/crop.php?r=GNczhUlyceDCimUnSLZLrCCGxgXi3UaKCJAKrHzRLuSJT2hKSysaX58mC3KHjQvh5lTvqN-v9leuts1GOFUxIK5dWwl9FqVSHs5dCGf1MFz8ROuSEeAQOHp54SgxW2CorMsLJdvm5pk8Ypvz3kp_iEUWlLNKCNVI1yBrdPXz_3jvB5UhNZczCaqpYc6f3nOB5nflv8DPg7Fg_wvv") center center no-repeat;
  background-size: 300px;
}

.card1:hover {
  background: url("https://fsa.zobj.net/crop.php?r=GNczhUlyceDCimUnSLZLrCCGxgXi3UaKCJAKrHzRLuSJT2hKSysaX58mC3KHjQvh5lTvqN-v9leuts1GOFUxIK5dWwl9FqVSHs5dCGf1MFz8ROuSEeAQOHp54SgxW2CorMsLJdvm5pk8Ypvz3kp_iEUWlLNKCNVI1yBrdPXz_3jvB5UhNZczCaqpYc6f3nOB5nflv8DPg7Fg_wvv") left center no-repeat;
  background-size: 600px;
}

.card1:hover h2 {
  opacity: 1;
}

.card1:hover .fab {
  opacity: 1;
}

.card2 {
  background: url("https://fsa.zobj.net/crop.php?r=GNczhUlyceDCimUnSLZLrCCGxgXi3UaKCJAKrHzRLuSJT2hKSysaX58mC3KHjQvh5lTvqN-v9leuts1GOFUxIK5dWwl9FqVSHs5dCGf1MFz8ROuSEeAQOHp54SgxW2CorMsLJdvm5pk8Ypvz3kp_iEUWlLNKCNVI1yBrdPXz_3jvB5UhNZczCaqpYc6f3nOB5nflv8DPg7Fg_wvv") center center no-repeat;
  background-size: 300px;
}

.card2:hover {
  background: url("https://fsa.zobj.net/crop.php?r=GNczhUlyceDCimUnSLZLrCCGxgXi3UaKCJAKrHzRLuSJT2hKSysaX58mC3KHjQvh5lTvqN-v9leuts1GOFUxIK5dWwl9FqVSHs5dCGf1MFz8ROuSEeAQOHp54SgxW2CorMsLJdvm5pk8Ypvz3kp_iEUWlLNKCNVI1yBrdPXz_3jvB5UhNZczCaqpYc6f3nOB5nflv8DPg7Fg_wvv") left center no-repeat;
  background-size: 600px;
}

.card2:hover h2 {
  opacity: 1;
}

.card2:hover .fab {
  opacity: 1;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  margin: 20px;
  opacity: 0;
  transition: opacity 1s;
}

.fab {
  opacity: 0;
  transition: opacity 1s;
}

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

'HTML _CSS' 카테고리의 다른 글

Scanner Animation  (0) 2022.04.30
Love Animation  (0) 2022.04.29
Endless Road Animation  (0) 2022.04.26
Gradient Background Animation  (0) 2022.04.25
Text Hover Effect & Shake On Invaild Input  (0) 2022.04.23
'HTML _CSS' Related Articles more