user-login-register.html

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>User - FANoFAN</title>
    <link rel="shortcut icon" type="image/png" href="img/favicon.ico" />

    <!-- Style Sheet -->
    <link rel="stylesheet" type="text/css" href="css/myStyle.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap-4.4.1-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="fontawesome-free-5.12.1-web/css/all.css" />
</head>

<body>
    <div class="container-fluid area-promotion promo-ribbon">
        <!-- <p class="mb-0 py-2 text-center text-uppercase" key="ads">Area Promotion</p> -->
        <div class="content-width">
            <a href="product-detail.html" class="button promo-ribbon-button">Buy Now</a>
            <span class="promo-ribbon-title">Buy a $20 Domino's Gift Card and Get a Bonus $5 Domino's Card </span>
            <span class="promo-ribbon-text my-link">Use code HANDMADE at checkout.
                <a href="about.html" class="text-white">Click here</a> for more details.
            </span>
            <a href="product-detail.html" class="button promo-ribbon-button">Buy Now</a>
        </div>
    </div>

    <!-- Nav Bar -->
    <nav class="navbar my-navbar navbar-expand-lg navbar-light bg-light sticky-top py-1 shadow">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <img src="img/logo-fanofan-color.png" alt="FANoFAN">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav my-navbar mr-auto">
                    <li class="nav-item ">
                        <a class="nav-link" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="product-list.html">Product</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="store-list.html">Store</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="support.html">Support</a>
                    </li>

                    <li class="nav-item active dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"><i class="fas fa-user-circle"></i></a>
                        <div class="dropdown-content">
                            <a class="dropdown-item" href="#">Login</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Register</a>
                        </div>
                    </li>
                </ul>
                <div class="btn-group btn-group-toggle mx-2" data-toggle="buttons">
                    <label class="btn btn-outline-info btn-sm active">
                      <input type="radio" name="options" id="option1" checked> EN
                    </label>
                    <label class="btn btn-outline-info btn-sm">
                      <input type="radio" name="options" id="option2"> VN
                    </label>
                </div>

                <form class=" form-inline my-2 my-lg-0">
                    <input class="search-box form-control mr-sm-2" type="search" placeholder="Search here..." aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0 " type="submit"><span class="fa fa-search"></span></button>
                </form>


            </div>
        </div>
    </nav>
    <!-- END Nav Bar -->

    <!-- MAIN HERE -->

    <main class="container mt-5 mb-4">
        <div class="row justify-content-center">
            <div class="col-8">
                <nav>
                    <div class="nav nav-tabs ml-4" id="nav-tab" role="tablist">
                        <a class="nav-item nav-link active" id="nav-login-tab" data-toggle="tab" href="#nav-login" role="tab" aria-controls="nav-login" aria-selected="true">Login</a>
                        <a class="nav-item nav-link" id="nav-register-tab" data-toggle="tab" href="#nav-register" role="tab" aria-controls="nav-register" aria-selected="false">Register</a>
                        <a class="nav-item nav-link" id="nav-forgot-password-tab" data-toggle="tab" href="#nav-forgot-password" role="tab" aria-controls="nav-forgot-password" aria-selected="false">Forgot Password</a>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-login" role="tabpanel" aria-labelledby="nav-login-tab">
                        <form class="text-center border border-light p-4" action="#!">
                            <p class="h4 mb-4">Sign in</p>
                            <input type="email" id="LoginFormEmail" class="form-control mb-4" placeholder="E-mail" required>
                            <input type="password" id="LoginFormPassword" class="form-control mb-4" placeholder="Password" required>
                            <div class="d-flex justify-content-around">
                                <div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="LoginFormRemember">
                                        <label class="custom-control-label" for="LoginFormRemember">Remember me</label>
                                    </div>
                                </div>
                                <div> <a href="" data-toggle="modal" data-target="#forgotPasswordModal">Forgot password?</a> </div>
                            </div>
                            <button class="btn btn-info btn-block my-4" type="submit">Sign in</button>
                            <p>Not a member? <a href="" data-toggle="modal" data-target="#registerModal">Register</a> </p>

                            <p>or sign in with:</p>
                            <a href="#" class="mx-2" role="button"><i class="fab fa-facebook-f light-blue-text"></i></a>
                            <a href="#" class="mx-2" role="button"><i class="fab fa-twitter light-blue-text"></i></a>
                            <a href="#" class="mx-2" role="button"><i class="fab fa-linkedin-in light-blue-text"></i></a>
                            <a href="#" class="mx-2" role="button"><i class="fab fa-github light-blue-text"></i></a>

                        </form>
                    </div>
                    <div class="tab-pane fade" id="nav-register" role="tabpanel" aria-labelledby="nav-register-tab">
                        <form class="border border-light p-4">
                            <p class="h4 mb-4 text-center">Sign up</p>
                            <input type="text" id="defaultRegisterFormFirstName" class="form-control mb-2" placeholder="First name" required>
                            <input type="text" id="defaultRegisterFormLastName" class="form-control mb-2" placeholder="Last name" required>
                            <input type="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail" required>
                            <input type="password" id="defaultRegisterFormPassword" class="form-control" placeholder="Password" aria-describedby="defaultRegisterFormPasswordHelpBlock" required>
                            <small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">Minimal 8 characters lenght</small>
                            <input type="text" id="defaultRegisterPhonePassword" class="form-control" placeholder="Phone number" aria-describedby="defaultRegisterFormPhoneHelpBlock" required>
                            <small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">Optional - for two step authentication</small>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultRegisterFormNewsletter">
                                <label class="custom-control-label" for="defaultRegisterFormNewsletter">Subscribe to our newsletter</label>
                            </div>
                            <button class="btn btn-info my-4 btn-block" type="submit">Sign up</button>
                            <div class="text-center">
                                <p>or sign up with:</p>
                                <a type="button" class="light-blue-text mx-2"> <i class="fab fa-facebook-f"></i> </a>
                                <a type="button" class="light-blue-text mx-2"> <i class="fab fa-twitter"></i> </a>
                                <a type="button" class="light-blue-text mx-2"> <i class="fab fa-linkedin-in"></i> </a>
                                <a type="button" class="light-blue-text mx-2"> <i class="fab fa-github"></i> </a>
                                <hr>
                                <p>By clicking <em>Sign up</em> you agree to our <a href="" target="_blank">terms of service</a> and <a href="" target="_blank">terms of service</a>. </p>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="nav-forgot-password" role="tabpanel" aria-labelledby="nav-forgot-password-tab">
                        <form class="border border-light p-4">
                            <div class="text-center">
                                <p class="h4 mb-4">Forgot Password</p>
                                <p>Enter your mail to reset your password</p>
                                <p> See <a href="" target="_blank">terms of service</a> </p>
                            </div>
                            <input type="text" id="defaultSubscriptionFormPassword" class="form-control mb-4" placeholder="Name">
                            <input type="email" id="defaultSubscriptionFormEmail" class="form-control mb-4" placeholder="E-mail" required>

                            <button class="btn btn-info btn-block" type="submit">Sent mail</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- END MAIN -->

    <!-- END MAIN -->

    <!-- Footer -->
    <footer class="page-footer">

        <!-- footer title -->
        <div class="footer-title" ">
            <div class="container ">
                <div class="row py-4 align-items-center text-light ">
                    <div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0 ">
                        <h6 class="mb-0 ">Get connected with us on social networks!</h6>
                    </div>

                    <div class="col-md-6 col-lg-7 text-center text-md-right ">
                        <a href="about.html "> <i class="fab fa-facebook-f mr-4 "></i> </a>
                        <a href="about.html "> <i class="fab fa-twitter mr-4 "> </i> </a>
                        <a href="about.html "> <i class="fab fa-google-plus-g mr-4 "></i> </a>
                        <a href="about.html "> <i class="fab fa-linkedin-in mr-4 "> </i> </a>
                        <a href="about.html "> <i class="fab fa-instagram "> </i></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- footer content -->
        <div class="container footer-content text-center text-md-left mt-5 my-link ">

            <!-- Company name -->
            <div class="row mt-3 ">
                <div class="col-md-3 col-lg-4 col-xl-3 mb-4 ">
                    <h6 class="text-uppercase font-weight-bold ">Company name</h6>
                    <hr class="mb-4 mt-0 d-inline-block mx-auto " style="width: 60px; ">
                    <p>The FANoFAN Co. is the original and premier source for contemporary ceiling fan design, producing the most complete, exclusively modern collection of ceiling fans available. <a href="about.html ">Read more</a> </p>
                </div>

                <!-- Products List -->
                <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4 ">
                    <h6 class="text-uppercase font-weight-bold ">Products</h6>
                    <hr class="mb-4 mt-0 d-inline-block mx-auto " style="width: 60px; ">
                    <p> <a href="product-list.html ">Ceiling Fans</a> </p>
                    <p> <a href="product-list.html ">Table Fans</a> </p>
                    <p> <a href="product-list.html ">Exhaust</a> </p>
                    <p> <a href="product-list.html ">Royal Fans</a> </p>
                </div>

                <!-- Useful links -->
                <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4 ">
                    <h6 class="text-uppercase font-weight-bold ">Useful links</h6>
                    <hr class="mb-4 mt-0 d-inline-block mx-auto " style="width: 60px; ">
                    <p> <a class="dark-grey-text " href="user-login-register.html ">Your Account</a> </p>
                    <p> <a class="dark-grey-text " href="# ">Become an Affiliate</a> </p>
                    <p> <a class="dark-grey-text " href="# ">Shipping Rates</a> </p>
                    <p> <a class="dark-grey-text " href="support.html ">Help</a> </p>
                </div>

                <!-- Contact -->
                <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4 ">
                    <h6 class="text-uppercase font-weight-bold ">Contact</h6>
                    <hr class="mb-4 mt-0 d-inline-block mx-auto " style="width: 60px; ">
                    <p> <i class="fas fa-home mr-3 "></i> Ha Noi, Viet Nam</p>
                    <p> <i class="fas fa-envelope mr-3 "></i> abcd@gmail.com</p>
                    <p> <i class="fas fa-phone mr-3 "></i> + 01 234 567 89</p>
                    <p> <i class="fas fa-print mr-3 "></i> + 01 234 567 89</p>
                </div>
            </div>
        </div>

        <div class="footer-copyright text-center text-black-50 py-3 ">© 2020 Copyright:
            <a href="# ">team-HTTH</a>
        </div>
    </footer>
    <!-- END Footer -->

    <a href="cart-shipping.html " class="btn-cart-float ">
        <i class="fa fa-shopping-cart "></i>
        <h3 class="noti-sticky ">2</h3>
    </a>

    <!-- Modal Succeed -->
    <div class="modal fade " id="Modal-Succeed " data-backdrop="static " tabindex="-1 " role="dialog " aria-labelledby="Modal-SucceedTitle " aria-hidden="true ">
        <div class="modal-dialog " role="document ">
            <div class="modal-content ">
                <div class="modal-header ">
                    <h5 class="modal-title " id="Modal-SucceedTitle ">Notification</h5>
                    <button type="button " class="close " data-dismiss="modal " aria-label="Close ">
                        <span aria-hidden="true ">&times;</span>
                    </button>
                </div>
                <div class="modal-body ">
                    <div class="text-center ">
                        <i class="fas fa-check fa-4x mb-3 "></i>
                        <h5>Succeed.</h5>
                    </div>
                </div>
                <div class="modal-footer justify-content-center ">
                    <button type="button " class="btn btn-secondary " data-dismiss="modal ">Close</button>
                    <a type="button " class="btn btn-primary " href="index.html ">Home</a>
                </div>
            </div>
        </div>
    </div>
    <!-- END Modal Succeed -->

    <!-- Script -->
    <script src="js/jquery-3.4.1.slim.min.js "></script>
    <script src="js/popper.min.js "></script>
    <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js "></script>
    <script src="js/myScripts.js "></script>

    <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js " integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin="anonymous "></script> -->
</body>

</html>