A Pen by Francis Lorenz Taberdo on CodePen.
Created
December 19, 2016 11:43
-
-
Save francistaberdo/c4a1d816439677b4e62889cefb89b592 to your computer and use it in GitHub Desktop.
December 19, 2016 (Prelim Post-Exam)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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"}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment