-
-
Save davidteren/4d04ee7de0b1bb87e7ca5826c7d2b40b to your computer and use it in GitHub Desktop.
flowbite_template_example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" | |
| content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"/> | |
| <title>Document</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet"/> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script> | |
| </head> | |
| <body class="dark h-screen"> | |
| <nav class="border-gray-200 bg-white dark:bg-gray-900"> | |
| <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4"> | |
| <a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse"> | |
| <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo"/> | |
| <span class="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">Flowbite</span> | |
| </a> | |
| <button data-collapse-toggle="navbar-default" type="button" | |
| class="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden" | |
| aria-controls="navbar-default" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 17 14"> | |
| <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M1 1h15M1 7h15M1 13h15"/> | |
| </svg> | |
| </button> | |
| <div class="hidden w-full md:block md:w-auto" id="navbar-default"> | |
| <ul class="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 font-medium dark:border-gray-700 dark:bg-gray-800 md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 md:dark:bg-gray-900 rtl:space-x-reverse"> | |
| <li> | |
| <a href="#" | |
| class="block rounded bg-blue-700 px-3 py-2 text-white dark:text-white md:bg-transparent md:p-0 md:text-blue-700 md:dark:text-blue-500" | |
| aria-current="page">Home</a> | |
| </li> | |
| <li> | |
| <a href="#" | |
| class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500">About</a> | |
| </li> | |
| <li> | |
| <a href="#" | |
| class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500">Services</a> | |
| </li> | |
| <li> | |
| <a href="#" | |
| class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500">Pricing</a> | |
| </li> | |
| <li> | |
| <a href="#" | |
| class="block rounded px-3 py-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500">Contact</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <section | |
| class="bg-center bg-no-repeat bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')] bg-gray-700 bg-blend-multiply"> | |
| <div class="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56"> | |
| <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-white md:text-5xl lg:text-6xl">We | |
| invest in the world’s </h1> | |
| <p class="mb-8 text-lg font-normal text-gray-300 lg:text-xl sm:px-16 lg:px-48">Here at Flowbite we focus on | |
| markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p> | |
| <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"> | |
| <a href="#" | |
| class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"> | |
| Get started | |
| <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" | |
| fill="none" viewbox="0 0 14 10"> | |
| <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M1 5h12m0 0L9 1m4 4L9 9"/> | |
| </svg> | |
| </a> | |
| <a href="#" | |
| class="inline-flex justify-center hover:text-gray-900 items-center py-3 px-5 sm:ms-4 text-base font-medium text-center text-white rounded-lg border border-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-400"> | |
| Learn more | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment