-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1 lines (1 loc) · 12.1 KB
/
index.html
1
<!DOCTYPE html><html lang=en class="bg-neutral-50 scroll-smooth"><head><meta charset=UTF-8 /><meta http-equiv=X-UA-Compatible content="IE=edge" /><meta name=viewport content="width=device-width, initial-scale=1.0" /><meta name=application-name content=Frivo /><meta name=theme-color content=#309AFC /><meta name=author content="Muhammad Naufal Yafi'" /><meta name=description content="Landing page Frivo money lending services." /><meta name=keywords content="money lending services, landing page, borrow money, borrow money with small interest, trusted" /><link rel=preload href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Montserrat:wght@700&display=swap" as=style onload="this.onload=null;this.rel='stylesheet'" /><noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Montserrat:wght@700&display=swap" rel=stylesheet type=text/css /></noscript><link rel=manifest href=./manifest.json /><link rel="shortcut icon" href=./assets/logo/favicon.ico type=image/x-icon /><link rel=icon sizes=512x512 href=./assets/logo/logo512.png /><link rel=apple-touch-icon href=./assets/logo/logo192.png /><link rel=stylesheet href=./dist/css/style.css media=all /><title>Frivo</title></head><body class="flex flex-col justify-center items-center font-Inter text-base text-neutral-900 bg-neutral-50"><header class="fixed z-50 top-0 left-0 w-full h-12 lg:h-16 xl:h-20 px-3 lg:px-12 xl:px-28 flex justify-between items-center bg-neutral-50"><p id=logo class="font-Inter font-bold text-neutral-900 tracking-widest text-sm lg:text-lg">FRI<span class=text-blue-600>VO</span></p><button id=btn-menu class=lg:hidden aria-label="click to show menu"><img src=./assets/icons/menu.svg alt="icon burger menu" width=24px height=24 /></button><nav id=navbar-container class="absolute lg:relative lg:block hidden right-0 lg:right-0 top-12 lg:top-0 w-1/2 bg-neutral-50 px-3 lg:px-0 py-4 lg:py-0 rounded-b-lg"><ul class="text-sm text-neutral-800 font-Inter font-medium flex flex-col lg:flex-row lg:justify-end lg:gap-4"><li class="w-full lg:w-auto lg:px-8 py-3 hover:text-neutral-900 hover:font-bold text-neutral-900"><a href=# aria-label="click to navigate page home">Home</a></li><li class="w-full lg:w-auto lg:px-8 py-3 hover:text-neutral-900 hover:font-bold"><a href=#why-us aria-label="click to navigate page why choose us">Why Us</a></li><li class="w-full lg:w-auto lg:px-8 py-3 hover:text-neutral-900 hover:font-bold"><a href=#testi aria-label="click to navigate page testimony">Testimony</a></li><li><a href=#><button class="w-full lg:w-auto lg:px-8 py-3 bg-blue-600 hover:bg-blue-500 text-neutral-50 rounded-lg" aria-label="click to register">Register</button></a></li></ul></nav></header><main id=home class="mt-20 lg:mt-24 xl:mt-28 w-full flex flex-col-reverse items-center lg:flex-row lg:justify-around px-3 lg:px-12 xl:px-28"><div id=container><hgroup class="text-neutral-900 xl:w-3/4"><h1 class="font-Inter font-bold text-3xl 2xl:text-8xl md:text-7xl sm:text-5xl">A <strong class=text-blue-600>Trusted</strong> Place To Borrow Money</h1><p class="mt-5 mb-8 text-neutral-800 text-sm lg:text-lg">A safe online money lending place and under scrutiny by the authorities. You can borrow money at a low interest rate.</p></hgroup><div id=btn-group class="flex flex-col lg:flex-row lg:gap-3"><button id=primary class="font-Inter font-medium bg-blue-600 hover:bg-blue-500 text-neutral-50 rounded-lg py-3 mb-4 lg:mb-0 lg:px-8 lg:py-5" aria-label="click to register">Register Now</button> <button id=secondary class="py-2 border-solid border-2 border-neutral-900 rounded-lg lg:px-8 lg:py-5 hover:opacity-75" aria-label="click to see testimony">Testimony</button></div></div><img src=./assets/images/wallet/wallet-small.webp alt="3D image wallet" layout=responsive width=300px height=300px class=xl:w-1/2 srcset="./assets/images/wallet/wallet-small.webp 300w, ./assets/images/wallet/wallet-medium.webp 768w, ./assets/images/wallet/wallet-large.webp 1280w" /></main><section id=why-us class="w-full px-3 lg:px-12 xl:px-28 mt-14 lg:mt-16 xl:mt-20"><article><hgroup><h1 class="font-bold text-2xl lg:text-6xl md:text-4xl text-center">Why Choose Us?</h1><p class="mt-2 lg:mt-5 mb-5 lg:mb-8 text-neutral-800 text-sm lg:text-lg lg:text-center">By borrowing money from us, you can achieve your financial goals faster, because of our good service and ready to help you at any time as well as a fast and easy lending process.</p></hgroup></article></section><section id=reasons class="w-full flex flex-col px-3 lg:px-12 xl:px-28 lg:flex-row gap-5 lg:gap-16 lg:justify-center sm:items-center" aria-label="reasons to choose us"><div id="text-icon guaranted" class="flex items-center gap-5" aria-label="our services are guaranteed safety"><div id=icon class="bg-orange-100 px-2 py-2 rounded-full"><img src=./assets/icons/shield.svg alt="icon shield" width=16px height=16px /></div><p class=font-medium>Guaranted Safety</p></div><div id="text-icon respon" class="flex items-center gap-5" aria-label="our service is fast"><div id=icon class="bg-blue-100 px-2 py-2 rounded-full"><img src=./assets/icons/clock.svg alt="icon shield" width=16px height=16px /></div><p class=font-medium>Fast Respon</p></div><div id="text-icon interest" class="flex items-center gap-5" aria-label="very small loan interest"><div id=icon class="bg-green-100 px-2 py-2 rounded-full"><img src=./assets/icons/dollar-sign.svg alt="icon shield" width=16px height=16px /></div><p class="font-medium lg:text-lg">Small Bank Interest</p></div></section><section id=interest class="w-full px-3 lg:px-12 xl:px-28 mt-20 lg:mt-32 flex justify-center items-end"><div id=bg class="w-full h-64 lg:h-60 bg-blue-100 rounded-lg"></div><div id=container class="absolute flex flex-col lg:flex-row justify-end lg:justify-center items-center lg:items-end"><img src=./assets/images/bank/bank-small.webp alt="3D image bank" layout=responsive width=220px height=220px class=lg:w-1/3 srcset="./assets/images/bank/bank-small.webp 300w, ./assets/images/bank/bank-medium.webp 760w, ./assets/images/bank/bank-large.webp 1280w" /><hgroup class="flex flex-row items-center gap-4 mt-2 mb-6 lg:items-center"><h1 class="font-bold text-6xl lg:text-9xl text-blue-600">5%</h1><p class="font-medium text-neutral-900 text-base lg:text-xl">bank<br />interest</p></hgroup></div></section><section id=service class="w-full px-3 lg:px-12 xl:px-28 mt-16 lg:mt-20 flex flex-col lg:flex-row items-center lg:justify-around"><img src=./assets/images/person/person-small.webp alt="3D image person" width=250px height=250px class=lg:w-80 srcset="./assets/images/person/person-small.webp 300w, ./assets/images/person/person-medium.webp 768w, ./assets/images/person/person-large.webp 1280w" /><div id=group class=lg:w-1/2><hgroup><h1 class="font-bold text-2xl lg:text-5xl md:text-3xl text-center lg:text-start mt-4">Your Trust is Our Responsibility</h1><p class="mt-2 lg:mt-5 mb-5 lg:mb-8 text-neutral-800 text-sm lg:text-lg lg:text-start">By borrowing from us, you can easily achieve your financial goals, be it buying the goods you want, recouping unexpected costs, or even investing your funds to get bigger profits</p></hgroup><button class="bg-blue-600 hover:bg-blue-500 text-neutral-50 py-3 lg:py-4 w-full rounded-lg lg:w-44" aria-label="click to register">Register Now</button></div></section><section id=testi class="w-full mt-14 flex flex-col justify-center lg:mt-16 xl:mt-20 px-3 lg:px-12 xl:px-28"><h1 class="font-bold text-2xl lg:text-6xl md:text-4xl text-center">Testimony</h1><div id=card-testimony class="flex justify-around mt-6 lg:mt-12"><button id=previous aria-label="click to see previous feedback customer"><img src=./assets/icons/arrow-left-circle.svg alt="icon arrow right" width=35px height=35px /></button><figure class="w-2/3 h-80 lg:h-44 sm:h-60 bg-blue-50 rounded-lg px-6 py-6"><div id=profile-group class="flex items-center"><div id=photo-profile>no porphilous photos</div><div id=desc class="flex flex-col ml-3"><strong id=name class="font-bold text-lg">no username</strong> <p id=job class="text-sm text-blue-600">not writing his work</p></div></div><article id=testimony class="mt-4 text-neutral-800 cursor-text">not writing reviews</article></figure><button id=next aria-label="click to see next feedback customer"><img src=./assets/icons/arrow-right-circle.svg alt="icon arrow right" width=35px height=35px /></button></div><div id=pagination class="flex justify-center gap-3 mt-5"><div class="page pg1 rounded-full cursor-pointer"></div><div class="page pg2 rounded-full cursor-pointer"></div><div class="page pg3 rounded-full cursor-pointer"></div><div class="page pg4 rounded-full cursor-pointer"></div><div class="page pg5 rounded-full cursor-pointer"></div><div class="page pg6 rounded-full cursor-pointer"></div></div></section><section id=cta class="w-full flex justify-center items-end mt-24 lg:mt-36"><div id=bg class="w-full h-80 bg-blue-100"></div><div id=group class="absolute flex flex-col lg:flex-row lg:justify-center lg:items-end items-center mb-4 px-3 lg:px-0"><img src=./assets/images/sack/sack-small.webp alt="3D image sack" width=140px height=140px class="lg:w-96 md:w-44" srcset="./assets/images/sack/sack-small.webp 300w, ./assets/images/sack/sack-medium.webp 768w, ./assets/images/sack/sack-large.webp 1280w" /><div id=group class="lg:w-1/2 lg:mb-6"><hgroup><h1 class="font-bold text-2xl lg:text-4xl md:text-3xl text-start lg:text-start mt-4 sm:text-center">Borrow Money Only on FRI<span class=text-blue-600>VO</span></h1><p class="mt-2 lg:mt-5 mb-5 lg:mb-8 text-neutral-800 text-sm lg:text-lg lg:text-start">All activities are recorded properly and honestly. Employees who have the discipline and foresight in reading the data in the system.</p></hgroup><button class="bg-blue-600 hover:bg-blue-500 text-neutral-50 w-full rounded-lg py-4" aria-label="click to register">Register Now</button></div></div></section><footer class="w-full bg-neutral-900 text-neutral-50 px-3 py-5 lg:px-16 lg:py-14 xl:px-28"><div id=information-group class="flex flex-col lg:flex-row gap-4 justify-center lg:justify-between"><section class="text-center lg:text-start"><strong class="font-Inter font-bold text-base md:text-xl">Contact</strong><ul class="font-Inter text-sm md:text-base mt-1"><li class="cursor-pointer text-neutral-100 hover:text-neutral-50">telp : +1972317389</li><li class="cursor-pointer text-neutral-100 hover:text-neutral-50">telp : +8273827138</li><li class="cursor-pointer text-neutral-100 hover:text-neutral-50">gmail : [email protected]</li></ul></section><section class="text-center lg:text-start"><strong class="font-Inter font-bold text-base md:text-xl">Location</strong><ul class="font-InterReguler text-sm md:text-base mt-1"><li class="cursor-pointer text-neutral-100 hover:text-neutral-50">St. Turpis Curabitur<br />No. 199 Lorem, Ipsum,</li><li class="cursor-pointer text-neutral-100 hover:text-neutral-50">Rhoncus, Sodales</li><li class="cursor-pointer text-neutral-100 hover:text-neutral-50">United States America</li><li class="cursor-pointer text-neutral-100 hover:text-neutral-50">28748</li></ul></section><section class="text-center lg:text-start"><strong class="font-Inter font-bold text-base md:text-xl">Information</strong><ul class="font-Inter text-sm md:text-base mt-1"><li class="cursor-pointer text-neutral-100 hover:text-neutral-50"><a href=#>Why Choose Us</a></li><li class="cursor-pointer text-neutral-100 hover:text-neutral-50"><a href=#>Company Advantage</a></li><li class="cursor-pointer text-neutral-100 hover:text-neutral-50"><a href=#>Bank Interest</a></li><li class="cursor-pointer text-neutral-100 hover:text-neutral-50"><a href=#>Service</a></li></ul></section></div><div id=copyright class="flex flex-col lg:flex-row gap-4 justify-center lg:justify-between mt-4 lg:mt-8"><hgroup class="text-center lg:text-start"><h1 class="font-Inter font-bold text-2xl">FRI<span class=text-neutral-100>VO</span></h1><strong class="font-Inter font-bold text-xs md:text-sm text-neutral-100">@2022 All rights reserved. <span class=text-neutral-50>Muhammad Naufal Yafi’</span></strong></hgroup><button class="w-full lg:w-1/4 bg-blue-600 hover:bg-blue-500 rounded-lg font-Inter font-medium text-sm px-0 py-2 md:py-4 lg:py-0" aria-label="click to register">Register Now</button></div></footer><script src=./dist/js/script.js defer></script><script src=./index.js defer></script></body></html>