2022-11-15 11:11:07 +00:00
<!DOCTYPE html>
< html lang = "en" charset = "utf-8" >
< head >
< meta name = "generator" content = "Zola v.0.13.0 - getzola.org" / >
2022-12-19 11:30:06 +00:00
< title > BUY NOW • examplezola< / title >
< meta property = "og:title" content = "BUY NOW • examplezola" / >
2022-11-15 11:11:07 +00:00
<!-- Required meta categories -->
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
<!-- **** BEGINNING, favicons **** -->
<!-- generics -->
<!-- iOS -->
<!-- Android -->
<!-- Windows 8, IE 10 -->
<!-- Windows 8.1 and up, IE 11 -->
<!-- **** CONCLUSION, favicons **** -->
<!-- CSS/SCSS -->
2022-11-15 14:43:55 +00:00
< link rel = "stylesheet" href = "https://examplezola.tf/css/index.css?h=8ea8a615d5a5a9339423096c45329cf61cd2193f52db4447f8ae0248efacaed8" / > < style > @ -moz-document url-prefix ( ) { . lazy : -moz-loading { visibility : hidden ; } } . ieOnly { display : none ; } @ media all and ( -ms-high-contrast : none ) , ( -ms-high-contrast : active ) { . ieOnly { display : block ; } } < / style >
2022-11-15 11:11:07 +00:00
< / head >
< body >
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
< script type = "text/javascript" >
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024 ;
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
hideMenu(button.id.split("-")[0]);
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
displayedMenu = "";
}
else {
showMenu(button.id.split("-")[0]);
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
displayedMenu = button.id.split("-")[0]
}
}
function handleClick(button) {
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
if (button.id.indexOf("menu") !== -1 ) {
toggleMenu(button)
}
}
function toggleHamburger() {
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden" , "");
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
}
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
}
function hideHamburger() {
document.getElementById('header-container').className = "";
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
if (displayedMenu !== "") { hideMenu(displayedMenu); }
}
window.onload = function(){
let elements = document.getElementsByTagName("button");
let buttons = [...elements]
buttons.forEach((button) => {
button.addEventListener( 'click', function() { handleClick(button) });
})
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
}
< / script >
<!-- set variables used for header template -->
< header id = "header-container" >
2022-11-18 09:27:51 +00:00
< div class = "z-10 bg-white fixed w-screen max-w-full customize" >
2022-11-15 11:11:07 +00:00
< div class = "relative z-50 shadow" >
< div class = "mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20" >
< div >
< a href = "/" class = "flex" >
< img class = "h-auto sm:w-15" src = "https://examplezola.tf/images/logo_placeholder.jpg" alt = "Logo" / >
< / a >
< / div >
< div class = "-mr-2 -my-2 lg:hidden" >
< button id = "hamburger-btn" type = "button" class = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2" >
<!-- Heroicon name: menu -->
< svg class = "h-6 w-6" xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M4 6h16M4 12h16M4 18h16" / >
< / svg >
< / button >
< button id = "close-hamburger-btn" type = "button" class = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2" >
<!-- Heroicon name: x -->
< svg class = "h-6 w-6" xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
< path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "M6 18L18 6M6 6l12 12" / >
< / svg >
< / button >
< / div >
< div class = "hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12" >
< nav class = "flex space-x-10" >
< a href = "https://examplezola.tf/home/" class = "text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0" >
2022-12-19 11:30:06 +00:00
OurPhone
2022-11-15 11:11:07 +00:00
< / a >
< div class = "relative" >
< / div >
2022-12-19 11:30:06 +00:00
< a href = "https://examplezola.tf/buynow/" class = "text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0" >
BUY NOW
2022-12-16 14:24:00 +00:00
< / a >
< div class = "relative" >
< / div >
< a href = "https://examplezola.tf/specs/" class = "text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0" >
2022-12-19 11:30:06 +00:00
Specs
2022-11-15 11:11:07 +00:00
< / a >
< div class = "relative" >
< / div >
2022-12-16 14:24:00 +00:00
< a href = "https://examplezola.tf/technology/" class = "text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0" >
2022-12-19 11:30:06 +00:00
Technology
2022-11-15 11:11:07 +00:00
< / a >
< div class = "relative" >
< / div >
< / nav >
< / div >
< / div >
< / div >
<!--
Mobile menu, show/hide based on mobile menu state.
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
< div id = "hamburger" class = "hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden" >
< div >
< div class = "shadow-xs h-screen bg-white divide-y-2 divide-gray-50" >
2022-11-18 09:27:51 +00:00
< div class = "pt-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto" >
2022-11-15 11:11:07 +00:00
< nav class = "flex flex-col justify-around pb-12" >
2022-12-19 11:30:06 +00:00
< a href = "https://examplezola.tf/buynow/" class = "text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150" >
BUY NOW
2022-12-16 14:24:00 +00:00
< / a >
< hr / >
< a href = "https://examplezola.tf/specs/" class = "text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150" >
2022-12-19 11:30:06 +00:00
Specs
2022-11-15 11:11:07 +00:00
< / a >
< hr / >
2022-12-16 14:24:00 +00:00
< a href = "https://examplezola.tf/technology/" class = "text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150" >
2022-12-19 11:30:06 +00:00
Technology
2022-11-15 11:11:07 +00:00
< / a >
< hr / >
< / nav >
< / div >
< / div >
< / div >
< / div >
< / header >
< div id = "content" class = "mx-auto overflow-hidden" >
< main >
< script src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js" > < / script >
< script > mermaid . initialize ( { startOnLoad : true } ) ; < / script >
< div >
2022-11-18 09:27:51 +00:00
< br >
<!-- section 1 (co - found) -->
2022-11-15 11:11:07 +00:00
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
2022-12-19 11:30:06 +00:00
<!-- aligns columns depending on col number -->
<!-- Padding -->
2022-11-15 11:11:07 +00:00
2022-12-19 11:30:06 +00:00
<!-- Margins -->
2022-11-15 11:11:07 +00:00
2022-12-19 11:30:06 +00:00
<!-- makes row semi - full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
< div id = "" class = "relative justify-center flex overflow-hidden " style = "background: url('https://examplezola.tf/buynow/./img/placeholder1.png'); background-size: cover; background-position: center;" >
< div id = "" class = "relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-8 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10 text-center items-center mx-auto " style = "min-width: -webkit-fill-available; min-width: -moz-available" >
<!-- Hides empty columns if displayed vertically in small screen -->
< div class = "flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 " >
<!-- handles mermaid markdown content display -->
< h1 id = "be-a-part-of-our-sovereign-movement" > BE A PART OF OUR SOVEREIGN MOVEMENT< / h1 >
< / div >
< / div >
< / div > <!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
2022-11-15 11:11:07 +00:00
2022-11-15 14:43:55 +00:00
2022-12-19 11:30:06 +00:00
2022-11-15 11:11:07 +00:00
<!-- aligns columns depending on col number -->
2022-12-19 11:30:06 +00:00
2022-11-15 11:11:07 +00:00
<!-- Padding -->
<!-- Margins -->
<!-- makes row semi - full screen width, strips margins -->
<!-- makes row full screen width, strips margins -->
<!-- makes row full screen width and adds background img -->
<!-- Cancels page margins so that rows can have separate margins -->
< div id = "" class = "relative justify-center flex overflow-hidden " style = "" >
2022-12-19 11:30:06 +00:00
< div id = "" class = "relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-start py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style = "min-width: -webkit-fill-available; min-width: -moz-available" >
2022-11-15 11:11:07 +00:00
<!-- Hides empty columns if displayed vertically in small screen -->
< div class = "flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 " >
<!-- handles mermaid markdown content display -->
2022-12-19 11:30:06 +00:00
< p > < img src = "https://examplezola.tf/buynow/./img/phone1.png" alt = "image" / > < / p >
< p > < button > < a href = "https://examplezola.tf/" > Pre-Order< / a > < / button > < / p >
< p > Sign up for < strong > OurPhone™< / strong > pre-sale. < br > Pre-order < strong > OurPhone™< / strong > and become one of the firsts to unlock a secured digital future.< / p >
< / div >
<!-- Hides empty columns if displayed vertically in small screen -->
< div class = "flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 " >
<!-- handles mermaid markdown content display -->
< p > < img src = "https://examplezola.tf/buynow/./img/crowdfund1.png" alt = "image" / > < / p >
< p > < button > < a href = "https://examplezola.tf/" > Crowdfund< / a > < / button > < / p >
< p > Learn more about how to purchase < strong > OurPhone™< / strong > Company's shares, and become a co-owner of < strong > OurPhone™< / strong > Company.< / p >
2022-11-15 14:43:55 +00:00
< / div >
<!-- Hides empty columns if displayed vertically in small screen -->
< div class = "flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 " >
<!-- handles mermaid markdown content display -->
2022-12-19 11:30:06 +00:00
< p > < img src = "https://examplezola.tf/buynow/./img/invest.png" alt = "image" / > < / p >
< p > < button > < a href = "https://examplezola.tf/" > Invest< / a > < / button > < / p >
< p > Support < strong > OurPhone™< / strong > project by financing < strong > OurPhone™< / strong > Company's hardware acquisition.< / p >
2022-11-15 11:11:07 +00:00
< / div >
< / div >
< / div >
< / div >
< / main >
< / div >
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
-->
2022-11-15 14:43:55 +00:00
< footer class = "bottom-0" >
2022-11-15 11:11:07 +00:00
2022-11-15 14:43:55 +00:00
< div class = "customize" >
2022-11-15 11:11:07 +00:00
2022-12-19 11:30:06 +00:00
< p class = "text-center" > © Ourphone™ All Rights Reserved 2022< / p >
2022-11-15 11:11:07 +00:00
< / div >
< / footer >
< / body >
< / html >