back to top and header menu updated
This commit is contained in:
parent
805acf9a2b
commit
b2186ed379
@ -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%]">
|
||||
|
||||
@ -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]">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
>
|
||||
|
||||
@ -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 */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user