2 files changed, 59 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..7c0fadd
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<!--
+	<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
+	<link rel="stylesheet" href="/style.css">
+	<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
+	<script src="index.js" defer type="module"></script>
+-->
+	<link rel="stylesheet" href="/style.css">
+	<script src="/main.js" defer></script>
+</head>
+<body>
+	<header></header>
+	<main>
+		<!--
+		<div id="slideshow" style="display:none">
+		-->
+		<div id="slideshow">
+			<div id="slideshow-carousel">
+				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/tulip.jpg"      /></div>
+				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg"     /></div>
+				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/raspberries.jpg"/></div>
+				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/wolf.jpg"       /></div>
+				<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/shore.jpg"      /></div>
+			</div>
+		</div>
+		<div id="albums"    style="display:none">
+		</div>
+		<div id="settings"  style="display:none">
+		</div>
+	</main>
+	<footer>
+		<a href="/">Slideshow</a>
+		<a href="/albums">Album Picker</a>
+		<a href="/settings">Settings</a>
+	</footer>
+</body>
+</html>
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..ce4d76a
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,20 @@
+body {
+	background: black
+}
+
+.carousel-cell {
+	height: 70vh;
+	width: 80vw;
+
+	margin: 10px;
+
+
+}
+
+.carousel-cell img {
+	vertical-align: middle;
+/*	border-radius: 10px; */
+	height: 100%;
+	max-width: 100%;
+	object-fit: contain;
+}