Skip to content

Change FontSize #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gladson-Lalu wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Change FontSize #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5681dbd
Add gsap
Gladson-Lalu Mar 26, 2023
1ce7f54
change header font-size
Gladson-Lalu Mar 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 81 additions & 64 deletions src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,84 @@
import React from 'react'
import Link from 'next/link'
import { motion } from 'framer-motion'
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";

export default function Header() {
return (
<header className='flex flex-row sticky top-0 border-b border-gray z-10 bg-soothing_black text-white py-3 items-center justify-center w-full gap-12 text-lg font-ibm uppercase'>
<motion.div
initial={{
x: -500,
opacity: 0,
scale: .3
}}
animate={{
x: 0,
opacity: 1,
scale: 1,
}}
transition={{
duration: 1,
}}
className='hidden md:flex flex-row gap-12'>
<Link className='hover:text-primary' href="/">Home</Link>
<Link className='hover:text-primary' href="/">Events</Link>
<Link className='hover:text-primary' href="/">Downloads</Link>
</motion.div>
<motion.div
initial={{
y: -300,
opacity: 0,
scale: .5
}}
animate={{
y: 0,
opacity: 1,
scale: 1.1,
}}
transition={{
delay: .8,
duration: .5,
}}
className='w-8 md:w-12' >
<Link href="/"><img src="/Darpan.png" alt="Logo" /></Link>
</motion.div>
<motion.div
initial={{
x: 500,
opacity: 0,
scale: .3
}}
animate={{
x: 0,
opacity: 1,
scale: 1,
}}
transition={{
duration: 1,
}}

className='hidden md:flex flex-row gap-12 items-center '>
<Link className='hover:text-primary' href="/">Gallery</Link>
<Link className='hover:text-primary' href="/">Contact</Link>
<Link className='text-primary' href="/">Register</Link>
</motion.div>
</header>
)
return (
<header className="flex flex-row sticky top-0 border-b border-gray z-10 bg-soothing_black text-white py-3 items-center justify-center w-full gap-12 !text-[.8rem] font-ibm uppercase tracking-[.08rem] font-semibold">
<motion.div
initial={{
x: -500,
opacity: 0,
scale: 0.3,
}}
animate={{
x: 0,
opacity: 1,
scale: 1,
}}
transition={{
duration: 1,
}}
className="hidden md:flex flex-row gap-12"
>
<Link className="hover:text-primary" href="/">
Home
</Link>
<Link className="hover:text-primary" href="/">
Events
</Link>
<Link className="hover:text-primary" href="/">
Downloads
</Link>
</motion.div>
<motion.div
initial={{
y: -300,
opacity: 0,
scale: 0.5,
}}
animate={{
y: 0,
opacity: 1,
scale: 1.1,
}}
transition={{
delay: 0.8,
duration: 0.5,
}}
className="w-8 md:w-12"
>
<Link href="/">
<Image width={25} height={25} src="/Darpan.png" alt="Logo" />
</Link>
</motion.div>
<motion.div
initial={{
x: 500,
opacity: 0,
scale: 0.3,
}}
animate={{
x: 0,
opacity: 1,
scale: 1,
}}
transition={{
duration: 1,
}}
className="hidden md:flex flex-row gap-12 items-center "
>
<Link className="hover:text-primary" href="/">
Gallery
</Link>
<Link className="hover:text-primary" href="/">
Contact
</Link>
<Link className="text-primary" href="/">
Register
</Link>
</motion.div>
</header>
);
}
124 changes: 78 additions & 46 deletions src/components/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,84 @@
import React from 'react'
import Image from 'next/image'

import React from "react";
import Image from "next/image";
import { gsap, Power4 } from "gsap";
function Hero() {
//use Gsap to animate the hero section
const title1 = React.useRef(null);
const title2 = React.useRef(null);
const title3 = React.useRef(null);

React.useEffect(() => {
gsap.fromTo(
title1.current,
{ y: -100, opacity: 0 },
{ y: 0, opacity: 1, duration: 1, ease: Power4.easeOut, delay: 0.5 }
);
gsap.fromTo(
title2.current,
{ y: -100, opacity: 0 },
{ y: 0, opacity: 1, duration: 1, ease: Power4.easeOut, delay: 0.8 }
);
gsap.fromTo(
title3.current,
{ y: -100, opacity: 0 },
{ y: 0, opacity: 1, duration: 1, ease: Power4.easeOut, delay: 1.1 }
);
}, []);

return (
<div className='hero h-[100vh] uppercase flex flex-col justify-between md:gap-10 md:h-fit'>
<Image
src="/line_spinner.svg"
width={110}
height={110}
alt="spinner"
className="relative left-10 top-5 animate-spin"
/>
<div className='hero-content'>
<h1 className='hero-text-1 font-clash'>College of Engineering Aranmula Presents</h1>
<div className='hero-text-2 font-chakra flex flex-row gap-5'>
<span>DARPAN</span>
<span className='text-primary text-stroke-black '>2023</span>
</div>
<span className='hero-text-3 font-clash'>TECH FEST</span>
</div>
return (
<div className="hero h-[100vh] uppercase flex flex-col justify-between md:gap-10 md:h-fit">
<Image
src="/line_spinner.svg"
width={110}
height={110}
alt="spinner"
className="relative left-10 top-5 animate-spin"
/>
<div className="hero-content">
<h1 className="hero-text-1 font-clash opacity-0" ref={title1}>
College of Engineering Aranmula Presents
</h1>
<div
className="hero-text-2 font-chakra flex flex-row gap-5 opacity-0 "
ref={title2}
>
<span>DARPAN</span>
<span className="text-primary text-stroke-black ">2023</span>
</div>
<span className="hero-text-3 font-clash opacity-0" ref={title3}>
TECH FEST
</span>
</div>

<div className='date flex justify-between relative'>
<div className='flex flex-col text-2xl absolute left-5 top-10 md:text-3xl md:left-8 md:top-8 text-white z-10'>
<span className='font-chakra font-medium'>2023 <span className='font-clash font-semibold'>April</span></span>
<span className='flex gap-2 font-semibold'>17
<b className='text-base font-medium'>TH</b>
18
<b className='text-base font-medium'>TH</b>
</span>
</div>
<Image
src="/Event date.png"
width={250}
height={250}
alt="Event-Date"
className="relative w-48 h-24 md:w-56 left-[-2px] bottom-[-30px] md:left-[-2px] md:bottom-[-15px] z-0"
/>
<Image
src="/line_spinner.svg"
width={110}
height={110}
alt="spinner"
className="relative right-10 bottom-10 animate-spin"
/>
</div>
<div className="date flex justify-between relative">
<div className="flex flex-col text-2xl absolute left-5 top-10 md:text-3xl md:left-8 md:top-8 text-white z-10">
<span className="font-chakra font-medium">
2023 <span className="font-clash font-semibold">April</span>
</span>
<span className="flex gap-2 font-semibold">
17
<b className="text-base font-medium">TH</b>
18
<b className="text-base font-medium">TH</b>
</span>
</div>
)
<Image
src="/Event date.png"
width={250}
height={250}
alt="Event-Date"
className="relative w-48 h-24 md:w-56 left-[-2px] bottom-[-30px] md:left-[-2px] md:bottom-[-15px] z-0"
/>
<Image
src="/line_spinner.svg"
width={110}
height={110}
alt="spinner"
className="relative right-10 bottom-10 animate-spin"
/>
</div>
</div>
);
}

export default Hero
export default Hero;
14 changes: 7 additions & 7 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import Head from "next/head";
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import About from "@/components/About";
import Marque from "@/components/Marque"
import Marque from "@/components/Marque";
import Footer from "@/components/Footer";
import { motion } from "framer-motion";
// import { motion } from "framer-motion";

const Home = () => {
return (
Expand All @@ -16,7 +16,7 @@ const Home = () => {
</Head>
<Header />

<motion.section id="hero"
{/* <motion.section id="hero"
initial={{
margin: 0,
}}
Expand All @@ -28,12 +28,12 @@ const Home = () => {
duration: 1,
}}>
<Hero />
</motion.section>
</motion.section> */}
<Hero />

<Marque />

<section id="about"
className="about">
<section id="about" className="about">
<About />
</section>

Expand All @@ -42,7 +42,7 @@ const Home = () => {
{/*faq*/}

{/*footer*/}
<Footer/>
<Footer />
</div>
);
};
Expand Down
Loading