StartScreen Sparta

index.html

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Walter+Turncoat">
<div class="rain container">  
    <div id="timer" class="text-center row" style="margin-top:5%;">
      <h2>Time Spend Coding:</h2>
      <span id="days"></span> days
      <span id="hours"></span> hours
      <span id="minutes"></span> minutes
      <span id="seconds"></span> seconds
      <div class="wrapQuotes">
        <p id="quotes"></p>
        <p id="author"></p>
      </div>
    </div>
    
</div>

<!--
Rain solution inspired by Aurélien Lemesre
Storm solution inspired by Christhopher Lion
Timer solution inspired by Sander
-->

script.js

$(document).ready(function(){
  //rain function
  var numDrops = 500; //number of drops
  function range(min, max) {
    return (Math.floor(Math.random() * (max - min + 1)) + min);
  }// function to generate a random number range
  function createRain() {
    for(i=1;i<numDrops;i++) {
    var dropLeft = range(0,1600);//fill the horizontal range
    var dropTop = range(-1000,1400);//fill the vertical range
    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');//add drops
    $('#drop'+i).css('left',dropLeft);//sets the left edge of an element to the left edge of its nearest positioned ancestor
    $('#drop'+i).css('top',dropTop);//sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor
    }
  }// function to generate drops
  createRain();
  //timer function
  var timer;
  var compareDate = new Date(2016, 8, 1, 2, 0, 0, 0, 0);//date(with time) i started coding regularly
  timer = setInterval(function() {
    timeBetweenDates(compareDate);
  }, 1000);//set timer calling the compare function
  function timeBetweenDates(toDate) {
    var dateEntered = toDate,
        now = new Date(),
        difference = dateEntered.getTime() - now.getTime(),
        seconds = Math.floor(difference / 1000),
        minutes = Math.floor(seconds / 60),
        hours = Math.floor(minutes / 60),
        days = Math.floor(hours / 24);
    
    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days*-1);
    $("#hours").text(hours*-1);
    $("#minutes").text(minutes*-1);
    $("#seconds").text(seconds*-1);
    
    

  }//calculating and displaying the time
  //random quotes
  var quote,
      author,
      quoteArr = [ 
		{
			quote: "Success doesn’t know these things about cold or early or tired. It just knows if you showed up or not.",  
			author: "Greg Plitt"
		},
    {
			quote: "You are what you repeatedly do every day. If excellence is something you’re striving for, then it’s not an accident. It’s a habit." ,  
			author: "Greg Plitt"
		},
    {
			quote: "The road to success is a very lonely road. You’re not gonna see too many friends. It’s only you with your shadow. Once you get there, many people will love you, also many people will hate you. Because your success is a huge spotlight, shining on their failures.",  
			author: "Greg Plitt"
		},
    {
			quote: "Today it begins. Tomorrow it continues. And it never ends, until you reach your goal and cross the finish line.",  
			author: "Greg Plitt"
		},
    {
			quote: "Work for a cause, not for applause. Live life to express, not to impress. Don’t strive to make your presence noticed just make your absence felt.",  
			author: "Unknown"
		},
    {
			quote: "Your time is limited. Don’t waste it living someone else’s life. Don’t be trapped by dogma, which is living the result of other people’s thinking. Don’t let the noise of other’s opinion drowned your own inner voice. And most importantly, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.",  
			author: "Steve Jobs"
		},
    {
			quote: "Late Nights, Early Mornings. Lots Of Associates, Very Few Friends. You Will Be Misunderstood Constantly. You Will Be Single Unless You're Lucky Enough To Find Someone Who Understands Your Lifestyle. People Will Want You To Do Good But Never Better Than Them And For That Reason You Will Do A Lot Of Things Alone.",  
			author: "The Cost Of Ambition"
		},
    {
			quote: "Success is a very, very lonely road. Very few people are willing to make the sacrifices and take the pain to be successful. It’s an uphill battle and along that road, you’re not going to see too many friends. You’re going to see your shadow most often. You gotta trust in the heart of hearts – inside that what you’re doing, what you believe in is a worthy cause and a winnable fight.",  
			author: "Greg Plitt"
		},
    {
			quote: "Success – many will love you for it. The majority will hate you. Because your success makes them feel insufficient in their current endeavor. Reminds them of how they could’ve done it but came up short and didn’t revisit it, where they went at it and failed and didn’t revisit it again. The difference between a winner and a loser – the failure is there every time, but the winner gets back  up and does it again and again until it goes his way.",  
			author: "Greg Plitt"
		},
    {
			quote: "Patience is grossly underestimated.",  
			author: "Gary Vaynerchuck"
		}            
    ];//an array with different quotes
  var random = Math.floor(Math.random()*10);//define a random number from the possible quotes
  //console.log(quoteArr.length, random);
  function quotes(){
    $("#quotes").html(quoteArr[random].quote);
		$("#author").html("- " + quoteArr[random].author);
  }//quote function that displays different quotes
  quotes();
})

scripts

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

startscreen-sparta.markdown

StartScreen Sparta

A Pen by Daniel Deutsch on CodePen.

License.

startscreensparta.markdown

StartScreenSparta

A Pen by Daniel Deutsch on CodePen.

License.

style.css

body {
  font-family: Coda;
  color:red;
  font-size: 2em;
  letter-spacing: -1px;
  height:100vh;
  background: url("https://images7.alphacoders.com/413/413229.jpg"), black;
  background-size: cover;
  background-position: 80%;
  background-repeat: no-repeat;
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
  overflow:hidden;
}
#timer span {
  font-size: 5em;
  margin: 0 3px 0 15px;
}
.wrapQuotes{
  margin-top:2em;
  padding:1em;
  font-family: Walter Turncoat;
  color:white;
  font-size: 1.5em;
  letter-spacing: 1px;
  border: 0.2em solid black;
  border-radius: 10px;
  background: -moz-linear-gradient(top, rgba(21,16,33,0.5) 0%, rgba(21,16,33,0.5) 1%, rgba(21,16,33,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(21,16,33,0.5) 0%,rgba(21,16,33,0.5) 1%,rgba(21,16,33,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(21,16,33,0.5) 0%,rgba(21,16,33,0.5) 1%,rgba(21,16,33,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/*---------- rain animation --------------*/
.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(2, 38, 96, 0.5) ), to(rgba(255,255,255,0.2))  );
  background: -moz-linear-gradient(top, rgba(2, 38, 96, 0.5) 0%, rgba(255,255,255,0.2) 100%);
	width:1px;
	height:80px;
	position: absolute;
	bottom:200px;
	-webkit-animation: fall .80s linear infinite;
  -moz-animation: fall .80s linear infinite;
}
@-webkit-keyframes fall {
	to {margin-top:900px;}
}/*animation of the drops*/
@-moz-keyframes fall {
	to {margin-top:900px;}
}/*animation of the drops*/

/*---------- lightning animation --------------*/
.lightning{
  height:100vh;
  background: url("https://images7.alphacoders.com/413/413229.jpg"), black;
  background-size: cover;
  background-position: 80%;
  background-repeat: no-repeat;
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
  overflow:hidden;
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
  z-index: -1;  
}
/*oppacity animation*/
.flashit{
-webkit-animation: flash ease-out 5s infinite;
-moz-animation: flash ease-out 5s infinite;
animation: flash ease-out 5s infinite;
animation-delay: 0.4s;
}
@-webkit-keyframes flash {
	from { opacity: 0; } 
  80% { opacity: 0; }
	85% { opacity: 0.6; }
  90% { opacity: 0.7; }
  92% { opacity: 0.2; }
	93% { opacity: 0.6; }
  94% { opacity: 0.2; }
  96% { opacity: 0.8; } 
	to { opacity: 0; }
}
@keyframes flash {
	from { opacity: 0; } 
  80% { opacity: 0; }
	85% { opacity: 0.6; }
  90% { opacity: 0.7; }
  92% { opacity: 0.2; }
	93% { opacity: 0.6; }
  94% { opacity: 0.2; }
  96% { opacity: 0.8; } 
	to { opacity: 0; }
}

styles

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