클래스 card
Coddy의 이미지 아코디언 | 프론트엔드 프로젝트 코스 레슨 — 17개 중 11번째.
챌린지
쉬움'card' 클래스를 대상으로 다음을 설정하세요:
- 너비(width)를 130픽셀로 설정합니다.
- background-size를 cover로 설정합니다.
- cursor를 pointer로 설정합니다.
- overflow를 hidden으로 설정합니다.
- 테두리 반경(border radius)을 25픽셀로 설정합니다.
- 여백(margin)을 상하 0, 좌우 10픽셀로 설정합니다.
마지막에 다음 transition과 box-shadow를 추가합니다:
transition: .6s cubic-bezier(.28,-0.03,0,.99); box-shadow: 0px 10px 30px -5px rgba(82, 9, 9, 0.8);
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>