<!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>
<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-4 me-1 btn btn-warning">
<span class="text-white fw-bold">
회원가입
</span>
</button>
</div>
</div>
</div>
</div>
<!-- 사진~상세페이지 -->
<div class="row mt-4">
<div class="col mx-2">
<div class="row">
<div class="col">
<span class="bg-danger border form-control fw-bold text-white text-center">
<i class="bi bi-clock"></i>
경매 종료까지 5일 15:02:28
</span>
</div>
</div>
<div class="row">
<div class="col">
<img class="img-fluid" src="./Downloads/경매1.png" alt="">
<span class="ms-2 text-secondary" style="font-size: 0.8em;">
※ 상품 이미지를 클릭하시면 상세정보와 Q&A를 확인하실 수 있습니다.
</span>
</div>
</div>
<div class="row mt-5">
<div class="col py-3">
<span class="fw-bold fs-5">실시간 입찰 현황</span>
</div>
</div>
<div class="row mt-2 mb-5">
<div class="col text-center">
<div class="row fw-bold pb-1 border-bottom border-dark">
<div class="col">
닉네임
</div>
<div class="col">
입찰가
</div>
<div class="col">
거래일
</div>
</div>
<div class="row py-1 border-bottom">
<div class="col">
카이사
</div>
<div class="col">
23,000원
</div>
<div class="col">
2023.08.23 오후 9:39
</div>
</div>
<div class="row py-1 border-bottom">
<div class="col">
zeri
</div>
<div class="col">
22,000원
</div>
<div class="col">
2023.08.22 오후 12:00
</div>
</div>
<div class="row py-1 border-bottom">
<div class="col">
릴리아
</div>
<div class="col">
20,000원
</div>
<div class="col">
2023.08.21 오후 11:39
</div>
</div>
<div class="row py-1 border-bottom">
<div class="col">
카이사
</div>
<div class="col">
19,000원
</div>
<div class="col">
2023.08.16 오후 8:37
</div>
</div>
<div class="row py-1 border-bottom">
<div class="col">
아트록스
</div>
<div class="col">
18,000원
</div>
<div class="col">
2023.08.16 오후 08:30
</div>
</div>
</div>
</div>
</div>
<div class="col mx-2">
<div class="row mt-1 text-secondary justify-content-between">
<div class="col">
<span>
홈 > IT용품 > 테블릿
</span>
</div>
<div class="col text-end">
<span >
<i class="bi bi-info-circle"></i>
판매자 정보 확인하기
</span>
</div>
</div>
<div class="row mt-3 justify-content-between">
<div class="col-4">
<button type="button" class="btn btn-success btn-sm">진행중</button>
</div>
<div class="col-4 text-end">
<i class="bi bi-share"></i>
</div>
</div>
<div class="row mt-2">
<div class="col">
<span class="fs-4 fw-bold">아이패드 아크릴 투명 케이스 에어5</span>
</div>
</div>
<div class="row mt-2">
<div class="col">
<i class="bi bi-heart text-danger"></i>
<span class="text-secondary">4</span>
<i class="ms-3 bi bi-people"></i>
<span class="text-secondary">4명 참여</span>
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="row mt-4 pb-3 border-bottom justify-content-between align-items-center">
<div class="col-4 align-self-end">
<span class="fs-6 text-secondary">현재가</span>
</div>
<div class="col-4 text-end">
<span class="fs-3 fw-bold text-danger">23,000</span>
<span class="fs-6 text-secondary">원</span>
</div>
</div>
<div class="row mt-3 justify-content-between">
<div class="col-4">
<span class="fs-6 text-secondary">즉시낙찰가</span>
</div>
<div class="col-4 text-end">
<span class="fw-bold">30,000</span>
<span class="fs-6 text-secondary">원</span>
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
<span class="fs-6 text-secondary">경매시작일</span>
</div>
<div class="col-4 text-end">
<span class="fs-6 text-secondary">2023-08-16 오후 8:02</span>
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
<span class="fs-6 text-secondary">경매종료일</span>
</div>
<div class="col-4 text-end">
<span class="fs-6 text-secondary">2023-10-16 오전12:00</span>
</div>
</div>
<div class="row mt-5">
<div class="col bg-light form-control border-0">
<div class="row justify-content-between">
<div class="col-4">
<span class="fs-6 fw-bold">입찰 안내</span>
</div>
<div class="col-4 text-end">
<span class="text-secondary pe-2" style="font-size: 0.7em;">상세보기 > </span>
</div>
</div>
<div class="row">
<div class="col mt-1" style="font-size: 0.8em;">
<li>최소
<span class="text-danger">
1,000원
</span>
단위로 입찰하실 수 있습니다.
</li>
<li>현재 보유하신 코인보다 더 높은 금액은 입찰하실 수 없습니다.</li>
<span class="text-danger">
<li>경매종료 시간 1분이전 입찰 시, 종료 시간이 현재 시간으로부터
<span class="fw-bold">
1분 자동연장
</span>
됩니다.
</li>
</span>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col bg-light form-control">
<div class="row">
<span class="text-secondary" style="font-size: 0.8em;">
로그인하여 나의 보유 코인을 확인하세요.
</span>
</div>
<div class="row p-2">
<div class="col-9 ps-0 pe-2 d-grid">
<input class="rounded form-control " type="text" placeholder="현재가보다 낮은 가격으로 입찰하실 수 없습니다.">
</div>
<div class="col-3 ps-2 pe-0 d-grid">
<button type="button" class="btn btn-warning">
<span class="text-white fw-bold">
입찰하기
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 하단 -->
<div class="row mt-5 border-top">
<div class="col">
<div class="row py-2 align-items-center">
<div class="col-3 pb-2 align-self-end text-secondary fw-bold border-bottom">
사파리
</div>
<div class="col">
<ul class="m-0 p-0 ">
<span class="text-secondary" style="font-size: 0.8em;">
사파리(주) | 대표이사 : 이민지 | 사업자등록번호 123-45-67890 | 통신판매업신고번호 2023-강남-08 |
서울 강남구 테헤란로 7길 7(역삼동 에스코빌딩 6층)
</span>
</ul>
<ul class="m-0 p-0 ">
<span class="text-secondary" style="font-size: 0.8em;">
이메일 상담 info@safari.com | 유선상담 1234-5678
</span>
</ul>
</div>
</div>
<div class="row py-2 align-items-center">
<div class="col-3 pb-2 align-self-end text-secondary fw-bold ">
<ul class="m-0 p-0">
상담 가능 시간
</ul>
<ul class="m-0 p-0">
<span class="fw-light">
365일 24시 상담가능 | 실시간 문의
</span>
</ul>
</div>
<div class="col">
<ul class="m-0 p-0 ">
<span class="text-secondary" style="font-size: 0.8em;">
일부 상품의 경우 사파리는 통신판매중개자이며 통신판매 당사자가 아닙니다.
</span>
</ul>
<ul class="m-0 p-0 ">
<span class="text-secondary" style="font-size: 0.8em;">
해당되는 상품의 경우, 상품정보, 거래에 관한 의무와 책임은 판매자에게 있으므로,
각 상품 페이지에서 구체적인 내용을 확인하시기 바랍니다.
</span>
</ul>
</div>
</div>
</div>
</div>
<!-- 최하단 -->
<div class="row mt-1 border-top">
<div class="col py-4 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<div class="row mt-3">
<div class="col text-secondary" style="font-size: 0.8em;">
<i class="bi bi-c-circle"></i>
<span class="text-secondary">
2023 safari Company, Inc
</span>
</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 - 당근2 (0) | 2023.10.11 |
