| @@ -0,0 +1,380 @@ | ||
| body { | ||
| font-family: 'Lato'; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| font-weight: 700; | ||
| font-family: 'Montserrat'; | ||
| } | ||
|
|
||
| hr.star-light, | ||
| hr.star-dark { | ||
| max-width: 15rem; | ||
| padding: 0; | ||
| text-align: center; | ||
| border: none; | ||
| border-top: solid 0.25rem; | ||
| margin-top: 2.5rem; | ||
| margin-bottom: 2.5rem; | ||
| } | ||
|
|
||
| hr.star-light:after, | ||
| hr.star-dark:after { | ||
| position: relative; | ||
| top: -.8em; | ||
| display: inline-block; | ||
| padding: 0 0.25em; | ||
| content: '\f005'; | ||
| font-family: FontAwesome; | ||
| font-size: 2em; | ||
| } | ||
|
|
||
| hr.star-light { | ||
| border-color: #fff; | ||
| } | ||
|
|
||
| hr.star-light:after { | ||
| color: #fff; | ||
| background-color: #18BC9C; | ||
| } | ||
|
|
||
| hr.star-dark { | ||
| border-color: #2C3E50; | ||
| } | ||
|
|
||
| hr.star-dark:after { | ||
| color: #2C3E50; | ||
| background-color: white; | ||
| } | ||
|
|
||
| section { | ||
| padding: 6rem 0; | ||
| } | ||
|
|
||
| section h2 { | ||
| font-size: 2.25rem; | ||
| line-height: 2rem; | ||
| } | ||
|
|
||
| @media (min-width: 992px) { | ||
| section h2 { | ||
| font-size: 3rem; | ||
| line-height: 2.5rem; | ||
| } | ||
| } | ||
|
|
||
| .btn-xl { | ||
| padding: 1rem 1.75rem; | ||
| font-size: 1.25rem; | ||
| } | ||
|
|
||
| .btn-social { | ||
| width: 3.25rem; | ||
| height: 3.25rem; | ||
| font-size: 1.25rem; | ||
| line-height: 2rem; | ||
| } | ||
|
|
||
| .scroll-to-top { | ||
| z-index: 1042; | ||
| right: 1rem; | ||
| bottom: 1rem; | ||
| display: none; | ||
| } | ||
|
|
||
| .scroll-to-top a { | ||
| width: 3.5rem; | ||
| height: 3.5rem; | ||
| background-color: rgba(33, 37, 41, 0.5); | ||
| line-height: 3.1rem; | ||
| } | ||
|
|
||
| #mainNav { | ||
| padding-top: 1rem; | ||
| padding-bottom: 1rem; | ||
| font-weight: 700; | ||
| font-family: 'Montserrat'; | ||
| } | ||
|
|
||
| #mainNav .navbar-brand { | ||
| color: #fff; | ||
| } | ||
|
|
||
| #mainNav .navbar-nav { | ||
| margin-top: 1rem; | ||
| letter-spacing: 0.0625rem; | ||
| } | ||
|
|
||
| #mainNav .navbar-nav li.nav-item a.nav-link { | ||
| color: #fff; | ||
| } | ||
|
|
||
| #mainNav .navbar-nav li.nav-item a.nav-link:hover { | ||
| color: #18BC9C; | ||
| } | ||
|
|
||
| #mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus { | ||
| color: #fff; | ||
| } | ||
|
|
||
| #mainNav .navbar-nav li.nav-item a.nav-link.active { | ||
| color: #18BC9C; | ||
| } | ||
|
|
||
| #mainNav .navbar-toggler { | ||
| font-size: 80%; | ||
| padding: 0.8rem; | ||
| } | ||
|
|
||
| @media (min-width: 992px) { | ||
| #mainNav { | ||
| padding-top: 1.5rem; | ||
| padding-bottom: 1.5rem; | ||
| -webkit-transition: padding-top 0.3s, padding-bottom 0.3s; | ||
| -moz-transition: padding-top 0.3s, padding-bottom 0.3s; | ||
| transition: padding-top 0.3s, padding-bottom 0.3s; | ||
| } | ||
| #mainNav .navbar-brand { | ||
| font-size: 2em; | ||
| -webkit-transition: font-size 0.3s; | ||
| -moz-transition: font-size 0.3s; | ||
| transition: font-size 0.3s; | ||
| } | ||
| #mainNav .navbar-nav { | ||
| margin-top: 0; | ||
| } | ||
| #mainNav .navbar-nav > li.nav-item > a.nav-link.active { | ||
| color: #fff; | ||
| background: #18BC9C; | ||
| } | ||
| #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover { | ||
| color: #fff; | ||
| background: #18BC9C; | ||
| } | ||
| #mainNav.navbar-shrink { | ||
| padding-top: 0.5rem; | ||
| padding-bottom: 0.5rem; | ||
| } | ||
| #mainNav.navbar-shrink .navbar-brand { | ||
| font-size: 1.5em; | ||
| } | ||
| } | ||
|
|
||
| header.masthead { | ||
| padding-top: calc(6rem + 72px); | ||
| padding-bottom: 6rem; | ||
| } | ||
|
|
||
| header.masthead h1 { | ||
| font-size: 3rem; | ||
| line-height: 3rem; | ||
| } | ||
|
|
||
| header.masthead h2 { | ||
| font-size: 1.3rem; | ||
| font-family: 'Lato'; | ||
| } | ||
|
|
||
| @media (min-width: 992px) { | ||
| header.masthead { | ||
| padding-top: calc(6rem + 106px); | ||
| padding-bottom: 6rem; | ||
| } | ||
| header.masthead h1 { | ||
| font-size: 4.75em; | ||
| line-height: 4rem; | ||
| } | ||
| header.masthead h2 { | ||
| font-size: 1.75em; | ||
| } | ||
| } | ||
|
|
||
| .portfolio { | ||
| margin-bottom: -15px; | ||
| } | ||
|
|
||
| .portfolio .portfolio-item { | ||
| position: relative; | ||
| display: block; | ||
| max-width: 25rem; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .portfolio .portfolio-item .portfolio-item-caption { | ||
| -webkit-transition: all ease 0.5s; | ||
| -moz-transition: all ease 0.5s; | ||
| transition: all ease 0.5s; | ||
| opacity: 0; | ||
| background-color: rgba(24, 188, 156, 0.9); | ||
| } | ||
|
|
||
| .portfolio .portfolio-item .portfolio-item-caption:hover { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content { | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| @media (min-width: 576px) { | ||
| .portfolio { | ||
| margin-bottom: -30px; | ||
| } | ||
| .portfolio .portfolio-item { | ||
| margin-bottom: 30px; | ||
| } | ||
| } | ||
|
|
||
| .portfolio-modal .portfolio-modal-dialog { | ||
| padding: 3rem 1rem; | ||
| min-height: calc(100vh - 2rem); | ||
| margin: 1rem calc(1rem - 8px); | ||
| position: relative; | ||
| z-index: 2; | ||
| -moz-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5); | ||
| -webkit-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5); | ||
| box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5); | ||
| } | ||
|
|
||
| .portfolio-modal .portfolio-modal-dialog .close-button { | ||
| position: absolute; | ||
| top: 2rem; | ||
| right: 2rem; | ||
| } | ||
|
|
||
| .portfolio-modal .portfolio-modal-dialog .close-button i { | ||
| line-height: 38px; | ||
| } | ||
|
|
||
| .portfolio-modal .portfolio-modal-dialog h2 { | ||
| font-size: 2rem; | ||
| } | ||
|
|
||
| @media (min-width: 768px) { | ||
| .portfolio-modal .portfolio-modal-dialog { | ||
| min-height: 100vh; | ||
| padding: 5rem; | ||
| margin: 3rem calc(3rem - 8px); | ||
| } | ||
| .portfolio-modal .portfolio-modal-dialog h2 { | ||
| font-size: 3rem; | ||
| } | ||
| } | ||
|
|
||
| .floating-label-form-group { | ||
| position: relative; | ||
| border-bottom: 1px solid #e9ecef; | ||
| } | ||
|
|
||
| .floating-label-form-group input, | ||
| .floating-label-form-group textarea { | ||
| font-size: 1.5em; | ||
| position: relative; | ||
| z-index: 1; | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| resize: none; | ||
| border: none; | ||
| border-radius: 0; | ||
| background: none; | ||
| box-shadow: none !important; | ||
| } | ||
|
|
||
| .floating-label-form-group label { | ||
| font-size: 0.85em; | ||
| line-height: 1.764705882em; | ||
| position: relative; | ||
| z-index: 0; | ||
| top: 2em; | ||
| display: block; | ||
| margin: 0; | ||
| -webkit-transition: top 0.3s ease, opacity 0.3s ease; | ||
| -moz-transition: top 0.3s ease, opacity 0.3s ease; | ||
| -ms-transition: top 0.3s ease, opacity 0.3s ease; | ||
| transition: top 0.3s ease, opacity 0.3s ease; | ||
| vertical-align: middle; | ||
| vertical-align: baseline; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .floating-label-form-group:not(:first-child) { | ||
| padding-left: 14px; | ||
| border-left: 1px solid #e9ecef; | ||
| } | ||
|
|
||
| .floating-label-form-group-with-value label { | ||
| top: 0; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .floating-label-form-group-with-focus label { | ||
| color: #18BC9C; | ||
| } | ||
|
|
||
| form .row:first-child .floating-label-form-group { | ||
| border-top: 1px solid #e9ecef; | ||
| } | ||
|
|
||
| .footer { | ||
| padding-top: 5rem; | ||
| padding-bottom: 5rem; | ||
| background-color: #2C3E50; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .copyright { | ||
| background-color: #1a252f; | ||
| } | ||
|
|
||
| a { | ||
| color: #18BC9C; | ||
| } | ||
|
|
||
| a:focus, a:hover, a:active { | ||
| color: #128f76; | ||
| } | ||
|
|
||
| .btn { | ||
| border-width: 2px; | ||
| } | ||
|
|
||
| .bg-primary { | ||
| background-color: #18BC9C !important; | ||
| } | ||
|
|
||
| .bg-secondary { | ||
| background-color: #2C3E50 !important; | ||
| } | ||
|
|
||
| .text-primary { | ||
| color: #18BC9C !important; | ||
| } | ||
|
|
||
| .text-secondary { | ||
| color: #2C3E50 !important; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| background-color: #18BC9C; | ||
| border-color: #18BC9C; | ||
| } | ||
|
|
||
| .btn-primary:hover, .btn-primary:focus, .btn-primary:active { | ||
| background-color: #128f76; | ||
| border-color: #128f76; | ||
| } | ||
|
|
||
| .btn-secondary { | ||
| background-color: #2C3E50; | ||
| border-color: #2C3E50; | ||
| } | ||
|
|
||
| .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { | ||
| background-color: #1a252f; | ||
| border-color: #1a252f; | ||
| } |
| @@ -0,0 +1,207 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Home - <?php include("name.php") ?></title> | ||
| <?php include ("header.php") ?> | ||
|
|
||
| <!-- Custom fonts for this template --> | ||
| <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> | ||
|
|
||
| <!-- Plugin CSS --> | ||
| <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css"> | ||
|
|
||
| <!-- Custom styles for this template --> | ||
| <link href="css/freelancer.min.css" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <?php include("navbar.php") ?> | ||
| <!-- Header --> | ||
| <header class="masthead bg-primary text-white text-center"> | ||
| <div class="container"> | ||
| <h1 class="text-uppercase mb-0">_NAME_</h1> | ||
| <hr class="star-light"> | ||
| <h2 class="font-weight-light mb-0">_JOB(S)_</h2> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Portfolio Grid Section --> | ||
| <section class="portfolio" id="portfolio"> | ||
| <div class="container"> | ||
| <h2 class="text-center text-uppercase text-secondary mb-0">about me</h2> | ||
| <hr class="star-dark mb-5"> | ||
| <div class="row"> | ||
| <div class="col-lg-4 ml-auto"> | ||
| Contact Number: _09999999999_ | ||
| </div> | ||
| <div class="col-lg-4 mr-auto"> | ||
| Address: _15 M.H. del Pilar, Malate Manila_ | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <div class="copyright py-4 text-center text-white"> | ||
| <div class="container"> | ||
| <small>Copyright © <?php include("name.php") ?> 2018</small> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) --> | ||
| <div class="scroll-to-top d-lg-none position-fixed "> | ||
| <a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top"> | ||
| <i class="fa fa-chevron-up"></i> | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- Portfolio Modals --> | ||
|
|
||
| <!-- Portfolio Modal 1 --> | ||
| <div class="portfolio-modal mfp-hide" id="portfolio-modal-1"> | ||
| <div class="portfolio-modal-dialog bg-white"> | ||
| <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-3x fa-times"></i> | ||
| </a> | ||
| <div class="container text-center"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 mx-auto"> | ||
| <h2 class="text-secondary text-uppercase mb-0">Project Name</h2> | ||
| <hr class="star-dark mb-5"> | ||
| <img class="img-fluid mb-5" src="img/portfolio/cabin.png" alt=""> | ||
| <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p> | ||
| <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-close"></i> | ||
| Close Project</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Portfolio Modal 2 --> | ||
| <div class="portfolio-modal mfp-hide" id="portfolio-modal-2"> | ||
| <div class="portfolio-modal-dialog bg-white"> | ||
| <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-3x fa-times"></i> | ||
| </a> | ||
| <div class="container text-center"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 mx-auto"> | ||
| <h2 class="text-secondary text-uppercase mb-0">Project Name</h2> | ||
| <hr class="star-dark mb-5"> | ||
| <img class="img-fluid mb-5" src="img/portfolio/cake.png" alt=""> | ||
| <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p> | ||
| <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-close"></i> | ||
| Close Project</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Portfolio Modal 3 --> | ||
| <div class="portfolio-modal mfp-hide" id="portfolio-modal-3"> | ||
| <div class="portfolio-modal-dialog bg-white"> | ||
| <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-3x fa-times"></i> | ||
| </a> | ||
| <div class="container text-center"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 mx-auto"> | ||
| <h2 class="text-secondary text-uppercase mb-0">Project Name</h2> | ||
| <hr class="star-dark mb-5"> | ||
| <img class="img-fluid mb-5" src="img/portfolio/circus.png" alt=""> | ||
| <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p> | ||
| <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-close"></i> | ||
| Close Project</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Portfolio Modal 4 --> | ||
| <div class="portfolio-modal mfp-hide" id="portfolio-modal-4"> | ||
| <div class="portfolio-modal-dialog bg-white"> | ||
| <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-3x fa-times"></i> | ||
| </a> | ||
| <div class="container text-center"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 mx-auto"> | ||
| <h2 class="text-secondary text-uppercase mb-0">Project Name</h2> | ||
| <hr class="star-dark mb-5"> | ||
| <img class="img-fluid mb-5" src="img/portfolio/game.png" alt=""> | ||
| <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p> | ||
| <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-close"></i> | ||
| Close Project</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Portfolio Modal 5 --> | ||
| <div class="portfolio-modal mfp-hide" id="portfolio-modal-5"> | ||
| <div class="portfolio-modal-dialog bg-white"> | ||
| <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-3x fa-times"></i> | ||
| </a> | ||
| <div class="container text-center"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 mx-auto"> | ||
| <h2 class="text-secondary text-uppercase mb-0">Project Name</h2> | ||
| <hr class="star-dark mb-5"> | ||
| <img class="img-fluid mb-5" src="img/portfolio/safe.png" alt=""> | ||
| <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p> | ||
| <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-close"></i> | ||
| Close Project</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Portfolio Modal 6 --> | ||
| <div class="portfolio-modal mfp-hide" id="portfolio-modal-6"> | ||
| <div class="portfolio-modal-dialog bg-white"> | ||
| <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-3x fa-times"></i> | ||
| </a> | ||
| <div class="container text-center"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 mx-auto"> | ||
| <h2 class="text-secondary text-uppercase mb-0">Project Name</h2> | ||
| <hr class="star-dark mb-5"> | ||
| <img class="img-fluid mb-5" src="img/portfolio/submarine.png" alt=""> | ||
| <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p> | ||
| <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#"> | ||
| <i class="fa fa-close"></i> | ||
| Close Project</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Bootstrap core JavaScript --> | ||
| <script src="vendor/jquery/jquery.min.js"></script> | ||
| <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> | ||
|
|
||
| <!-- Plugin JavaScript --> | ||
| <script src="vendor/jquery-easing/jquery.easing.min.js"></script> | ||
| <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script> | ||
|
|
||
| <!-- Contact Form JavaScript --> | ||
| <script src="js/jqBootstrapValidation.js"></script> | ||
| <script src="js/contact_me.js"></script> | ||
|
|
||
| <!-- Custom scripts for this template --> | ||
| <script src="js/freelancer.min.js"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,92 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Edit Profile - <?php include("name.php") ?> </title> | ||
| <?php include("header.php") ?> | ||
| </head> | ||
| <body class="non-signin"> | ||
|
|
||
| <?php include("navbar.php") ?> | ||
|
|
||
| <div class="container-fluid"> | ||
| <div class="row"> | ||
| <div class="col-md-4"></div> | ||
| <div class="col-md-4 custom-content-registration"> | ||
| <form class="form-horizontal"> | ||
| <fieldset> | ||
|
|
||
| <!-- Form Name --> | ||
| <legend>Edit Profile</legend> | ||
|
|
||
| <!-- Text input--> | ||
| <div class="form-group"> | ||
| <label class="col-md-12 control-label" for="last_name">Last Name</label> | ||
| <div class="col-md-12"> | ||
| <input id="last_name" name="last_name" type="text" placeholder="Rizal" class="form-control input-md" required=""> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Text input--> | ||
| <div class="form-group"> | ||
| <label class="col-md-12 control-label" for="first_name">First Name</label> | ||
| <div class="col-md-12"> | ||
| <input id="first_name" name="first_name" type="text" placeholder="Jose" class="form-control input-md" required=""> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Text input--> | ||
| <div class="form-group"> | ||
| <label class="col-md-12 control-label" for="contact">Contact</label> | ||
| <div class="col-md-12"> | ||
| <input id="contact" name="contact" type="text" placeholder="09999999999" class="form-control input-md" required=""> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Text input--> | ||
| <div class="form-group"> | ||
| <label class="col-md-12 control-label" for="street">Street</label> | ||
| <div class="col-md-12"> | ||
| <input id="street" name="street" type="text" placeholder="" class="form-control input-md" required=""> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Text input--> | ||
| <div class="form-group"> | ||
| <label class="col-md-12 control-label" for="barangay">Barangay</label> | ||
| <div class="col-md-12"> | ||
| <input id="barangay" name="barangay" type="text" placeholder="" class="form-control input-md"> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Text input--> | ||
| <div class="form-group"> | ||
| <label class="col-md-12 control-label" for="City">City</label> | ||
| <div class="col-md-12"> | ||
| <input id="City" name="City" type="text" placeholder="" class="form-control input-md"> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Button --> | ||
| <div class="form-group"> | ||
| <label class="col-md-12 control-label" for="submit"></label> | ||
| <div class="col-md-12"> | ||
| <center> | ||
| <button id="submit" name="submit" class="btn btn-primary">Save Profile</button> | ||
| </center> | ||
| </div> | ||
| </div> | ||
|
|
||
| </fieldset> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,75 @@ | ||
| $(function() { | ||
|
|
||
| $("#contactForm input,#contactForm textarea").jqBootstrapValidation({ | ||
| preventSubmit: true, | ||
| submitError: function($form, event, errors) { | ||
| // additional error messages or events | ||
| }, | ||
| submitSuccess: function($form, event) { | ||
| event.preventDefault(); // prevent default submit behaviour | ||
| // get values from FORM | ||
| var name = $("input#name").val(); | ||
| var email = $("input#email").val(); | ||
| var phone = $("input#phone").val(); | ||
| var message = $("textarea#message").val(); | ||
| var firstName = name; // For Success/Failure Message | ||
| // Check for white space in name for Success/Fail message | ||
| if (firstName.indexOf(' ') >= 0) { | ||
| firstName = name.split(' ').slice(0, -1).join(' '); | ||
| } | ||
| $this = $("#sendMessageButton"); | ||
| $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages | ||
| $.ajax({ | ||
| url: "././mail/contact_me.php", | ||
| type: "POST", | ||
| data: { | ||
| name: name, | ||
| phone: phone, | ||
| email: email, | ||
| message: message | ||
| }, | ||
| cache: false, | ||
| success: function() { | ||
| // Success message | ||
| $('#success').html("<div class='alert alert-success'>"); | ||
| $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") | ||
| .append("</button>"); | ||
| $('#success > .alert-success') | ||
| .append("<strong>Your message has been sent. </strong>"); | ||
| $('#success > .alert-success') | ||
| .append('</div>'); | ||
| //clear all fields | ||
| $('#contactForm').trigger("reset"); | ||
| }, | ||
| error: function() { | ||
| // Fail message | ||
| $('#success').html("<div class='alert alert-danger'>"); | ||
| $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") | ||
| .append("</button>"); | ||
| $('#success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!")); | ||
| $('#success > .alert-danger').append('</div>'); | ||
| //clear all fields | ||
| $('#contactForm').trigger("reset"); | ||
| }, | ||
| complete: function() { | ||
| setTimeout(function() { | ||
| $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete | ||
| }, 1000); | ||
| } | ||
| }); | ||
| }, | ||
| filter: function() { | ||
| return $(this).is(":visible"); | ||
| }, | ||
| }); | ||
|
|
||
| $("a[data-toggle=\"tab\"]").click(function(e) { | ||
| e.preventDefault(); | ||
| $(this).tab("show"); | ||
| }); | ||
| }); | ||
|
|
||
| /*When clicking on Full hide fail/success boxes */ | ||
| $('#name').focus(function() { | ||
| $('#success').html(''); | ||
| }); |
| @@ -0,0 +1,75 @@ | ||
| (function($) { | ||
| "use strict"; // Start of use strict | ||
|
|
||
| // Smooth scrolling using jQuery easing | ||
| $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() { | ||
| if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { | ||
| var target = $(this.hash); | ||
| target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); | ||
| if (target.length) { | ||
| $('html, body').animate({ | ||
| scrollTop: (target.offset().top - 70) | ||
| }, 1000, "easeInOutExpo"); | ||
| return false; | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| // Scroll to top button appear | ||
| $(document).scroll(function() { | ||
| var scrollDistance = $(this).scrollTop(); | ||
| if (scrollDistance > 100) { | ||
| $('.scroll-to-top').fadeIn(); | ||
| } else { | ||
| $('.scroll-to-top').fadeOut(); | ||
| } | ||
| }); | ||
|
|
||
| // Closes responsive menu when a scroll trigger link is clicked | ||
| $('.js-scroll-trigger').click(function() { | ||
| $('.navbar-collapse').collapse('hide'); | ||
| }); | ||
|
|
||
| // Activate scrollspy to add active class to navbar items on scroll | ||
| $('body').scrollspy({ | ||
| target: '#mainNav', | ||
| offset: 80 | ||
| }); | ||
|
|
||
| // Collapse Navbar | ||
| var navbarCollapse = function() { | ||
| if ($("#mainNav").offset().top > 100) { | ||
| $("#mainNav").addClass("navbar-shrink"); | ||
| } else { | ||
| $("#mainNav").removeClass("navbar-shrink"); | ||
| } | ||
| }; | ||
| // Collapse now if page is not at top | ||
| navbarCollapse(); | ||
| // Collapse the navbar when page is scrolled | ||
| $(window).scroll(navbarCollapse); | ||
|
|
||
| // Modal popup$(function () { | ||
| $('.portfolio-item').magnificPopup({ | ||
| type: 'inline', | ||
| preloader: false, | ||
| focus: '#username', | ||
| modal: true | ||
| }); | ||
| $(document).on('click', '.portfolio-modal-dismiss', function(e) { | ||
| e.preventDefault(); | ||
| $.magnificPopup.close(); | ||
| }); | ||
|
|
||
| // Floating label headings for the contact form | ||
| $(function() { | ||
| $("body").on("input propertychange", ".floating-label-form-group", function(e) { | ||
| $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val()); | ||
| }).on("focus", ".floating-label-form-group", function() { | ||
| $(this).addClass("floating-label-form-group-with-focus"); | ||
| }).on("blur", ".floating-label-form-group", function() { | ||
| $(this).removeClass("floating-label-form-group-with-focus"); | ||
| }); | ||
| }); | ||
|
|
||
| })(jQuery); // End of use strict |
| @@ -0,0 +1 @@ | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam luctus velit mi, ut laoreet felis tempor ut. Morbi dictum sit amet mi placerat scelerisque. Donec blandit orci ac rhoncus malesuada. Duis accumsan purus et lacus imperdiet tempus. Morbi rhoncus mauris risus, ut auctor elit rutrum ac. Cras ante turpis, rhoncus vel rutrum at, commodo vitae diam. Cras accumsan hendrerit arcu, et lacinia magna fringilla quis. Etiam finibus risus nec tristique tempor. Aenean lobortis cursus neque, eu euismod nisl molestie id. In convallis ex sed lobortis rutrum. Suspendisse ullamcorper ultrices neque. Pellentesque quis magna bibendum, cursus leo quis, venenatis urna. |
| @@ -0,0 +1,26 @@ | ||
| <?php | ||
| // Check for empty fields | ||
| if(empty($_POST['name']) || | ||
| empty($_POST['email']) || | ||
| empty($_POST['phone']) || | ||
| empty($_POST['message']) || | ||
| !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) | ||
| { | ||
| echo "No arguments Provided!"; | ||
| return false; | ||
| } | ||
|
|
||
| $name = strip_tags(htmlspecialchars($_POST['name'])); | ||
| $email_address = strip_tags(htmlspecialchars($_POST['email'])); | ||
| $phone = strip_tags(htmlspecialchars($_POST['phone'])); | ||
| $message = strip_tags(htmlspecialchars($_POST['message'])); | ||
|
|
||
| // Create the email and send the message | ||
| $to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to. | ||
| $email_subject = "Website Contact Form: $name"; | ||
| $email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message"; | ||
| $headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com. | ||
| $headers .= "Reply-To: $email_address"; | ||
| mail($to,$email_subject,$email_body,$headers); | ||
| return true; | ||
| ?> |
| @@ -1,31 +1,20 @@ | ||
| <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"> | ||
| <a class="navbar-brand" href="dashboard.php"><?php include("name.php") ?></a> | ||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
|
|
||
| <div class="collapse navbar-collapse text-uppercase" id="navbarsExample03"> | ||
| <ul class="navbar-nav mr-auto"> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="edit_profile.php">Edit Profile</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="account.php">account</a> | ||
| </li> | ||
| </ul> | ||
| <form class="form-inline my-2 my-md-0"> | ||
| <button id="submit" name="submit" class="btn btn-danger">LOG OUT</button> | ||
| </form> | ||
| </div> | ||
| </nav> |
| @@ -0,0 +1,51 @@ | ||
| // Bootstrap overrides for this template | ||
| a { | ||
| color: $primary; | ||
| &:focus, | ||
| &:hover, | ||
| &:active { | ||
| color: darken($primary, 10%); | ||
| } | ||
| } | ||
|
|
||
| .btn { | ||
| border-width: 2px; | ||
| } | ||
|
|
||
| .bg-primary { | ||
| background-color: $primary !important; | ||
| } | ||
|
|
||
| .bg-secondary { | ||
| background-color: $secondary !important; | ||
| } | ||
|
|
||
| .text-primary { | ||
| color: $primary !important; | ||
| } | ||
|
|
||
| .text-secondary { | ||
| color: $secondary !important; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| background-color: $primary; | ||
| border-color: $primary; | ||
| &:hover, | ||
| &:focus, | ||
| &:active { | ||
| background-color: darken($primary, 10%); | ||
| border-color: darken($primary, 10%); | ||
| } | ||
| } | ||
|
|
||
| .btn-secondary { | ||
| background-color: $secondary; | ||
| border-color: $secondary; | ||
| &:hover, | ||
| &:focus, | ||
| &:active { | ||
| background-color: darken($secondary, 10%); | ||
| border-color: darken($secondary, 10%); | ||
| } | ||
| } |
| @@ -0,0 +1,54 @@ | ||
| // Styling for the contact section | ||
| .floating-label-form-group { | ||
| position: relative; | ||
| border-bottom: 1px solid $gray-200; | ||
| input, | ||
| textarea { | ||
| font-size: 1.5em; | ||
| position: relative; | ||
| z-index: 1; | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| resize: none; | ||
| border: none; | ||
| border-radius: 0; | ||
| background: none; | ||
| box-shadow: none !important; | ||
| } | ||
| label { | ||
| font-size: 0.85em; | ||
| line-height: 1.764705882em; | ||
| position: relative; | ||
| z-index: 0; | ||
| top: 2em; | ||
| display: block; | ||
| margin: 0; | ||
| -webkit-transition: top 0.3s ease, opacity 0.3s ease; | ||
| -moz-transition: top 0.3s ease, opacity 0.3s ease; | ||
| -ms-transition: top 0.3s ease, opacity 0.3s ease; | ||
| transition: top 0.3s ease, opacity 0.3s ease; | ||
| vertical-align: middle; | ||
| vertical-align: baseline; | ||
| opacity: 0; | ||
| } | ||
| &:not(:first-child) { | ||
| padding-left: 14px; | ||
| border-left: 1px solid $gray-200; | ||
| } | ||
| } | ||
|
|
||
| .floating-label-form-group-with-value { | ||
| label { | ||
| top: 0; | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| .floating-label-form-group-with-focus { | ||
| label { | ||
| color: $primary; | ||
| } | ||
| } | ||
| form .row:first-child .floating-label-form-group { | ||
| border-top: 1px solid $gray-200; | ||
| } |
| @@ -0,0 +1,10 @@ | ||
| .footer { | ||
| padding-top: 5rem; | ||
| padding-bottom: 5rem; | ||
| background-color: $secondary; | ||
| color: $white; | ||
| } | ||
|
|
||
| .copyright { | ||
| background-color: darken($secondary, 10%); | ||
| } |
| @@ -0,0 +1,95 @@ | ||
| // Typography | ||
| body { | ||
| @include body-font; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| @include heading-font; | ||
| } | ||
|
|
||
| // Custom Horizontal Rule with Star Icon | ||
| hr.star-light, | ||
| hr.star-dark { | ||
| max-width: 15rem; | ||
| padding: 0; | ||
| text-align: center; | ||
| border: none; | ||
| border-top: solid 0.25rem; | ||
| margin-top: 2.5rem; | ||
| margin-bottom: 2.5rem; | ||
| } | ||
|
|
||
| hr.star-light:after, | ||
| hr.star-dark:after { | ||
| position: relative; | ||
| top: -.8em; | ||
| display: inline-block; | ||
| padding: 0 0.25em; | ||
| content: '\f005'; | ||
| font-family: FontAwesome; | ||
| font-size: 2em; | ||
| } | ||
|
|
||
| hr.star-light { | ||
| border-color: $white; | ||
| } | ||
| hr.star-light:after { | ||
| color: $white; | ||
| background-color: $primary; | ||
| } | ||
|
|
||
| hr.star-dark { | ||
| border-color: $secondary; | ||
| } | ||
| hr.star-dark:after { | ||
| color: $secondary; | ||
| background-color: white; | ||
| } | ||
|
|
||
| // Section Padding Settings | ||
| section { | ||
| padding: 6rem 0; | ||
| h2 { | ||
| font-size: 2.25rem; | ||
| line-height: 2rem; | ||
| } | ||
| @media (min-width: 992px) { | ||
| h2 { | ||
| font-size: 3rem; | ||
| line-height: 2.5rem; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Custom Button Size | ||
| .btn-xl { | ||
| padding: 1rem 1.75rem; | ||
| font-size: 1.25rem; | ||
| } | ||
|
|
||
| // Custom Rounded Social Button | ||
| .btn-social { | ||
| width: 3.25rem; | ||
| height: 3.25rem; | ||
| font-size: 1.25rem; | ||
| line-height: 2rem; | ||
| } | ||
|
|
||
| // Scroll to Top Button | ||
| .scroll-to-top { | ||
| z-index: 1042; | ||
| right: 1rem; | ||
| bottom: 1rem; | ||
| display: none; | ||
| a { | ||
| width: 3.5rem; | ||
| height: 3.5rem; | ||
| background-color: fade-out($gray-900, 0.5); | ||
| line-height: 3.1rem; | ||
| } | ||
| } |
| @@ -0,0 +1,26 @@ | ||
| header.masthead { | ||
| padding-top: calc(6rem + 72px); | ||
| padding-bottom: 6rem; | ||
| h1 { | ||
| font-size: 3rem; | ||
| line-height: 3rem; | ||
| } | ||
| h2 { | ||
| font-size: 1.3rem; | ||
| @include body-font; | ||
| } | ||
| } | ||
| @media (min-width: 992px) { | ||
| header.masthead { | ||
| padding-top: calc(6rem + 106px); | ||
| padding-bottom: 6rem; | ||
| h1 { | ||
| font-size: 4.75em; | ||
| line-height: 4rem; | ||
| } | ||
| h2 { | ||
| font-size: 1.75em; | ||
| } | ||
|
|
||
| } | ||
| } |
| @@ -0,0 +1,8 @@ | ||
| @mixin body-font() { | ||
| font-family: 'Lato'; | ||
| } | ||
|
|
||
| @mixin heading-font() { | ||
| font-weight: 700; | ||
| font-family: 'Montserrat'; | ||
| } |
| @@ -0,0 +1,67 @@ | ||
| // Styling for the navbar | ||
| #mainNav { | ||
| padding-top: 1rem; | ||
| padding-bottom: 1rem; | ||
| @include heading-font; | ||
| .navbar-brand { | ||
| color: $white; | ||
| } | ||
| .navbar-nav { | ||
| margin-top: 1rem; | ||
| letter-spacing: 0.0625rem; | ||
| li.nav-item { | ||
| a.nav-link { | ||
| color: $white; | ||
| &:hover { | ||
| color: $primary; | ||
| } | ||
| &:active, | ||
| &:focus { | ||
| color: $white; | ||
| } | ||
| &.active { | ||
| color: $primary; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .navbar-toggler { | ||
| font-size: 80%; | ||
| padding: 0.8rem; | ||
| } | ||
| } | ||
| @media(min-width:992px) { | ||
| #mainNav { | ||
| padding-top: 1.5rem; | ||
| padding-bottom: 1.5rem; | ||
| -webkit-transition: padding-top 0.3s, padding-bottom 0.3s; | ||
| -moz-transition: padding-top 0.3s, padding-bottom 0.3s; | ||
| transition: padding-top 0.3s, padding-bottom 0.3s; | ||
| .navbar-brand { | ||
| font-size: 2em; | ||
| -webkit-transition: font-size 0.3s; | ||
| -moz-transition: font-size 0.3s; | ||
| transition: font-size 0.3s; | ||
| } | ||
| .navbar-nav { | ||
| margin-top: 0; | ||
| } | ||
| .navbar-nav > li.nav-item > a.nav-link.active { | ||
| color: $white; | ||
| background: $primary; | ||
| &:active, | ||
| &:focus, | ||
| &:hover { | ||
| color: $white; | ||
| background: $primary; | ||
| } | ||
| } | ||
| } | ||
| #mainNav.navbar-shrink { | ||
| padding-top: 0.5rem; | ||
| padding-bottom: 0.5rem; | ||
| .navbar-brand { | ||
| font-size: 1.5em; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,63 @@ | ||
| // Styling for the portfolio section | ||
| .portfolio { | ||
| margin-bottom: -15px; | ||
| .portfolio-item { | ||
| position: relative; | ||
| display: block; | ||
| max-width: 25rem; | ||
| margin-bottom: 15px; | ||
| .portfolio-item-caption { | ||
| -webkit-transition: all ease 0.5s; | ||
| -moz-transition: all ease 0.5s; | ||
| transition: all ease 0.5s; | ||
| opacity: 0; | ||
| background-color: fade-out($primary, .1); | ||
| &:hover { | ||
| opacity: 1; | ||
| } | ||
| .portfolio-item-caption-content { | ||
| font-size: 1.5rem; | ||
| } | ||
| } | ||
| } | ||
| @media (min-width: 576px) { | ||
| margin-bottom: -30px; | ||
| .portfolio-item { | ||
| margin-bottom: 30px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .portfolio-modal { | ||
| .portfolio-modal-dialog { | ||
| padding: 3rem 1rem; | ||
| min-height: calc(100vh - 2rem); | ||
| margin: 1rem calc(1rem - 8px); | ||
| position: relative; | ||
| z-index: 2; | ||
| -moz-box-shadow: 0 0 3rem 1rem fade-out(black, .5); | ||
| -webkit-box-shadow: 0 0 3rem 1rem fade-out(black, .5); | ||
| box-shadow: 0 0 3rem 1rem fade-out(black, .5); | ||
| .close-button { | ||
| position: absolute; | ||
| top: 2rem; | ||
| right: 2rem; | ||
| i { | ||
| line-height: 38px; | ||
| } | ||
| } | ||
| h2 { | ||
| font-size: 2rem; | ||
| } | ||
| } | ||
| @media(min-width: 768px) { | ||
| .portfolio-modal-dialog { | ||
| min-height: 100vh; | ||
| padding: 5rem; | ||
| margin: 3rem calc(3rem - 8px); | ||
| h2 { | ||
| font-size: 3rem; | ||
| } | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,16 @@ | ||
| // Variables | ||
|
|
||
| $white: #fff !default; | ||
| $gray-100: #f8f9fa !default; | ||
| $gray-200: #e9ecef !default; | ||
| $gray-300: #dee2e6 !default; | ||
| $gray-400: #ced4da !default; | ||
| $gray-500: #adb5bd !default; | ||
| $gray-600: #868e96 !default; | ||
| $gray-700: #495057 !default; | ||
| $gray-800: #343a40 !default; | ||
| $gray-900: #212529 !default; | ||
| $black: #000 !default; | ||
|
|
||
| $primary: #18BC9C !default; | ||
| $secondary: #2C3E50 !default; |
| @@ -0,0 +1,9 @@ | ||
| @import "variables.scss"; | ||
| @import "mixins.scss"; | ||
| @import "global.scss"; | ||
| @import "navbar.scss"; | ||
| @import "masthead.scss"; | ||
| @import "portfolio.scss"; | ||
| @import "contact.scss"; | ||
| @import "footer.scss"; | ||
| @import "bootstrap-overrides.scss"; |
| @@ -0,0 +1,34 @@ | ||
| // Animated Icons | ||
| // -------------------------- | ||
|
|
||
| .@{fa-css-prefix}-spin { | ||
| -webkit-animation: fa-spin 2s infinite linear; | ||
| animation: fa-spin 2s infinite linear; | ||
| } | ||
|
|
||
| .@{fa-css-prefix}-pulse { | ||
| -webkit-animation: fa-spin 1s infinite steps(8); | ||
| animation: fa-spin 1s infinite steps(8); | ||
| } | ||
|
|
||
| @-webkit-keyframes fa-spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes fa-spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } |
| @@ -0,0 +1,25 @@ | ||
| // Bordered & Pulled | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-border { | ||
| padding: .2em .25em .15em; | ||
| border: solid .08em @fa-border-color; | ||
| border-radius: .1em; | ||
| } | ||
|
|
||
| .@{fa-css-prefix}-pull-left { float: left; } | ||
| .@{fa-css-prefix}-pull-right { float: right; } | ||
|
|
||
| .@{fa-css-prefix} { | ||
| &.@{fa-css-prefix}-pull-left { margin-right: .3em; } | ||
| &.@{fa-css-prefix}-pull-right { margin-left: .3em; } | ||
| } | ||
|
|
||
| /* Deprecated as of 4.4.0 */ | ||
| .pull-right { float: right; } | ||
| .pull-left { float: left; } | ||
|
|
||
| .@{fa-css-prefix} { | ||
| &.pull-left { margin-right: .3em; } | ||
| &.pull-right { margin-left: .3em; } | ||
| } |
| @@ -0,0 +1,12 @@ | ||
| // Base Class Definition | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix} { | ||
| display: inline-block; | ||
| font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration | ||
| font-size: inherit; // can't have font-size inherit on line above, so need to override | ||
| text-rendering: auto; // optimizelegibility throws things off #1094 | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
|
|
||
| } |
| @@ -0,0 +1,6 @@ | ||
| // Fixed Width Icons | ||
| // ------------------------- | ||
| .@{fa-css-prefix}-fw { | ||
| width: (18em / 14); | ||
| text-align: center; | ||
| } |
| @@ -0,0 +1,18 @@ | ||
| /*! | ||
| * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome | ||
| * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) | ||
| */ | ||
|
|
||
| @import "variables.less"; | ||
| @import "mixins.less"; | ||
| @import "path.less"; | ||
| @import "core.less"; | ||
| @import "larger.less"; | ||
| @import "fixed-width.less"; | ||
| @import "list.less"; | ||
| @import "bordered-pulled.less"; | ||
| @import "animated.less"; | ||
| @import "rotated-flipped.less"; | ||
| @import "stacked.less"; | ||
| @import "icons.less"; | ||
| @import "screen-reader.less"; |
| @@ -0,0 +1,13 @@ | ||
| // Icon Sizes | ||
| // ------------------------- | ||
|
|
||
| /* makes the font 33% larger relative to the icon container */ | ||
| .@{fa-css-prefix}-lg { | ||
| font-size: (4em / 3); | ||
| line-height: (3em / 4); | ||
| vertical-align: -15%; | ||
| } | ||
| .@{fa-css-prefix}-2x { font-size: 2em; } | ||
| .@{fa-css-prefix}-3x { font-size: 3em; } | ||
| .@{fa-css-prefix}-4x { font-size: 4em; } | ||
| .@{fa-css-prefix}-5x { font-size: 5em; } |
| @@ -0,0 +1,19 @@ | ||
| // List Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-ul { | ||
| padding-left: 0; | ||
| margin-left: @fa-li-width; | ||
| list-style-type: none; | ||
| > li { position: relative; } | ||
| } | ||
| .@{fa-css-prefix}-li { | ||
| position: absolute; | ||
| left: -@fa-li-width; | ||
| width: @fa-li-width; | ||
| top: (2em / 14); | ||
| text-align: center; | ||
| &.@{fa-css-prefix}-lg { | ||
| left: (-@fa-li-width + (4em / 14)); | ||
| } | ||
| } |
| @@ -0,0 +1,60 @@ | ||
| // Mixins | ||
| // -------------------------- | ||
|
|
||
| .fa-icon() { | ||
| display: inline-block; | ||
| font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration | ||
| font-size: inherit; // can't have font-size inherit on line above, so need to override | ||
| text-rendering: auto; // optimizelegibility throws things off #1094 | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
|
|
||
| } | ||
|
|
||
| .fa-icon-rotate(@degrees, @rotation) { | ||
| -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; | ||
| -webkit-transform: rotate(@degrees); | ||
| -ms-transform: rotate(@degrees); | ||
| transform: rotate(@degrees); | ||
| } | ||
|
|
||
| .fa-icon-flip(@horiz, @vert, @rotation) { | ||
| -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)"; | ||
| -webkit-transform: scale(@horiz, @vert); | ||
| -ms-transform: scale(@horiz, @vert); | ||
| transform: scale(@horiz, @vert); | ||
| } | ||
|
|
||
|
|
||
| // Only display content to screen readers. A la Bootstrap 4. | ||
| // | ||
| // See: http://a11yproject.com/posts/how-to-hide-content/ | ||
|
|
||
| .sr-only() { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| padding: 0; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| clip: rect(0,0,0,0); | ||
| border: 0; | ||
| } | ||
|
|
||
| // Use in conjunction with .sr-only to only display content when it's focused. | ||
| // | ||
| // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 | ||
| // | ||
| // Credit: HTML5 Boilerplate | ||
|
|
||
| .sr-only-focusable() { | ||
| &:active, | ||
| &:focus { | ||
| position: static; | ||
| width: auto; | ||
| height: auto; | ||
| margin: 0; | ||
| overflow: visible; | ||
| clip: auto; | ||
| } | ||
| } |
| @@ -0,0 +1,15 @@ | ||
| /* FONT PATH | ||
| * -------------------------- */ | ||
|
|
||
| @font-face { | ||
| font-family: 'FontAwesome'; | ||
| src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); | ||
| src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), | ||
| url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), | ||
| url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), | ||
| url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), | ||
| url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); | ||
| // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| // Rotated & Flipped Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } | ||
| .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } | ||
| .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } | ||
|
|
||
| .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } | ||
| .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } | ||
|
|
||
| // Hook for IE8-9 | ||
| // ------------------------- | ||
|
|
||
| :root .@{fa-css-prefix}-rotate-90, | ||
| :root .@{fa-css-prefix}-rotate-180, | ||
| :root .@{fa-css-prefix}-rotate-270, | ||
| :root .@{fa-css-prefix}-flip-horizontal, | ||
| :root .@{fa-css-prefix}-flip-vertical { | ||
| filter: none; | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| // Screen Readers | ||
| // ------------------------- | ||
|
|
||
| .sr-only { .sr-only(); } | ||
| .sr-only-focusable { .sr-only-focusable(); } |
| @@ -0,0 +1,20 @@ | ||
| // Stacked Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-stack { | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 2em; | ||
| height: 2em; | ||
| line-height: 2em; | ||
| vertical-align: middle; | ||
| } | ||
| .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { | ||
| position: absolute; | ||
| left: 0; | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| .@{fa-css-prefix}-stack-1x { line-height: inherit; } | ||
| .@{fa-css-prefix}-stack-2x { font-size: 2em; } | ||
| .@{fa-css-prefix}-inverse { color: @fa-inverse; } |
| @@ -0,0 +1,34 @@ | ||
| // Spinning Icons | ||
| // -------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-spin { | ||
| -webkit-animation: fa-spin 2s infinite linear; | ||
| animation: fa-spin 2s infinite linear; | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-pulse { | ||
| -webkit-animation: fa-spin 1s infinite steps(8); | ||
| animation: fa-spin 1s infinite steps(8); | ||
| } | ||
|
|
||
| @-webkit-keyframes fa-spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } | ||
|
|
||
| @keyframes fa-spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } |
| @@ -0,0 +1,25 @@ | ||
| // Bordered & Pulled | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-border { | ||
| padding: .2em .25em .15em; | ||
| border: solid .08em $fa-border-color; | ||
| border-radius: .1em; | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-pull-left { float: left; } | ||
| .#{$fa-css-prefix}-pull-right { float: right; } | ||
|
|
||
| .#{$fa-css-prefix} { | ||
| &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } | ||
| &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } | ||
| } | ||
|
|
||
| /* Deprecated as of 4.4.0 */ | ||
| .pull-right { float: right; } | ||
| .pull-left { float: left; } | ||
|
|
||
| .#{$fa-css-prefix} { | ||
| &.pull-left { margin-right: .3em; } | ||
| &.pull-right { margin-left: .3em; } | ||
| } |
| @@ -0,0 +1,12 @@ | ||
| // Base Class Definition | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix} { | ||
| display: inline-block; | ||
| font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration | ||
| font-size: inherit; // can't have font-size inherit on line above, so need to override | ||
| text-rendering: auto; // optimizelegibility throws things off #1094 | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
|
|
||
| } |
| @@ -0,0 +1,6 @@ | ||
| // Fixed Width Icons | ||
| // ------------------------- | ||
| .#{$fa-css-prefix}-fw { | ||
| width: (18em / 14); | ||
| text-align: center; | ||
| } |
| @@ -0,0 +1,13 @@ | ||
| // Icon Sizes | ||
| // ------------------------- | ||
|
|
||
| /* makes the font 33% larger relative to the icon container */ | ||
| .#{$fa-css-prefix}-lg { | ||
| font-size: (4em / 3); | ||
| line-height: (3em / 4); | ||
| vertical-align: -15%; | ||
| } | ||
| .#{$fa-css-prefix}-2x { font-size: 2em; } | ||
| .#{$fa-css-prefix}-3x { font-size: 3em; } | ||
| .#{$fa-css-prefix}-4x { font-size: 4em; } | ||
| .#{$fa-css-prefix}-5x { font-size: 5em; } |
| @@ -0,0 +1,19 @@ | ||
| // List Icons | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-ul { | ||
| padding-left: 0; | ||
| margin-left: $fa-li-width; | ||
| list-style-type: none; | ||
| > li { position: relative; } | ||
| } | ||
| .#{$fa-css-prefix}-li { | ||
| position: absolute; | ||
| left: -$fa-li-width; | ||
| width: $fa-li-width; | ||
| top: (2em / 14); | ||
| text-align: center; | ||
| &.#{$fa-css-prefix}-lg { | ||
| left: -$fa-li-width + (4em / 14); | ||
| } | ||
| } |
| @@ -0,0 +1,60 @@ | ||
| // Mixins | ||
| // -------------------------- | ||
|
|
||
| @mixin fa-icon() { | ||
| display: inline-block; | ||
| font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration | ||
| font-size: inherit; // can't have font-size inherit on line above, so need to override | ||
| text-rendering: auto; // optimizelegibility throws things off #1094 | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
|
|
||
| } | ||
|
|
||
| @mixin fa-icon-rotate($degrees, $rotation) { | ||
| -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; | ||
| -webkit-transform: rotate($degrees); | ||
| -ms-transform: rotate($degrees); | ||
| transform: rotate($degrees); | ||
| } | ||
|
|
||
| @mixin fa-icon-flip($horiz, $vert, $rotation) { | ||
| -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; | ||
| -webkit-transform: scale($horiz, $vert); | ||
| -ms-transform: scale($horiz, $vert); | ||
| transform: scale($horiz, $vert); | ||
| } | ||
|
|
||
|
|
||
| // Only display content to screen readers. A la Bootstrap 4. | ||
| // | ||
| // See: http://a11yproject.com/posts/how-to-hide-content/ | ||
|
|
||
| @mixin sr-only { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| padding: 0; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| clip: rect(0,0,0,0); | ||
| border: 0; | ||
| } | ||
|
|
||
| // Use in conjunction with .sr-only to only display content when it's focused. | ||
| // | ||
| // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 | ||
| // | ||
| // Credit: HTML5 Boilerplate | ||
|
|
||
| @mixin sr-only-focusable { | ||
| &:active, | ||
| &:focus { | ||
| position: static; | ||
| width: auto; | ||
| height: auto; | ||
| margin: 0; | ||
| overflow: visible; | ||
| clip: auto; | ||
| } | ||
| } |
| @@ -0,0 +1,15 @@ | ||
| /* FONT PATH | ||
| * -------------------------- */ | ||
|
|
||
| @font-face { | ||
| font-family: 'FontAwesome'; | ||
| src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); | ||
| src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), | ||
| url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), | ||
| url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), | ||
| url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), | ||
| url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); | ||
| // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| // Rotated & Flipped Icons | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } | ||
| .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } | ||
| .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } | ||
|
|
||
| .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } | ||
| .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } | ||
|
|
||
| // Hook for IE8-9 | ||
| // ------------------------- | ||
|
|
||
| :root .#{$fa-css-prefix}-rotate-90, | ||
| :root .#{$fa-css-prefix}-rotate-180, | ||
| :root .#{$fa-css-prefix}-rotate-270, | ||
| :root .#{$fa-css-prefix}-flip-horizontal, | ||
| :root .#{$fa-css-prefix}-flip-vertical { | ||
| filter: none; | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| // Screen Readers | ||
| // ------------------------- | ||
|
|
||
| .sr-only { @include sr-only(); } | ||
| .sr-only-focusable { @include sr-only-focusable(); } |
| @@ -0,0 +1,20 @@ | ||
| // Stacked Icons | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-stack { | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 2em; | ||
| height: 2em; | ||
| line-height: 2em; | ||
| vertical-align: middle; | ||
| } | ||
| .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { | ||
| position: absolute; | ||
| left: 0; | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| .#{$fa-css-prefix}-stack-1x { line-height: inherit; } | ||
| .#{$fa-css-prefix}-stack-2x { font-size: 2em; } | ||
| .#{$fa-css-prefix}-inverse { color: $fa-inverse; } |
| @@ -0,0 +1,18 @@ | ||
| /*! | ||
| * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome | ||
| * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) | ||
| */ | ||
|
|
||
| @import "variables"; | ||
| @import "mixins"; | ||
| @import "path"; | ||
| @import "core"; | ||
| @import "larger"; | ||
| @import "fixed-width"; | ||
| @import "list"; | ||
| @import "bordered-pulled"; | ||
| @import "animated"; | ||
| @import "rotated-flipped"; | ||
| @import "stacked"; | ||
| @import "icons"; | ||
| @import "screen-reader"; |
| @@ -0,0 +1,59 @@ | ||
| /* | ||
| * Easing Compatibility v1 - http://gsgd.co.uk/sandbox/jquery/easing | ||
| * | ||
| * Adds compatibility for applications that use the pre 1.2 easing names | ||
| * | ||
| * Copyright (c) 2007 George Smith | ||
| * Licensed under the MIT License: | ||
| * http://www.opensource.org/licenses/mit-license.php | ||
| */ | ||
|
|
||
| (function($){ | ||
| $.extend( $.easing, | ||
| { | ||
| easeIn: function (x, t, b, c, d) { | ||
| return $.easing.easeInQuad(x, t, b, c, d); | ||
| }, | ||
| easeOut: function (x, t, b, c, d) { | ||
| return $.easing.easeOutQuad(x, t, b, c, d); | ||
| }, | ||
| easeInOut: function (x, t, b, c, d) { | ||
| return $.easing.easeInOutQuad(x, t, b, c, d); | ||
| }, | ||
| expoin: function(x, t, b, c, d) { | ||
| return $.easing.easeInExpo(x, t, b, c, d); | ||
| }, | ||
| expoout: function(x, t, b, c, d) { | ||
| return $.easing.easeOutExpo(x, t, b, c, d); | ||
| }, | ||
| expoinout: function(x, t, b, c, d) { | ||
| return $.easing.easeInOutExpo(x, t, b, c, d); | ||
| }, | ||
| bouncein: function(x, t, b, c, d) { | ||
| return $.easing.easeInBounce(x, t, b, c, d); | ||
| }, | ||
| bounceout: function(x, t, b, c, d) { | ||
| return $.easing.easeOutBounce(x, t, b, c, d); | ||
| }, | ||
| bounceinout: function(x, t, b, c, d) { | ||
| return $.easing.easeInOutBounce(x, t, b, c, d); | ||
| }, | ||
| elasin: function(x, t, b, c, d) { | ||
| return $.easing.easeInElastic(x, t, b, c, d); | ||
| }, | ||
| elasout: function(x, t, b, c, d) { | ||
| return $.easing.easeOutElastic(x, t, b, c, d); | ||
| }, | ||
| elasinout: function(x, t, b, c, d) { | ||
| return $.easing.easeInOutElastic(x, t, b, c, d); | ||
| }, | ||
| backin: function(x, t, b, c, d) { | ||
| return $.easing.easeInBack(x, t, b, c, d); | ||
| }, | ||
| backout: function(x, t, b, c, d) { | ||
| return $.easing.easeOutBack(x, t, b, c, d); | ||
| }, | ||
| backinout: function(x, t, b, c, d) { | ||
| return $.easing.easeInOutBack(x, t, b, c, d); | ||
| } | ||
| });})(jQuery); |
| @@ -0,0 +1,166 @@ | ||
| /* | ||
| * jQuery Easing v1.4.1 - http://gsgd.co.uk/sandbox/jquery/easing/ | ||
| * Open source under the BSD License. | ||
| * Copyright © 2008 George McGinley Smith | ||
| * All rights reserved. | ||
| * https://raw.github.com/gdsmith/jquery-easing/master/LICENSE | ||
| */ | ||
|
|
||
| (function (factory) { | ||
| if (typeof define === "function" && define.amd) { | ||
| define(['jquery'], function ($) { | ||
| return factory($); | ||
| }); | ||
| } else if (typeof module === "object" && typeof module.exports === "object") { | ||
| exports = factory(require('jquery')); | ||
| } else { | ||
| factory(jQuery); | ||
| } | ||
| })(function($){ | ||
|
|
||
| // Preserve the original jQuery "swing" easing as "jswing" | ||
| $.easing.jswing = $.easing.swing; | ||
|
|
||
| var pow = Math.pow, | ||
| sqrt = Math.sqrt, | ||
| sin = Math.sin, | ||
| cos = Math.cos, | ||
| PI = Math.PI, | ||
| c1 = 1.70158, | ||
| c2 = c1 * 1.525, | ||
| c3 = c1 + 1, | ||
| c4 = ( 2 * PI ) / 3, | ||
| c5 = ( 2 * PI ) / 4.5; | ||
|
|
||
| // x is the fraction of animation progress, in the range 0..1 | ||
| function bounceOut(x) { | ||
| var n1 = 7.5625, | ||
| d1 = 2.75; | ||
| if ( x < 1/d1 ) { | ||
| return n1*x*x; | ||
| } else if ( x < 2/d1 ) { | ||
| return n1*(x-=(1.5/d1))*x + 0.75; | ||
| } else if ( x < 2.5/d1 ) { | ||
| return n1*(x-=(2.25/d1))*x + 0.9375; | ||
| } else { | ||
| return n1*(x-=(2.625/d1))*x + 0.984375; | ||
| } | ||
| } | ||
|
|
||
| $.extend( $.easing, | ||
| { | ||
| def: 'easeOutQuad', | ||
| swing: function (x) { | ||
| return $.easing[$.easing.def](x); | ||
| }, | ||
| easeInQuad: function (x) { | ||
| return x * x; | ||
| }, | ||
| easeOutQuad: function (x) { | ||
| return 1 - ( 1 - x ) * ( 1 - x ); | ||
| }, | ||
| easeInOutQuad: function (x) { | ||
| return x < 0.5 ? | ||
| 2 * x * x : | ||
| 1 - pow( -2 * x + 2, 2 ) / 2; | ||
| }, | ||
| easeInCubic: function (x) { | ||
| return x * x * x; | ||
| }, | ||
| easeOutCubic: function (x) { | ||
| return 1 - pow( 1 - x, 3 ); | ||
| }, | ||
| easeInOutCubic: function (x) { | ||
| return x < 0.5 ? | ||
| 4 * x * x * x : | ||
| 1 - pow( -2 * x + 2, 3 ) / 2; | ||
| }, | ||
| easeInQuart: function (x) { | ||
| return x * x * x * x; | ||
| }, | ||
| easeOutQuart: function (x) { | ||
| return 1 - pow( 1 - x, 4 ); | ||
| }, | ||
| easeInOutQuart: function (x) { | ||
| return x < 0.5 ? | ||
| 8 * x * x * x * x : | ||
| 1 - pow( -2 * x + 2, 4 ) / 2; | ||
| }, | ||
| easeInQuint: function (x) { | ||
| return x * x * x * x * x; | ||
| }, | ||
| easeOutQuint: function (x) { | ||
| return 1 - pow( 1 - x, 5 ); | ||
| }, | ||
| easeInOutQuint: function (x) { | ||
| return x < 0.5 ? | ||
| 16 * x * x * x * x * x : | ||
| 1 - pow( -2 * x + 2, 5 ) / 2; | ||
| }, | ||
| easeInSine: function (x) { | ||
| return 1 - cos( x * PI/2 ); | ||
| }, | ||
| easeOutSine: function (x) { | ||
| return sin( x * PI/2 ); | ||
| }, | ||
| easeInOutSine: function (x) { | ||
| return -( cos( PI * x ) - 1 ) / 2; | ||
| }, | ||
| easeInExpo: function (x) { | ||
| return x === 0 ? 0 : pow( 2, 10 * x - 10 ); | ||
| }, | ||
| easeOutExpo: function (x) { | ||
| return x === 1 ? 1 : 1 - pow( 2, -10 * x ); | ||
| }, | ||
| easeInOutExpo: function (x) { | ||
| return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? | ||
| pow( 2, 20 * x - 10 ) / 2 : | ||
| ( 2 - pow( 2, -20 * x + 10 ) ) / 2; | ||
| }, | ||
| easeInCirc: function (x) { | ||
| return 1 - sqrt( 1 - pow( x, 2 ) ); | ||
| }, | ||
| easeOutCirc: function (x) { | ||
| return sqrt( 1 - pow( x - 1, 2 ) ); | ||
| }, | ||
| easeInOutCirc: function (x) { | ||
| return x < 0.5 ? | ||
| ( 1 - sqrt( 1 - pow( 2 * x, 2 ) ) ) / 2 : | ||
| ( sqrt( 1 - pow( -2 * x + 2, 2 ) ) + 1 ) / 2; | ||
| }, | ||
| easeInElastic: function (x) { | ||
| return x === 0 ? 0 : x === 1 ? 1 : | ||
| -pow( 2, 10 * x - 10 ) * sin( ( x * 10 - 10.75 ) * c4 ); | ||
| }, | ||
| easeOutElastic: function (x) { | ||
| return x === 0 ? 0 : x === 1 ? 1 : | ||
| pow( 2, -10 * x ) * sin( ( x * 10 - 0.75 ) * c4 ) + 1; | ||
| }, | ||
| easeInOutElastic: function (x) { | ||
| return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? | ||
| -( pow( 2, 20 * x - 10 ) * sin( ( 20 * x - 11.125 ) * c5 )) / 2 : | ||
| pow( 2, -20 * x + 10 ) * sin( ( 20 * x - 11.125 ) * c5 ) / 2 + 1; | ||
| }, | ||
| easeInBack: function (x) { | ||
| return c3 * x * x * x - c1 * x * x; | ||
| }, | ||
| easeOutBack: function (x) { | ||
| return 1 + c3 * pow( x - 1, 3 ) + c1 * pow( x - 1, 2 ); | ||
| }, | ||
| easeInOutBack: function (x) { | ||
| return x < 0.5 ? | ||
| ( pow( 2 * x, 2 ) * ( ( c2 + 1 ) * 2 * x - c2 ) ) / 2 : | ||
| ( pow( 2 * x - 2, 2 ) *( ( c2 + 1 ) * ( x * 2 - 2 ) + c2 ) + 2 ) / 2; | ||
| }, | ||
| easeInBounce: function (x) { | ||
| return 1 - bounceOut( 1 - x ); | ||
| }, | ||
| easeOutBounce: bounceOut, | ||
| easeInOutBounce: function (x) { | ||
| return x < 0.5 ? | ||
| ( 1 - bounceOut( 1 - 2 * x ) ) / 2 : | ||
| ( 1 + bounceOut( 2 * x - 1 ) ) / 2; | ||
| } | ||
| }); | ||
|
|
||
| }); |
