back to top and header menu updated

This commit is contained in:
parsa aghaei 2024-09-29 16:42:31 +03:30
parent 805acf9a2b
commit b2186ed379
8 changed files with 16 additions and 15 deletions

View File

@ -43,7 +43,7 @@ export default function AboutMe() {
return (
<div
className="my-10 flex max-w-[90%] w-full flex-wrap items-center justify-center gap-10"
className="my-10 flex max-w-[90%] w-full flex-wrap items-center justify-center gap-10 pt-[120px]"
id="about-me"
>
<div className="flex flex-col w-full items-center md:w-[50%]">

View File

@ -3,7 +3,7 @@ import React from "react";
export default function Contact() {
return (
<div
className="mt-10 flex w-full max-w-[80%] flex-col gap-[30px]"
className="mt-10 flex w-full max-w-[80%] flex-col gap-[30px] pt-[120px]"
id="contact"
>
<h2 className="text-center text-[35px] font-[800] text-[#000]">

View File

@ -5,7 +5,7 @@ import BurgerButton from "../burger-button/page";
export default function Header() {
return (
<div
className="relative z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
className="fixed z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
id="header"
>
<div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal">
@ -16,40 +16,40 @@ export default function Header() {
Parsa Aghayi
</p>
</div>
<ul className="fixed left-[50%] right-[45%] top-3 hidden items-center justify-center rounded p-2 lg:flex">
<ul className="hidden items-center justify-center rounded p-2 lg:flex">
<a
href="/#home"
className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00]"
>
Home
</a>
<a
href="/#about-me"
className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00]"
>
About Me
</a>
<a
href="/#services"
className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00]"
>
Services
</a>
<a
href="/#projects"
className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00]"
>
Projects
</a>
<a
href="/#testimonials"
className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00]"
>
Testimonials
</a>
<a
href="/#contact"
className="mx-2 whitespace-nowrap rounded-lg border bg-[rgba(0,0,0,0.1)] px-2 py-[10px] text-[18px] font-[600] shadow-lg hover:border-[#FD6F00] hover:text-[#FD6F00]"
className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00]"
>
Contact
</a>

View File

@ -74,7 +74,7 @@ export default function MyProjects() {
return (
<div
className="flex w-full max-w-[90%] flex-wrap items-center justify-center"
className="flex w-full max-w-[90%] flex-wrap items-center justify-center pt-[50px]"
id="projects"
>
<h2 className="my-10 text-[55px] font-[800] text-black">My Projects</h2>

View File

@ -78,7 +78,7 @@ export default function Services() {
return (
<div
className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
className="flex w-full max-w-[90%] flex-col flex-wrap items-center pt-[100px]"
id="services"
>
<h2 className="mb-10 text-[55px] font-[800] text-black">Services</h2>

View File

@ -80,7 +80,7 @@ export default function Testimonials() {
return (
<div
className="flex w-full max-w-[90%] flex-wrap justify-center"
className="flex w-full max-w-[90%] flex-wrap justify-center pt-[100px]"
id="testimonials"
>
<h2 className="text-[55px] font-[800] text-black">Testimonials</h2>

View File

@ -28,8 +28,9 @@ export default function RootLayout({
className={`${geistSans.variable} relative flex w-full flex-col items-center justify-between antialiased`}
>
<div className="scroll-watcher" id="top"></div>
<div className="absolute top-0 left-0 opacity-0" id="here-is-top"></div>
<a
href="/#header"
href="/#here-is-top"
className="scroll-to-top fixed bottom-10 right-5 flex h-[50px] w-[50px] items-center justify-center rounded-full border-2 bg-[#fd6f00] p-5 text-center text-[25px] font-[800] text-white hover:border-[#f3a66b] sm:bottom-[100px] sm:right-10"
id="back-to-top"
>

View File

@ -10,7 +10,7 @@ export default function Home() {
<div className="my-15 flex w-full max-w-[1420px] flex-col items-center gap-[50px]">
{/* Home */}
<div
className="xl:gap-15 flex w-full flex-wrap justify-center gap-10 lg:flex-nowrap 2xl:gap-20"
className="xl:gap-15 flex w-full flex-wrap justify-center gap-10 lg:flex-nowrap 2xl:gap-20 pt-[120px]"
id="home"
>
{/* start */}