<!DOCTYPE html>
< html id = "html-tag" lang = "en" class = "py-[0%] my-[0%]" > <!-- html - tag facilitates dark mode and light mode -->
< head class = "py-0 my-0 h-0" >
< meta charset = "UTF-8" / >
< title > Home< / title >
< link rel = "stylesheet" href = "css/output.css" >
< / head >
< body class = "w-full my-[0%] py-[0%] px-[10%] h-full bg-gray-300 dark:bg-black" >
< main class = "h-auto w-auto py-[5%]" >
<!-- previous navbar start -->
< div class = "hidden" >
<!-- <nav class="flex items - center opacity - 100 lg:justify - between sm:justify - center flex - wrap bg - gray - 500 dark:bg - gray - 500 p - 6 shadow - lg shadow - black/50 sticky top - 4 opacity - 100 mb - 24"> <!–dark:bg - black–> -->
<!-- <div class="block lg:hidden cursor - pointer flex:none mr - 4" id="HamburgerInactive"> -->
<!-- <button id="btn" class="flex flex - col items - center px - 3 py - [0.4375rem] border rounded text - teal - 200 border - teal - 400"> -->
<!-- <span class="block h - 0.5 w - 5 mb - 1 origin - center rounded - full bg - teal - 200"></span> -->
<!-- <span class="block h - 0.5 w - 5 mb - 1 origin - center rounded - full bg - teal - 200"></span> -->
<!-- <span class="block h - 0.5 w - 5 origin - center rounded - full bg - teal - 200"></span> -->
<!-- </button> -->
<!-- </div> -->
<!-- <div id="HamburgerActive" class="hidden lg:hidden flex:none cursor - pointer mr - 4 block"> -->
<!-- <button class="space - y - 2 px - 3 py - 2 border rounded text - teal - 200 border - teal - 400" > -->
<!-- <span class="block h - 0.5 w - 5 origin - center rounded - full bg - teal - 200 translate - y - 1.5 rotate - 45"></span> -->
<!-- <span class="block h - 0.5 w - 5 origin - center rounded - full bg - teal - 200 - translate - y - 1 - rotate - 45"></span> -->
<!-- <span class="hidden h - 0.5 w - 5 origin - center rounded - full bg - white"></span> -->
<!-- </button> -->
<!-- </div> -->
<!-- <div class="flex items - center flex - shrink - 0 text - white mr - 6 w - full lg:w - auto flex - 1 lg:flex - none justify - center"> -->
<!-- <svg id="logo" class="fill - current h - 8 w - 8 mr - 2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8 - 7.2 6.3 - 10.8 13.5 - 10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75 - .45 9.45 - 4.05 - 1.8 7.2 - 6.3 10.8 - 13.5 10.8 - 10.8 0 - 12.15 - 8.1 - 17.55 - 9.45 - 3.6 - .9 - 6.75.45 - 9.45 4.05zM0 38.3c1.8 - 7.2 6.3 - 10.8 13.5 - 10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75 - .45 9.45 - 4.05 - 1.8 7.2 - 6.3 10.8 - 13.5 10.8 - 10.8 0 - 12.15 - 8.1 - 17.55 - 9.45 - 3.6 - .9 - 6.75.45 - 9.45 4.05z"/></svg> -->
<!-- <span class="font - semibold text - xl tracking - tight">G - Link</span> -->
<!-- </div> -->
<!-- <div id="menu - options" class="bg - gray - 500 w - full lg:block flex - grow lg:flex lg:items - center lg:w - auto hidden mr - 4"> -->
<!-- <div class="text - sm lg:flex - grow lg:flex"> -->
<!-- <a class="block mt - 4 lg:inline - block lg:mt - 0 text - teal - 200 hover:text - black mr - 4 hover:bg - gray - 200 hover:border hover:border - gray - 200 hover:rounded text - teal - 200 py - 1 px - 3"> -->
<!-- A -->
<!-- </a> -->
<!-- <a class="block mt - 4 lg:inline - block lg:mt - 0 text - teal - 200 hover:text - black mr - 4 hover:bg - gray - 200 hover:border hover:border - gray - 200 hover:rounded text - teal - 200 py - 1 px - 3"> -->
<!-- B -->
<!-- </a> -->
<!-- <a class="block mt - 4 lg:inline - block lg:mt - 0 text - teal - 200 hover:text - black mr - 4 hover:bg - gray - 200 hover:border hover:border - gray - 200 hover:rounded text - teal - 200 py - 1 px - 3"> -->
<!-- C -->
<!-- </a> -->
<!-- <a href="/" class="block mt - 4 lg:inline - block lg:mt - 0 bg - blue - 600 brightness - 125 border border - blue - 500 rounded text - teal - 200 hover:text - black py - 1 px - 3"> -->
<!-- Products (Form) -->
<!-- </a> -->
<!-- </div> -->
<!-- <div> -->
<!-- <a href="signup.html" class="inline - block <%= signup %> text - sm px - 4 py - 2 leading - none border rounded text - white border - white hover:border - transparent hover:text - teal - 500 hover:bg - white mt - 4 lg:mt - 0 mr - 4"> -->
<!-- signup -->
<!-- </a> -->
<!-- </div> -->
<!-- <div> -->
<!-- <a href="<%= loc %>" class="inline - block text - sm px - 4 py - 2 leading - none border rounded text - white border - white hover:border - transparent hover:text - teal - 500 hover:bg - white mt - 4 lg:mt - 0"> -->
<!-- <%= tagline %> -->
<!-- </a> -->
<!-- </div> -->
<!-- </div> -->
<!-- <!– <div class="w - 9 h - 9 rounded - full bg - emerald - 800 cursor - pointer outline outline - offset - 2 outline - 4 outline - white hover:bg - emerald - 700">–> -->
<!-- <!– <button class="w - full h - full bg - white rounded - full" id="dropdownDefaultButton" data - dropdown - toggle="dropdown"></button>–> -->
<!-- <!– </div>–> -->
<!-- <!– <div class="group relative cursor - pointer py - 2">–> -->
<!-- <!– <div class="w - 44 flex items - center justify - between space - x - 5 bg - white px - 4 bg - gradient - to - tl from - purple - 700 to - pink - 500 rounded - lg group group - hover:from - purple - 500 group - hover:to - pink - 500">–> -->
<!-- <!– <a class="menu - hover my - 2 py - 2 text - base font - medium text - white lg:mx - 4 font - bold uppercase group - hover:scale - 105 transition - transform" onClick="">–> -->
<!-- <!– Profile–> -->
<!-- <!– </a>–> -->
<!-- <!– <span class="group - hover:hidden">–> -->
<!-- <!– <svg–> -->
<!-- <!– fill="none"–> -->
<!-- <!– viewBox="0 0 24 24"–> -->
<!-- <!– stroke - width="1.5"–> -->
<!-- <!– stroke="white"–> -->
<!-- <!– class="h - 6 w - 6"–> -->
<!-- <!– >–> -->
<!-- <!– <path–> -->
<!-- <!– stroke - linecap="round"–> -->
<!-- <!– stroke - linejoin="round"–> -->
<!-- <!– d="M19.5 8.25l - 7.5 7.5l - 7.5 - 7.5"–> -->
<!-- <!– />–> -->
<!-- <!– </svg>–> -->
<!-- <!– </span>–> -->
<!-- <!– <span class="invisible group - hover:visible">–> -->
<!-- <!– <svg–> -->
<!-- <!– fill="none"–> -->
<!-- <!– viewBox="0 0 24 24"–> -->
<!-- <!– stroke - width="1.5"–> -->
<!-- <!– stroke="white"–> -->
<!-- <!– class="h - 6 w - 6"–> -->
<!-- <!– >–> -->
<!-- <!– <path–> -->
<!-- <!– stroke - linecap="round"–> -->
<!-- <!– stroke - linejoin="round"–> -->
<!-- <!– d="M19.5 15.25l - 7.5 - 7.5l - 7.5 7.5"–> -->
<!-- <!– />–> -->
<!-- <!– </svg>–> -->
<!-- <!– </span>–> -->
<!-- <!– </div>–> -->
<!-- <!– <div–> -->
<!-- <!– class="invisible absolute z - 50 flex w - full flex - col bg - gray - 100 py - 1 px - 4 divide - y - 1 divide - gray - 300 text - gray - 800 shadow - xl group - hover:visible"–> -->
<!-- <!– onClick=""–> -->
<!-- <!– >–> -->
<!-- <!– <a–> -->
<!-- <!– class="my - 2 block border - b border - gray - 100 py - 1 font - semibold text - gray - 500 hover:text - black md:mx - 2"–> -->
<!-- <!– >A</a–> -->
<!-- <!– >–> -->
<!-- <!– <a–> -->
<!-- <!– class="my - 2 block border - b border - gray - 100 py - 1 font - semibold text - gray - 500 hover:text - black md:mx - 2"–> -->
<!-- <!– >B</a–> -->
<!-- <!– >–> -->
<!-- <!– <a–> -->
<!-- <!– class="my - 2 block border - b border - gray - 100 py - 1 font - semibold text - gray - 500 hover:text - black md:mx - 2"–> -->
<!-- <!– >C</a>–> -->
<!-- <!– <a–> -->
<!-- <!– class="my - 2 block border - b border - gray - 100 py - 1 font - semibold text - gray - 500 hover:text - black md:mx - 2"–> -->
<!-- <!– >D</a>–> -->
<!-- <!– </div>–> -->
<!-- <!– </div>–> -->
<!-- <script> -->
<!-- let active = document.getElementById("HamburgerActive"); -->
<!-- let inactive = document.getElementById("HamburgerInactive"); -->
<!-- let options = document.querySelector("#menu - options"); -->
<!-- active.addEventListener("click", ()=>{ -->
<!-- active.classList.add("hidden"); -->
<!-- inactive.classList.remove("hidden"); -->
<!-- options.classList.toggle("hidden"); -->
<!-- }) -->
<!-- inactive.addEventListener("mouseup", ()=>{ -->
<!-- inactive.classList.add("hidden"); -->
<!-- active.classList.remove("hidden"); -->
<!-- options.classList.toggle("hidden"); -->
<!-- }); -->
<!-- </script> -->
<!-- </nav> -->
< / div >
<!-- previous navbar end -->
<!-- New navbar start -->
< div class = "navbar dark:from-gray-800 dark:to-gray-800 rounded-lg bg-gradient-to-r from-rose-400 via-blue-400 to-emerald-400 shadow-xl shadow-black/50 z-[4] sticky top-0 mb-10" >
< div class = "flex-1 lg:ml-4 ml-2 my-2" >
<!-- Hamburger menu -->
< div class = "lg:hidden" >
< ul class = "menu menu-horizontal px-1" >
< label class = "group btn btn-circle bg-transparent dark:bg-gray-800 swap swap-rotate border-emerald-300" >
< input type = "checkbox" class = "opacity-0 w-full h-full " / >
< svg class = "swap-off fill-emerald-300 group-hover:fill-black dark:fill-emerald-400 dark:group-hover:fill-white brightness-125" xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 512 512" > < path d = "M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" / > < / svg >
< div class = "dropdown dropdown-open swap-on" >
< svg class = "fill-emerald-300 group-hover:fill-black dark:fill-emerald-400 dark:group-hover:fill-white brightness-125" xmlns = "http://www.w3.org/2000/svg" width = "32" height = "32" viewBox = "0 0 512 512" > < polygon points = "400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" / > < / svg >
< ul tabindex = "0" class = "menu dropdown-content z-[1] p-2 shadow bg-green-100 dark:bg-gray-800 rounded-box w-36 mt-4" >
< li > < a class = "text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white" > Create< / a > < / li >
< li > < a class = "text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white" > Signup< / a > < / li >
< li > < a class = "text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white" > Login< / a > < / li >
< / ul >
< / div >
< / label >
< / ul >
< / div >
<!-- Hamburger Menu ended -->
< div class = "flex lg:justify-start lg:items-start justify-center items-center lg:w-auto w-full" >
< a class = "btn btn-ghost normal-case text-xl text-emerald-400 brightness-125" > < img src = "images/GLink-Logo-alt.svg" class = "h-full " > < / a >
< / div >
< div class = "w-full justify-center items-center lg:flex hidden" >
< a class = "btn btn-outline dark:btn-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm" href = "/" > Create< / a >
< / div >
< / div >
< div class = "justify-center items-center lg:flex mr-10 my-2" >
< a class = "btn btn-outline dark:btn-success dark:text-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm mr-8 lg:flex hidden" href = "signup.html" > Sign up< / a >
< label class = "swap swap-rotate" >
<!-- this hidden checkbox controls the state -->
< input type = "checkbox" id = "theme-switcher" class = "h-full w-full hidden" onclick = "changeMode()" / >
<!-- sun icon -->
< svg id = "sun" class = "swap-on fill-yellow-500 w-10 h-10" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41Z" fill = "yellow" / >
< path d = "M12,6.5A5.5,5.5,0,1,0,17.5,12A5.51,5.51,0,0,0,12,6.5Z" fill = "yellow" / > < / svg >
<!-- moon icon -->
< svg id = "moon" class = "swap-off fill-white w-10 h-10" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" fill = "white" / > < / svg >
< / label >
< script >
// window.onload = function(){
// if (document.getElementById("html-tag").contains("dark")) {
// console.log("dark");
// document.getElementById("sun").classList.add("swap-active");
// } else {
// console.log("light");
// document.getElementById("moon").classList.add("swap-active");
// }
// }
window.addEventListener('load', function(){
if (window.matchMedia & &
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.getElementById("theme-switcher").checked = true;
console.log("prefers dark");
changeMode();
} else {
document.getElementById("theme-switcher").checked = false;
console.log("prefers light");
changeMode();
}
});
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change',({ matches }) => {
if (matches) {
console.log("change to dark mode!");
document.getElementById("theme-switcher").checked = true;
changeMode();
} else {
console.log("change to light mode!");
document.getElementById("theme-switcher").checked = false;
changeMode();
}
});
function changeMode() {
let html_tag = document.getElementById("html-tag")
let box = document.getElementById("theme-switcher");
if (box.checked) {
if (!html_tag.classList.contains("dark")) {
html_tag.classList.add("dark");
}
}
if (!box.checked) {
if (html_tag.classList.contains("dark")) {
html_tag.classList.remove("dark");
}
}
}
< / script >
< / div >
< div class = "flex-none my-2 mr-2" >
< div class = "dropdown dropdown-end" >
< label tabindex = "0" class = "btn btn-ghost btn-circle avatar border border-2 border-gray-800 dark:border-emerald-500 brightness-125 hover:border-none hover:ring-2 hover:ring-gray-800 dark:hover:ring-emerald-400 focus:ring-2 focus:ring-gray-800 dark:focus:ring-emerald-400" >
< div class = "w-10 rounded-full cursor-pointer " >
< div class = "w-full h-full bg-yellow-200 rounded-full flex justify-center items-center" > < h1 class = "self-center text-xl font-bold font-serif" > B< / h1 > < / div >
< / div >
< / label >
< ul tabindex = "0" class = "menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-green-100 dark:bg-gray-800 rounded-box w-36" >
< li > < a class = "text-emerald-700 brightness-125 dark:text-emerald-400 font-bold uppercase dark:hover:text-white" href = "links.html" > My Links< / a > < / li >
< li > < a class = "text-emerald-700 brightness-125 dark:text-emerald-400 font-bold uppercase dark:hover:text-white" > Logout< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
<!-- Navbar ended -->
<!-- Old hero start -->
< div class = "hidden" >
<!-- <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 mb - 24"> -->
<!-- <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 m - 5 text - center">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> -->
<!-- Insert description or whatever ... -->
<!-- </p> -->
<!-- </div> -->
<!-- </div> -->
<!-- <!– <img class="w - auto flex - grow - 0 h - 96 w - 96" src="https://encrypted - tbn0.gstatic.com/images?q=tbn:ANd9GcTGpfMagCsgrJkELG_GOjtxqssEPXd - 3vr2PmPdaB - 0Y5Rp - bv1VOouyoXmG2QxZWHpdYI&usqp=CAU">–> -->
<!-- <div class="relative items - center w - auto h - auto sm:w - full flex - grow - 0"> -->
<!-- <div class="absolute inset - y - 0 left - 0 flex items - center pl - 3 pointer - events - none"> -->
<!-- <svg aria - hidden="true" class="w - 5 h - 5 text - gray - 500 dark:text - gray - 400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke - linecap="round" stroke - linejoin="round" stroke - width="2" d="M21 21l - 6 - 6m2 - 5a7 7 0 11 - 14 0 7 7 0 0114 0z"></path></svg> -->
<!-- </div> -->
<!-- <div class="absolute inset - y - 0 left - 0 flex items - center w - full pl - 10 pointer - events - none"> -->
<!-- <div type="search" id="default - search" class="block w - full p - 2 pl - 6 text - sm text - gray - 900 border border - gray - 300 rounded - lg bg - gray - 50 focus:ring - blue - 500 focus:border - blue - 500"> -->
<!-- <div class="typewriter bg - transparent w - fit h - auto justify - center items - center mx - auto"> -->
<!-- <h1 class="text - 2xl text - center overflow - x - hidden border - r border - r - 2 border - r - orange - 600 whitespace - nowrap m - auto tracking - wider "></h1> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <style> -->
<!-- .typewriter h1{ -->
<!-- background: transparent; -->
<!-- overflow: hidden; /* Ensures the content is not revealed until the animation */ -->
<!-- border - right: .15em solid orange; /* The typwriter cursor */ -->
<!-- white - space: nowrap; /* Keeps the content on a single line */ -->
<!-- margin: auto; /* Gives that scrolling effect as the typing happens */ -->
<!-- letter - spacing: .15em; /* Adjust as needed */ -->
<!-- content: ""; -->
<!-- animation: -->
<!-- typing 9s steps(40, start) 0s infinite, -->
<!-- blink - caret .95s step - end 0s infinite; -->
<!-- } -->
<!-- /* The typing effect */ -->
<!-- @keyframes typing { -->
<!-- 0% { width: 0} -->
<!-- 30% { width: 100% } -->
<!-- 40% { width: 100% } -->
<!-- 55% { width: 0 } -->
<!-- 65% { width: 0} -->
<!-- 95% {width: 100%} -->
<!-- 100% {width: 100%} -->
<!-- } -->
<!-- /* The typewriter cursor effect */ -->
<!-- @keyframes blink - caret { -->
<!-- from, to { border - color: transparent } -->
<!-- 50% { border - color: orange; } -->
<!-- } -->
<!-- .typewriter h1::after { -->
<!-- animation: change 9s steps(40, start) 0s infinite; -->
<!-- } -->
<!-- @keyframes change { -->
<!-- 0% {content: "netflix.com"} -->
<!-- 60% {content: "netflix.com"} -->
<!-- 65% {content: "glink.com/video"} -->
<!-- 100% {content: "glink.com/video"} -->
<!-- } -->
<!-- </style> -->
<!-- </div> -->
< / div >
<!-- Old hero end -->
<!-- New hero start -->
< div class = "hero py-16 h-auto bg-[#5EDC70] dark:bg-gray-800 dark:brightness-60 brightness-125 rounded-lg my-8 shadow-lg shadow-gray-800" >
< div class = "hero-content flex-col-reverse lg:flex-row-reverse" >
< div class = "relative items-center w-auto h-auto sm:w-full flex-grow-0 mt-8 lg:mt-0 justify-center mx-auto" >
<!-- <div class="absolute inset - y - 0 left - 0 flex items - center pl - 3 pointer - events - none"> -->
<!-- <svg class="w - 5 h - 5 text - gray - 500 dark:text - gray - 400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke - linecap="round" stroke - linejoin="round" stroke - width="2" d="M21 21l - 6 - 6m2 - 5a7 7 0 11 - 14 0 7 7 0 0114 0z"></path></svg> -->
<!-- </div> -->
< div class = "absolute inset-y-0 left-0 flex items-center w-full lg:pl-10 pointer-events-none" >
< div type = "search" id = "default-search" class = "block w-full p-2 pl-6 text-sm text-gray-900 ring-4 border-none ring-[#C2B100] shadow-lg shadow-emerald-400/50 rounded-lg bg-gray-50" >
< div class = "typewriter bg-transparent w-fit h-auto justify-center items-center mx-auto" >
< h1 class = "text-2xl text-center overflow-x-hidden border-r border-r-2 border-r-orange-600 whitespace-nowrap m-auto tracking-wider " > < / h1 >
< / div >
< / div >
< / div >
< / div >
< style >
.typewriter h1{
background: transparent;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
content: "";
animation:
typing 9s steps(40, start) 0s infinite,
blink-caret .95s step-end 0s infinite;
}
/* The typing effect */
@keyframes typing {
0% { width: 0}
30% { width: 100% }
40% { width: 100% }
55% { width: 0 }
65% { width: 0}
95% {width: 100%}
100% {width: 100%}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
.typewriter h1::after {
animation: change 9s steps(40, start) 0s infinite;
}
@keyframes change {
0% {content: "netflix.com"}
60% {content: "netflix.com"}
65% {content: "glink.com/video"}
100% {content: "glink.com/video"}
}
< / style >
< div >
< h1 class = "text-5xl font-bold text-[#C21EC0] dark:text-[#BF991D] brightness-125 font-serif tracking-wider leading-tight pl-8" > Create and share geo-restricted links< / h1 >
< p class = "py-6 text-black dark:text-gray-300 pl-8 text-lg" > GLinkZip enables you to generate and distribute geo-restricted URLs for private, secure access.< / p >
< div class = "flex justify-center items-center" >
< button class = "btn btn-success text-black bg-[#C21EC0] border-[#5A1475] border-4 hover:bg-[#C21EC0] hover:border-[#C21EC0] hover:border-none hover:shadow-black/50 dark:bg-[#BF991D] dark:border-black dark:border-4 dark:hover:bg-[#C2B100] dark:hover:border-black dark:hover:border-none text-xl hover:shadow-lg dark:hover:shadow-[#C2B100]/50" > Get Started< / button >
< / div >
< / div >
< / div >
< / div >
<!-- New hero end -->
<!-- 3 column start -->
< div class = "flex lg:flex-col flex-col w-full mb-24 bg-[#761ffe] brightness-125 dark:brightness-60 dark:bg-gray-800 rounded-lg shadow-lg shadow-gray-800" >
< div class = "w-full my-12 justify-center items-center flex" >
< p class = "text-4xl md:text-5xl lg:text-6xl text-emerald-400 font-bold font-serif brightness-125" >
How it works
< / p >
< / div >
< div class = "flex lg:flex-row flex-col items-start h-auto w-auto mx-5 mb-5" >
< div class = "flex flex-col items-center h-full lg:w-1/3 w-full pt-0" >
< img src = "images/step1.png" alt = "pic2" class = "h-[241.32px] w-[340px] bg-black flex-grow m-5 w-full rounded" >
< h1 class = "text-5xl text-success" >
Step 1
< / h1 >
< p class = "py-6 text-gray-300" > 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 pt-0" >
< img src = "images/step2.png" alt = "pic2" class = "h-[241.32px] w-[340px] bg-black flex-grow m-5 w-full rounded" >
< h1 class = "text-5xl text-success" >
Step 2
< / h1 >
< p class = "py-6 text-gray-300" >
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 pt-0 flex-grow flex-shrink-0" >
< img src = "images/step3.png" alt = "pic2" class = "h-[241.32px] w-[340px] bg-black flex-grow m-5 w-full rounded" >
< h1 class = "text-5xl text-success " >
Step 3
< / h1 >
< p class = "py-6 text-gray-300" >
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 >
<!-- 3 column end -->
<!-- why start -->
< div class = "w-full flex bg-[#eab30e] flex-col items-center justify-center rounded-lg shadow-lg shadow-gray-800" >
< div class = " h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap w-full justify-end pr-16" >
< h1 class = "font-serif font-bold underline" >
Why GLink?
< / h1 >
< / div >
< div class = "py-8 max-w-lg sm:flex-grow-0 flex pr-16 flex-wrap self-end justify-end " >
< p class = "text-lg md:text-xl lg:text-2xl text-right" >
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 >
<!-- Why end -->
< / main >
<!-- <div class="typewriter bg - white w - fit justify - center items - center mb - 10 mx - auto"> -->
<!-- <h1 class="text - 4xl text - center overflow - x - hidden border - r border - r - 2 border - r - orange - 600 whitespace - nowrap m - auto tracking - wider "></h1> -->
<!-- </div> -->
< / body >
< / html >
