Started working on text for home page
parent
35e52899dc
commit
b6d5eec718
@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Home</title>
|
||||
<link rel="stylesheet" href="output.css">
|
||||
</head>
|
||||
<body style="margin-left: 192px; margin-right: 192px;">
|
||||
<main class="m-10 h-auto w-auto">
|
||||
|
||||
<?php include 'header.php';?>
|
||||
|
||||
<div class="flex lg:flex-row flex-col w-full mb-24 justify-center items-center">
|
||||
<div class="h-96 lg:w-auto sm:w-full flex flex-col flex-grow">
|
||||
<div class="w-full flex items-center justify-center mb-6 border-8 border-black">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl">Create and share geo-restricted links</h1>
|
||||
</div>
|
||||
<div class="h-72 w-full flex items-center justify-center text-2xl border-8 border-black">
|
||||
<p>
|
||||
GLinkZip enables you to generate and distribute geo-restricted URLs for private, secure access.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<video autoplay>
|
||||
<source src="homepagevideo.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="flex lg:flex-col h-auto flex-col w-full mb-24 border-8 border-black">
|
||||
<div class="w-full justify-center items-center flex border-8 border-black">
|
||||
<p class="text-4xl md:text-5xl lg:text-6xl">
|
||||
How it works
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex lg:flex-row flex-col justify-between items-center h-auto w-auto mx-5 mb-5">
|
||||
<div class="flex flex-col items-center h-full lg:w-1/3 w-full">
|
||||
<img src="step1.png" alt="Picture of link creation" class="bg-black flex-grow m-5 w-full rounded">
|
||||
<p class="text-xl">
|
||||
Step 1
|
||||
</p>
|
||||
<p class="text-xl">
|
||||
Create the GLink. You can either create a regular shortened URL, or a geo-restricted one, in which case you can restrict it to a specific radius around your current location.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center h-full lg:w-1/3 w-full">
|
||||
<img src="" alt="Picture of link distribution" class="bg-black flex-grow m-5 w-full rounded">
|
||||
<p class="text-xl">
|
||||
Step 2
|
||||
</p>
|
||||
<p class="text-xl">
|
||||
Distribute the GLink. If you created a regular link i.e. with no restrictions, then the service works similar to other link shorteners, like TinyURL or Bitly.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center h-full lg:w-1/3 w-full">
|
||||
<img src="" alt="Picture of link access (authorized and unauthorized)" class="bg-black flex-grow m-5 w-full rounded">
|
||||
<p class="text-xl">
|
||||
Step 3
|
||||
</p>
|
||||
<p class="text-xl">
|
||||
If the link is geo-restricted, then anyone who accesses it will have to provide their location co-ordinates for authorization.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full border-8 border-black flex flex-col items-center justify-center">
|
||||
<div class="border-4 border-black w-auto h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap">
|
||||
Why?
|
||||
</div>
|
||||
<div class="border-4 border-black h-auto mt-4 lg:mx-8 max-w-md sm:flex-grow-0 mb-4 ">
|
||||
<p class="text-lg md:text-xl lg:text-2xl">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab delectus dolor, dolorem dolorum et facilis, illum ipsam, natus nobis nulla quam repellat saepe! Aperiam doloremque harum laudantium repellendus tempora!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue