IT 공부/Team Project

Static) 고객센터-자주 묻는 질문

toraa 2022. 8. 3. 12:49

<!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 ;}
	.submit{background-color:#f7c472; border:none; width: 100px;}
	.submit: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>&nbsp; &nbsp;   
         <a href="#"><i class="fa-solid fa-heart fa-2x" ></i></a>   &nbsp;&nbsp;
         <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="#">1:1문의</a></li>
		</ul>
	</div>
	<div class="col-md-9">
<!-- 제목 -->
		<br>
		<h4>자주하는 질문</h4>
		<br>
		<select class="period" size="1">
				   <option value="카테고리" selected>카테고리</option>
				   <option value="배송">배송</option>
				   <option value="포장">포장</option>
				   <option value="취소">취소/교환/환불</option>
				   <option value="회원">회원</option>
				 </select>
		<hr width="95%" align="left" >
		<br>
		 <!-- 내용 -->
			<table border=0 cellpadding="10" cellspacing="10" width="800px">
			 	<tr><th>카테고리</th><th>내용</th></tr>
				<tr><td>포장</td><td><a href="#">상품은 어떻게 포장되나요?</a></td></tr>
				<tr><td>취소/교환/환불</td><td><a href="#">교환(반품)진행시 배송비는?</a></td></tr>
				<tr><td>회원</td><td><a href="#">개명을 하여 회원정보를 변경하고싶습니다</a></td></tr>
				<tr><td>회원</td><td><a href="#">아이디/비밀번호를 잃어버렸습니다</a></td></tr>
				<tr><td>배송</td><td><a href="#">오늘 주문한 상품은 언제 배송되나요?</a></td></tr>
				<tr><td>취소/교환/환불</td><td><a href="#">교환(반품)은 어떻게 진행되나요?</a></td></tr>
			 </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>&nbsp;&nbsp;
	         <li class="footer_li"><a href="#">인재채용</a>&nbsp;&nbsp;
	         <li class="footer_li"><a href="#">이용약관</a>&nbsp;&nbsp;
	         <li class="footer_li"><a href="#">개인정보처리방침</a>&nbsp;&nbsp;
	      </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>