<!doctype html>
< html >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link href = "css/main.css" rel = "stylesheet" >
< title > Manage Landing< / title >
< / head >
< body >
<!-- Navbar -->
<!-- relative because hamburger menu will be absolute. The container of the hamburger therefore must be set to relative -->
<!-- container adds the breakpoints we defined in tailwind.config.js -->
<!-- container unlike bootstrap does not add auto margins add mx - auto -->
<!-- we want padding on all sides p - 6 adds padding all sides with 6 -->
< nav class = "relative container mx-auto p-6" >
<!-- flex container for alignment. Gives flex row by default. Aligning items in the center. Justifing content with between option -->
< div class = "flex items-center justify-between" >
<!-- Logo with padding top 2 -->
< div class = "pt2" >
< img src = "img/logo.svg" alt = "" >
< / div >
<!-- Menu items -->
<!-- flex again for alignment but disappear on sm screens -->
<!-- So on md: flex -->
< div class = "hidden md:flex space-x-6" >
< a class = "hover:text-darkGrayishBlue" href = "#" > Pricing< / a >
< a class = "hover:text-darkGrayishBlue" href = "#" > Product< / a >
< a class = "hover:text-darkGrayishBlue" href = "#" > About Us< / a >
< a class = "hover:text-darkGrayishBlue" href = "#" > Careers< / a >
< a class = "hover:text-darkGrayishBlue" href = "#" > Community< / a >
< / div >
<!-- Button -->
<!-- Hidden on smaller screens but on md(and up) display as block -->
< a href = "#" class = "hidden md:block p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight" > Get Started< / a >
<!-- Hamburger Icon -->
< button id = "menu-btn" class = "block hamburger md:hidden focus:outline-none" >
< span class = "hamburger-top" > < / span >
< span class = "hamburger-middle" > < / span >
< span class = "hamburger-bottom" > < / span >
< / button >
< / div >
<!-- Mobile Menu -->
< div class = "md:hidden" >
<!-- Because it is being placed in the relative div above. -->
< div id = "menu" class = "absolute flex-col items-center self-end hidden py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md" >
< a href = "#" > Pricing< / a >
< a href = "#" > Product< / a >
< a href = "#" > About Us< / a >
< a href = "#" > Careers< / a >
< a href = "#" > Community< / a >
< / div >
< / div >
< / nav >
<!-- End Navbar -->
<!-- Hero Section -->
<!-- In Large + Med screens needs to be a flex box row, but on small screens we want it stacked as columns -->
<!-- End Hero Section -->
< section id = "hero" >
<!-- Flex Container -->
<!-- Since we do mobile first it is set as flex - col - reverse to begin with (since we want the right most item placed on top). -->
< div class = "container flex flex-col-reverse md:flex-row items-center px-6 mx-auto mt-10 space-y-0 md:space-y-0" >
<!-- ITEM 1 -->
<!-- Also a flexbox container painted as a column for h1,p,button -->
<!-- On medium screens and up we want it to be half width -->
< div class = "flex flex-col mb-32 space-y-12 md:w-1/2" >
< h1 class = "max-w-md text-4xl font-bold text-center md:text-5xl md:text-left" > Bring everyone together to build better products< / h1 >
< p class = "max-w-sm text-center text-darkGrayishBlue md:text-left" > Manage makes it simple for teams to plan day-to-day tasks while keeping the larger team goals in view.< / p >
<!-- button should be in the center on mobile and start for md and up -->
< div class = "flex justify-center md:justify-start" >
< a href = "#" class = "p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight" > Get Started< / a >
< / div >
< / div >
<!-- ITEM 2 -->
<!-- Once again only take up half the available width of the container -->
< div class = "md:w-1/2" >
< img src = "img/illustration-intro.svg" alt = "" >
< / div >
< / div >
< / section >
<!-- Features -->
<!-- End Features -->
< section id = "features" >
<!-- Flex container -->
< div class = "container flex flex-col md:flex-row px-4 mx-auto mt-10 space-y-12 md:space-y-0" >
<!-- What's Different -->
< div class = "flex flex-col items-center space-y-12 md:w-1/2" >
< h2 class = "max-w-md text-4xl font-bold text-center md:text-left" > What's different about Manage?< / h2 >
< p class = "max-w-sm text-center text-darkGrayishBlue md:text-left" >
Manage provides all the functionality your team needs, without the complexity.
Our software is tailor-made for modern digital product teams.
< / p >
< / div >
<!-- Numbered List -->
<!-- This we want painted as a column -->
< div class = "flex flex-col space-y-8 md:w-1/2" >
<!-- List items -->
<!-- This is the container for L1 on mobile it appears stacked on md and about it has a row appearance. -->
< div class = "flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row" >
<!-- heading -->
<!-- On medium screens we want the background transparent. -->
< div class = "rounded-full bg-brightRedSupLight md:bg-transparent" >
< div class = "flex items-center space-x-2" >
<!-- The number icon "button thing" -->
< div class = "px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed" > 01< / div >
<!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
< h3 class = "text-base font-bold md:mb-4 md:hidden" >
Track company-wide progress
< / h3 >
< / div >
< / div >
< div class = "" >
<!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
<!-- md:block shows it on larger screens -->
< h3 class = "hidden text-lg font-bold md:block" > Track company-wide progress < / h3 >
< p class = "text-darkGrayishBlue" >
See how your day-to-day tasks fit into the wider
vision. Go from
tracking progress at the milestone level to all the way
done to the
smallest of details. Never lose sight of the bigger
picture
again.
< / p >
< / div >
< / div >
<!-- List Item 2 -->
< div class = "flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row" >
<!-- heading -->
<!-- On medium screens we want the background transparent. -->
< div class = "rounded-full bg-brightRedSupLight md:bg-transparent" >
< div class = "flex items-center space-x-2" >
<!-- The number icon "button thing" -->
< div class = "px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed" > 02< / div >
<!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
< h3 class = "text-base font-bold md:mb-4 md:hidden" >
Advanced Builtin Reports
< / h3 >
< / div >
< / div >
< div >
<!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
<!-- md:block shows it on larger screens -->
< h3 class = "hidden text-lg font-bold md:block" > Advanced Builtin Reports< / h3 >
< p class = "text-darkGrayishBlue" >
Set internal delivery estimates and track progress toward company goals.
Our customisable helps you build out the reports you need to keep stakeholders
informed.
< / p >
< / div >
< / div >
<!-- List Item 3 -->
< div class = "flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row" >
<!-- heading -->
<!-- On medium screens we want the background transparent. -->
< div class = "rounded-full bg-brightRedSupLight md:bg-transparent" >
< div class = "flex items-center space-x-2" >
<!-- The number icon "button thing" -->
< div class = "px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed" > 03< / div >
<!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
< h3 class = "text-base font-bold md:mb-4 md:hidden" >
Everything you need in one place
< / h3 >
< / div >
< / div >
< div class = "" >
<!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
<!-- md:block shows it on larger screens -->
< h3 class = "hidden text-lg font-bold md:block" > Everything you need in one place< / h3 >
< p class = "text-darkGrayishBlue" >
Stop jumping from one service to another to communicate, store files, track tasks,
and share documents. Manage offers an all-in-one team productivity tool.
< / p >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- Testimonials -->
< section id = "testimonials" >
<!-- Container for heading and testimonial cards -->
<!-- Notice we only show one card on mobile because they would overlap each other. -->
<!-- Or you could add some margin but will will just hide the other two -->
< div class = "max-w-6xl px-5 mx-auto mt-32 text-center" >
<!-- Heading -->
< h2 class = "text-4xl font-bold text-center" >
What are people saying about Manage?
< / h2 >
<!-- Testimonial Container -->
< div class = "flex flex-col mt-24 md:flex-row md:space-x-6" >
<!-- Testimonial One -->
< div class = "flex shadow-lg flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3" >
<!-- NOTICE the use of a negative margin that places the picture of the user at the top of the card -->
< img src = "img/avatar-anisha.png" class = "w-28 -mt-20" alt = "" >
< h5 class = "text-lg font-bold" > Anisha Li < / h5 >
< p class = "text-sm text-darkGrayishBlue" >
"Manage has supercharged our team's workflow. The ability to
maintain visibility on larger milestones at all times keeps
everyone motivated"
< / p >
< / div >
<!-- Testimonial Two -->
<!-- The md:flex is what overrides it from being hidden -->
< div class = "hidden md:flex shadow-lg flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3" >
< img src = "img/avatar-ali.png" class = "w-28 -mt-20" alt = "" >
< h5 class = "text-lg font-bold" > Ali Bravo< / h5 >
< p class = "text-sm text-darkGrayishBlue" >
"We have been able to cancel so many other subscriptions since using Manage.
There is no more cross-channel confusion and everyone is much more focused."
< / p >
< / div >
<!-- Testimonial 3 -->
< div class = "hidden md:flex shadow-lg flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3" >
<!-- NOTICE the use of a negative margin that places the picture of the user at the top of the card -->
< img src = "img/avatar-richard.png" class = "w-28 -mt-20" alt = "" >
< h5 class = "text-lg font-bold" > Richard Watts< / h5 >
< p class = "text-sm text-darkGrayishBlue" >
"Manage has supercharged our team's workflow. The ability to
maintain visibility on larger milestones at all times keeps
everyone motivated"
< / p >
< / div >
< / div >
<!-- End Testimonial Container -->
<!-- Button -->
< div class = "my-16" > < a href = "#" class = "p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight" > Get Started< / a > < / div >
< / div >
< / section >
<!-- CTA Section -->
< section id = "cta" class = "bg-brightRed" >
< div class = "container flex flex-col items-center justify-between px-6 py-24 mx-auto space-y-12 md:py-12 md:flex-row md:space-y-0" >
< h2 class = "text-5xl font-bold leading-tight text-center text-white md:text-4xl max-w-xl md:text-left" > Simplify how your team works today.< / h2 >
< div >
<!-- Messing with shadow. -->
< a href = "#" class = "p-3 px-6 pt-2 text-brightRed bg-white rounded-full align-baseline hover:bg-gray-300" > Get Started< / a >
< / div >
< / div >
< / section >
<!-- Footer -->
< footer class = "bg-veryDarkBlue" >
<!-- Flex Contianer -->
< div class = "container flex flex-col-reverse justify-between px-6 py-6 mx-auto space-y-8 md:flex-row md:space-y-0" >
<!-- Logo and Social container -->
< div class = "flex flex-col-reverse items-center justify-between space-y-12 md:flex-col md:space-y-0 md:items-start" >
<!-- Logo -->
< div class = "mx-auto my-6 text-center text-white md:hidden" >
Copyright © 2022, All Rights Reserved
< / div >
< div >
< img src = "img/logo-white.svg" alt = "" class = "h-8" >
< / div >
<!-- social -->
< div class = "flex justify-center space-x-4" >
< a href = "#" > < img src = "img/icon-facebook.svg" alt = "" class = "h-8" > < / a >
< a href = "#" > < img src = "img/icon-youtube.svg" alt = "" class = "h-8" > < / a >
< a href = "#" > < img src = "img/icon-twitter.svg" alt = "" class = "h-8" > < / a >
< a href = "#" > < img src = "img/icon-pinterest.svg" alt = "" class = "h-8" > < / a >
< a href = "#" > < img src = "img/icon-instagram.svg" alt = "" class = "h-8" > < / a >
< / div >
< / div >
<!-- List Container -->
< div class = "flex justify-around space-x-32" >
<!-- Menu 1 -->
< div class = "flex flex-col space-y-3 text-white" >
< a href = "#" class = "hover:text-brightRed" > Home< / a >
< a href = "#" class = "hover:text-brightRed" > Pricing< / a >
< a href = "#" class = "hover:text-brightRed" > Products< / a >
< a href = "#" class = "hover:text-brightRed" > About< / a >
< / div >
<!-- Menu 2 -->
< div class = "flex flex-col space-y-3 text-white" >
< a href = "#" class = "hover:text-brightRed" > Careers< / a >
< a href = "#" class = "hover:text-brightRed" > Community< / a >
< a href = "#" class = "hover:text-brightRed" > Privary Policy< / a >
< / div >
< / div >
<!-- Input Container -->
< div class = "flex flex-col justify-between" >
< form >
< div class = "flex space-x-3" >
< input type = "text" class = "flex-1 px-4 rounded-full focus:outline-none" placeholder = "Updates in your inbox" >
< button class = "px-6 py-2 text-white rounded-full bg-brightRed hover:bg-brightRedLight focus:outline-none" > Go< / button >
< / div >
< / form >
< div class = "hidden text-white md:block" >
Copyright © 2022, All Rights Reserved
< / div >
< / div >
< / div >
< / footer >
< / body >
< script src = "js/script.js" > < / script >
< / html >
