responsiveness added to page

Gaurav-Verma07 · Jun 7, 2023 · f976af6 · f976af6 · vercel · Jun 11, 2023
1 parent d7f34c7
commit f976af6
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 39 deletions.
diff --git a/src/components/Blogs/Blogs.tsx b/src/components/Blogs/Blogs.tsx
@@ -17,6 +17,7 @@ import { data } from './blogContent';
 import './blogs.css';
 
 const useStyles = createStyles((theme) => ({
+
   header: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -46,9 +47,9 @@ const Blogs = () => {
 
   return (
     <>
-      <Header height={80} mb={50}>
+      <Header height={200} mb={50}>
         <Container className={classes.header}>
-          <Image src={SamparkLogo} height={100} width={100} />
+          <Image src={SamparkLogo} height={80} width={100} />
         </Container>
       </Header>
 

diff --git a/src/components/HeroSection/styles.css b/src/components/HeroSection/styles.css
@@ -27,12 +27,16 @@
   padding: 0.5rem;
   font-size: 1.5rem;
   border-radius: 0.2rem;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
+    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
   cursor: pointer;
   transition: all 0.5s;
   border: none;
 }
 .hero-section button:hover {
-  transform: scale(1.2);
+  transform: scale(1.1);
+  background-color: aquamarine;
 }
 .container {
   display: flex;

diff --git a/src/components/HomeHeader/HomeHeader.tsx b/src/components/HomeHeader/HomeHeader.tsx
@@ -55,7 +55,7 @@ const HomeHeader = () => {
   return (
     <Header height={HEADER_HEIGHT} className={classes.root} pt={30}>
       <Container className={classes.header}>
-        <Image src={SamparkLogo} height={100} width={100} />
+        <Image  src={SamparkLogo} height={80} width={100} />
         <Group spacing={5} className={classes.links}>
           {items}
           {isLoggedIn}

diff --git a/src/components/HomeHeader/styles.ts b/src/components/HomeHeader/styles.ts
@@ -20,7 +20,7 @@ const useStyles = createStyles((theme) => ({
     borderTopLeftRadius: 0,
     borderTopWidth: 0,
     overflow: 'hidden',
-
+    marginRight:'-500px',
     [theme.fn.largerThan('sm')]: {
       display: 'none',
     },
@@ -36,12 +36,15 @@ const useStyles = createStyles((theme) => ({
   links: {
     [theme.fn.smallerThan('sm')]: {
       display: 'none',
+
     },
   },
 
   burger: {
     [theme.fn.largerThan('sm')]: {
       display: 'none',
+      color:'white',
+      fontWeight:'bolder',
     },
   },
 

diff --git a/src/components/HomeOurValues/Values.css b/src/components/HomeOurValues/Values.css
@@ -29,7 +29,8 @@
 .values-content {
   padding: 1rem 2rem 1.5rem 2rem;
   margin: 0 1.5rem;
-  /* background-color: rgb(64 70 76); */
+  width: 350px;
+  height: 180px;
   border-radius: 1rem;
   color: white;
 }
@@ -74,22 +75,36 @@
   .values-box-2 {
     margin: 0 12rem 0 12rem;
   }
+  .values-content {
+    min-width: 240px;
+    height: 200px;
+  }
+  .values-box-1 {
+    margin: 3rem 3rem;
+  }
 }
-@media only screen and (max-width: 1100px) {
+@media only screen and (max-width: 1181px) {
   .values-box-2 {
-    margin: 0 7rem 0 7rem;
+    margin: 0 5rem 0 5rem;
   }
   .values-box-1 {
-    margin: 3rem 5rem 3rem 5rem;
+    margin: 3rem 0rem 3rem 0rem;
   }
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1040px) {
   .values-box-1 {
-    margin: 3rem 1rem 3rem 1rem;
+    margin: 3rem 0rem 3rem 0rem;
+  }
+  .values-box-2 {
+    margin: 0 2rem 0 2rem;
+  }
+  .values-content {
+    min-width: 220px;
+    height: 220px;
   }
 }
-@media only screen and (max-width: 900px) {
+@media only screen and (max-width: 920px) {
   .values-box-1 {
     flex-direction: column;
     margin: 3rem 0 0 0;
@@ -98,21 +113,27 @@
     margin: 2rem;
   }
   .values-content {
-    margin: 0 0 2rem 0;
+    margin: 0 3rem 2rem 2rem;
+    width: auto;
+    height: 100px;
   }
   .values-content-2 {
     margin-left: 2rem;
   }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 700px) {
   .values-box-2 {
     flex-direction: column;
     margin: 0;
   }
   .values-content-2 {
     margin-left: 0rem;
   }
+  .values-content {
+    width: auto;
+    height: auto;
+  }
 }
 
 @keyframes fadeIn {

diff --git a/src/components/ImageGallery/ImageGallery.tsx b/src/components/ImageGallery/ImageGallery.tsx
@@ -1,19 +1,20 @@
 import { Carousel } from '@mantine/carousel';
 import { Box, Image, Paper, Text, Title, useMantineTheme } from '@mantine/core';
 import { IconArrowNarrowRight } from '@tabler/icons';
-
+import './imagegallery.css';
 const ImageGallery = () => {
   const theme = useMantineTheme();
   return (
     <Paper m={20} p={70} id="gallery">
       <Box>
-        <Title order={1} weight="100" align="left" my={20}>
+        <Title order={1}  size={45} weight="500" align="left"  my={10}  color='blue' className='title'>
           Our Gallery
         </Title>
       </Box>
       <Carousel
+className='carousell'
         withIndicators
-        height={250}
+        height={350}
         slideSize="33.333333%"
         slideGap="md"
         loop
@@ -26,38 +27,38 @@ const ImageGallery = () => {
         ]}
       >
         <Carousel.Slide>
-          <Image
-            radius={20}
+          <Image  className='imgc'
+            radius={20} height={300} 
             src="https://drive.google.com/uc?export=download&id=1LvVkueNKCOxWMZhmENlciL98fFnO1Iyl"
           />
         </Carousel.Slide>
         <Carousel.Slide>
-          <Image
-            radius={20}
+          <Image  className='imgc'
+            radius={20} height={300}
             src="https://drive.google.com/uc?export=download&id=1Lrgi5PCH0MKgY6LYyaa3oGkXGiCRyYiK"
           />
         </Carousel.Slide>
         <Carousel.Slide>
-          <Image
-            radius={20}
+          <Image className='imgc'
+            radius={20} height={300}
             src="https://drive.google.com/uc?export=download&id=1LxlU3X8-1WH4TLDM4YSP9x21g4HVjggU"
           />
         </Carousel.Slide>
         <Carousel.Slide>
-          <Image
-            radius={20}
+          <Image className='imgc'
+            radius={20} height={300}
             src="https://drive.google.com/uc?export=download&id=1LtNaPzQYG_3AgRI__hB1BGKBWFh6Ulvo"
           />
         </Carousel.Slide>
         <Carousel.Slide>
-          <Image
-            radius={20}
+          <Image className='imgc'
+            radius={20} height={300}
             src="https://drive.google.com/uc?export=download&id=1Lr0fIwip2Fa5VyrThq4wx00vIUYkOxTO"
           />
         </Carousel.Slide>
         <Carousel.Slide>
-          <Image
-            radius={20}
+          <Image className='imgc'
+            radius={20} height={300}
             src="https://drive.google.com/uc?export=download&id=1MTxwomYotps5z_-BHpHhXvwSr1ISw-de"
           />
         </Carousel.Slide>
@@ -66,6 +67,7 @@ const ImageGallery = () => {
         <Text
           sx={{ display: 'flex', alignItems: 'center', justifyContent: 'end' }}
           color={theme.colors.red[5]}
+          size={20}
         >
           View more
           <IconArrowNarrowRight />

diff --git a/src/components/ImageGallery/imagegallery.css b/src/components/ImageGallery/imagegallery.css
@@ -0,0 +1,33 @@
+.title{
+    margin-bottom: 40px;
+    font-size: 50px;
+    margin-left: 30px;
+}
+.carousell{
+    margin-left: 30px;
+}
+
+@media only screen and (max-width: 920px) {
+    .carousell{
+        margin-left: 0px;
+    }
+    .imgc{
+        width: 200px;
+    }
+  }
+
+@media only screen and (max-width: 540px) {
+    .carousell{
+        margin-left: 0px;
+    }
+    .imgc{
+        width: 350px;
+    }
+    .title{
+        margin-bottom: 40px;
+        font-size: 30px;
+        margin-left: 0px;
+        size: 80px;
+    }
+  }
+
diff --git a/src/components/MainBlogs/MainBlogs.tsx b/src/components/MainBlogs/MainBlogs.tsx
@@ -13,6 +13,7 @@ import {
 } from '@mantine/core';
 import { mockdata } from './blogData';
 import useStyles from './styles';
+import './blog.css';
 import Logo from '../../assets/Images/samparklogotransparent.png';
 import { useNavigate } from 'react-router-dom';
 
@@ -51,6 +52,7 @@ const MainBlogs = () => {
     <Paper m={20} px={70} mb={70}  pt={20}>
       <Box>
         <Title
+         className='blogtitle'
           order={3}
           py={20}
           tt="capitalize"

diff --git a/src/components/MainBlogs/blog.css b/src/components/MainBlogs/blog.css
@@ -0,0 +1,3 @@
+.blogtitle{
+    margin-top: 50px;
+}
diff --git a/src/components/MainHeader/styles.ts b/src/components/MainHeader/styles.ts
@@ -6,6 +6,7 @@ const useStyles = createStyles((theme) => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     height: '100%',
+    width:'100%'
   },
 
   links: {
@@ -27,7 +28,6 @@ const useStyles = createStyles((theme) => ({
         : theme.colors.gray[7],
     fontSize: theme.fontSizes.sm,
     fontWeight: 500,
-
     '&:hover': {
       cursor: 'pointer',
       backgroundColor:

diff --git a/src/components/MapBox/MapBox.tsx b/src/components/MapBox/MapBox.tsx
@@ -1,7 +1,7 @@
 import { AspectRatio, Button, Card, Paper, Text, Title } from '@mantine/core';
 import { useMemo, useState } from 'react';
 import Map, { FullscreenControl, GeolocateControl, Marker, NavigationControl, Popup, ScaleControl } from 'react-map-gl';
-
+import './map.css';
 const cityData = [
   {
     type: 'Seeker',
@@ -64,7 +64,7 @@ const MapBox = () => {
   );
 
   return (
-    <Paper
+    <Paper className='cardss'
       m={25}
       sx={{
         height: '90vh',
@@ -75,12 +75,10 @@ const MapBox = () => {
         alignItems: 'center',
       }}
     >
-      <Card
-        sx={{ display: 'flex', alignItems: 'left', flexDirection: 'column',minWidth:"360px",maxWidth:"50%" }}
-
-
+      <Card 
+        sx={{ display: 'flex', alignItems: 'left', flexDirection: 'column',minWidth:"360px",maxWidth:"50%" }} 
       >
-        <Title order={1} weight={300}>
+        <Title order={1} weight={300} >
           We provide assistanace. Register your NGO/orphanage at Sampark.
         </Title>
         <Text weight={500} mb={20}>

diff --git a/src/components/MapBox/map.css b/src/components/MapBox/map.css
@@ -0,0 +1,12 @@
+
+@media only screen and (max-width: 1537px) {
+    .cardss{
+        margin-top: -200px;
+    }
+  }
+  @media only screen and (max-width: 1062px) {
+    .cardss{
+        margin-top: 0px;
+    }
+  }
+
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -57,7 +57,7 @@ const HomeNavbar = () => {
   };
 
   return (
-    <Navbar height={700} width={{ sm: 300 }} p="md">
+    <Navbar height={7000} width={{ sm: 300 }} p="md">
       <Navbar.Section grow>
         <Group className={classes.header}></Group>
         {links}

diff --git a/src/components/Navbar/styles.ts b/src/components/Navbar/styles.ts
@@ -31,7 +31,6 @@ const useStyles = createStyles((theme, _params, getRef) => {
       padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
       borderRadius: theme.radius.sm,
       fontWeight: 500,
-
       '&:hover': {
         backgroundColor:
           theme.colorScheme === 'dark'