Skip to content

Commit

Permalink
4k css changes. hope it doesn't get worse
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhaskar1001101
bhaskar1001101 committed Jul 22, 2024
1 parent c168890 commit 89077b8
Show file tree
Hide file tree
Showing 9 changed files with 111 additions and 104 deletions.
8 changes: 4 additions & 4 deletions src/components/Cp/Cp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,12 @@ const SimpleSlider = ({ images, direction }) => {
}}
>
{images.map((image, index) => (
<div key={index} className="slide my-3 sm:my-6 mx-4 sm:mx-10 w-[200px] sm:w-[30vw] md:w-[25vw] xl:w-[20vw]">
<div key={index} className="slide my-3 sm:my-6 mx-4 sm:mx-10 w-[200px] sm:w-[30vw] md:w-[25vw] xl:w-[20vw] 3xl:w-[20vw]">
<img
// adding the extra text to get it to display on github pages (only for dev) (remove before deploy)
src={(window.location.href == "https://iiitkalyanifosc.github.io/Hackathon-website-2024/" ? "/Hackathon-website-2024" : "") + image.src}
alt={image.alt}
className="slide-image"
className="slide-image 3xl:w-[15vw]"
style={{
transform: `translateY(${bgPosition.y}px)`
}}
Expand All @@ -82,8 +82,8 @@ const SimpleSlider = ({ images, direction }) => {
const Cp = () => {
return (
<div className="sliders-wrapper mt-4">
<div className="w-full max-md:px-5 max-xl:px-10 xl:w-[1280px] self-center mb-0 sm:mb-8">
<h1 className='text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>
<div className="w-full max-md:px-5 max-xl:px-10 xl:w-[1280px] 3xl:w-[2000px] self-center mb-0 sm:mb-8">
<h1 className='text-2xl md:text-4xl xl:text-5xl 3xl:text-7xl text-[#9E9E9E]'>
$ sudo apt-get i&nbsp;<span className='text-white'>commun<span className='text-red'>1</span>ty partners</span>
</h1>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Faq/Faq.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,16 +56,16 @@ const Faq = () => {
return (
<section id='faq' className='max-[768px]:pt-[60px] pt-[95px]'>
<div className="relative w-full flex items-start justify-center">
<div className="relative z-10 text-left mx-4 md:mx-8 lg:mx-12 xl:mx-20 w-full max-w-[1280px]">
<h1 className="text-[#9E9E9E] text-2xl md:text-4xl xl:text-5xl m-0">
<div className="relative z-10 text-left mx-4 md:mx-8 lg:mx-12 xl:mx-20 w-full max-w-[1280px] 3xl:max-w-[2000px]">
<h1 className="text-[#9E9E9E] text-2xl md:text-4xl xl:text-5xl 3xl:text-7xl m-0">
$ ./<span id="heading-rules" className="text-white">FAQ</span>
</h1>
<div className="relative z-10 w-auto p-6 rounded-lg">
<div className="sm:mt-4">
<div id="accordionFaq">
{faqData.map((faq, index) => (
<div key={index} className="mb-2 sm:mb-4">
<h1 className="text-white text-xl sm:text-2xl xl:text-3xl m-0 flex">
<div key={index} className="mb-2 sm:mb-4 3xl:mb-8">
<h1 className="text-white text-xl sm:text-2xl xl:text-3xl 3xl:text-5xl m-0 flex">
<button
onClick={() => handleToggle(index)}
className={`faq-collapsible text-[#E5B567] mr-2 h-[50%] group relative flex items-center justify-center rounded-none border-0 transition hover:z-[2] focus:z-[3] focus:outline-none ${openIndex === index ? "text-[#169B81]" : ""}`}
Expand All @@ -78,7 +78,7 @@ const Faq = () => {
<div
className={`overflow-hidden transition-all duration-500 ease-in-out ${openIndex === index ? 'max-h-[1000px]' : 'max-h-0'}`}
>
<div className="text-[#D6D6D6] text-left text-xl sm:text-2xl pl-8 sm:pl-10 2xl:pl-12 mt-2">
<div className="text-[#D6D6D6] text-left text-xl sm:text-2xl 3xl:text-4xl pl-8 sm:pl-10 2xl:pl-12 mt-2">
{faq.answer}
</div>
</div>
Expand Down
20 changes: 10 additions & 10 deletions src/components/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,19 @@ function Footer() {
></div>
<div className="flex flex-col lg:flex-row justify-center lg:justify-evenly items-center gap-5">
<div className="address footerelements text-center">
<h1 className="footerheading text-2xl md:text-4xl md:mt-0 m-0 text-heading-footer">
<h1 className="footerheading text-2xl md:text-4xl 3xl:text-6xl md:mt-0 m-0 text-heading-footer">
ADDRESS
</h1>
<p className="footercontent text-xl md:text-2xl addresscontent text-[#BEBEBE] hover:text-white">
<p className="footercontent text-xl md:text-2xl 3xl:text-4xl addresscontent text-[#BEBEBE] hover:text-white">
<a href="https://goo.gl/maps/PPd7UW3EXEUvu7po7" target="_blank" rel="noopener noreferrer">
<span className="text-style-footer">APC Ray Lecture Hall Complex <br /></span>
<span className="text-style-footer">IISER Kolkata</span>
</a>
</p>
</div>
<div className="resources footerelements text-center">
<h1 className="footerheading text-2xl md:text-4xl m-0 text-heading-footer">RESOURCES</h1>
<a href="https://drive.google.com/file/d/1thr3gYMwAX-h0DmaEIGyba44lG53hRxg/view?usp=sharing" className="footercontent text-xl md:text-2xl resourcecontent text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
<h1 className="footerheading text-2xl md:text-4xl 3xl:text-6xl m-0 text-heading-footer">RESOURCES</h1>
<a href="https://drive.google.com/file/d/1thr3gYMwAX-h0DmaEIGyba44lG53hRxg/view?usp=sharing" className="footercontent text-xl md:text-2xl 3xl:text-4xl resourcecontent text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
Sponsorship Brochure<br />
</a>
{/* <a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf" className="footercontent text-xl md:text-2xl resourcecontent cursor-pointer text-[#BEBEBE] hover:text-white" target="_blank" rel="noopener noreferrer text-style-footer">
Expand All @@ -63,22 +63,22 @@ function Footer() {
</a> */}
</div>
<div className="social text-center xl:text-left">
<h1 className="footerheading footerelements text-center text-2xl md:text-4xl m-0 mb-2 text-heading-footer">
<h1 className="footerheading footerelements text-center text-2xl md:text-4xl 3xl:text-6xl m-0 mb-2 text-heading-footer">
STAY CONNECTED
</h1>
<div className="flex justify-center xl:justify-between gap-7 md:gap-10">
<a href="https://www.instagram.com/status._code_1?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==" target="_blank" rel="noopener noreferrer">
<img className="sociallogos insta_logo brightness-0 invert-[1] hover:filter-none w-auto h-auto max-w-[30px]" src={instaLogo} alt="insta_logo" />
<img className="sociallogos insta_logo brightness-0 invert-[1] hover:filter-none w-auto h-auto max-w-[30px] 3xl:max-w-[60px]" src={instaLogo} alt="insta_logo" />
</a>
<a href="https://twitter.com/Status_Code_" target="_blank" rel="noopener noreferrer">
<img className="twitter_logo sociallogos brightness-0 invert-[1] hover:invert-[0.5] w-auto h-auto max-w-[30px]" src={twitterLogo} alt="twitter_logo" />
<img className="twitter_logo sociallogos brightness-0 invert-[1] hover:invert-[0.5] w-auto h-auto max-w-[30px] 3xl:w-[60px]" src={twitterLogo} alt="twitter_logo" />
</a>
<a href="https://www.linkedin.com/company/statuscode0/" target="_blank" rel="noopener noreferrer" className="relative w-[30px]">
<img className="sociallogos linkedin_logo absolute w-auto h-auto max-w-[30px] peer z-10 brightness-0 invert-[1] hover:filter-none" src={linkedinLogo} alt="linkedin_logo" />
<img className="sociallogos linkedin_logo absolute w-auto h-auto max-w-[30px] 3xl:max-w-[60px] peer z-10 brightness-0 invert-[1] hover:filter-none" src={linkedinLogo} alt="linkedin_logo" />
<div className="w-[70%] h-[75%] absolute top-2 left-2 peer-hover:bg-white"></div>
</a>
<a href="https://discord.gg/UHwPBzy7UF" target="_blank" rel="noopener noreferrer">
<img className="sociallogos discord_logo brightness-0 invert-[1] hover:filter-none w-auto h-auto max-w-[30px]" src={discordLogo} alt="discord_logo" />
<img className="sociallogos discord_logo brightness-0 invert-[1] hover:filter-none w-auto h-auto max-w-[30px] 3xl:max-w-[60px]" src={discordLogo} alt="discord_logo" />
</a>
</div>
</div>
Expand All @@ -87,7 +87,7 @@ function Footer() {
</div>
<div className='footer-container'>
<img src={footer} alt="" className='img-background' />
<h1 className="m-0 text-xl xl:text-2xl text-bottom-footer">© 2024 IIIT Kalyani</h1>
<h1 className="m-0 text-xl xl:text-2xl 3xl:text-4xl text-bottom-footer">© 2024 IIIT Kalyani</h1>
</div>
</div>
</>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,19 @@ export default function Navbar(){
};
return(
<section className="w-full relative">
<nav className="fixed min-[3840px]:px-[250px] px-7 z-30 flex md:justify-between bg-gradient-to-b max-[768px]:space-x-5 from-[#040842] to-[#040842] w-full h-[96px] min-[3840px]:h-[250px] max-[540px]:h-[60px] mt-0 bg-blue-800 font-vt323 leading-[96px] ">
<nav className="fixed 3xl:px-[250px] px-7 z-30 flex md:justify-between bg-gradient-to-b max-[768px]:space-x-5 from-[#040842] to-[#040842] w-full h-[96px] 3xl:h-[250px] max-[540px]:h-[60px] mt-0 bg-blue-800 font-vt323 leading-[96px] ">

<img className="justify-start min-[3840px]:w-[300px] max-[450px]:w-[86px] max-[540px]:w-[90px] max-[640px]:w-[100px] sm:w-[107px] md:w-[88px] lg:w-[107px] xl:w-[120px] " src={sc1_logo}></img>
<img className="justify-start 3xl:w-[300px] max-[450px]:w-[86px] max-[540px]:w-[90px] max-[640px]:w-[100px] sm:w-[107px] md:w-[88px] lg:w-[107px] xl:w-[120px] " src={sc1_logo}></img>

<ul className=" justify-center flex min-[3840px]:text-[80px] min-[3840px]:space-x-[7rem] xl:space-x-[4rem] lg:space-x-[3rem] sm:space-x-[1.6rem] sm:text-[22px] min-[540px]:space-x-[1.6rem] min-[540px]:text-[22px] md:text-[25px] md:space-x-5 lg:text-[1.8 rem] xl:text-[2.3rem] text-white items-center max-[768px]:hidden ">
<ul className=" justify-center flex 3xl:text-6xl 3xl:space-x-[7rem] xl:space-x-[4rem] lg:space-x-[3rem] sm:space-x-[1.6rem] sm:text-[22px] min-[540px]:space-x-[1.6rem] min-[540px]:text-[22px] md:text-[25px] md:space-x-5 lg:text-[1.8 rem] xl:text-[2.3rem] text-white items-center max-[768px]:hidden ">
<a onClick={scrollToSchedule} ><li className="hover:text-[#c3c3c3]">SCHEDULE</li></a>
<a onClick={scrollToTracks}><li className="hover:text-[#c3c3c3]">TRACKS</li></a>
<a onClick={scrollToSponsors}><li className="hover:text-[#c3c3c3]">SPONSORS</li></a>
<a onClick={scrollToFaq}><li className="hover:text-[#c3c3c3]">FAQ</li></a>
<a onClick={scrollToFooter}><li className="hover:text-[#c3c3c3]">CONTACT US</li></a>

</ul>
<img className= "justify-end min-[3840px]:w-[400px] md:w-[110px] lg:w-[154px] xl:w-[175px] max-[768px]:hidden" src={iiit_logo}></img>
<img className= "justify-end 3xl:w-[400px] md:w-[110px] lg:w-[154px] xl:w-[175px] max-[768px]:hidden" src={iiit_logo}></img>
<img className="min-[768px]:hidden sm:w-[50px] max-[450px]:w-[35px] max-[540px]:w-[40px] max-[640px]:w-[50px]" src={iiit_logo_mobile}></img>

</nav>
Expand Down
Loading

0 comments on commit 89077b8

Please sign in to comment.