Skip to content

Instantly share code, notes, and snippets.

@anurag-majumdar
Created February 7, 2019 06:43
Show Gist options
  • Save anurag-majumdar/853f2fd1b6352405c146403a88eaf52e to your computer and use it in GitHub Desktop.
Save anurag-majumdar/853f2fd1b6352405c146403a88eaf52e to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Critical Styles -->
<style>
html {
box-sizing: border-box;
}
*,
*:after,
*:before {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font: 18px 'Oxygen', Helvetica;
background: #ececec;
}
header {
height: 60px;
background: #512DA8;
color: #fff;
display: flex;
align-items: center;
padding: 0 40px;
box-shadow: 1px 2px 6px 0px #777;
}
h1 {
margin: 0;
}
.banner {
text-decoration: none;
color: #fff;
cursor: pointer;
}
main {
display: flex;
justify-content: center;
height: calc(100vh - 140px);
padding: 20px 40px;
overflow-y: auto;
}
button {
background: #512DA8;
border: 2px solid #512DA8;
cursor: pointer;
box-shadow: 1px 1px 3px 0px #777;
color: #fff;
padding: 10px 15px;
border-radius: 20px;
}
.button {
display: flex;
justify-content: center;
}
button:hover {
box-shadow: none;
}
footer {
height: 40px;
background: #2d3850;
color: #fff;
display: flex;
align-items: center;
padding: 40px;
}
</style>
<title>Vanilla Todos PWA</title>
</head>
<body>
<body>
<!-- Main Application Section -->
<header>
<h3><a class="banner"> Vanilla Todos PWA </a></h3>
</header>
<main id="app"></main>
<footer>
<span>&copy; 2019 Anurag Majumdar - Vanilla Todos SPA</span>
</footer>
<!-- Critical Scripts -->
<script async src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
<noscript>
This site uses JavaScript. Please enable JavaScript in your browser.
</noscript>
</body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment