<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <p class="text-center"><a href="#" class="btn btn-outline-primary px-4 mt-4 rounded-pill" role="button" aria-pressed="true" data-toggle="modal" data-target="#F-Modal">Login / Sign In Modal</a> <a class="btn btn-outline-primary px-4 mt-4 rounded-pill" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">more..</a></p> <div class="container"> <!-- collapse sec--> <div class="position-relative"> <div class="collapse shadow-sm" id="collapseExample"> <div class="bg-white p-4"> <p class="mb-4 h3 font-weight-bold text-dark">All Categories <a data-toggle="collapse" class="pull-right btn rounded-circle btn-primary" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-close"></i></a></li> </p> <div class="row justify-content-around align-items-stretch"> <div class="col-md-3"> <ul class="list-inline border-right"> <li class="sub_heading font-weight-bold">Select Collection</li> <li><a href="#">JRS</a></li> <!-- <li><a href="/sunglasses/brands/jrs-pro-sunglasses/">JRS PRO</a></li> --> <li><a href="#">ELITE</a></li> <li><a href="#">JRS FIRST</a></li> <li><a href="#">Power sunglasses</a></li> <li><a href="#">Calls to action</a></li> </ul> </div> <div class="col-md-3"> <ul class="list-inline border-right"> <li class="sub_heading font-weight-bold">Select Collection</li> <li><a href="#">Easy to customize</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </div> <div class="col-md-3"> <ul class="list-inline"> <li class="sub_heading font-weight-bold">Select Collection</li> <li><a href="#">Easy to customize</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </div> </div> </div> </div> </div> </div> <!-- Modal 1 --> <div class="modal " id="F-Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header d-block"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <div class="text-center"> <h3 class="card-title">Login</h3> <p class="text-muted">Not a register user yet ? <a href="#" data-dismiss="modal" data-toggle="modal" data-target="#FR-Modal" >Sign Up</a></p> </div> </div> <div class="modal-body"> <div class="btn-so pt-4"> <div class="row justify-content-center"> <div class="col-10"> <a href="#" class="btn btn-outline-light rounded-pill btn-block"> <ul class="list-inline d-flex align-items-center"> <li> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve" class="fl-facebook-icon"><path fill="#3B5997" d="M21.643,2.176h-3.31c0,0-5.299-0.973-5.299,5.346c0,1.359,0,4.207,0,4.207H9.561l0.015,3.583h3.159 l0.004,15.522h3.875V15.311h4.751l0.894-3.583h-5.645V7.395c0,0,0.535-1.637,2.352-1.637h2.662L21.643,2.176L21.643,2.176z"></path></svg> </li> <li class="w-100 text-center"> <span class="fj-third-text text-dark">Login with Facebook</span> </li> </ul> </a> <a href="#" class="btn btn-outline-light rounded-pill btn-block"> <ul class="list-inline d-flex align-items-center"> <li> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve" class="fl-google-icon"><g><g><g><g><defs><path id="SVGID_1_" d="M27.59,13.673H16.408v4.636h6.436c-0.6,2.944-3.107,4.637-6.436,4.637c-3.926,0-7.09-3.161-7.09-7.09 s3.164-7.09,7.09-7.09c1.691,0,3.218,0.6,4.418,1.582l3.49-3.491c-2.127-1.854-4.854-3-7.909-3c-6.655,0-12,5.346-12,12 c0,6.654,5.345,12,12,12c6,0,11.456-4.362,11.456-12C27.863,15.146,27.754,14.382,27.59,13.673z"></path></defs> <clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"></use></clipPath> <path clip-path="url(#SVGID_2_)" fill="#FBBC05" d="M3.317,22.945V8.764l9.273,7.089L3.317,22.945z"></path></g></g></g> <g><g><g><defs><path id="SVGID_3_" d="M27.59,13.673H16.408v4.636h6.436c-0.6,2.944-3.107,4.637-6.436,4.637c-3.926,0-7.09-3.161-7.09-7.09 s3.164-7.09,7.09-7.09c1.691,0,3.218,0.6,4.418,1.582l3.49-3.491c-2.127-1.854-4.854-3-7.909-3c-6.655,0-12,5.346-12,12 c0,6.654,5.345,12,12,12c6,0,11.456-4.362,11.456-12C27.863,15.146,27.754,14.382,27.59,13.673z"></path></defs> <clipPath id="SVGID_4_"><use xlink:href="#SVGID_3_" overflow="visible"></use></clipPath> <path clip-path="url(#SVGID_4_)" fill="#EA4335" d="M3.317,8.764l9.273,7.089l3.818-3.326L29.499,10.4V2.764H3.317V8.764z"></path></g></g></g> <g><g><g><defs><path id="SVGID_5_" d="M27.59,13.673H16.408v4.636h6.436c-0.6,2.944-3.107,4.637-6.436,4.637c-3.926,0-7.09-3.161-7.09-7.09 s3.164-7.09,7.09-7.09c1.691,0,3.218,0.6,4.418,1.582l3.49-3.491c-2.127-1.854-4.854-3-7.909-3c-6.655,0-12,5.346-12,12 c0,6.654,5.345,12,12,12c6,0,11.456-4.362,11.456-12C27.863,15.146,27.754,14.382,27.59,13.673z"></path></defs> <clipPath id="SVGID_6_"><use xlink:href="#SVGID_5_" overflow="visible"></use></clipPath> <path clip-path="url(#SVGID_6_)" fill="#34A853" d="M3.317,22.945L19.682,10.4l4.311,0.546L29.5,2.763v26.182H3.317V22.945z"></path></g></g></g> <g><g><g><defs><path id="SVGID_7_" d="M27.59,13.673H16.408v4.636h6.436c-0.6,2.944-3.107,4.637-6.436,4.637c-3.926,0-7.09-3.161-7.09-7.09 s3.164-7.09,7.09-7.09c1.691,0,3.218,0.6,4.418,1.582l3.49-3.491c-2.127-1.854-4.854-3-7.909-3c-6.655,0-12,5.346-12,12 c0,6.654,5.345,12,12,12c6,0,11.456-4.362,11.456-12C27.863,15.146,27.754,14.382,27.59,13.673z"></path></defs> <clipPath id="SVGID_8_"><use xlink:href="#SVGID_7_" overflow="visible"></use></clipPath> <path clip-path="url(#SVGID_8_)" fill="#4285F4" d="M29.499,28.945L12.59,15.854l-2.182-1.636l19.091-5.455V28.945z"></path></g></g></g></g></svg> </li> <li class="w-100 text-center"> <span class="fj-third-text text-dark">Login with Google</span> </li> </ul> </a> </div> </div> <div class="fj-or d-flex mt-4 justify-content-center"><i></i> <span class="fj-or-text">or</span> <i></i></div> </div> <div class="row justify-content-center mt-4"> <div class="col-md-10 "> <form class="text-left"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fa fa-envelope" aria-hidden="true"></i></span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fa fa-lock" aria-hidden="true"></i></span> </div> <input type="password" class="form-control" placeholder="Password" aria-label="Password" aria-describedby="basic-addon1"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Remember me </label> <a href="#" target="_blank" class="fg-password pull-right">Forgot password?</a> </div> <p class="text-center"><button type="submit" class="btn btn-primary rounded-pill px-5">Login</button></p> </form> </div> </div> <p class="mt-4 text-muted text-center">By signing up, you agree to ourTerms of Use and <br> Privacy Policy</p> </div> </div> </div> </div> <!-- Modal 2 --> <div class="modal" id="FR-Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header d-block"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <div class="text-center"> <h3 class="card-title">Sign Up</h3> <p class="text-muted">Already have an account? <a href="#" data-toggle="modal" data-target="#F-Modal" data-dismiss="modal">Login</a></p> </div> </div> <div class="modal-body"> <div class="btn-so pt-4"> <div class="row justify-content-center"> <div class="col-10"> <a href="#" class="btn btn-outline-light rounded-pill btn-block"> <ul class="list-inline d-flex align-items-center"> <li> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve" class="fl-facebook-icon"><path fill="#3B5997" d="M21.643,2.176h-3.31c0,0-5.299-0.973-5.299,5.346c0,1.359,0,4.207,0,4.207H9.561l0.015,3.583h3.159 l0.004,15.522h3.875V15.311h4.751l0.894-3.583h-5.645V7.395c0,0,0.535-1.637,2.352-1.637h2.662L21.643,2.176L21.643,2.176z"></path></svg> </li> <li class="w-100 text-center"> <span class="fj-third-text text-dark">Login with Facebook</span> </li> </ul> </a> <a href="#" class="btn btn-outline-light rounded-pill btn-block"> <ul class="list-inline d-flex align-items-center"> <li> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve" class="fl-google-icon"><g><g><g><g><defs><path id="SVGID_1_" d="M27.59,13.673H16.408v4.636h6.436c-0.6,2.944-3.107,4.637-6.436,4.637c-3.926,0-7.09-3.161-7.09-7.09 s3.164-7.09,7.09-7.09c1.691,0,3.218,0.6,4.418,1.582l3.49-3.491c-2.127-1.854-4.854-3-7.909-3c-6.655,0-12,5.346-12,12 c0,6.654,5.345,12,12,12c6,0,11.456-4.362,11.456-12C27.863,15.146,27.754,14.382,27.59,13.673z"></path></defs> <clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"></use></clipPath> <path clip-path="url(#SVGID_2_)" fill="#FBBC05" d="M3.317,22.945V8.764l9.273,7.089L3.317,22.945z"></path></g></g></g> <g><g><g><defs><path id="SVGID_3_" d="M27.59,13.673H16.408v4.636h6.436c-0.6,2.944-3.107,4.637-6.436,4.637c-3.926,0-7.09-3.161-7.09-7.09 s3.164-7.09,7.09-7.09c1.691,0,3.218,0.6,4.418,1.582l3.49-3.491c-2.127-1.854-4.854-3-7.909-3c-6.655,0-12,5.346-12,12 c0,6.654,5.345,12,12,12c6,0,11.456-4.362,11.456-12C27.863,15.146,27.754,14.382,27.59,13.673z"></path></defs> <clipPath id="SVGID_4_"><use xlink:href="#SVGID_3_" overflow="visible"></use></clipPath> <path clip-path="url(#SVGID_4_)" fill="#EA4335" d="M3.317,8.764l9.273,7.089l3.818-3.326L29.499,10.4V2.764H3.317V8.764z"></path></g></g></g> <g><g><g><defs><path id="SVGID_5_" d="M27.59,13.673H16.408v4.636h6.436c-0.6,2.944-3.107,4.637-6.436,4.637c-3.926,0-7.09-3.161-7.09-7.09 s3.164-7.09,7.09-7.09c1.691,0,3.218,0.6,4.418,1.582l3.49-3.491c-2.127-1.854-4.854-3-7.909-3c-6.655,0-12,5.346-12,12 c0,6.654,5.345,12,12,12c6,0,11.456-4.362,11.456-12C27.863,15.146,27.754,14.382,27.59,13.673z"></path></defs> <clipPath id="SVGID_6_"><use xlink:href="#SVGID_5_" overflow="visible"></use></clipPath> <path clip-path="url(#SVGID_6_)" fill="#34A853" d="M3.317,22.945L19.682,10.4l4.311,0.546L29.5,2.763v26.182H3.317V22.945z"></path></g></g></g> <g><g><g><defs><path id="SVGID_7_" d="M27.59,13.673H16.408v4.636h6.436c-0.6,2.944-3.107,4.637-6.436,4.637c-3.926,0-7.09-3.161-7.09-7.09 s3.164-7.09,7.09-7.09c1.691,0,3.218,0.6,4.418,1.582l3.49-3.491c-2.127-1.854-4.854-3-7.909-3c-6.655,0-12,5.346-12,12 c0,6.654,5.345,12,12,12c6,0,11.456-4.362,11.456-12C27.863,15.146,27.754,14.382,27.59,13.673z"></path></defs> <clipPath id="SVGID_8_"><use xlink:href="#SVGID_7_" overflow="visible"></use></clipPath> <path clip-path="url(#SVGID_8_)" fill="#4285F4" d="M29.499,28.945L12.59,15.854l-2.182-1.636l19.091-5.455V28.945z"></path></g></g></g></g></svg> </li> <li class="w-100 text-center"> <span class="fj-third-text text-dark">Login with Google</span> </li> </ul> </a> </div> </div> <div class="fj-or d-flex mt-4 justify-content-center"><i></i> <span class="fj-or-text">or</span> <i></i></div> </div> <div class="row justify-content-center mt-4"> <div class="col-md-10 "> <form class="text-left"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fa fa-envelope" aria-hidden="true"></i></span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fa fa-envelope" aria-hidden="true"></i></span> </div> <input type="text" class="form-control" placeholder="Confirm Email" aria-label="Confirm Email" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fa fa-lock" aria-hidden="true"></i></span> </div> <input type="password" class="form-control" placeholder="Password" aria-label="Password" aria-describedby="basic-addon1"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Remember me </label> <a href="#" target="_blank" class="fg-password pull-right">Forgot password?</a> </div> <p class="text-center"><button type="submit" class="btn btn-primary rounded-pill px-5">Login</button></p> </form> </div> </div> <p class="mt-4 text-muted text-center">By signing up, you agree to ourTerms of Use and <br> Privacy Policy</p> </div> </div> </div> </div>