Untitled
unknown
html
4 years ago
22 kB
16
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="misc.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice three</title>
</head>
<body>
<div class="hero relative"> <!--Hero-->
<img src="./assets/herobg.svg" alt="" class="absolute right-0 opacity-10 h-screen">
<img src="./assets/p2.svg" alt="" class="absolute left-0 top-0">
<!--navbar desktop-->
<div class="navbar hidden md:flex md:flex-row flex-col justify-between conatiner md:mx-12 mx-4 p-2 md:p-6">
<div class="cursor-pointer flex">
<button class="cursor-pointer"><img src="./assets/nav.svg" alt="" class="md:hidden px-4 cursor-pointer" ></button>
<img src="./assets/logo.svg" alt="" >
</div>
<div class="navblock md:flex md:flex-row justify-between font-normal text-base ">
<div class="px-2 py-2"><a href="#">Our Platform</a></div>
<div class="px-2 py-2"><a href="#">Pricing</a></div>
</div>
<div class="navblock md:flex md:flex-row justify-between font-normal text-base ">
<div class="px-2 py-2"><a href="#">Talk to sales</a></div>
<div class="px-2 py-2"><a href="#">Login</a></div>
<div class="px-2 py-2 border-2 border-blue-400 rounded-lg text-blue-400" ><a href="#">Sign Up</a></div>
</div>
</div>
<!--navbar mobile-->
<div class="md:hidden">
<div class="head flex justify-between p-2" >
<div class=" flex content-center" >
<button id="navbtn">
<img src="./assets/nav.svg" alt="" class="">
</button>
</div>
<div class=" flex content-center">
<img src="./assets/logo.svg" alt="" class="w-48">
</div>
<div class=" flex content-center">
<div class="px-2 py-2 border-2 border-blue-400 rounded-lg text-blue-400" ><a href="#">Sign Up</a></div>
</div>
</div>
<div class="body px-4 text-base hidden" id="body">
<ul class="space-y-4">
<li>
Our Platform
</li>
<li>
Pricing
</li>
<li>
Talk to sales
</li>
<li>
Login
</li>
</ul>
</div>
</div>
<div class="conatiner md:px-12 px-4 py-12">
<img src="./assets/dollar.svg" alt="" class="my-6 hidden md:flex">
<h2 class="text-4xl font-bold mt-4">Pricing Information</h2>
<h5 class="text-2xl mt-4 font-medium">How it works</h5>
<div class=" md:text-lg text-base mt-2 font-normal text-left">
The price is per home built and we will space platform per user until the warranty home period expires. For example if it takes you 10 months to build a brand new home and you offer a 3-year warranty: you and your Customer will have access to the system for 4 years. One year for the construction of the home plus three years for the warranty period.
</div>
</div>
</div>
<div> <!--volume discount-->
<div class="container w-full">
<div class="box w-max mx-auto">
<h3 class="font-medium text-3xl text-center">VOLUME DISCOUNTS</h3>
<div class="div text-base flex flex-row border-2 border-gray my-4 rounded-full">
<div class="div font-bold hover:bg-blue-600 hover:shadow-xl hover:text-white px-4 py-2 rounded-full cursor-pointer focus:bg-red-200">
< 25
</div>
<div class="div font-bold hover:bg-blue-600 hover:shadow-xl hover:text-white px-4 py-2 rounded-full cursor-pointer">
26 - 100
</div>
<div class="div font-bold hover:bg-blue-600 hover:shadow-xl hover:text-white px-4 py-2 rounded-full cursor-pointer">
101 - 250
</div>
<div class="div font-bold hover:bg-blue-600 hover:shadow-xl hover:text-white px-4 py-2 rounded-full cursor-pointer">
251 +
</div>
</div>
<h3 class="text-center text-xl font-normal">Home Built Per Year</h3>
</div>
<div>
<div class="container w-full md:flex md:flex-row flex-col justify-center my-12 px-6">
<div class="group hover:bg-blue-400 hover:shadow-2xl hover:text-white md:w-72 w-full p-2 m-2 rounded-3xl border-2 border-gray">
<div class="my-4 mx-2">
<div>
<div class="bg-yellow-100 group-hover:bg-blue-600 my-4 md:w-min w-full rounded-3xl p-1" >
<p class="px-1.5 font-bold text-yellow-700 group-hover:text-white">Proffessional</p>
</div>
</div>
<span class="text-4xl font-black text-blue-900 group-hover:text-white">$299</span> <span class="font-medium font-xs text-gray-600 group-hover:text-white">/home</span> <br>
<div class="font-medium font-base">Unlimited users</div>
<div class="text-sm font-bold mt-4">
<span class="group-hover:text-white text-blue-600 text-base ">Features & <br> Integrations</span>
<ul class="text-sm mt-8">
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full"> Consruction Gantt Chart</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Texting Capabilities</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Files & Photo Sharing</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Calender & Meeting Scheduling</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Task Management</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Branded App</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">DocuSign</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Excel
<li class="flex leading-lose mb-2"> <img src="./assets/cross.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Procore Integration</li>
</li>
</ul>
</div>
<div class="w-full flex justify-center my-4">
<button class="w-64 group-hover:bg-white group-hover:text-blue-600 rounded-lg text-center p-2 mx-auto bg-blue-100 font-black text-base text-blue-600" >
Sign Up
</button>
</div>
</div>
</div>
<div class="group hover:bg-blue-400 hover:shadow-2xl hover:text-white md:w-72 w-full p-2 m-2 rounded-3xl border-2 border-gray">
<div class="my-4 mx-2">
<div>
<div class="bg-yellow-100 group-hover:bg-blue-600 my-4 md:w-min w-full rounded-3xl p-1" >
<p class="px-1.5 font-bold text-yellow-700 group-hover:text-white">Premium</p>
</div>
</div>
<span class="text-4xl font-black text-blue-900 group-hover:text-white">$399</span> <span class="font-medium font-xs text-gray-600 group-hover:text-white">/home</span> <br>
<div class="font-medium font-base">Unlimited users</div>
<div class="text-sm font-bold mt-4">
<span class="group-hover:text-white text-blue-600 text-base ">Features & <br> Integrations</span>
<ul class="text-sm mt-8">
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full"> Consruction Gantt Chart</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Texting Capabilities</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Files & Photo Sharing</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Calender & Meeting Scheduling</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Task Management</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Branded App</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">DocuSign</li>
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Excel
<li class="flex leading-lose mb-2"> <img src="./assets/Path.svg" alt="" class="mr-2 p-1.5 bg-blue-100 group-hover:bg-white rounded-full">Procore Integration</li>
</li>
</ul>
</div>
<div class="w-full flex justify-center my-4">
<button class="w-64 group-hover:bg-white group-hover:text-blue-600 rounded-lg text-center p-2 mx-auto bg-blue-100 font-black text-base text-blue-600" >
Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div> <!--Newsletter-->
<div class="conatiner flex md:flex-row flex-col py-12">
<div class="md:w-1/2 w-full">
<div class="m-2 md:ml-12 p-2">
<div>
<h3 class="text-blue-400 text-xl md:text-left text-center ">Work on Commercial Projects?</h3> <br>
<h3 class="md:text-4xl text-2xl md:text-left text-center font-medium mt-4">Call or Email Us For Pricing <br> 1-844-814-4627</h3>
</div>
</div>
</div>
<div class="md:w-1/2 w-full">
<div class="w-full ">
<div class="border-2 border-blue-400 flex md:w-max w-min rounded-md md:p-2 p-2 mx-auto mt-10">
<input type="email" name="email" id="email" class="border-0 outline-none p-2" placeholder="Eg. siggy@space.com">
<button class="bg-blue-400 md:p-4 p-2 text-white font-medium rounded-md hover:bg-blue-600">Pricing information</button>
</div>
</div>
</div>
</div>
</div>
<div class="pt-10 bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-t-2xl"> <!--footer-->
<div class="container md:flex justify-between px-8 hidden"> <!--footer for desktop-->
<div class="mx-1">
<ul>
<li class="font-bold text-xl pb-4">
Why Nextport ?
</li>
<li class="text-sm pb-4">
Our Innovative Solution
</li>
<li class="text-sm pb-4">
Improve Customer <br> Experience
</li>
<li class="text-sm pb-4">
Enhance Productivity
</li>
</ul>
</div>
<div class="mx-1">
<ul>
<li class="font-bold text-xl pb-4">
Product
</li>
<li class="text-sm pb-4">
Features
</li>
</ul>
</div>
<div class="mx-1">
<ul>
<li class="font-bold text-xl pb-4">
Pricing
</li>
<li class="text-sm pb-4">
Plan
</li>
<li class="text-sm pb-4">
14 day free trial
</li>
</ul>
</div>
<div class="mx-1">
<ul>
<li class="font-bold text-xl pb-4">
Resources
</li>
<li class="text-sm pb-4">
Download App
</li>
<li class="text-sm pb-4">
Sales support
</li>
<li class="text-sm pb-4">
Integration & <br>
Partnership
</li>
</ul>
</div>
<div class="mx-1">
<ul>
<li class="font-bold text-xl pb-4">
Company
</li>
<li class="text-sm pb-4">
About us
</li>
</ul>
</div>
<div class="mx-1">
<div>
<h3 class="font-bold text-4xl mb-6">Try it for 14 days</h3>
<p class="text-lg font-bold">Email</p>
<div class="p-2 bg-white rounded-md">
<input type="email" name="email" id="email" class="p-2 border-0 outline-none text-black">
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-md text-white">Sign up</button>
</div>
<p>No credit card needed</p>
</div>
</div>
</div>
<div class="flex flex-col md:hidden"> <!--footer mobile-->
<div class="px-2">
<h3 class="font-bold text-2xl mb-6">Try it for 14 days</h3>
<p class="text-base font-bold">Email</p>
<div class="p-2 my-2 bg-white rounded-md">
<input type="email" name="email" id="email" class="p-2 border-0 outline-none text-black">
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-md text-white">Sign up</button>
</div>
<p class="text-sm">No credit card needed</p>
</div>
<div class="px-4 pt-8">
<div class="divide-y divide-white">
<button class="accordion border-b-2 border-white bg-gradient-to-r from-blue-600 to-blue-400 text-lg font-bold">Why NextPort ?</button>
<div class="panel">
<ul>
<li class="text-sm pb-4">
Our Innovative Solution
</li>
<li class="text-sm pb-4">
Improve Customer <br> Experience
</li>
<li class="text-sm pb-4">
Enhance Productivity
</li>
</ul>
</div>
<button class="accordion bg-gradient-to-r from-blue-600 to-blue-400 text-lg font-bold">Product</button>
<div class="panel">
<ul>
<li class="text-sm pb-4">
Features
</li>
</ul>
</div>
<button class="accordion bg-gradient-to-r from-blue-600 to-blue-400 text-lg font-bold">Pricing</button>
<div class="panel">
<ul>
<li class="text-sm pb-4">
Plan
</li>
<li class="text-sm pb-4">
14 day free trial
</li>
</ul>
</div>
<button class="accordion bg-gradient-to-r from-blue-600 to-blue-400 text-lg font-bold">Resources</button>
<div class="panel">
<ul>
<li class="text-sm pb-4">
Download App
</li>
<li class="text-sm pb-4">
Sales support
</li>
<li class="text-sm pb-4">
Integration & <br>
Partnership
</li>
</ul>
</div>
<button class="accordion bg-gradient-to-r from-blue-600 to-blue-400 text-lg font-bold">Company</button>
<div class="panel">
<ul>
<li class="text-sm pb-4">
About us
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container px-8 mt-12 mb-8">
<div>
<h3 class="text-lg">Follow us</h3>
<div class="flex mt-4">
<div class="text-blue-500 bg-white flex justify-center hover:opacity-100 p-1 rounded-full opacity-40 cursor-pointer w-6 h-6 mx-2">
<i class="fab fa-facebook-f "></i>
</div>
<div class="text-blue-500 bg-white flex justify-center hover:opacity-100 p-1 rounded-full opacity-40 cursor-pointer w-6 h-6 mx-2">
<i class="fab fa-linkedin "></i>
</div>
<div class="text-blue-500 bg-white flex justify-center hover:opacity-100 p-1 rounded-full opacity-40 cursor-pointer w-6 h-6 mx-2">
<i class="fab fa-twitter "></i>
</div>
<div class="text-blue-500 bg-white flex justify-center hover:opacity-100 p-1 rounded-full opacity-40 cursor-pointer w-6 h-6 mx-2">
<i class="fab fa-instagram "></i>
</div>
</div>
</div>
</div>
<hr class="mx-8">
<div class="container px-8 mt-2 pb-2">
<div class="md:flex md:flex-row flex-col justify-between">
<div class="md:flex md:flex-row justify-between w-max">
<div class="mx-4">
<p>Privacy Policy</p>
</div>
<div class="mx-4">
<p>Terms and condition</p>
</div>
<div class="mx-4">
<p>Support</p>
</div>
</div>
<div>
Copyright © 2021 NextPort. All rights reserved.
</div>
</div>
</div>
</div>
<script src="./script.js" type="text/javascript"></script>
<script>
document.getElementById("navbtn").addEventListener("click", displayDate);
function displayDate() {
console.log(Date());
}
</script>
</body>
</html>Editor is loading...