Skip to content

Instantly share code, notes, and snippets.

@glennlopez

glennlopez/index.html

Created February 23, 2023 03:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save glennlopez/4850c4a0408c061288a1c06ce76b4550 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save glennlopez/4850c4a0408c061288a1c06ce76b4550 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. glennlopez created this gist Feb 23, 2023.
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="loader abs tl"><!-- Loading --></div>
    <div class="container abs">
    <h1>Awesome!</h1>
    <h3>Your pills are on their way.</h3>
    </div>
    18 changes: 18 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    $(window).load(function() {
    co = $('.container');
    $('.loader').animate({
    opacity: '0'
    }, 500, function() {
    co.animate({
    width: '100%',
    height: '100%',
    top: '0%',
    left: '0%'
    }, 500, function() {
    $(this).find('*').delay(250).animate({
    opacity: '1'
    }, 500);
    $(this).css('overflow', 'auto');
    });
    });
    });
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    127 changes: 127 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,127 @@
    *{
    margin:0px;
    padding:0px;
    outline:0px none;
    border:0px none;
    }
    html{
    color:#000000;
    background:#ffffff;
    width:100%;
    height:100%;
    }

    .button {
    text-align: center;
    position: center;
    display: inline-block;
    }

    /* HWAForce */
    body {
    transform: translate3d(0, 0, 0);
    backface-visibility:hidden;
    perspective:1000;-webkit-transform:translate3d(0, 0, 0);
    -webkit-backface-visibility:hidden;
    -webkit-perspective:1000;
    -moz-transform:translate3d(0, 0, 0);
    -moz-backface-visibility:hidden;
    -moz-perspective:1000;
    -ms-transform:translate3d(0, 0, 0);
    -ms-backface-visibility:hidden;
    -ms-perspective:1000;
    }

    body {
    font:100%/1 Arial;
    word-spacing:0px;
    letter-spacing:0px;
    width:100%;
    font-weight:normal;
    font-style:normal;
    height:100%;
    position:relative;
    }

    a {
    text-decoration:none;
    cursor:pointer;
    }

    h1,h2,h3,h4,h5,h6 {
    display:block;
    text-align: center;
    }

    .clear {
    clear:both;
    overflow:hidden;
    }

    .container {
    width:100%;
    }
    .abs {
    position:absolute;
    }

    .tl {
    top:0px;
    left:0px;
    }


    .loader {
    width:100%;
    height:100%;
    text-align:center;
    color:#ffffff;
    }

    .container {
    background:#57bc76;
    height:0;
    width:0;
    top:50%;
    left:50%;
    overflow:hidden;
    }

    .container code{
    width:70%;
    margin:25px 0px;
    font-size:16px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#0072bc;
    padding:20px 50px;
    display:block;
    background:#f0f0f0;
    }

    .container p{
    width:70%;
    margin:25px 50px;
    font-size :16px;
    font-family: 'Montserrat', Arial, sans-serif;
    color:#fff;
    }
    .container h1{
    margin:225px 50px 0px 50px;
    font-size:52px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color:#fff;
    }

    .container h3 {
    margin:25px 50px;
    font-size:20px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 100;
    color:#fff;
    }

    .container > * {
    opacity: 0;
    }

    7 changes: 7 additions & 0 deletions success-message-transition.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Success Message Transition
    --------------------------
    Simple success message transition

    A [Pen](https://codepen.io/ryanabi/pen/ONzqvj) by [Ryan ](https://codepen.io/ryanabi) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/ONzqvj).