IT 공부/Team Project
Static) 장바구니-주문서
toraa
2022. 8. 3. 12:47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주문서</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/fb23ea3a4c.js" crossorigin="anonymous"></script>
<style type="text/css">
/* header */
#main_logo{align-content: center;}
#account{text-align: right;}
.fa-facebook-square{color:#f7c472}
.fa-facebook-square:hover{color:#f39c12}
.fa-instagram{color:#f7c472}
.fa-instagram:hover{color:#f39c12}
.fa-twitter-square{color:#f7c472}
.fa-twitter-square:hover{color:#f39c12}
.fa-heart{color:#f7c472}
.fa-heart:hover{color:#f39c12}
.fa-cart-shopping{color:#f7c472}
.fa-cart-shopping:hover{color:#f39c12}
/* footer */
footer{width: 1000px;}
.footer_h3{position: relative; top: 10px; }
.footer_ul{text-align: right; position: relative; top: -10px; left: 0px}
.footer_li {list-style: none; display: inline-block;}
a{text-decoration: none; color: black;}
.que{margin-top: 30px}
.que1{border: 1px solid black; width: 120px; height: 30px;
text-align: center; padding-top: 10px; margin-bottom: 20px;}
.que2{display: inline-block; position: relative; top: -230px; left: 180px}
.que3{display: inline-block; position: relative; top: -200px; left: 250px}
.copy{display: inline-block; text-align: center; position: relative; top: -150px}
a{color: black;}
a:hover{color:#f39c12 ;}
.button{background-color:#f7c472; width: 100px;border:none;}
</style>
<body>
<header class="container-xl">
<!-- 로그인 후 계정/고객센터-->
<nav class="navbar navbar-expand-sm navbar-light">
<ul class="navbar-nav" id="account">
<li class="nav-item dropdown" style="display: inline-block; width: 900px; text-align: right;">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active small text-muted" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
므ㅏ므ㅏ님
<span class="sr-only" >(current)</span>
</a>
<div class="dropdown-menu" >
<a class="dropdown-item" href="#">주문내역</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">상품후기</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">적립금/쿠폰</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">개인정보 수정</a>
</div>
</li>
<!-- 고객센터 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active small text-muted" href="#" role="button" data-toggle="dropdown" aria-expanded="false"
>
고객센터
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu" >
<a class="dropdown-item" href="#">공지사항</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">자주묻는 질문</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">1:1문의</a>
</div>
</li>
</ul>
</nav>
<div class="container-xl">
<!--로고 -->
<a href="#"><img class="col-sm-4 offset-sm-4 " alt="어반푸드 로고" src="img/로고.png" id="header_logo" style="width: auto; height: 150px;"></a>
<!-- SNS 링크 -->
<div id="socialmedia" class="container-xl" style="display:inline-block;width: 1090px; text-align: right;">
<a href="#"><i class="fa-brands fa-facebook-square fa-2x" ></i></a>
<a href="#"><i class="fa-brands fa-instagram fa-2x" ></i></a>
<a href="#" ><i class="fa-brands fa-twitter-square fa-2x"></i></a>
</div>
<!-- 검색 -->
<form action="#" name="sform" method="get" id="sform" class="form-inline my-2 my-lg-0 justify-content-end"
style="">
<!--장바구니/좋아요 -->
<a href="cart1.html"><i class="fa-solid fa-cart-shopping fa-2x"></i></a>
<a href="#"><i class="fa-solid fa-heart fa-2x" ></i></a>
<input type="search" id="sbox" class="form-control mr-sm-2" placeholder="검색어 입력">
<button type="submit" class="btn"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
</div>
<!-- 메뉴 -->
<nav class="navbar navbar-expand-lg navbar-light justify-content-start">
<div class="container-xl" style="background-color: #f39c12;>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto pt-3">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
전체카테고리
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">채소/과일</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">수산</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">정육</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">커피/음료</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">양념/오일/조미료</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">신상품</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">베스트</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">커뮤니티</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">특가/혜택</a>
</li>
</ul>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<div class="container-xl">
<div align="center">
<br><br>
<h4>주문서</h4>
</div>
<div id="context" style="padding:10px 100px 10px 100px">
<br><br><br><br>
<h5>주문상품</h5>
<hr color="#f39c12">
<br>
<table border=0 cellpadding="10" cellspacing="30" width="800px" align="center">
<tr><td></td><td>상품정보</td><td>수량</td><td>주문정보</td><td>가격</td></td>
<tr><td><img src="https://cdn.pixabay.com/photo/2017/08/01/08/11/food-2563403_960_720.jpg" width="70px" height="50px"></td><td>황도복숭아 1.8kg</td><td>1</td><td>258963147</td><td>6,990원</td></td>
</table>
<br><br><br>
<h5>주문자 정보</h5>
<hr color="#f39c12">
<table border=0 cellpadding="10" cellspacing="30">
<tr><td>보내는 분</td><td>서대길</td></tr>
<tr><td>휴대폰</td><td>010-1234-5678</td></tr>
<tr><td>이메일</td><td>deokdam@gmail.com</td></tr>
<tr><td></td><td><font size="2">이메일을 통해 주문처리과정을 보내드립니다.<br>정보변경은 마이페이지>개인정보 수정메뉴에서 가능합니다.</font></td></tr>
</table>
<br><br><br><br>
<h5>배송 정보</h5><p align="right"><a href="#">배송지 변경 안내 �</a></p>
<hr color="#f39c12">
<table border=0 cellpadding="10" cellspacing="30">
<tr><td>배송지</td><td>서울시 영등포구 여의도동</td></tr>
<tr><td>상세 정보</td><td><font>받으실 분의 정보를 입력해주세요.</font></td>
<tr><td></td><td><button class=button style="width:60px; height:27px"><a href="#">입력</a></button></td></tr>
<tr><td>이메일</td><td>chaechae@gmail.com</td></tr>
</table>
<br><br><br><br>
<h5>쿠폰/적립금</h5>
<hr color="#f39c12">
<table border=0 cellpadding="5" cellspacing="5">
<tr><td>쿠폰 적용</td><td><select name="coupons" size="1">
<option value="신규회원"> 신규회원 환영 할인
<option value="여름세일">여름세일 5%할인
<option value="회원등급">회원등급 실버 할인
<option value="배송비">배송비 무료 쿠폰
</select>
<br><font size="2"><a href="#">쿠폰 사용 문의(카카오톡)></a></font></td></tr>
<tr><td>적립금 적용 </td><td><input type="text" name="" value="0">
<button class="button" style="width:90px; height:27px"><a href="#">모두 사용</a></button>
<br>보유 적립금: 2,968원</td></tr>
<tr><td></td><td><font size="2">-보유 적립금 1천원 이상부터 사용가능
<br> -적립금 내역 마이컬리>적립금</font></td></tr>
</table>
<br><br><br><br>
<h5>결제 수단</h5>
<br>
<input type="checkbox" name="payment" value="다음에도사용" checked>선택한 결제 수단을 다음에도 사용
<hr color="#f39c12">
<table border=0 cellpadding="10" cellspacing="30">
<br>
<tr><td>결제수단선택</td><td><button class="button" style="width:300px; height:30px"><a href="#">카카오페이</a></button>
<br><button class="button" style="width:100px; height:30px"><a href="#">신용카드</a></button><button class=button style="width:100px; height:30px"><a href="#">간편결제</a></button><button class="button" style="width:100px; height:30px"><a href="#">휴대폰</a></button>
<br><br><input type="radio" name="pay" value="페이코" checked>페이코
<input type="radio" name="pay" value="토스">토스
<input type="radio" name="pay" value="네이버페이">네이버페이
<input type="radio" name="pay" value="스마일페이">스마일페이
<br><br><font size="2">페이코
<br> - 2만원 이상 생애 첫 결제시 3천원 즉시 할인
<br> - 6/30 15시 ~ 7/31 24시, 기간 내 페이코 ID당 1회, 선착순
<br>* 카카오페이, 토스, 네이버페이, 페이코 결제 시, 결제하신 수단으로만 환불되는 점 양해부탁드립니다.
</font>
</td></tr>
</table>
<br><br><br><br>
<h5>개인정보 수집/제공</h5>
<hr color="#f39c12">
<input type="checkbox" name="agree" value="결제 진행 필수 동의" checked>결제 진행 필수 동의
<br><font size="2"> 개인정보 수집 이용 및 처리동의(필수) 보기>
<br> 전자지급 결제대행 서비스 이용약관 동의(필수) 보기> </font>
</div>
<div id="bottom" align="center" style="padding:10px 100px 10px 100px">
<button class="button" style="width:300px; height:50px"><font size="4"><a href="#">6,990원 결제하기</a></font></button>
<br><br><font size="2">[배송준비중]이전까지 주문취소 가능합니다.
<br>미성년자가 결제 시 법정대리인이 그 거래를 취소할 수 있습니다.
<br>상품 미배송 시, 결제수단으로 환불됩니다.
<br>카카오페이,토스,네이버페이,페이코 결제 시, 결제하신 수단으로만 환불됩니다.</font>
</div>
<br><br><br><br>
<div class="container-xl">
<footer>
<hr>
<h3 class="footer_h3">고객행복센터</h3>
<ul class="footer_ul">
<li class="footer_li"><a href="#">URBAN FOOD소개</a>
<li class="footer_li"><a href="#">인재채용</a>
<li class="footer_li"><a href="#">이용약관</a>
<li class="footer_li"><a href="#">개인정보처리방침</a>
</ul>
<h1>1644-0822</h1>
<div class="que">
<div class="que1"><a href="#">카카오톡문의</a></div>
<div class="que1"><a href="#">1:1문의</a></div>
<div class="que1"><a href="#">대량주문문의</a></div>
</div>
<div class="que2">
365일 고객센터<br>
오전 7시~오후7시<br>
<br>
24시간 접수가능<br>
고객센터 운영시간에 <br>
순차적으로 답변해드리겠습니다.<br>
<br>
비회원의 경우 메일로 문의 바랍니다.<br>
</div>
<div class="que3">
법인명(상호) : 주식회사 URBAN FOOD | 대표이사 : 박선재<br>
사업자등록번호 : 123-12-12345 | 개인정보보호책임자 : 박선재<br>
통신판매업 : 제 2022-영등포-12345호<br>
주소 : 서울특별시 영등포구 영중로56<br>
<br>
입점문의 및 마케팅제휴 : sakuranbo@urbancorp.com<br>
채용문의 : recruit@urbancorp.com<br>
팩스 : 070-1234-5678<br>
이메일 : help@urban.com<br>
대량 주문 문의 : manimani@urbancorp.com<br>
</div>
<div class="copy">
URBAN FOOD에서 판매되는 상품중에는 URBAN FOOD에 입점한 개별 판매자가 판매하는 마켓플레이스(오픈마켓)의 상품이 포함되어 있습니다.
마켓플레이스(오픈마켓) 상품의 경우 URBAN FOOD는 통신판매중개자로서 통신판매의 당사자가 아닙니다.<br>
URBAN FOOD는 해당상품의 주문, 품질, 교환/환불 등의 의무와 책임을 부담하지 않습니다.<br>
COPYRIGHT 2022 URBAN FOOD CORP.ALL RIGHTS RESERVED<br>
</div>
</footer>
</div>
</body>
</html>