| <!DOCTYPE html> | |
| <html> | |
| <!-- Important for Emoji's! --> | |
| <meta charset="utf-8"> | |
| <!-- I'm using Tachyons CSS - a simple, quick prototyping framework --> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/> | |
| <!-- Code for the Countdown timer from: | |
| https://www.w3schools.com/howto/howto_js_countdown.asp --> | |
| <script> | |
| // Set your deadline inside | |
| var countDownDate = new Date("Feb 7, 2021 09:30:00").getTime(); | |
| // Update the count down every 1 second | |
| var x = setInterval(function() { | |
| // Get today's date and time | |
| var now = new Date().getTime(); | |
| // Find the distance between now and the count down date | |
| var distance = countDownDate - now; | |
| // Time calculations for days, hours, minutes and seconds | |
| var days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| var seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| // Display the result in the element with id="demo" | |
| document.getElementById("demo").innerHTML = days + "d " + hours + "h " | |
| + minutes + "m " + seconds + "s "; | |
| // If the count down is finished, write some text | |
| if (distance < 0) { | |
| clearInterval(x); | |
| document.getElementById("demo").innerHTML = "EXPIRED"; | |
| } | |
| }, 1000); | |
| </script> | |
| <!-- Main content --> | |
| <head> | |
| <title>{Your Aim Goes Here}</title> | |
| </head> | |
| <body> | |
| <article class="cf ph3 ph5-ns pv5 sans-serif"> | |
| <header class="fn fl-ns w-50-ns pr4-ns"> | |
| <!-- Edit the stuff: <h1> Your Aim Goes Here <-- edit this only don't edit outside the <h1> tag </h1> --> | |
| <h1 class="f2 lh-title fw9 mb3 mt0 pt3 bt bw2"> | |
| Your Aim Goes Here | |
| </h1> | |
| <!-- You can edit this too to add FB, Instgram, etc --> | |
| <h2 class="f3 black lh-title"> | |
| DON'T WASTE TIME UNNECESSARILY SURFING THE WEB ESP. REDDIT, YOUTUBE, ETC | |
| </h2> | |
| <!-- The timer: you can move it wherever you want to keep it, change color, etc | |
| for the CSS options (color, padding, etc) look at Tachyons CSS documentation | |
| --> | |
| <time class="f1 ttu tracked red" id="demo"></time> | |
| </header> | |
| <div class="fn fl-ns w-50-ns bt bw2"> | |
| <h1 class="f2 lh-title fw9 mb3 mt0 pt3"> | |
| To-Dos/My Work/Subjects to complete | |
| </h1> | |
| <!-- Your list of work/todos goes here. You can add emojis.🔥 or change color or whatever you want. | |
| For color options and more look here: http://tachyons.io (scroll down a bit) | |
| --> | |
| <p class="f5 lh-copy measure mt0-ns"> | |
| <p class="f4 fw6 db black">♻️ Todo #1, I use recycling for redo/revise it later</p> | |
| <p class="f4 fw6 db blue">⚠️ Todo#2 or Subject, Ongoing</p> | |
| <p class="f4 fw6 db black">❌ Todo#3, I use the cross to tell me it's not done yet.</p> | |
| <p class="f4 fw6 db black">❌ Todo#4</p> | |
| <p class="f4 fw6 db gold">❌ Todo#5 in different color</p> | |
| <p class="f4 fw6 db pink">❌ Experiment</p> | |
| <p class="f4 fw6 db red">❌ with</p> | |
| <p class="f4 fw6 db green">♻️ colors</p> | |
| <p class="f4 fw6 db green"> or </p> | |
| <p class="f4 fw6 db green">emojis.🔥 🎉</p> | |
| </p> | |
| </div> | |
| </article> | |
| </body> | |
| </html> | |
| <!-- I hope you can be a little more productive and not surf unnecessarily! --> | |
| <!-- Ankit, @sudoankit --> |
Look at my comment below is an example (mine):
Good luck! Feel free to ask questions below.
