You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
9.2 KiB
HTML
171 lines
9.2 KiB
HTML
<!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>
|
|
</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">
|
|
Number two
|
|
</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">Number two </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 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">
|
|
Number 3
|
|
</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">Number 3 </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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html> |