<!doctype html>
< html class = "text-slate-700" >
< head >
< title > View Project - Kickstarter for Time< / title >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
<!-- Tailwind -->
< script src = "https://cdn.tailwindcss.com?plugins=forms" > < / script >
<!-- Font Awesome -->
< script src = "https://kit.fontawesome.com/2396c18fde.js" crossorigin = "anonymous" > < / script >
< link href = "css/main.css" rel = "stylesheet" >
< / head >
< body >
<!-- QUICK NAV -->
< nav id = "QuickNav" class = "fixed bottom-0 left-0 right-0 bg-slate-200" >
< ul class = "flex text-2xl p-2 gap-2" >
<!-- Home Feed -->
< li class = "basis-1/5 rounded-md text-slate-500" > < a href = "" class = "block text-center py-3 px-1" > < i class = "fa-solid fa-house-chimney fa-fw" > < / i > < / a > < / li >
<!-- Search -->
< li class = "basis-1/5 rounded-md text-slate-500" > < a href = "search.html" class = "block text-center py-3 px-1" > < i class = "fa-solid fa-magnifying-glass fa-fw" > < / i > < / a > < / li >
<!-- Projects -->
< 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-folder-open fa-fw" > < / i > < / a > < / li >
<!-- Commitments -->
< li class = "basis-1/5 rounded-md text-slate-500" > < a href = "" class = "block text-center py-3 px-1" > < i class = "fa-solid fa-hand fa-fw rotate-45" > < / i > < / a > < / li >
<!-- Profile -->
< li class = "basis-1/5 rounded-md text-slate-500" > < a href = "account-view.html" class = "block text-center py-3 px-1" > < i class = "fa-solid fa-circle-user fa-fw" > < / i > < / a > < / li >
< / ul >
< / nav >
<!-- CONTENT -->
< section id = "Content" class = "p-6 pb-24" >
<!-- Breadcrumb -->
< div id = "ViewBreadcrumb" class = "mb-8" >
< h1 class = "text-lg text-center font-light relative px-7" >
<!-- Back -->
< a href = "" class = "text-lg text-center px-2 py-1 absolute -left-2 -top-1" > < i class = "fa-solid fa-chevron-left fa-fw" > < / i > < / a >
<!-- Context Menu -->
< a href = "" class = "text-lg text-center px-2 py-1 absolute -right-2 -top-1" > < i class = "fa-solid fa-ellipsis-vertical fa-fw" > < / i > < / a >
View Project
< / h1 >
< / div >
<!-- Project Details -->
< div class = "bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4" >
<!-- Image -->
< div class = "-mx-4 -mt-3 mb-3" >
< img src = "https://picsum.photos/800/400" class = "w-full" / >
< / div >
< div >
< h2 class = "text-xl font-semibold" > Canyon cleanup< / h2 >
< div class = "flex justify-between gap-4 text-sm mb-3" >
< span > < i class = "fa-solid fa-user fa-fw text-slate-400" > < / i > Rotary< / span >
< span > < i class = "fa-solid fa-calendar fa-fw text-slate-400" > < / i > 8 days ago< / span >
< / div >
< div class = "text-sm text-slate-500" > Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium… < a href = "" class = "uppercase text-xs font-semibold text-slate-700" > Read More< / a > < / div >
< / div >
< / div >
<!-- Commit -->
< a href = "commitment-edit.html" class = "block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8" > Make Commitment< / a >
<!-- Commitments -->
< div class = "bg-slate-100 px-4 py-3 rounded-md" >
< h3 class = "text-sm uppercase font-semibold mb-3" > Commitments< / h3 >
< ul class = "text-sm border-t border-slate-300" >
< li class = "flex justify-between gap-4 py-1.5 border-b border-slate-300" >
< span > [Username]< / span >
< span > 5 hours < i class = "fa-solid fa-spinner fa-fw text-slate-400" > < / i > < / span >
< / li >
< li class = "flex justify-between gap-4 py-1.5 border-b border-slate-300" >
< span > [Username]< / span >
< span > US$ 20.00 < i class = "fa-solid fa-circle-check fa-fw text-lime-500" > < / i > < / span >
< / li >
< li class = "flex justify-between gap-4 py-1.5 border-b border-slate-300" >
< span > [Username]< / span >
< span > 0.1 BTC < i class = "fa-solid fa-spinner fa-fw text-slate-400" > < / i > < / span >
< / li >
< / ul >
< / div >
< / section >
<!-- DISMISSIBLE ALERT -->
< div class = "dismissable-alert bg-slate-100 p-5 rounded drop-shadow-lg absolute top-3 inset-x-3 transition-transform ease-in duration-300" >
< button class = "close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2" > < i class = "fa-solid fa-xmark" > < / i > < / button >
< h4 class = "font-bold pr-5" > Alert Title Goes Here< / h4 >
< p > This is an example alert message.< / p >
< / div >
< script >
var close = document.getElementsByClassName("close-button");
var i;
function dismissElement(targetElement) {
targetElement.style.transform = "translateX(100%)";
setTimeout(function(){ targetElement.style.display = "none"; }, 300);
}
for (i = 0; i < close.length ; i + + ) {
close[i].onclick = function(){
var div = this.parentElement;
dismissElement(div);
}
}
< / script >
< / body >
< / html >
