본문 바로가기
css

HTML 및 CSS를 사용한 Response Product Preview 카드

by code-box 2022. 2. 16.
반응형

안녕하세요, 이 블로그에 오신 것을 환영합니다. 오늘은 HTML을 사용하여 Awesome Product Card를 만드는 방법을 알아보겠습니다.

제품 카드는 카드처럼 보이는 요소입니다. 그것은 상품, 다양한 가격 요금제, 구독, 또는 가격을 비교하기 위해 상업용 웹사이트에 있다.

우리의 디자인 [Awesome Product Card]에는 위의 이미지와 같이 화면 중앙에 하나의 카드가 있습니다. 상단에는 제품 이미지가 있고, 제품 이미지 뒤에 제품 제목이 있고, 왼쪽에는 제품 설명 뒤에 제품 가격이 나와 있고, 오른쪽에는 제품 가격이 나와있는 시간이 있고, 그 이후에는 봇에 시간이 있습니다.톰, 판매자의 프로필과 판매자 이름이 있어요.

만약 우리가 어떻게 이런 종류의 가격 카드를 만들 수 있는지 당신이 조금 혼란스럽다면. 그래서 당신은 그것을 직접 확인할 수 있고 코드도 확인할 수 있습니다.

 

여기서 미리 볼 수 있습니다.

HTML 코드

<!------------------- Created By InCoder ----------------- -->
<!DOCTYPE html>
  <html lang="en">

    <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>NFT preview card component</title>
  <link rel="stylesheet" href="main.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        </head>

<body class="bg-dark-blue full-wh">
    <div class="card">
          <div class="header">
                  <img src="https://blogger.googleusercontent.com/img/a/AVvXsEgKnmCh6IsgsDrEUWO2m6yyuJXx1ctghfweiI-6vgpTCHpvfgnA5ZC8FISiMz6oD89fQTrK1nL7QdPr63qv9BKev5k9BQoZC5BS4A4pAWPWQ5w7DLgVJJA0ytfU0Bll6GSoyjqqGvOOwhv4n8wFgRxrwgpPOF4FUh9Kq3VLGeEaGYEbrcgKQa3058STlg=s604" class="CardImage" alt="NFT preview card component">
                          <div class="overlay"></div>
      <div class="icon"><i class="fas fa-eye"></i></div>
            </div>
    <div class="card-body">
            <h3>Equilibrium #8488</h3>
      <p>Our Equilibrium collection promotes balance and calm.</p>
      <div class="details">
                <div class="priceBox">
                            <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg" style="user-select: auto;">
                                          <path d="M11 10.216 5.5 18 0 10.216l5.5 3.263 5.5-3.262ZM5.5 0l5.496 9.169L5.5 12.43 0 9.17 5.5 0Z" fill="#00FFF8" style="user-select: auto;"></path>
          </svg>
          <span>0.041 ETH</span>
        </div>
        <div class="timeBox">
                    <span><i class="fas fa-clock"></i></span>
                                8 Days Left
                                        </div>
      </div>
    </div>
    <div class="card-footer">
            <div class="profile">
                      <img src="https://1.bp.blogspot.com/-Q3I_W0x3yYQ/YdABortIzlI/AAAAAAAAD-Y/8tk7dBcu1yMXJm-AGwacS5YZj0I_bYYOwCK4BGAYYCw/s56-c/217519793_255545932643823_6246540766433937605_n.jpg" alt="Creator Profile">
                                <p>Created By <span>Ashutosh Tiwari</span></p>
                                        </div>
    </div>
  </div>
</body>

</html>

CSS 코드

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-wh {
    width: 100vw;
    height: 100vh;
}

.bg-dark-blue {
    background: linear-gradient(#161647, #0b0b29);
}

.card {
    width: 20rem;
    margin: 10px 10px;
    padding: 12px 20px;
    border-radius: 1rem;
    font-family: "Poppins", sans-serif;
    background: linear-gradient(#1b1b53, #1a1a55);
}

.header {
    position: relative;
}

.header .CardImage {
    max-width: 100%;
      border-radius: 0.5rem;
}

.header .overlay {
    left: 0;
    top: 0px;
    opacity: 1;
    height: 98%;
      width: 100%;
        cursor: pointer;
    font-size: 2rem;
    position: absolute;
    border-radius: 0.5rem;
}

.header:hover .overlay {
    opacity: 0.4;
    background: cyan;
}

.header:hover .icon {
    display: block;
}

.icon {
    top: 50%;
      left: 50%;
        color: #fff;
    display: none;
    font-size: 3rem;
    position: absolute;
    transform: translate(-50%, -50%);
}

.card-body {
    color: #fff;
    margin-top: 0.5rem;
}

.card-body h3 {
    font-weight: 600;
    font-size: 1.3rem;
}

.card-body p {
    font-size: 16px;
    margin-top: 10px;
    color: #a7c9e1;
}

.details {
    display: flex;
    margin-top: 1.5rem;
    justify-content: space-between;
}

.details .priceBox,
  .details .timeBox {
      display: flex;
      color: #a7c9e1;
      align-items: center;
  }

.details .timeBox span {
    margin-right: 4px;
}

.details .priceBox span {
    color: #00fff8;
    margin-left: 4px;
}

.card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 0.1rem solid #294164;
}

.card-footer .profile {
    display: flex;
    font-size: 18px;
    color: #a7c9e1;
    align-items: center;
}

.card-footer .profile img {
    max-width: 2.5rem;
    max-height: 2.5rem;
    border-radius: 50%;
      margin-right: 0.6rem;
    border: 2px solid #fff;
}

.card-footer .profile span {
    color: #00fff8;
}
 
저작자표시

'css' 카테고리의 다른 글

웹 사이트에서 사용자 지정 글꼴 사용  (0) 2022.02.16
인도의 마젠토 2 인증 개발자 | 마젠토  (0) 2022.02.16
HTML 및 CSS를 사용한 애니메이션 제품 미리보기 카드 설계  (0) 2022.02.16
스크롤 기능이 활성화되는 동안 스크롤 막대 보기 숨기기 - CSS  (0) 2022.02.16
CSS를 사용하여 스크롤 막대를 스타일 지정하는 방법  (0) 2022.02.16

관련글

댓글

티스토리툴바