I want to make modern YouTube video downloading website using Franken UI, first make modern nav bar with brand bame, main menu, and button. Must use icons also. "<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Franken UI</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<style>
:root {
font-family: Inter, sans-serif;
font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
:root {
font-family: InterVariable, sans-serif;
}
}
</style>
<!-- For stability in production, it's recommended that you hardcode the latest version in the CDN link. -->
<link
rel="stylesheet"
href="https://unpkg.com/franken-ui@internal/dist/css/core.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/franken-ui@internal/dist/css/utilities.min.css"
/>
<script>
const htmlElement = document.documentElement;
const __FRANKEN__ = JSON.parse(
localStorage.getItem("__FRANKEN__") || "{}"
);
if (
__FRANKEN__.mode === "dark" ||
(!__FRANKEN__.mode &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
htmlElement.classList.add("dark");
} else {
htmlElement.classList.remove("dark");
}
htmlElement.classList.add(__FRANKEN__.theme || "uk-theme-zinc");
htmlElement.classList.add(__FRANKEN__.radii || "uk-radii-md");
htmlElement.classList.add(__FRANKEN__.shadows || "uk-shadows-sm");
htmlElement.classList.add(__FRANKEN__.font || "uk-font-sm");
htmlElement.classList.add(__FRANKEN__.chart || "uk-chart-default");
</script>
<script
type="module"
src="https://unpkg.com/franken-ui@internal/dist/js/core.iife.js"
></script>
<script
type="module"
src="https://unpkg.com/franken-ui@internal/dist/js/icon.iife.js"
></script>
<!-- <script
type="module"
src="https://unpkg.com/franken-ui@internal/dist/js/chart.iife.js"
></script> -->
</head>
<body class="bg-background text-foreground">
<!-- START CODING HERE -->
<div class="uk-container mt-40">
<div class="space-y-4">
<h1 class="uk-hero-sm text-center font-bold">Franken UI: Dos</h1>
<div class="flex justify-center gap-x-2">
<a
class="uk-btn uk-btn-primary"
href="https://franken-ui.dev/docs/introduction"
>
Learn
</a>
<a
class="uk-btn uk-btn-default"
href="https://github.com/franken-ui"
target="_blank"
>
Follow
</a>
</div>
</div>
</div>
<!-- END -->
</body>
</html>" and here is icon example "<div class="size-4">
</div>"
Comments
Post a Comment