Skip to content

Instantly share code, notes, and snippets.

@craigerskine

craigerskine/xpand.html

Last active April 28, 2022 20:54
Show Gist options
  • Save craigerskine/4ed451a32806bb7d7a42441ef3603fc1 to your computer and use it in GitHub Desktop.
Save craigerskine/4ed451a32806bb7d7a42441ef3603fc1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
xpand.html
<!doctype html>
<html lang="en" class="bg-gray-300 dark:(bg(black opacity-90))" hidden>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>xpand</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="bg-gradient-to-b from-gray-50 to-gray-300 dark:(from-gray-800 to-transparent) bg-fixed text-gray-500">
<div class="app min-h-screen flex flex-col divide(y gray-500 opacity-10)" v-cloak>
<main class="w-full">
<section class="h-32 text(white center) flex md:(h-[50vh])">
<a v-for="(i, index) in 4" href="#" :class="'bg(yellow-700 cover center opacity-'+ (index + 1)*2*10 +') w-1/4 flex hover:(w-full) focus:(w-full) transition-all duration-300'">
<figure class="w-full h-full bg(cover center)" :style="'background-image: url(https://loremflickr.com/800/600/grass?random='+ (index + 1) +');'"></figure>
</a>
</section>
</main>
<footer class="mt-auto py-8 px-4 w-full text(gray-500 opacity-50) text-xs font-bold uppercase text-right">
Made with
<svg xmlns="http://www.w3.org/2000/svg" class="-mt-1 mx-1 text-red-500 inline-block stroke-current" width="16" height="12" viewBox="0 0 16 12" role="img" aria-labelledby="footer-heart">
<title id="footer-heart">Love</title>
<polygon fill="transparent" points="8 4 12 0 16 4 8 12 0 4 4 0"></polygon>
</svg>
by <a href="https://craigerskine.com/" class="mx-1 text-gray-400 hover:text-gray-300 focus:text-gray-300">Craig Erskine</a>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/combine/npm/twind/twind.umd.js,npm/twind/observe/observe.umd.js,npm/twind/colors/colors.umd.js"></script>
<script src="https://unpkg.com/vue"></script>
<script>
// data
var app = Vue.createApp({
data() {
return {
}
},
});
app.mount('.app');
twind.setup({
mode: "silent",
});
twindObserve.observe(document.documentElement);
document.documentElement.removeAttribute('hidden');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment