slider, navbar, logo repaired

khubaibkm · Mar 5, 2024 · d32835f · d32835f
1 parent a79dae0
commit d32835f
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 8 deletions.
diff --git a/public/reigs.png b/public/reigs.png
diff --git a/src/components/HowTo.jsx b/src/components/HowTo.jsx
@@ -45,7 +45,7 @@ const HowTo = () => {
               >
                 <div className={`icon-bx-wraper style-1 ${item.bgColor}`}>
                   <div className="icon-media">
-                    <img src="/vite.svg" alt="image" className="rounded" />
+                    <img src="/favicon-removebg-preview.png" width={"60px"} alt="image" className="rounded" />
                   </div>
                   <div
                     className="icon-content mt-5"

diff --git a/src/components/Navbar.css b/src/components/Navbar.css
@@ -52,8 +52,29 @@
 }
 
 @media (max-width: 800px) {
+    .signt {
+        margin-left: 0rem !important;
+        width: 6rem;
+        margin-bottom: .5rem;
+    }
+
     .signn {
         margin-left: 0rem !important;
-        width: 13rem;
+        width: 9rem;
+        margin-top: .5rem;
+    }
+
+    .signn1 {
+        margin-left: 0rem !important;
+        width: 12.5rem;
+    }
+
+    .signn2 {
+        margin-left: 0rem !important;
+        width: 11rem;
+    }
+
+    .logoo {
+        width: 160px;
     }
 }
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -78,6 +78,7 @@ export const Navbar = () => {
       <div className="container-fluid">
         <Link to="/" className="navbar-brand">
           <img
+            className="logoo"
             style={{ marginLeft: "0.1rem" }}
             width={"225px"}
             src="/logo.svg"
@@ -136,10 +137,10 @@ export const Navbar = () => {
                 </Link>
               )}
             </li>
-            <li className="nav-item">
+            <li signn className="nav-item">
               {isSignedIn ? (
                 <a
-                  className="nav-link bg-secondary rounded text-white px-3 py-2 mx-2 "
+                  className="signt nav-link bg-secondary rounded text-white px-3 py-2 mx-2 "
                   href="#"
                   onClick={handleSignOut}
                 >
@@ -159,7 +160,7 @@ export const Navbar = () => {
               {isSignedIn ? null : (
                 <Link
                   to="/signup"
-                  className="signn  nav-link bg-primary rounded text-white px-3 py-2 mx-2 button-animated"
+                  className="signn1  nav-link bg-primary rounded text-white px-3 py-2 mx-2 button-animated"
                   onClick={() => closeNavbar()}
                 >
                   Alumni Registration
@@ -170,7 +171,7 @@ export const Navbar = () => {
               {isSignedIn && !hasFilledOutForm && (
                 <Link
                   to="/on_boarding_form"
-                  className="nav-link bg-primary rounded text-white px-3 py-2 mx-2 button-animated"
+                  className="signn2 nav-link bg-primary rounded text-white px-3 py-2 mx-2 button-animated"
                   onClick={() => closeNavbar()}
                 >
                   onboarding form

diff --git a/src/components/Sliderr.css b/src/components/Sliderr.css
@@ -59,12 +59,15 @@ body {
     width: 100%;
     display: block;
     margin: 0 auto;
+    object-fit: cover;
+    border-radius: 50%;
 }
 
+
 .slider-image {
     width: 80%;
     height: 80%;
-    border-radius: 100%;
+    border-radius: 50%;
     margin-bottom: 10px;
     margin: 0 auto;
 }

diff --git a/src/components/Sliderr.jsx b/src/components/Sliderr.jsx
@@ -66,6 +66,13 @@ const SliderComponent = () => {
     focusOnSelect: true,
 
     responsive: [
+      {
+        breakpoint: 1600,
+        settings: {
+          slidesToShow: 4,
+          centerPadding: "5%",
+        },
+      },
       {
         breakpoint: 1400,
         settings: {
@@ -112,7 +119,7 @@ const SliderComponent = () => {
       </div>
       <div
         className="slider-container"
-        style={{margin: "40px 0px", overflow: "hidden"}}
+        style={{margin: "40px 40px"}}
       >
         <Slider {...settings} className="autoplay-slider">
           {profiles.slice(0, 9).map((profile) => (