trent_larson
/
kickstarter-for-time
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Bring homepage up to date

master
Jose Olarte III 3 weeks ago
parent
f73a71f475
commit
3744474c74
1 changed files with 25 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      home.html

74
home.html
View File

@ -17,7 +17,7 @@
<body> <body>
<!-- QUICK NAV --> <!-- QUICK NAV -->
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50"> <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
<ul class="flex text-2xl p-2 gap-2"> <ul class="flex text-2xl p-2 gap-2 max-w-3xl mx-auto">
<!-- Home Feed --> <!-- Home Feed -->
<li class="basis-1/5 rounded-md bg-slate-400 text-white"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-house-chimney fa-fw"></i></a></li> <li class="basis-1/5 rounded-md bg-slate-400 text-white"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-house-chimney fa-fw"></i></a></li>
<!-- Search --> <!-- Search -->
@ -32,123 +32,99 @@
</nav> </nav>
<!-- CONTENT --> <!-- CONTENT -->
<section id="Content" class="p-6 pb-24"> <section id="Content" class="px-4 pt-6 pb-24 max-w-3xl mx-auto">
<!-- Heading --> <!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Time Safari</h1> <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Time Safari</h1>
<div class="mb-8"> <div class="mb-8">
<h2 class="text-xl font-bold">Quick Action</h2> <div class="flex justify-between items-center">
<p class="mb-4">Show appreciation to a contact:</p> <h2 class="text-xl font-bold">Record Something Given By:</h2>
<button class="block text-center ml-auto text-sm text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md">Ideas...</button>
</div>
<ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5"> <ul class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5 mt-4">
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-question-circle fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">Anonymous</h3> <h3 class="text-xs font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">Unnamed/Unknown</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Dave Grohl</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Dave Grohl</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Taylor hawkins</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Taylor hawkins</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Chris Shiflett</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Chris Shiflett</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Kurt Cobain</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Kurt Cobain</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Krist Novoselic</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Krist Novoselic</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Chad Channing</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Chad Channing</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Lori Goldston</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Lori Goldston</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Franz Stahl</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Franz Stahl</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Nate Mendel</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Nate Mendel</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Rami Jaffee</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Rami Jaffee</h3>
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="">
<div class="mb-1"><i class="fa-solid fa-user fa-fw fa-xl text-slate-400"></i></div> <img src="https://placehold.co/480?text=(Image)" class="max-w-16 mx-auto border border-slate-300 rounded-md mb-1">
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Josh Freese</h3> <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">Josh Freese</h3>
</a> </a>
</li> </li>
</ul> </ul>
<!-- ul class="border-t border-slate-300 mb-4"> <!-- a href="contact-list-give.html" class="block text-center text-md font-bold uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md">Show More Contacts&hellip;</a -->
<li class="border-b border-slate-300 py-3">
<h2 class="text-base flex gap-4 items-center">
<span class="grow font-semibold"><i class="fa-solid fa-user fa-fw text-slate-400"></i> User One</span>
<span class="text-right">
<button type="button" class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"><i class="fa-solid fa-gift fa-fw"></i></button>
</span>
</h2>
</li>
<li class="border-b border-slate-300 py-3">
<h2 class="text-base flex gap-4 items-center">
<span class="grow font-semibold"><i class="fa-solid fa-user fa-fw text-slate-400"></i> User Two</span>
<span class="text-right">
<button type="button" class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"><i class="fa-solid fa-gift fa-fw"></i></button>
</span>
</h2>
</li>
<li class="border-b border-slate-300 py-3">
<h2 class="text-base flex gap-4 items-center">
<span class="grow font-semibold"><i class="fa-solid fa-user fa-fw text-slate-400"></i> User Three</span>
<span class="text-right">
<button type="button" class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"><i class="fa-solid fa-gift fa-fw"></i></button>
</span>
</h2>
</li>
</ul -->
<a href="contact-list-give.html" class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md">Show More Contacts&hellip;</a>
</div> </div>
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
<h2 class="text-xl font-bold mb-4">Latest Activity</h2> <div class="flex items-center mb-4">
<h2 class="text-xl font-bold">Latest Activity</h2>
<button class="block text-center ml-auto text-sm text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md">Unfiltered</button>
</div>
<ul class="border-t border-slate-300"> <ul class="border-t border-slate-300">
<li class="border-b border-slate-300 py-2"> <li class="border-b border-slate-300 py-2">

Write Preview
Loading…
Cancel
Save