#The header isn't responsive

14 messages · Page 1 of 1 (latest)

wild sonnetBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
warped basin
#

what should i do?

warped basin
#

?

mighty hatch
#

What do you expect to happen exactly?

warped basin
mighty hatch
#

You want the header to be 'taller'?

warped basin
#

i want to seprate header and main text

mighty hatch
#

But there is no text in the code you sent

warped basin
#

i load header here:

//next image
import Image from 'next/image';

//components
import ParticlesContainer from "../components/ParticlesContainer";
//import ParticlesBtn from "../components/projectsBtn";
import Avatar from "../components/Avatar";

//formar motion
import {motion} from 'framer-motion';

//variations
import {fadeIn} from '../variants';
import ProjectsBtn from '../components/projectsBtn';

const Home = () => {
  return <div className='bg-primary/60 h-full'>
    {/* text */}
    <div className='w-full h-full bg-gradient-to-r from-primary/10 via-black/30 to-black/10'>
      <div className='text-center flex-col justify-center xl:pt-40 xl:text-left h-full container mx-auto'>

        {/* title */}
        <motion.h1 
            variants={fadeIn('down', 0.2)}
            initial='hidden'
            animate='show'
            exit='hidden'
            className='h1'
          >
          I'm Shahriar<br /> a{' '} <span className='text-accent'>programmer</span>
        </motion.h1>

        {/* subtitle */}
        <motion.p 
            variants={fadeIn('down', 0.3)}
            initial='hidden'
            animate='show'
            exit='hidden'
            className='max-w-sm xl:max-w-xl mx-auto xl:mx-0 mb-10 xl:mb-16'
          >
          I'm Shahriar. I love programming and music, coding and creating new things with high motivation.
        </motion.p>

        {/* btn */}
          <div className='flex justify-center xl:hidden relative'>
            <ProjectsBtn />
          </div>
          <motion.div
            variants={fadeIn('down', 0.4)}
            initial='hidden'
            animate='show'
            exit='hidden'
            className='hidden xl:flex '
          >
            <ProjectsBtn />
          </motion.div>

      </div>
    </div>

    {/* image */}
    <div className='w-[1200px] h-full absolute right-0 bottom-0'>

      {/* bg image */}
      <div className='bg-none xl:bg-explosion xl:bg-cover xl:bg-right xl:bg-no-repeat w-full h-full absolute mix-blend-color-dodge
        translate-z-o '
      ></div>

      {/* Particles */}
      <ParticlesContainer />

      {/* Avatar img */}
      <motion.div
        variants={fadeIn('up', 0.5)}
        initial='hidden'
        animate='show'
        exit='hidden'
        transition={{duration: 1, ease: 'easeInOut'}}
        className='w-full h-full max-w-[737px] max-h-[678px] absolute bottom-32 lg:bottom-0 lg:right-[1%]'
      >
        <Avatar />
      </motion.div>

    </div>
  </div>;
};

export default Home;
warped basin