member.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <meta
        name='description'
        content='Perfume shop'
    />
    <title>D'PERFUME｜會員資料</title>
    <link
        rel="stylesheet"
        href="css/all.css"
    >
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    >
    <script src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <!--頁首-->
    <div class="container">
        <nav class="navbar navbar-expand-md navbar-light">
            <h1 class="navbar-brand mb-0"><a
                    class="logo img-fluid"
                    href="index.html"
                >D'PERFUME</a></h1>
            <!--選單-->
            <div class="collapse navbar-collapse justify-content-end d-none d-md-block">
                <ul class="navbar-nav h5 font-weight-normal">
                    <li class="nav-item mr-2">
                        <a
                            class="nav-link text-center"
                            href="product.html"
                        ><i class="fas fa-tshirt pr-1"></i>Product</a>
                    </li>
                    <li class="nav-item mr-2">
                        <a
                            class="nav-link"
                            href="login.html"
                        ><i class="fas fa-user pr-1"></i>log in</a>
                    </li>
                    <li class="nav-item mr-2">
                        <a
                            class="nav-link"
                            href="#"
                        ><i class="fas fa-heart pr-1"></i>Wishlist</a>
                    <li class="nav-item">
                        <a
                            class="nav-link"
                            href="#"
                        ><i class="fas fa-shopping-cart pr-1"></i>Cart(3)</a>
                    </li>
                </ul>
            </div>
            <!--選單-->
            <!--漢堡選單-->
            <div class="d-flex align-items-center justify-content-end">
                <div class="d-lg-none position-relative d-md-none">
                    <a
                        href="#"
                        class="nav-link text-dark"
                    ><i class="fas fa-shopping-cart"></i></a>
                    <p class="cart position-absolute rounded-circle text-center bg-primary text-white">3</p>
                </div>
                <button
                    class="navbar-toggler p-0"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNav"
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </nav>
    </div>
    <div
        class="container-fluid collapse navbar-collapse d-lg-none justify-content-end px-0"
        id="navbarNav"
    >
        <ul class="navbar-nav text-center bg-darker">
            <li class="nav-item">
                <a
                    class="nav-link border-bottom text-white py-4"
                    href="product.html"
                >Product</a>
            </li>
            <li class="nav-item">
                <a
                    class="nav-link border-bottom text-white py-4"
                    href="login.html"
                >Wishlist</a>
            </li>
            <li class="nav-item">
                <a
                    class="nav-link border-bottom text-white py-4"
                    href="#"
                >Blog</a>
            <li class="nav-item">
                <a
                    class="nav-link border-bottom text-white py-4"
                    href="#"
                >Contact</a>
            </li>
            <li class="nav-item">
                <a
                    class="nav-link text-white py-4"
                    href="login.html"
                >Mypage</a>
            </li>
        </ul>
    </div>
    <!--漢堡選單-->
    <!--品牌列-->
    <div
        class="container-fluid d-none d-md-flex bg-primary mb-12 mb-md-9"
        data-aos="fade-right"
    >
        <div class="container">
            <div class="row">
                <ul class="nav d-lg-flex">
                    <li class="nav-item">
                        <a
                            class="nav-link text-white"
                            href="#"
                        >CHANEL</a>
                    </li>
                    <li class="nav-item">
                        <a
                            class="nav-link text-white"
                            href="#"
                        >Jo Malone</a>
                    </li>
                    <li class="nav-item">
                        <a
                            class="nav-link text-white"
                            href="#"
                        >Curology</a>
                    </li>
                    <li class="nav-item">
                        <a
                            class="nav-link text-white"
                            href="#"
                        >Dior</a>
                    </li>
                    <li class="nav-item">
                        <a
                            class="nav-link text-white"
                            href="#"
                        >Chloe</a>
                    </li>
                    <li class="nav-item">
                        <a
                            class="nav-link text-white"
                            href="#"
                        >Zara</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--客製化開始-->
    <div class="container">
        <div class="row">
            <!--會員中心-->
            <div
                class="col-lg-2 order-1 text-dark mb-12"
                data-aos="fade-right"
            >
                <h5 class="d-none d-md-block font-weight-bold mb-6">會員中心</h5>
                <ul class="nav d-flex flex-row flex-lg-column justify-content-between">
                    <li class="nav-item">
                        <a
                            class="hoverline nav-link d-block text-darker font-weight-bold px-0"
                            href="#"
                        >會員資料修改</a>
                    </li>
                    <li class="nav-item">
                        <a
                            class="hoverline nav-link d-block text-darker font-weight-bold px-0"
                            href="#"
                        >訂單查詢</a>
                    </li>
                    <li class="nav-item">
                        <a
                            class="hoverline nav-link d-block text-darker font-weight-bold px-0"
                            href="#"
                        >退／換貨申請</a>
                    </li>
                </ul>
            </div>
            <!--會員資料修改-->
            <div
                class="col-md-7 col-lg-7 order-3 order-md-2 mb-12 mb-md-8"
                data-aos="fade-down"
            >
                <h6 class="font-weight-bold text-secondary border-bottom pb-2 mb-4">個人資料修改</h6>
                <form class="text-dark">
                    <div class="form-group row">
                        <label
                            for="account"
                            class="col-sm-2 col-form-label"
                        >會員帳號</label>
                        <div class="col-sm-7">
                            <input
                                type="text"
                                readonly
                                class="form-control-plaintext text-dark"
                                id="account"
                                value="email@example.com"
                            >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label
                            for="name"
                            class="col-sm-2 col-form-label"
                        >會員姓名</label>
                        <div class="col-sm-7">
                            <input
                                type="text"
                                class="form-control"
                                id="name"
                                placeholder=""
                            >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label
                            for="gender"
                            class="col-sm-2 col-form-label"
                        >會員性別</label>
                        <div class="col-sm-3">
                            <select
                                class="form-control form-control"
                                id="gender"
                            >
                                <option>男</option>
                                <option>女</option>
                                <option>其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label
                            for="email"
                            class="col-sm-2 col-form-label"
                        >會員信箱</label>
                        <div class="col-sm-7">
                            <input
                                type="email"
                                class="form-control"
                                id="email"
                                placeholder="email@example.com"
                            >
                        </div>
                    </div>
                    <div class="form-group row">
                        <label
                            for="phone"
                            class="col-sm-2 col-form-label"
                        >手機號碼</label>
                        <div class="col-sm-7">
                            <input
                                type="tel"
                                class="form-control"
                                id="phone"
                            >
                        </div>
                    </div>
                    <div class="form-group row ">
                        <label
                            for="address"
                            class="col-sm-2 col-form-label mb-3"
                        >地址</label>
                        <div class="col-sm-10">
                            <select
                                class="form-control form-control"
                                id="address"
                            >
                                <option>台灣及離島</option>
                                <option>...</option>
                            </select>
                        </div>
                        <div class="col-sm-2 mt-3"></div>
                        <div class="col-sm-5 mb-3">
                            <select
                                class="form-control form-control"
                                id="address"
                            >
                                <option>高雄市</option>
                                <option>...</option>
                            </select>
                        </div>
                        <div class="col-sm-5">
                            <select
                                class="form-control form-control"
                                id="address"
                            >
                                <option>鹽埕區</option>
                                <option>...</option>
                            </select>
                        </div>
                        <div class="col-sm-10 offset-sm-2 ">
                            <input
                                type="text"
                                class="form-control"
                                id="address"
                                placeholder="請輸入地址"
                            >
                        </div>
                    </div>
                    <div class="col-sm-10 offset-sm-2 custom-control custom-checkbox pr-0 pl-11 mb-5">
                        <input
                            class="custom-control-input"
                            type="checkbox"
                            id="newInfo"
                        >
                        <label
                            class="custom-control-label"
                            for="newInfo"
                        >
                            我願意收到最新優惠情報
                        </label>
                    </div>
                    <div class="form-group row ">
                        <label
                            for="address"
                            class="col-sm-2 col-form-label mb-3"
                        >配送地址</label>
                        <div class="col-sm-10">
                            <select
                                class="form-control form-control"
                                id="address2"
                            >
                                <option>台灣及離島</option>
                                <option>...</option>
                            </select>
                        </div>
                        <div class="col-sm-2 mt-3"></div>
                        <div class="col-sm-5 mb-3">
                            <select
                                class="form-control form-control"
                                id="address2"
                            >
                                <option>高雄市</option>
                                <option>...</option>
                            </select>
                        </div>
                        <div class="col-sm-5">
                            <select
                                class="form-control form-control"
                                id="address2"
                            >
                                <option>鹽埕區</option>
                                <option>...</option>
                            </select>
                        </div>
                        <div class="col-sm-10 offset-sm-2 mb-3">
                            <input
                                type="text"
                                class="form-control"
                                id="address2"
                                placeholder="請輸入地址"
                            >
                        </div>
                        <div class="col-sm-2 mt-3"></div>
                        <button
                            class="btn btn-primary py-2 px-7 ml-3 mb-7"
                            type="submit"
                        >確定修改</button>
                    </div>
                    <h6 class="font-weight-bold text-secondary border-bottom pb-2 mb-4">修改密碼</h6>
                    <form class="text-dark">
                        <div class="form-group row">
                            <label
                                for="oddpwd"
                                class="
                                col-sm-2
                                col-form-label"
                            >舊密碼</label>
                            <div class="col-sm-7">
                                <input
                                    type="password"
                                    class="form-control"
                                    id="oddpwd"
                                >
                            </div>
                        </div>
                        <div class="form-group row">
                            <label
                                for="newpwd"
                                class="col-sm-2 col-form-label"
                            >新密碼</label>
                            <div class="col-sm-7">
                                <input
                                    type="password"
                                    class="form-control"
                                    id="newpwd"
                                >
                            </div>
                        </div>
                        <div class="form-group row">
                            <label
                                for="confirmpwd"
                                class="col-sm-2 col-form-label"
                            >確認新密碼</label>
                            <div class="col-sm-7">
                                <input
                                    type="password"
                                    class="form-control"
                                    id="confirmpwd"
                                >
                                <div class="col-sm-2 mt-3"></div>
                                <button
                                    class="btn btn-primary py-2 px-7"
                                    type="submit"
                                >變更密碼</button>
                            </div>
                        </div>
                    </form>
            </div>
            <!--會員編碼-->
            <div
                class="col-md-auto col-lg-3 order-2 order-md-2 text-dark mb-12"
                data-aos="fade-left"
            >
                <h6 class="mb-6"><i class="fas fa-user-alt text-secondary mr-1"></i>會員編號 <span
                        class="h5">T00020080615</span></h6>
                <table class="table mb-0">
                    <tbody>
                        <tr>
                            <td class="px-0">購物車</td>
                            <td class="px-0">56</td>
                        </tr>
                        <tr>
                            <td class="px-0">我的收藏</td>
                            <td class="px-0">23</td>
                        </tr>
                        <tr>
                            <td class="px-0">已完成訂單</td>
                            <td class="px-0">8</td>
                        </tr>
                        <tr>
                            <td class="px-0">會員紅利</td>
                            <td class="px-0">2680</td>
                        </tr>
                        <tr>
                            <td class="px-0">專屬邀請碼</td>
                            <td class="px-0">TK2075</td>
                        </tr>
                    </tbody>
                </table>
                <small class="text-grayLight">新戶輸入邀請碼即可獲贈紅利點數1000點</small>
            </div>
        </div>
    </div>
    <!--客製化結束-->
    <!--頁尾-->
    <div class="footer bg-primary">
        <!--版權-->
        <div class="container-fluid footer-copy py-5">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-8 d-flex align-items-center">
                        <a
                            href="index.html"
                            class="mr-5"
                        ><img
                                src="img/footerLogo.png"
                                alt="footerLogo"
                            ></a>
                        <small>© 2020. All Rights Reserved.</small>
                    </div>
                    <ul class="nav col-md-4 d-none d-lg-flex align-items-center justify-content-end">
                        <li class="nav-item">
                            <a
                                class="nav-link text-white"
                                href="product.html"
                            >Product</a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link text-white"
                                href="#"
                            >Blog</a>
                        </li>
                        <li class="nav-item">
                            <a
                                class="nav-link text-white"
                                href="#"
                            >Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"
    ></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"
    ></script>
    <script
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"
    ></script>
    <link
        rel="stylesheet"
        href="https://unpkg.com/aos@next/dist/aos.css"
    />
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init({
            // Global settings:
            disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
            startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
            initClassName: 'aos-init', // class applied after initialization
            animatedClassName: 'aos-animate', // class applied on animation
            useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
            disableMutationObserver: false, // disables automatic mutations' detections (advanced)
            debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
            throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)


            // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
            offset: 225, // offset (in px) from the original trigger point
            delay: 0, // values from 0 to 3000, with step 50ms
            duration: 1000, // values from 0 to 3000, with step 50ms
            easing: 'ease', // default easing for AOS animations
            once: true, // whether animation should happen only once - while scrolling down
            mirror: false, // whether elements should animate out while scrolling past them
            anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

        });
    </script>

</body>

</html>