IT 공부/Team Project
Static) 마이페이지-주문내역/쿠폰내역
toraa
2022. 8. 3. 12:38
<!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 ;}
</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 class="row"><div class="col-md-3">
<!--마이페이지 -->
<ul class="mypage" type="none">
<br>
<li><a href="#">마이페이지</a></li>
<li><hr width="150px" align="left"></li>
<li><a href="#order">주문내역</a></li>
<li><a href="#">상품후기</a></li>
<li><a href="#">적립금/쿠폰</a></li>
<li><a href="#">개인정보 수정</a></li>
</ul>
</div>
<!-- 주문내역 -->
<div class="col-md-9">
<!-- 제목 및 기간 선택-->
<div>
<br>
<h4>주문내역</h4><font size="2">지난 3년간의 주문 내역 조회가 가능합니다</font>
<hr width="95%" align="left" color="#f39c12">
<select class="period" size="1">
<option value="전체기간" selected>전체기간</option>
<option value="1개월">1개월</option>
<option value="3개월">3개월</option>
<option value="6개월">6개월</option>
<option value="1년">1년</option>
</select>
</div><br>
<!-- 내용 -->
<table border=0 cellpadding="10" cellspacing="30" width="800px">
<tr><td></td><td>상품정보</td><td>주문일자</td><td>주문정보</td><td>주문상태</td></td>
<tr><td><img src="https://cdn.pixabay.com/photo/2017/08/02/22/46/peaches-2573836_960_720.jpg" width="80px" hieght="60px"></td><td>황도복숭아 1.8kg</td><td>2022.07.18</td><td>258963147</td><td>배송완료</td></td>
</table>
</div>
</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>
<!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 ;}
</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 class="row"><div class="col-md-3">
<!--마이페이지 -->
<ul class="mypage" type="none">
<br>
<li><a href="#">마이페이지</a></li>
<li><hr width="150px" align="left"></li>
<li><a href="#order">주문내역</a></li>
<li><a href="#">상품후기</a></li>
<li><a href="#">적립금/쿠폰</a></li>
<li><a href="#">개인정보 수정</a></li>
</ul>
</div>
<!-- 주문내역 -->
<div class="col-md-9">
<!-- 제목 및 기간 선택-->
<div>
<br>
<h4>쿠폰/적립금</h4>
<hr width="95%" align="left" color="#f39c12">
</div><br>
<!-- 내용 -->
<table border=0 cellpadding="10" cellspacing="30" width="800px">
<tr><td>쿠폰명</td><td>할인/적립</td><td>사용가능기간</td><td>사용여부</td></td>
<tr><td><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814050_960_720.png" width="50px" hieght="50px"></td><td>친구초대쿠폰</td><td>5000원 적립</td><td>2022-08-25까지</td><td>미사용</td></td>
</table>
</div>
</div>
<br><br><br><br><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>