Skip to content

Instantly share code, notes, and snippets.

@tribou
Created March 8, 2016 15:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tribou/c4ab59308bb7b1748ca3 to your computer and use it in GitHub Desktop.
Save tribou/c4ab59308bb7b1748ca3 to your computer and use it in GitHub Desktop.
Sample HTML index page template
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8"
></meta>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
></meta>
<meta
name="theme-color"
content="#00d2ff">
</meta>
<meta name="application-name" content="HTML Template">
<meta name="msapplication-TileImage" content="/images/favicons/icon-144.png">
<meta name="msapplication-TileColor" content="#00d2ff">
<title>
HTML Template
</title>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"
rel="stylesheet"></link>
<link
rel="shortcut icon"
sizes="16x16"
href="/images/favicons/icon-16.png">
</link>
<link
rel="shortcut icon"
sizes="24x24"
href="/images/favicons/icon-24.png">
</link>
<link
rel="shortcut icon"
sizes="32x32"
href="/images/favicons/icon-32.png">
</link>
<link
rel="shortcut icon"
sizes="48x48"
href="/images/favicons/icon-48.png">
</link>
<link
rel="shortcut icon"
sizes="64x64"
href="/images/favicons/icon-64.png">
</link>
<link
rel="icon"
sizes="152x152"
href="/images/favicons/icon-152.png">
</link>
<link
rel="apple-touch-icon-precomposed"
sizes="57x57"
href="/images/favicons/icon-57.png">
</link>
<link
rel="apple-touch-icon-precomposed"
sizes="72x72"
href="/images/favicons/icon-72.png">
</link>
<link
rel="apple-touch-icon-precomposed"
sizes="114x114"
href="/images/favicons/icon-114.png">
</link>
<link
rel="apple-touch-icon-precomposed"
sizes="120x120"
href="/images/favicons/icon-120.png">
</link>
<link
rel="apple-touch-icon-precomposed"
sizes="144x144"
href="/images/favicons/icon-144.png">
</link>
<link
rel="apple-touch-icon-precomposed"
sizes="152x152"
href="/images/favicons/icon-152.png">
</link>
<style>
body {
background: #00d2ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #00d2ff , #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #00d2ff , #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #FFFFFF;
}
.app {
width: 100%;
}
.construction {
/*background-image: url('/images/under_construction.png');*/
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: 630px 290px;
-moz-background-size: 630px 290px;
-o-background-size: 630px 290px;
background-size: 630px 290px;
width: 630px;
height: 290px;
margin: 0 auto;
margin-top: 20vh;
text-align: center;
}
@media (max-width: 767px) {
.construction {
-webkit-background-size: 315px 145px;
-moz-background-size: 315px 145px;
-o-background-size: 315px 145px;
background-size: 315px 145px;
width: 315px;
height: 145px;
}
}
</style>
</head>
<body>
<div class="app">
<div class="construction">
<h1>
HTML Template
</h1>
</div>
</div>
<!--
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment