Skip to content

Instantly share code, notes, and snippets.

@oliveratgithub

oliveratgithub/index.html

Last active November 26, 2023 08:11
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • Save oliveratgithub/e60d92706218812b6630045f59191f3d to your computer and use it in GitHub Desktop.
Save oliveratgithub/e60d92706218812b6630045f59191f3d to your computer and use it in GitHub Desktop.
Download ZIP
Simple, quick & standalone HTML5 responsive placeholder Website. Runs by simply copy-paste the whole code without any additional resource files. It's based on PureCSS.io with jQuery containing a fullstretch-background image plugin and a date-time countdown; kudos to unsplash.it for beautiful placeholder images.
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dummy Page</title>
<meta name="description" content="Simple, quick, standalone responsive placeholder Website without any additional resources">
<meta name="author" content="https://gist.github.com/oliveratgithub">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]-->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<style>
body {
line-height: 1.7em;
color: #000;
background-color: #ddd;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
text-shadow: 1px 1px 16px rgba(255, 255, 255, 0.8);
font-size: 34px;
text-align: center;
margin-top: 85px;
}
h1, h2, h3, h4, h5, h6, label { color: #fff; }
h1 { text-transform: uppercase; }
#countdown { line-height: 1.1em; }
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1">
<h1>Stay tuned</h1>
<h2>something new is coming here</h2>
<div id="countdown">
<span class="days">00</span>&nbsp;<span class="timeRefDays">days</span>
<span class="hours">00</span>&nbsp;<span class="timeRefHours">hours</span>
<span class="minutes">00</span>&nbsp;<span class="timeRefMinutes">minutes</span>
<span class="seconds">00</span>&nbsp;<span class="timeRefSeconds">seconds</span>
</div>
</div>
</div>
</body>
<script>
/*
* Here is an example of how to use Backstretch as a slideshow.
* Just pass in an array of images, and optionally a duration and fade value.
*
* INFO: Duration is the amount of time in between slides,
* INFO: and fade is value that determines how quickly the next image will fade in
*/
$.backstretch([
"https://unsplash.it/g/1600?image=1073"
, "https://unsplash.it/g/1600?image=1068"
, "https://unsplash.it/g/1600?image=1011"
], {duration: 3000, fade: 750});
/*
* Basic Count Down to Date and Time
* Author: @mrwigster / trulycode.com
*
* INFO: change the "date:"-value to your desired target date-time
*/
!function(a){a.fn.countdown=function(b,c){function d(){eventDate=Date.parse(f.date)/1e3,currentDate=Math.floor(a.now()/1e3),eventDate<=currentDate&&(c.call(this),clearInterval(interval)),seconds=eventDate-currentDate,days=Math.floor(seconds/86400),seconds-=60*days*60*24,hours=Math.floor(seconds/3600),seconds-=60*hours*60,minutes=Math.floor(seconds/60),seconds-=60*minutes,1==days?e.find(".timeRefDays").text("day"):e.find(".timeRefDays").text("days"),1==hours?e.find(".timeRefHours").text("hour"):e.find(".timeRefHours").text("hours"),1==minutes?e.find(".timeRefMinutes").text("minute"):e.find(".timeRefMinutes").text("minutes"),1==seconds?e.find(".timeRefSeconds").text("second"):e.find(".timeRefSeconds").text("seconds"),"on"==f.format&&(days=String(days).length>=2?days:"0"+days,hours=String(hours).length>=2?hours:"0"+hours,minutes=String(minutes).length>=2?minutes:"0"+minutes,seconds=String(seconds).length>=2?seconds:"0"+seconds),isNaN(eventDate)?(alert("Invalid date. Example: 30 Tuesday 2013 15:50:00"),clearInterval(interval)):(e.find(".days").text(days),e.find(".hours").text(hours),e.find(".minutes").text(minutes),e.find(".seconds").text(seconds))}var e=a(this),f={date:null,format:null};b&&a.extend(f,b),d(),interval=setInterval(d,1e3)}}(jQuery),$(document).ready(function(){
$("#countdown").countdown({date:"23 May 2023 23:23:23",format:"on"})});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment