<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Card Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="container">
<!-- Card Front side -->
<div class="card front">
<!-- Card Header -->
<header>
<span class="logo">
<img src="./assets/logo.png" alt="MasterCard Logo">
<h5>Master Card</h5>
</span>
<img src="./assets/chip.png" alt="Card Chip" class="chip">
</header>
<!-- Card Details -->
<div class="card-details">
<div class="name-number">
<h6>Card Number</h6>
<h5 class="number">4985 1500 3548 5697</h5>
<h5 class="name">SHEHR YAR AHMAD</h5>
</div>
<div class="valid-date">
<h6>Valid Thru</h6>
<h5>06/27</h5>
</div>
</div>
</div>
<!-- Card Backside -->
<div class="card back">
<h6>For customer service call +1 324 435 2345 or email at support@mastercard.com</h6>
<span class="strip"></span>
<div class="cvv"><i>005</i></div>
<h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi eius inventore cupiditate, rerum ab id soluta ullam ipsum sapiente nisi, repellat beatae iure! Numquam aliquid quis, amet ipsa nulla laboriosam!
</h5>
</div>
</div>
</section>
</body>
</html>
HTML.CSS仿Master-Card卡片反转效果.zip
版权申诉
185 浏览量
2024-04-10
15:40:00
上传
评论
收藏 37KB ZIP 举报
UI-Card-Design-main.zip （5个子文件） 
UI-Card-Design-main 
style.css 3KB .gitattributes 66B assets 
chip.png 29KB logo.png 5KB
index.html 2KB资源评论
