Skip to content

Instantly share code, notes, and snippets.

@panphora

panphora/boxescss-example-page.html

Last active December 10, 2021 17:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save panphora/0ea64abaf4fe96220952db1fa87a1da4 to your computer and use it in GitHub Desktop.
Save panphora/0ea64abaf4fe96220952db1fa87a1da4 to your computer and use it in GitHub Desktop.
Download ZIP
An example page built with the CSS framework Boxes.css (full page: https://www.todopal.com/)
Raw
boxescss-example-page.html
<!-- FIND THE FULL PAGE HERE: https://www.todopal.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TodoPal - Make room for big projects</title>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
<link rel="stylesheet" type="text/css" href="/assets/css/boxes.css">
</head>
<body class="background-dark">
<div class="content wide background-light-yellow">
<img class="logo" src="/assets/images/logo.svg">
<nav>
<a href="/user/signup">Sign up</a>
<a href="/user/login">Login</a>
</nav>
</div>
<section class="content background-light-yellow">
<h1 class="h1 800">Make room for big projects</h1>
<h2 class="h5">A todo list app that only allows a small number of todos before your week fills up</h2>
<div></div>
<a class="button" href="/user/signup">Sign Up <span class=".65">&mdash; free!</span></a>
</section>
<section class="media background-light-yellow">
<img class="todopal-overview-video clickable-media" data-video-id="yInKfrmp8a4" src="/assets/images/todopal-todos-broken.png">
</section>
<section class="media background-light-yellow desktop">
<img src="/assets/images/todopal-from-busywork-to-focus.png">
</section>
<section class="content background-light-yellow">
<h3 class="h3 800">Find a healthy pace by focusing on the big picture</h1>
<ul>
<li>Think in weeks, not days</li>
<li>Focus on projects, not todos</li>
<li>Healthy limits on your time</li>
</ul>
<div></div>
<a class="button secondary" href="/assets/TodoPal_Guide.pdf" target="_blank">Read the guide</a>
</section>
<section class="media background-light-yellow tablet mobile">
<img src="/assets/images/todopal-from-busywork-to-focus.png">
</section>
<div class="content wide background-light-yellow desktop"></div>
<div class="content background-light-yellow center desktop-shift-contents-left">
<h4 class="h3 800">🦄&nbsp; Benefits</h4>
</div>
<div class="content background-light-yellow center desktop desktop-shift-contents-left">
<h4 class="h3 800">⚡️ Features</h4>
</div>
<section class="background-light-yellow tablet-wide-inner-content-boxes">
<section class="content vertical-top">
<h4 class="h5 700">Prioritize easily</h4>
<p>Know when work will become overwhelming before it actually does</p>
</section>
<section class="content vertical-top desktop-shift-contents-left">
<h4 class="h5 700">Focus long-term</h4>
<p>Plan out milestones a month ahead of time, so you can stay focused</p>
</section>
<section class="content vertical-top">
<h4 class="h5 700">Stay in work-mode</h4>
<p>Use an app that feels more like using a notepad than a full productivity app</p>
</section>
<section class="content vertical-top desktop-shift-contents-left">
<h4 class="h5 700">Stay sane</h4>
<p>Pace yourself and leave extra leeway so you don't burn out</p>
</section>
</section>
<div class="content background-light-yellow center tablet mobile">
<h4 class="h3 800">⚡️ Features</h4>
</div>
<section class="background-light-yellow tablet-wide-inner-content-boxes">
<section class="content vertical-top desktop-shift-contents-right">
<h4 class="h5 700">Low-on-time warning</h4>
<p>Get a warning when your todos run over your healthy limit</p>
</section>
<section class="content vertical-top">
<h4 class="h5 700">Work week-to-week</h4>
<p>See the high-level of all your weekly goals instead of just day-to-day</p>
</section>
<section class="content vertical-top desktop-shift-contents-right">
<h4 class="h5 700">Easy to use</h4>
<p>Marking todos as done or adding a custom time to a todo is easy as pie</p>
</section>
<section class="content vertical-top">
<h4 class="h5 700">Healthy defaults</h4>
<p>We know the pain of feeling behind, so we help you set expectations you can meet</p>
</section>
</section>
<section class="background-light-yellow desktop"></section>
<section class="background-light-yellow desktop-shift-contents-left-to-center">
<section class="media"><img src="/assets/images/profile-photo-green-circle.png"></section>
<section class="content tall vertical-top desktop-shift-contents-left-large">
<h4 class="h5 700">Hi, I'm David!</h4>
<p>I created TodoPal after years of mindlessly checking off todos in other apps.</p>
<p>I started to wonder how I could feel so productive while not getting any real work done.</p>
<p>So I made an app that reminds me that my time is limited and precious.</p>
</section>
</section>
<div class="content wide background-light-yellow center">
<div class="600 .65">Launched in 2 days with <a target="_blank" href="https://remaketheweb.com/">Remake</a> &amp; <a target="_blank" href="https://boxescss.com/">Boxes.css</a>! 🎉</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment