update the index page

kelvinsekx · Oct 30, 2020 · ef63298 · ef63298
1 parent dcb6184
commit ef63298
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 1 deletion.
diff --git a/assets/demo.js b/assets/demo.js
@@ -7,5 +7,6 @@ var letter = new LetterLoading('#main', {
       "tell me about what more animation you love",
       "Lastly, Hey, if you're Bukunmi, I love you"
     ],
+    loadspeed: 5
   });
 })
diff --git a/index.html b/index.html
@@ -6,8 +6,28 @@
     <title>fetch every single letter|...who told you not to fetch ?</title>
     <script src="./library/letterloading.js" type="text/javascript"></script>
     <script src="./assets/demo.js"></script>
+    <link rel="stylesheet" href="./public/styles.css">
   </head>
   <body>
-    <p>I like:<span id="main"></span></p>
+    <div id="container">
+      <h1>Letter Loading</h1>
+      <section class="paleteContainer">
+        <h2>Default Letter Loading Simulation</h2>
+        <div class="loadingPalete"><span id="main"></span></div>
+        <p>
+          <pre>
+            var letter = new LetterLoading('#main', {
+              strings: [
+                "You're lovely... yes you are",
+                "This is an example string",
+                "tell me about what more animation you love",
+                "Lastly, Hey, if you're Bukunmi, I love you"
+              ],
+              loadspeed: 5
+            });
+          </pre>
+        </p>
+      </section>
+    </div>
   </body>
 </html>
diff --git a/public/init.css b/public/init.css
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,40 @@
+body,
+p,
+div {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#container {
+  width: 50vw;
+  margin: 1rem auto;
+}
+
+@media screen and (max-width: 600px){
+    #container{
+        width: 90vw;
+    }
+}
+
+#container h1 {
+  text-align: center;
+}
+section {
+  padding: 12px 0;
+  font-weight: 400;
+}
+.paleteContainer h2 {
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+
+.loadingPalete{
+    background-color: rgba(129, 224, 224,0.3);
+    width: 99%;
+    height: 2rem;
+    border-radius: 1.2rem;
+    padding: 0.3em 2rem;
+    font-weight: bolder;
+}