diff --git a/src/components/Blogs/Blogs.tsx b/src/components/Blogs/Blogs.tsx index 69cd02a..f43d89c 100644 --- 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 ( <> -
+
- +
diff --git a/src/components/HeroSection/styles.css b/src/components/HeroSection/styles.css index 617b8e2..8dc26b2 100644 --- 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 index 17bd4c8..51f3cf8 100644 --- a/src/components/HomeHeader/HomeHeader.tsx +++ b/src/components/HomeHeader/HomeHeader.tsx @@ -55,7 +55,7 @@ const HomeHeader = () => { return (
- + {items} {isLoggedIn} diff --git a/src/components/HomeHeader/styles.ts b/src/components/HomeHeader/styles.ts index d318c57..e10d396 100644 --- 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 index d83ec1c..38816ea 100644 --- 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,14 +113,16 @@ 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; @@ -113,6 +130,10 @@ .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 index 6c568e2..d1c5517 100644 --- 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 ( - + <Title order={1} size={45} weight="500" align="left" my={10} color='blue' className='title'> Our Gallery { ]} > - - - - - - @@ -66,6 +67,7 @@ const ImageGallery = () => { View more diff --git a/src/components/ImageGallery/imagegallery.css b/src/components/ImageGallery/imagegallery.css new file mode 100644 index 0000000..22f0c52 --- /dev/null +++ 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; + } + } + \ No newline at end of file diff --git a/src/components/MainBlogs/MainBlogs.tsx b/src/components/MainBlogs/MainBlogs.tsx index e94e6e8..c7390d3 100644 --- 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 = () => { ({ 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 index 3bae273..4e4f028 100644 --- 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. diff --git a/src/components/MapBox/map.css b/src/components/MapBox/map.css new file mode 100644 index 0000000..da52169 --- /dev/null +++ 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; + } + } + \ No newline at end of file diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 3996f1a..95fb9bf 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -57,7 +57,7 @@ const HomeNavbar = () => { }; return ( - + {links} diff --git a/src/components/Navbar/styles.ts b/src/components/Navbar/styles.ts index 71863bd..a666a85 100644 --- 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'