Fade-in for page load? Maybe?

This commit is contained in:
Charles Truluck 2015-12-26 23:50:52 -05:00
parent 8a263f4f90
commit 5ab1e059c4
12 changed files with 32 additions and 18 deletions

View file

@ -66,8 +66,22 @@ li a, .navbar-brand {
table { table {
color: #226C1B; color: #226C1B;
} }
/*textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
border-color: #62AC5B; @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px #29d257; @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
outline: 0 none; @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
}*/
.fade_in {
opacity: 0;
-webkit-animation: fadeIn ease-in-out 1;
-moz-animation: fadeIn ease-in-out 1;
animation: fadeIn ease-in-out 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>About</h1> <h1>About</h1>
<h2>(insert stuff here)</h2> <h2>(insert stuff here)</h2>
</center> </center>

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>EasyCTF IRC</h1> <h1>EasyCTF IRC</h1>
<h2>(Insert iFrame with IRC here)</h2> <h2>(Insert iFrame with IRC here)</h2>
</center> </center>

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>EasyCTF 3</h1> <h1>EasyCTF 3</h1>
<h3 style="color: #44783f;"> Coming 2016 </h3> <h3 style="color: #44783f;"> Coming 2016 </h3>
<br> <br>

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>Log-in</h1> <h1>Log-in</h1>
<div class="input-group"> <div class="input-group">
<form id="login-form"> <form id="login-form">

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>Problems</h1> <h1>Problems</h1>
<div class="panel panel-info"> <div class="panel panel-info">
<div class="panel-heading"> <div class="panel-heading">

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>Programming</h1> <h1>Programming</h1>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1 class="ui dividing header">Register</h1> <h1 class="ui dividing header">Register</h1>
<script src="https://www.google.com/recaptcha/api.js" async defer></script> <script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="js/register.js"></script> <script src="js/register.js"></script>

View file

@ -1,6 +1,5 @@
<center> <center class="fade_in">
<h1> Info </h1> <h1> Info </h1>
</center>
<h2>Rules</h2> <h2>Rules</h2>
Here are the rules regarding EasyCTF. Please follow these rules to make sure everyone has a fair chance at winning. Here are the rules regarding EasyCTF. Please follow these rules to make sure everyone has a fair chance at winning.
@ -29,3 +28,4 @@ If you don't live in the United States, or you're not a high school or middle sc
2nd Place: $256<br> 2nd Place: $256<br>
3rd Place: $128<br> 3rd Place: $128<br>
Top 20: Laptop Stickers<br> Top 20: Laptop Stickers<br>
</center>

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>Scoreboard</h1> <h1>Scoreboard</h1>
<table class="table"> <table class="table">
<thead> <thead>

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>Shell</h1> <h1>Shell</h1>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">

View file

@ -1,4 +1,4 @@
<center> <center class="fade_in">
<h1>News / Updates</h1> <h1>News / Updates</h1>
<a class="twitter-timeline" href="https://twitter.com/easyctf" data-widget-id="680792667001884672">Tweets by @easyctf</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <a class="twitter-timeline" href="https://twitter.com/easyctf" data-widget-id="680792667001884672">Tweets by @easyctf</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</center> </center>