Last active
April 24, 2025 23:06
-
-
Save oliveratgithub/e60d92706218812b6630045f59191f3d to your computer and use it in GitHub Desktop.
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.
This file contains hidden or 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
| <!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/[email protected]/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/[email protected]/build/grids-responsive-old-ie-min.css"> | |
| <![endif]--> | |
| <!--[if gt IE 8]><!--> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/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> <span class="timeRefDays">days</span> | |
| <span class="hours">00</span> <span class="timeRefHours">hours</span> | |
| <span class="minutes">00</span> <span class="timeRefMinutes">minutes</span> | |
| <span class="seconds">00</span> <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