https://laluniax.github.io/sparta/
↗완성본↖
요즘 세상 정말 좋아졌다고 느낀다.
요청하면 상황에 맞게 코드를 바로 주다니 ..!
참 어려운 만큼 뿌듯한 결과물이다.
더 응용해서 꾸며 보고 싶었는데 아직 그정도 수준은 아니어서 보류했다.
코드는 아래에!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Via's market</title>
<link rel="stylesheet"
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<style>
.container {
margin-bottom: 50px;
}
.card:hover {
transform: scale(1.05);
}
</style>
</style>
</head>
<body>
<div class="hero bg-dark text-center py-5">
<h1 class="text-white">미니멀리스트가 꿈이어서 팝니다.</h1>
<h2 class="text-white">상태 좋습니다.</h2>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">전기밥솥</h5>
<h6 class="card-subtitle mb-2 text-muted">5만원</h6>
<p class="card-text">한 번 밖에 안쓴 전기밥솥 팝니다. 부모님이 독립 할 때 주신 거에요!</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">의자</h5>
<h6 class="card-subtitle mb-2 text-muted">1만원</h6>
<p class="card-text">사무실에서 사용한 의자 팝니다. 조절 가능한 팔걸이가 달려있어요.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">노트북</h5>
<h6 class="card-subtitle mb-2 text-muted">30만원</h6>
<p class="card-text">삼성 노트북 판매합니다. 사용기간은 1년 정도이며, 상태는 깨끗합니다.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
나중에 한 번 더 해보고 처음부터 다시 만들어 봐야겠다