"Landing and fields responsive"

ASHMITA489 · Oct 2, 2023 · 47349c7 · 47349c7
1 parent 5da197c
commit 47349c7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/components/Fields.jsx b/components/Fields.jsx
@@ -3,31 +3,31 @@ import Image from "next/image";
 
 function Fields() {
   return (
-    <div className="p-20 relative mx-auto">
-      <p className="text-6xl font-semibold text-center">FIELDS WE WORK IN</p>
+    <div className="md:px-5 w-[95%] lg:w-[90%] relative mx-auto lg:mt-20 md:mt-[100px]">
+      <p className="text-2xl     font-semibold text-center">FIELDS WE  WORK IN</p>
       {/* Web Development */}
-      <div className="grid grid-cols-2 items-center py-5">
-        <div className="w-10/12">
-          <p className="font-semibold text-6xl mb-5">Development</p>
+      <div className="grid grid-cols-2 mx-auto  grid-col my-5  gap-5 md:grid-cols-1 items-center py-5">
+        <div className="w-10/12 ">
+          <p className="font-semibold text-6xl  md:text-xl lg:mb-5">Development</p>
           <p>
             Development is the process of creating and maintaining software and
             computer programs. Dev encompasses everything from coding, to
             maintenance to debugging. The open source community is one of the
             most popular &quot;developer&quot; communities
           </p>
         </div>
-        <div>
+        <div className="mx-auto">
           <Image src="/webdev-image.png" width={400} height={400} alt="" />
         </div>
       </div>
 
       {/* DSA AND CP */}
-      <div className="grid grid-cols-2 items-center py-5 bg-gray-100">
-        <div>
+      <div className="grid grid-cols-2 gap-4 my-5  md:grid-cols-1 md:p-2 items-center py-5 bg-gray-100">
+        <div className="md:mx-auto">
           <Image src="/dsacp-image.png" width={400} height={400} alt="" />
         </div>
-        <div className="w-10/12">
-          <p className="font-semibold text-6xl mb-5">DSA And CP</p>
+        <div className="w-10/12 ">
+          <p className="font-semibold md:text-xl text-6xl lg:mb-5">DSA And CP</p>
           <p>
             DSA (Data Structures and Algorithms) is the study of organizing and
             manipulating data efficiently to perform complex computations
@@ -39,9 +39,9 @@ function Fields() {
       </div>
 
       {/* Machine Learning */}
-      <div className="grid grid-cols-2 items-center py-5">
+      <div className="grid grid-cols-2 md:grid-cols-1 gap-5  items-center py-5">
         <div className="w-10/12">
-          <p className="font-semibold text-6xl mb-5">Machine Learning</p>
+          <p className="font-semibold text-6xl md:text-xl lg:mb-5">Machine Learning</p>
           <p>
             Machine learning is a sub domain of artificial intelligence that
             lets computers learn from data and make predictions or decisions for
@@ -51,7 +51,7 @@ function Fields() {
             bioinformatics.
           </p>
         </div>
-        <div>
+        <div className="mx-auto">
           <Image src="/ml-image.png" width={400} height={400} alt="" />
         </div>
       </div>

diff --git a/components/Landing.jsx b/components/Landing.jsx
@@ -3,12 +3,12 @@ import { Player } from "@lottiefiles/react-lottie-player";
 
 function Landing() {
   return (
-    <div className="px-20 h-[90vh] flex justify-center items-center">
+    <div className=" mt-5 w-[95%] mx-auto h-[100%] flex justify-center items-center">
 
       {/* Landing text */}
       <div className="flex justify-center items-center">
         <div className="w-4/5 flex justify-center flex-col">
-          <p className="font-semibold text-5xl mb-10 leading-[4.8rem]">
+          <p className="font-semibold text-5xl md:text-3xl mb-10 md:mb-5 leading-[4.8rem] ">
             DEVELOPER STUDENT CLUBS <br />{" "}
             <strong className="font-bold">
               <span className="text-red-400">Ja</span>

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -10,7 +10,7 @@ const Navbar = () => {
       </Link>
 
       {/* Nav Links */}
-      <div className="flex justify-between items-center w-1/3">
+      <div className="flex justify-between items-center w-1/3 md:hidden">
         <Link href="/events">
           <p className="text-2xl hover:text-gray-400 text-red-400">Events</p>
         </Link>