Navbar added + backgroung gradient
This commit is contained in:
+11
-2
@@ -1,10 +1,19 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<script
|
||||
type="module"
|
||||
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
|
||||
></script>
|
||||
<script
|
||||
nomodule
|
||||
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
|
||||
></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<link rel="icon" href="./public/logo.ico" />
|
||||
<title>LK Solutions</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Generated
+1335
-167
File diff suppressed because it is too large
Load Diff
+11
-1
@@ -10,8 +10,15 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.18",
|
||||
"@heroicons/react": "^2.1.3",
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"sort-by": "^0.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.55",
|
||||
@@ -19,9 +26,12 @@
|
||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.5",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.1.0"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
+8
-3
@@ -1,7 +1,12 @@
|
||||
import { Route, Routes } from "react-router-dom";
|
||||
import Home from "./routes/Home";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<h1>Hello, World!</h1>
|
||||
</>
|
||||
<div className="font-baijam bg-gradient-to-br from-custom-bglight to-custom-bgdark min-h-screen text-white">
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.header-title-child {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav-menu li a {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1040px) {
|
||||
.nav-menu {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
z-index: -3;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.nav-menu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding-top: 7px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.nav-menu li a {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: initial;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useState } from "react";
|
||||
import { FaTimes, FaBars } from "react-icons/fa";
|
||||
|
||||
import Logo from "../../assets/logo.svg";
|
||||
|
||||
export default () => {
|
||||
const [state, setState] = useState(false);
|
||||
|
||||
const [colorChange, setColorChange] = useState(false);
|
||||
const changeColor = () => {
|
||||
if (window.scrollY >= 100) {
|
||||
setColorChange(true);
|
||||
} else {
|
||||
setColorChange(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", changeColor);
|
||||
|
||||
// Replace javascript:void(0) path with your path
|
||||
const navigation = [
|
||||
{ title: "Home", path: "/" },
|
||||
{ title: "Services", path: "javascript:void(0)" },
|
||||
{ title: "Work", path: "javascript:void(0)" },
|
||||
{ title: "About Us", path: "javascript:void(0)" },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`${
|
||||
colorChange
|
||||
? "bg-black bg-opacity-80 transition duration-500 w-full border-b md:border-0 md:static"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
|
||||
<div className="flex items-center justify-between py-3 md:py-5 md:block">
|
||||
<a href="/">
|
||||
<img src={Logo} width={60} height={60} alt="logo" />
|
||||
</a>
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
|
||||
onClick={() => setState(!state)}
|
||||
>
|
||||
{state ? (
|
||||
<FaTimes className="h-6 w-6" />
|
||||
) : (
|
||||
<FaBars className="h-6 w-6" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
|
||||
state ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<ul className="text-text-gold justify-center items-center space-y-8 md:flex md:space-x-6 md:space-y-0">
|
||||
{navigation.map((item, idx) => {
|
||||
return (
|
||||
<li key={idx} className="hover:text-white">
|
||||
<a
|
||||
href={item.path}
|
||||
className="block py-2 md:py-0 md:px-4 text-lg font-medium$"
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
@@ -0,0 +1,34 @@
|
||||
<svg width="417" height="421" viewBox="0 0 417 421" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M153.758 239.971V280.743C156.38 278.726 157.909 277.7 159.267 276.483C201.663 238.458 244.26 200.648 286.257 162.188C295.36 153.852 302.351 143.197 310.205 133.522C311.231 132.018 312.024 130.366 312.555 128.625C318.197 114.072 312.046 103.864 296.663 101.702C293.65 101.278 288.205 98.9406 288.301 98.5588C289.521 93.5406 293.997 95.4856 297.192 95.4674C324.669 95.305 352.147 95.379 379.625 95.4044C381.434 95.2662 383.253 95.4006 385.022 95.8031C385.6 96.0665 386.111 96.4552 386.52 96.9411C386.929 97.427 387.224 97.9979 387.384 98.6122C387.526 99.2835 386.2 100.893 385.34 101.056C353.533 107.095 331.958 129.421 309.199 149.455C278.732 176.272 249.034 203.959 218.967 231.229C212.363 237.219 212.301 237.121 218.221 243.968C258.495 290.568 298.776 337.163 339.063 383.752C343.427 388.785 348.239 393.417 352.788 398.294C362.832 409.05 375.286 414.321 389.895 415.037C391.705 415.125 393.448 416.56 395.222 417.371C393.404 418.395 391.601 420.305 389.781 420.313C356.243 420.49 322.705 420.495 289.166 420.326C287.376 420.318 285.592 418.728 283.805 417.875C285.328 416.694 286.968 415.673 288.699 414.827C290.646 414.299 292.632 413.929 294.638 413.721C307.395 411.176 311.669 400.332 303.461 390.141C291.938 375.831 279.949 361.905 268.141 347.817C244.015 319.026 219.811 290.298 195.831 261.386C192.393 257.24 190.041 256.332 185.749 260.342C176.901 268.611 167.448 276.23 158.544 284.444C156.397 286.426 154.118 289.691 154.122 292.362C154.171 324.26 154.607 356.158 155.055 388.055C155.199 390.876 155.639 393.675 156.365 396.405C158.85 407.249 164.184 411.977 175.247 414.085C178.256 414.659 181.032 416.456 183.914 417.692C180.755 418.612 177.611 420.299 174.438 420.329C150.805 420.552 127.161 420.45 103.523 420.437C101.712 420.58 99.8906 420.491 98.1026 420.173C97.0203 419.882 96.2192 418.545 95.292 417.677C96.0927 416.693 97.0031 415.803 98.0056 415.025C98.9389 414.639 99.9351 414.427 100.945 414.401C116.957 411.756 122.97 405.675 123.972 389.29C124.91 373.99 125.123 358.636 125.274 343.302C125.479 322.499 125.198 301.692 125.453 280.892C125.526 277.533 126.548 274.264 128.402 271.462C135.212 261.697 142.513 252.274 149.653 242.742C150.469 241.651 151.424 240.668 152.32 239.634L153.758 239.971Z" fill="url(#paint0_linear_20_11)"/>
|
||||
<path d="M98.0439 300.371C105.024 303.78 111.246 307.055 117.667 309.88C122.608 312.061 123.344 315.412 121.693 320.441C113.901 316.079 106.288 312.052 98.9274 307.607C94.4528 304.903 91.0847 305.439 86.9966 308.685C75.5761 317.757 62.7848 324.06 47.9501 325.045C43.738 325.39 39.4983 325.142 35.3552 324.308C22.9008 321.547 18.1619 309.953 24.8314 299.068C29.7557 291.03 37.2543 287.211 46.4824 286.586C59.4585 285.725 72.4326 288.298 84.0975 294.046C89.9369 296.872 93.1087 295.408 96.9955 291.045C113.526 272.486 126.277 251.446 137.533 229.497C149.69 205.79 161.202 181.751 172.983 157.854C173.417 156.976 173.726 156.037 174.409 154.34L157.914 157.825C156.01 153.407 157.086 150.701 160.943 150.473C176.924 149.529 183.123 138.512 189.326 125.757C205.315 92.8801 222.921 60.7941 244.916 31.4663C251.859 22.209 260.45 14.0351 269.07 6.22845C276.779 -0.752984 286.533 -2.05814 295.55 3.29337C304.862 8.81938 306.24 18.4414 304.761 28.4064C301.974 47.1124 292.909 63.0458 281.976 77.9842C262.542 104.533 237.702 124.826 208.566 139.891C204.411 141.885 201.091 145.277 199.188 149.473C177.772 194.44 153.505 237.696 121.007 275.789C113.955 284.056 106.184 291.69 98.0439 300.371ZM207.818 131.288C240.324 114.799 266.609 91.8574 285.222 60.759C291.675 49.9736 296.915 38.6198 298.14 25.8579C298.746 19.6096 298.343 13.4123 292.643 9.55011C286.583 5.44075 280.242 6.76288 274.463 10.5596C271.543 12.3586 268.913 14.5894 266.661 17.1762C262.089 22.7968 257.164 28.3701 253.841 34.7238C243.938 53.6576 234.551 72.869 225.331 92.1494C219.167 105.034 213.635 118.228 207.818 131.288ZM85.2222 301.492C71.5486 295.863 58.5125 291.511 44.6923 293.809C39.7231 294.636 34.3237 298.485 31.0223 302.511C25.7877 308.895 29.2456 316.645 37.384 317.786C55.5384 320.332 70.6227 313.295 85.2222 301.492Z" fill="url(#paint1_linear_20_11)"/>
|
||||
<path d="M125.327 241.641C125.327 239.46 125.327 237.279 125.327 235.097C125.311 204.41 125.448 173.721 125.174 143.036C125.096 135.374 124.302 127.735 122.803 120.221C120.359 107.946 114.028 102.812 101.562 101.602C100.557 101.672 99.5469 101.556 98.5841 101.258C97.3702 100.447 96.2384 99.5204 95.2051 98.4898C96.1501 97.4058 97.238 96.4552 98.4387 95.6637C99.601 95.3249 100.822 95.234 102.021 95.3971C127.063 95.3777 152.105 95.3717 177.146 95.379C178.756 95.2849 180.371 95.4452 181.931 95.854C182.843 96.1582 184.12 97.5506 184.001 98.2413C183.592 99.4341 182.804 100.46 181.757 101.163C181.225 101.593 180.205 101.481 179.402 101.51C160.597 102.204 155.847 114.179 155.162 127.453C154.229 145.578 154.532 163.766 153.739 181.902C153.565 187.67 152.289 193.352 149.982 198.641C143.87 211.808 136.867 224.563 130.175 237.459C129.301 239.144 128.165 240.694 127.145 242.307L125.327 241.641Z" fill="url(#paint2_linear_20_11)"/>
|
||||
<path d="M119.372 6.16418C142.823 6.72406 165.753 9.38286 187.059 20.0713C196.221 24.6678 204.302 30.6859 209.83 39.4608C210.948 41.235 210.393 44.0658 210.609 46.4035C208.575 45.3661 205.815 44.8535 204.622 43.2054C196.546 32.0565 185.435 25.2471 172.648 21.3995C131.793 9.10778 91.4337 9.59373 52.2223 27.8708C39.8997 33.6227 29.1163 42.2137 20.7567 52.939C-1.94375 81.7348 3.51025 117.232 34.0511 137.503C52.0588 149.455 72.5183 153.884 93.6626 155.569C101.698 156.209 109.817 155.738 117.876 156.192C119.434 156.279 120.884 158.309 122.384 159.442C120.915 160.703 119.466 163.041 117.975 163.066C86.0404 163.629 54.7251 160.508 27.8033 141.23C-5.48877 117.388 -9.20959 75.535 18.4079 45.1577C39.5328 21.9218 66.8061 11.7036 97.0573 7.84504C104.45 6.8998 111.933 6.70346 119.372 6.16418Z" fill="url(#paint3_linear_20_11)"/>
|
||||
<path d="M303.233 396.288C295.374 395.775 288.243 395.561 281.175 394.805C238.005 390.258 196.713 374.76 161.213 349.783C159.009 348.252 157.536 344.795 156.982 341.986C156.263 338.338 156.806 334.442 156.806 329.466C159.91 330.597 162.111 331.19 164.128 332.164C190.479 344.872 216.472 358.395 243.262 370.094C259.053 376.99 276.046 381.183 292.608 386.232C297.549 387.741 301.362 389.74 303.233 396.288Z" fill="url(#paint4_linear_20_11)"/>
|
||||
<path d="M346.53 390.079C359.013 383.559 369.921 379.075 379.471 372.603C394.314 362.545 404.268 348.43 407.961 330.524C412.622 307.924 402.386 289.027 380.501 281.786C358.055 274.361 335.325 274.981 313.747 284.873C306.354 288.266 300.581 295.122 293.944 300.235C292.14 301.375 290.229 302.334 288.237 303.1C288.374 300.784 287.58 297.525 288.807 296.314C294.489 290.705 300.003 284.262 306.905 280.681C331.42 267.944 357.468 266.758 383.26 275.729C409.542 284.869 421.457 308.648 413.778 335.398C405.197 365.29 384.04 383.063 355.128 392.292C353.072 392.944 350.211 391.092 346.53 390.079Z" fill="url(#paint5_linear_20_11)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_20_11" x1="245.257" y1="95.1115" x2="245.257" y2="420.503" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#54330F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_20_11" x1="163.538" y1="0" x2="163.538" y2="325.196" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#54330F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_20_11" x1="139.607" y1="95.3184" x2="139.607" y2="242.307" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#54330F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_20_11" x1="105.305" y1="6.16418" x2="105.305" y2="163.126" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#54330F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_20_11" x1="229.921" y1="329.466" x2="229.921" y2="396.288" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#54330F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_20_11" x1="352.093" y1="269.901" x2="352.093" y2="392.427" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#54330F"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 715 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 987 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 516 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 456 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
@@ -0,0 +1,5 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;700&display=swap");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
+7
-3
@@ -1,9 +1,13 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import Navbar from "../Components/Navbar/Navbar";
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
<Navbar />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
@@ -0,0 +1,17 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"custom-bglight": "#1C1C1F",
|
||||
"custom-bgdark": "#06060B",
|
||||
"text-gold": "#FACC97",
|
||||
},
|
||||
fontFamily: {
|
||||
baijam: ['"Bai Jamjuree"', "sans-serif"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Reference in New Issue
Block a user