[수코딩] [HTML/CSS] 간단한 Card UI 만들기 / 폰트어썸 / 실습 / 웹 코딩
2023. 1. 17. 11:56ㆍFrontEnd & Mobile/HTML & CSS
폰트사이트)
fontawesome
cdn.js
[index2.html]
<!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>Card UI</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="card">
<i class="fa-sharp fa-solid fa-credit-card fa-6x"></i>
<i class="fa-regular fa-credit-card fa-6x"></i>
</div>
</body>
</html>
[style2.css]
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #171c3c;
}
.card{
width: 200px;
height: 300px;
background-color: #ed4848;
position: relative;
cursor: pointer;
transition: all 0.5s;
}
.card:hover{
box-shadow: inset 0 0 0 100px rgba(255, 190, 0, 0.7);
}
.card i{
position: absolute;
left: 50%;
top: 50%;
margin-left:-54px;
margin-top:-48px;
color: white;
transition: all 0.5s;
}
.card i:nth-of-type(1) {
transform:scale(0);
}
.card:hover i:nth-of-type(1){
transform:scale(1);
}
.card:hover i:nth-of-type(2){
transform:scale(0);
}
결과물)
'FrontEnd & Mobile > HTML & CSS' 카테고리의 다른 글
| [코딩알려주는누나 | 부트스트랩 사용법] (0) | 2023.03.18 |
|---|---|
| airbnb 클론 코딩 (0) | 2023.01.29 |
| [제주코딩베이스캠프] (신) 올 뉴 30분 요약강좌(Bootstrap) (0) | 2023.01.16 |
| [수코딩] [HTML/CSS] Full Screen Landing Page 만들기 (배경 이미지 본문 내용 참고) / 웹코딩 / 실습 (0) | 2023.01.16 |
| [수코딩] 텍스트 타이핑 효과 어디까지 만들어봤니?(only css) / HTML+CSS 실습 / 웹 코딩 (0) | 2023.01.16 |