December 19, 2016 (Prelim Post-Exam)

december-19-2016-prelim-post-exam.markdown

December 19, 2016 (Prelim Post-Exam)

A Pen by Francis Lorenz Taberdo on CodePen.

License.

index.pug

link(href="https://fonts.googleapis.com/css?family=Open+Sans|Yellowtail" rel="stylesheet")

.container.box
   .container.inner.text-center
      h1.header Welcome to Post Exam
      
   .container.text-center.buttons
      button.start.button(type="button") START
      button.reset.button(type="button") RESET

   
   

script.js

$(document).ready(function(){
   $('.start').click(function(){
      $('.inner').animate({width: "100%", borderWidth: "20"});
      $('.header').animate({fontSize: "72px"});
   });
   
  $('.reset').click(function(){
      $('.inner').animate({width: "40%", borderWidth: "1"});
      $('.header').animate({fontSize: "32px"}); 
  });
   
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.sass

/* VARIABLES */

$body: #eaeaea
$container: #fff
$inner: #A2DED0
$button-bg: #26A65B
$thefamily: 'Open Sans', sans-serif

/* MIXINS */

=radius()
   -webkit-border-radius: 8px
   -moz-border-radius: 8px
   -o-radius: 8px
   border-radius: 8px

=shadow()
   -webkit-box-shadow: 0px 8px 10px #aaa
   -moz-box-shadow: 0px 8px 10px #aaa
   -o-box-shadow: 0px 8px 10px #aaa
   box-shadow: 0px 8px 10px #aaa


/* RESET */

body
   color: #444
   background: $body
   font-family: $thefamily
   
/* CONTAINER */

.box
   background: $container
   margin-top: 24px
   min-height:  200px
   padding: 18px
   +radius
   +shadow

.inner
   min-height: 40vh
   width: 40%
   display: flex
   background: $inner
   margin-bottom: 32px
   border: 1px solid #eaeaea
   +radius
   
   .header
      margin: auto
      font-size: 32px
   
.button
   padding: 12px
   margin: 0 12px
   background: $button-bg
   color: #fff
   border: none
   font-size: 17px
   +radius
   
   &:hover
      background: $inner
      color: #444

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />