<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
he
<div class="container">
<!-- 로고~회원가임 -->
<div class="row mt-4 justify-content-between">
<div class="col-5">
<div class="row align-items-center">
<div class="col-3">
<img class="img-fluid" src="./Downloads/로고.png" alt="">
</div>
<!-- <div class="col">
<span>중고</span>
<span>대여</span>
<span>경매</span>
<span>커뮤니티</span>
</div> -->
<div class="col">
<ul class="nav fw-bold fs-5">
<li class="nav-item">
<a class="text-black nav-link active" aria-current="page" href="#">중고</a>
</li>
<li class="nav-item">
<a class="text-black nav-link" href="#">대여</a>
</li>
<li class="nav-item">
<a class="text-black nav-link" href="#">경매</a>
</li>
<li class="nav-item">
<a class="text-black nav-link" href="#">커뮤니티</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-5">
<div class="row my-3 text-end">
<div class="col rounded-pill border">
<div class="row align-items-center fw-bold">
<div class="col-10">
<input class="border-0 form-control" type="text" placeholder="검색">
</div>
<div class="col">
<i class=" fw-bold bi bi-search"></i>
</div>
</div>
</div>
<div class="col ps-0">
<button type="button" class="px-4 btn btn-light border">로그인</button>
<button type="button" class="px-2 me-4 btn btn-warning">
<span class="text-white fw-bold">
회원가입
</span>
</button>
</div>
</div>
</div>
<!-- 사진넘어가기 -->
<div class="row">
<div class="col">
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="./Downloads/대여 상단 광고1.jpg" class="w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="./Downloads/대여 상단 광고1.jpg" class="w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!-- 하단전체 -->
<div class="row mt-4">
<!-- 좌측 메뉴 -->
<div class="col-2">
<div class="rows">
<div class="col">
<span class="fw-bold fs-5">전체보기</span>
</div>
</div>
<div class="row my-2">
<div class="col mt-2">
<ul class="my-1 p-0">
<span class="fw-bold">
가구
</span>
</ul>
<ul class="fw-light my-2 p-0">소파</ul>
<ul class="fw-light my-2 p-0">침대</ul>
<ul class="fw-light my-2 p-0">테이블</ul>
<ul class="fw-light my-2 p-0">수납장</ul>
</div>
</div>
<div class="row my-2">
<div class="col mt-2">
<ul class="my-1 p-0">
<span class="fw-bold">
생활가전
</span>
</ul>
<ul class="fw-light my-2 p-0">세탁기</ul>
<ul class="fw-light my-2 p-0">건조기</ul>
<ul class="fw-light my-2 p-0">제습기</ul>
<ul class="fw-light my-2 p-0">공기청정기</ul>
<ul class="fw-light my-2 p-0">에어컨</ul>
<ul class="fw-light my-2 p-0">티비</ul>
</div>
</div>
<div class="row my-2">
<div class="col mt-2">
<ul class="my-1 p-0">
<span class="fw-bold">
주방가전
</span>
</ul>
<ul class="fw-light my-2 p-0">정수기</ul>
<ul class="fw-light my-2 p-0">냉장고</ul>
<ul class="fw-light my-2 p-0">식기세척기</ul>
<ul class="fw-light my-2 p-0">커피머신</ul>
</div>
</div>
<div class="row my-2">
<div class="col mt-2">
<ul class="my-1 p-0">
<span class="fw-bold">
전자기기
</span>
</ul>
<ul class="fw-light my-2 p-0">노트북</ul>
<ul class="fw-light my-2 p-0">테블릿</ul>
<ul class="fw-light my-2 p-0">스피커</ul>
<ul class="fw-light my-2 p-0">민지짱</ul>
</div>
</div>
</div>
<!-- 우측 상품들나열 -->
<div class="col">
<!-- 파워광고 -->
<div class="row">
<div class="col">
<div class="row mb-2">
<div class="col">
<span class="fw-bold fs-5">파워광고상품</span>
</div>
</div>
<div class="row">
<div class="col m-2 position-relative">
<span class="m-1 position-absolute top-0 end-0 badge rounded-pill bg-secondary" style="--bs-bg-opacity: .5;">
AD
</span>
<div class="row">
<div class="col bg-light" style="height: 10em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
<div class="col m-2 position-relative">
<span class="m-1 position-absolute top-0 end-0 badge rounded-pill bg-secondary" style="--bs-bg-opacity: .5;">
AD
</span>
<div class="row">
<div class="col bg-light" style="height: 10em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
<div class="col m-2 position-relative">
<span class="m-1 position-absolute top-0 end-0 badge rounded-pill bg-secondary" style="--bs-bg-opacity: .5;">
AD
</span>
<div class="row">
<div class="col bg-light" style="height: 10em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
<div class="col m-2 position-relative">
<span class="m-1 position-absolute top-0 end-0 badge rounded-pill bg-secondary" style="--bs-bg-opacity: .5;">
AD
</span>
<div class="row">
<div class="col bg-light" style="height: 10em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
<div class="col m-2 position-relative">
<span class="m-1 position-absolute top-0 end-0 badge rounded-pill bg-secondary" style="--bs-bg-opacity: .5;">
AD
</span>
<div class="row">
<div class="col bg-light" style="height: 10em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
<div class="col m-2 position-relative">
<span class="m-1 position-absolute top-0 end-0 badge rounded-pill bg-secondary" style="--bs-bg-opacity: .5;">
AD
</span>
<div class="row">
<div class="col bg-light" style="height: 10em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 금주 스페셜 -->
<div class="row mt-3">
<div class="col">
<div class="row mb-2">
<div class="col">
<span class="fw-bold fs-5">금주의 스페셜딜</span>
</div>
</div>
<div class="row mt">
<div class="col">
<img class="rounded img-fluid" src="./Downloads/광고1.png" alt="">
</div>
<div class="col">
<img class="rounded img-fluid" src="./Downloads/광고2.png" alt="">
</div>
</div>
</div>
</div>
<!-- 카테고리 -->
<div class="row mt-4 mb-2">
<div class="col">
<div class="row mb-2 justify-content-between">
<div class="col">
<span class="fw-bold fs-5">카테고리</span>
</div>
<div class="col text-end">
<span class="fw-light" style="font-size: 0.7em;">전체보기</span>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col" style="height: 7em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col text-center">
<span class="fw-bold">가구</span>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="height: 7em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col text-center">
<span class="fw-bold">가구</span>
</div>
</div>
</div><div class="col">
<div class="row">
<div class="col" style="height: 7em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col text-center">
<span class="fw-bold">가구</span>
</div>
</div>
</div><div class="col">
<div class="row">
<div class="col" style="height: 7em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col text-center">
<span class="fw-bold">가구</span>
</div>
</div>
</div><div class="col">
<div class="row">
<div class="col" style="height: 7em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col text-center">
<span class="fw-bold">가구</span>
</div>
</div>
</div><div class="col">
<div class="row">
<div class="col" style="height: 7em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col text-center">
<span class="fw-bold">가구</span>
</div>
</div>
</div><div class="col">
<div class="row">
<div class="col" style="height: 7em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col text-center">
<span class="fw-bold">가구</span>
</div>
</div>
</div><div class="col">
<div class="row">
<div class="col" style="height: 7em;">
<img class="h-100 w-100" src="./img/chair.png" alt="">
</div>
</div>
<div class="row">
<div class="col text-center">
<span class="fw-bold">가구</span>
</div>
</div>
</div>
</div>
</div>
<!-- 대여상품 -->
<div class="row mt-4 mb-2">
<div class="col">
<div class="row mb-2 justify-content-between">
<div class="col">
<span class="fw-bold fs-5">대여상품</span>
</div>
<div class="col pe-0 text-end">
<span class="fw-light" style="font-size: 0.7em;">전체보기</span>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col bg-light" style="height: 10em; width: auto;">
<img class="h-100 w-100" src="./Downloads/대여 상품1.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col bg-light" style="height: 10em; width: auto;">
<img class="h-100 w-100" src="./Downloads/대여 상품1.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col bg-light" style="height: 10em; width: auto;">
<img class="h-100 w-100" src="./Downloads/대여 상품1.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col bg-light" style="height: 10em; width: auto;">
<img class="h-100 w-100" src="./Downloads/대여 상품1.png" alt="">
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-light text-secondary-emphasis" style="font-size: smaller;">
사파리월드
</span>
</ul>
<ul class="m-0 p-0">
<span>
미친 쿠션 의자
</span>
</ul>
</div>
</div>
<div class="row">
<div class="col p-1">
<ul class="m-0 p-0">
<span class="fw-bold">
29,900원
</span>
<span class="fw-light" style="font-size: 0.8em;">
/원
</span>
</ul>
<ul class="m-0 p-0 text-secondary-emphasis fw-light" style="font-size: 0.8em;">
<i class="bi bi-heart"></i>
<span>12</span>
<i class="bi bi-chat"></i>
<span>8</span>
</ul>
<ul class="m-0 p-0">
<span class="badge text-bg-secondary fw-light text-black" style="font-size: 0.6em; --bs-bg-opacity: .5;">
무료배송
</span>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</body>
</html>'HTML > DAY 33 _ 23.10.10' 카테고리의 다른 글
| Position - relative (0) | 2023.10.11 |
|---|---|
| Position - fixed, sticky (1) | 2023.10.11 |
| Wep page Self2 - 당근1 (0) | 2023.10.11 |
