From 2f48c322e4a8e780f4e5e8a695ab51ffdd4559c0 Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Mon, 13 May 2024 15:41:20 +0530 Subject: [PATCH 01/10] setting up redux for toggle button --- src/App.js | 25 ++++++++++++++----------- src/Componet/Navbar.jsx | 22 +++++++++++----------- src/Redux/Slice/ThemeSlice.jsx | 17 +++++++++++++++++ src/Redux/Store/Store.jsx | 13 +++++++++++++ 4 files changed, 55 insertions(+), 22 deletions(-) create mode 100644 src/Redux/Slice/ThemeSlice.jsx diff --git a/src/App.js b/src/App.js index 37b768b0..50c68182 100644 --- a/src/App.js +++ b/src/App.js @@ -5,19 +5,22 @@ import Doc from "./Componet/Documetation/Doc"; import Error from "./Componet/Error"; import InternPage from "./Componet/Documetation/Internship/InternPage"; import Footer from "./Componet/Footer"; - +import { store } from "./Redux/Store/Store"; +import { Provider } from "react-redux"; function App() { - return( -
- - - }/> - }/> - }/> - }/> - -
+ return ( +
+ + + + } /> + } /> + } /> + } /> + +
+
); } diff --git a/src/Componet/Navbar.jsx b/src/Componet/Navbar.jsx index 938d0c9f..c6ff9187 100644 --- a/src/Componet/Navbar.jsx +++ b/src/Componet/Navbar.jsx @@ -6,20 +6,20 @@ import { GiCrossMark } from 'react-icons/gi'; import { FaGithub, FaLaptop, FaHome, FaRegSun } from 'react-icons/fa'; import { BsFiletypeDoc } from 'react-icons/bs'; import { Link } from 'react-router-dom'; - +import { useDispatch } from 'react-redux'; +import { setTheme } from '../Redux/Slice/ThemeSlice'; function Navbar() { - let [slidebarClick, setSlidebarClick] = useState(false); - - // function slidebarClicked(e){ - // // slidebarClick=slidebarClick?false:true; - // // slidebarClick=slidebarClick?false:true; - // // if(slidebarClick==false).? + let [slidebarClick, setSlidebarClick] = useState(true); + const dispatch = useDispatch(); - // console.log(slidebarClick) - // } - - const toggleDarkMode = () => setSlidebarClick(!slidebarClick); + const toggleDarkMode = () =>{ + setSlidebarClick(!slidebarClick); + dispatch(setTheme( + slidebarClick ? 'light' : 'dark' + )); + + }; //
return ( diff --git a/src/Redux/Slice/ThemeSlice.jsx b/src/Redux/Slice/ThemeSlice.jsx new file mode 100644 index 00000000..aeea47d6 --- /dev/null +++ b/src/Redux/Slice/ThemeSlice.jsx @@ -0,0 +1,17 @@ +import { createSlice } from "@reduxjs/toolkit"; + + +const ThemeSlice = createSlice({ + name: "theme", + initialState: { + theme: "light", + }, + reducers: { + setTheme: (state) => { + state.theme = state.theme === "light" ? "dark" : "light"; + }, + }, +}); + +export const { setTheme } = ThemeSlice.actions; +export default ThemeSlice.reducer; \ No newline at end of file diff --git a/src/Redux/Store/Store.jsx b/src/Redux/Store/Store.jsx index e69de29b..1d685557 100644 --- a/src/Redux/Store/Store.jsx +++ b/src/Redux/Store/Store.jsx @@ -0,0 +1,13 @@ +import { configureStore } from "@reduxjs/toolkit"; + +import ThemeSlice from "../Slice/ThemeSlice"; + +export const store = configureStore({ + reducer: { + theme: ThemeSlice, + }, + middleware: (getDefaultMiddleware) => + getDefaultMiddleware({ + serializableCheck: false, + }), +}); From 3dd24f4e375aa1bffe0276ffdade5aa65204656e Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Mon, 13 May 2024 16:17:42 +0530 Subject: [PATCH 02/10] updating theme change feature --- src/Componet/Documetation/Doc.css | 131 ++++++++------- src/Componet/Documetation/Doc.jsx | 43 +++-- .../Documetation/Internship/InternPage.jsx | 98 ++++++------ .../Documetation/Internship/internpage.css | 4 + src/Componet/Footer.css | 4 +- src/Componet/Footer.jsx | 65 ++++++-- src/Componet/Home.jsx | 150 ++++++++++-------- src/Componet/Navbar.jsx | 4 + src/Componet/style.css | 17 +- src/Style/Home.css | 4 +- src/Style/util.css | 4 +- 11 files changed, 307 insertions(+), 217 deletions(-) diff --git a/src/Componet/Documetation/Doc.css b/src/Componet/Documetation/Doc.css index a598b26b..b63056ae 100644 --- a/src/Componet/Documetation/Doc.css +++ b/src/Componet/Documetation/Doc.css @@ -1,71 +1,68 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } - .page_0{ - overflow: hidden; - } - .docImg{ -border-radius: 0; -width: 100vw; -height: 250vh; -z-index: 10; -margin-top: -50px; - } - .contribution{ - position: relative; - top: -80vh; - z-index: 10; - } - .headLine{ - font-size: 5em; - margin-inline: auto; - text-align: center; - font-weight: 800; - color: transparent; - /* border: 2px solid black; */ - text-shadow: 0px 0px 0px rgba(168, 162, 162, 0.516); - } - .TitleDoc{ -width: 100vw; -overflow: hidden; -background-color: rgb(0, 0, 0); -/* margin-top: -15%; */ -top: -3em; -z-index:9; -position: relative; -height: 50vh; -color: white; -text-align: center; -font-weight: 700; -/* border: 2px solid white; */ -font-size: 5em; +.page_0 { + overflow: hidden; +} +.docImg { + border-radius: 0; + width: 100vw; + height: 250vh; + z-index: 10; + margin-top: -50px; +} +.contribution { + position: relative; + top: -80vh; + z-index: 10; +} +.headLine { + font-size: 5em; + margin-inline: auto; + text-align: center; + font-weight: 800; + color: transparent; + /* border: 2px solid black; */ + text-shadow: 0px 0px 0px rgba(168, 162, 162, 0.516); +} +.TitleDoc { + width: 100vw; + overflow: hidden; + /* background-color: rgb(0, 0, 0); */ + /* margin-top: -15%; */ + top: -3em; + z-index: 9; + position: relative; + height: 50vh; + color: white; + text-align: center; + font-weight: 700; + /* border: 2px solid white; */ + font-size: 5em; -padding-top: 10%; - } - - .ContributionImg{ - background-color: black; - margin: 12px 20px; - display: flex; - flex-direction: column; - justify-content: center; - gap: 5em; - align-items: center; - margin-bottom: 50px; - - } - .conImg{ - width: 70vw; -border-radius: 0; + padding-top: 10%; +} - } +.ContributionImg { + background-color: black; + margin: 12px 20px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 5em; + align-items: center; + margin-bottom: 50px; +} +.conImg { + width: 70vw; + border-radius: 0; +} - /* mediaQwery */ - @media screen and (max-width:683px) { - .document{ -margin-top: -120px; - } - - } \ No newline at end of file +/* mediaQwery */ +@media screen and (max-width: 683px) { + .document { + margin-top: -120px; + } +} diff --git a/src/Componet/Documetation/Doc.jsx b/src/Componet/Documetation/Doc.jsx index 614aa55f..b0f8a271 100644 --- a/src/Componet/Documetation/Doc.jsx +++ b/src/Componet/Documetation/Doc.jsx @@ -11,11 +11,19 @@ import img6 from "../../image/Contribution/6.png"; import img7 from "../../image/Contribution/7.png"; import img8 from "../../image/Contribution/8.png"; import Detail from "./Detail"; +import { useSelector } from "react-redux"; function Doc() { + const theme = useSelector((state) => state.theme.theme); + return (
{/* */} @@ -25,12 +33,23 @@ function Doc() { GitHub. || Git. || Open-Source. || Contribution.{" "}
-
Make Your First Contribution !
-
+
+ Make Your First Contribution ! +
+

{ // Dispatch and Subscribe - const button=document.querySelectorAll('viewMore'); - const ref=useRef(null); + const button = document.querySelectorAll("viewMore"); + const ref = useRef(null); + const theme = useSelector((state) => state.theme.theme); + + + useEffect(() => { + let body=document.querySelector('body'); + body.classList.toggle('alternate'); + + //eslint-disable-next-line + }, [theme==='dark']); // // function handleClick(){ - + // // console.log(ref.current.className + ' ' +"MoreDetails"); // // console.log(ref.current) // let see=ref.current.parentElement.classList.toggle('MoreDetails'); @@ -18,60 +28,54 @@ let InternPage = () => { // // btn.parentElement.classList.toggle // // see.classList.toggle('MoreDetails'); - // } // for(let btn in button){ - // btn.parentElement.classList.toggle('MoreDetails'); + // btn.parentElement.classList.toggle('MoreDetails'); // } - - - - - - return ( - - - - - - -

- -
- - - {DataDB.map((item,index)=>{ - return( - -
- -

{item.internship_name}

-
-
{item.mode}
-
{item.duration}
-
-

{item.description}

- {/* ----------write logic for this */} - {/*
+
+
+ {DataDB.map((item, index) => { + return ( +
+ +

+ {item.internship_name} +

+
+
{item.mode}
+
{item.duration}
+
+

{item.description}

+ {/* ----------write logic for this */} + {/*
{item.company_name}
{item.award}
{item.internship_type}
*/} - - +
- - ) + ); })} - -
- -
+
+
); }; -export default InternPage; \ No newline at end of file +export default InternPage; diff --git a/src/Componet/Documetation/Internship/internpage.css b/src/Componet/Documetation/Internship/internpage.css index 371307cf..0ff1b45e 100644 --- a/src/Componet/Documetation/Internship/internpage.css +++ b/src/Componet/Documetation/Internship/internpage.css @@ -6,6 +6,10 @@ } body { + background-color: white; +} + +body.alternate { background-color: black; } diff --git a/src/Componet/Footer.css b/src/Componet/Footer.css index 73b7a3dd..b3b8ee8c 100644 --- a/src/Componet/Footer.css +++ b/src/Componet/Footer.css @@ -11,8 +11,8 @@ } .footer { - background-color: black; - color: white; + /* background-color: black; */ + /* color: white; */ .footer-title { font-size: 1.6em; diff --git a/src/Componet/Footer.jsx b/src/Componet/Footer.jsx index 7ecd220e..f465992a 100644 --- a/src/Componet/Footer.jsx +++ b/src/Componet/Footer.jsx @@ -1,15 +1,24 @@ /** @format */ -import React from 'react'; -import { FaGithub, FaLinkedin, FaTwitter, FaStar } from 'react-icons/fa6'; -import './Footer.css'; -import { Link } from 'react-router-dom'; +import React from "react"; +import { FaGithub, FaLinkedin, FaTwitter, FaStar } from "react-icons/fa6"; +import "./Footer.css"; +import { Link } from "react-router-dom"; +import { useSelector } from "react-redux"; function Footer() { + const theme = useSelector((state) => state.theme.theme); + return (
- {' '} -
+ {" "} +

CareerZunction

@@ -26,26 +35,54 @@ function Footer() {

Documentation

-

{window.open('https://opensource.com/resources/what-open-source')}}>What is Open-Source.

-

{window.open('https://opensource.guide/how-to-contribute/')}}>What is Git and GitHub.

-

{window.open('https://docs.github.com/en/get-started/using-git/about-git')}}> +

{ + window.open( + "https://opensource.com/resources/what-open-source" + ); + }} + > + What is Open-Source. +

+

{ + window.open("https://opensource.guide/how-to-contribute/"); + }} + > + What is Git and GitHub. +

+

{ + window.open( + "https://docs.github.com/en/get-started/using-git/about-git" + ); + }} + > How to start contributing to Open-Source.

License

-
MIT License
-
Code of Conduct
+
+ MIT License +
+
+ Code of Conduct +
+
img @@ -60,26 +68,34 @@ function Home() { img
-
+
About us
-

Find your first internship

+

+ Find your first internship +

- - + +

World's Biggest

The World's biggest collection of internships

- {/*
*/} + {/*
*/}
- - + +

Around the Globe

@@ -90,44 +106,40 @@ function Home() {
- + -
+

Open Source

This project is open source and you can contribute to it.

- +

Free to use

-

- This project is free to use. -

+

This project is free to use.

- {/* image section */} -
-is -is -is -is -is -is -is -is -{/* is */} -
- - -
+ {/* image section */} +
+ is + is + is + is + is + is + is + is + {/* is */} +
+ {/*
@@ -162,7 +174,7 @@ function Home() {
*/} -
+
); } diff --git a/src/Componet/Navbar.jsx b/src/Componet/Navbar.jsx index c6ff9187..a170a2c4 100644 --- a/src/Componet/Navbar.jsx +++ b/src/Componet/Navbar.jsx @@ -8,6 +8,7 @@ import { BsFiletypeDoc } from 'react-icons/bs'; import { Link } from 'react-router-dom'; import { useDispatch } from 'react-redux'; import { setTheme } from '../Redux/Slice/ThemeSlice'; + function Navbar() { let [slidebarClick, setSlidebarClick] = useState(true); const dispatch = useDispatch(); @@ -18,6 +19,9 @@ function Navbar() { dispatch(setTheme( slidebarClick ? 'light' : 'dark' )); + let navbar = document.querySelector(".Navbar"); + navbar.classList.toggle("alternate"); + }; diff --git a/src/Componet/style.css b/src/Componet/style.css index 7dba3838..ea7cc0c9 100644 --- a/src/Componet/style.css +++ b/src/Componet/style.css @@ -3,10 +3,22 @@ .Navbar { display: flex; - background-color: black; position: sticky; top: 0px; + color: rgb(148, 22, 233); + /* font-size: 2em; */ + font-weight: 500; + background-color: white; + justify-content: space-between; + padding: 32px 15px; + z-index: 999; +} + +.Navbar.alternate{ background-color: #020c0c; + display: flex; + position: sticky; + top: 0px; color: rgb(148, 22, 233); /* font-size: 2em; */ font-weight: 500; @@ -14,6 +26,7 @@ padding: 32px 15px; z-index: 999; } + /* ::-moz-selection{ ::-webkit-user-select:none; -ms-user-select: none; @@ -152,7 +165,7 @@ color: rgb(148, 22, 233) ; &:hover{ outline-color: rgb(68, 0, 132); } -}` +} .link{ text-decoration: none; diff --git a/src/Style/Home.css b/src/Style/Home.css index 028bdec5..c59600e1 100644 --- a/src/Style/Home.css +++ b/src/Style/Home.css @@ -8,11 +8,11 @@ width: 100%; height: 100vh !important; padding-top: 40px; - background-color: rgb(0, 3, 14); + /* background-color: rgb(0, 3, 14); */ display: flex; flex-direction: column; gap: 10px; - color: white; + /* color: white; */ margin-top: -120px; } .page_0 .bx-2, diff --git a/src/Style/util.css b/src/Style/util.css index 9811cb5f..465e87ef 100644 --- a/src/Style/util.css +++ b/src/Style/util.css @@ -136,7 +136,7 @@ } .page_0{ /* background-image: url(../image/background/Picsart_24-01-02_17-26-03-618.jpg); */ - background-color: black; + /* background-color: black; */ /* background-size: 100%; background-repeat: no-repeat; background-position: 100%; @@ -148,7 +148,7 @@ @media screen and (min-width:951px) { .page_0{ - background-color: black; + /* background-color: black; */ /* background-image: url(../image/background/WhatsApp\ Image\ 2023-12-24\ at\ 22.54.50.jpeg); background-size: 1024px; background-repeat: no-repeat; */ From 938fc4836e43245d0fde3b85e41b6f70ef916a56 Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Mon, 13 May 2024 16:46:34 +0530 Subject: [PATCH 03/10] updating files --- src/Componet/Documetation/Doc.jsx | 2 ++ src/Componet/Footer.jsx | 40 ++++++------------------------- 2 files changed, 9 insertions(+), 33 deletions(-) diff --git a/src/Componet/Documetation/Doc.jsx b/src/Componet/Documetation/Doc.jsx index b0f8a271..a678ec4c 100644 --- a/src/Componet/Documetation/Doc.jsx +++ b/src/Componet/Documetation/Doc.jsx @@ -11,7 +11,9 @@ import img6 from "../../image/Contribution/6.png"; import img7 from "../../image/Contribution/7.png"; import img8 from "../../image/Contribution/8.png"; import Detail from "./Detail"; + import { useSelector } from "react-redux"; + function Doc() { const theme = useSelector((state) => state.theme.theme); diff --git a/src/Componet/Footer.jsx b/src/Componet/Footer.jsx index f465992a..8a4a3b55 100644 --- a/src/Componet/Footer.jsx +++ b/src/Componet/Footer.jsx @@ -35,44 +35,18 @@ function Footer() {

Documentation

-

{ - window.open( - "https://opensource.com/resources/what-open-source" - ); - }} - > - What is Open-Source. -

-

{ - window.open("https://opensource.guide/how-to-contribute/"); - }} - > - What is Git and GitHub. -

-

{ - window.open( - "https://docs.github.com/en/get-started/using-git/about-git" - ); - }} - > + +

{ window.open('https://opensource.com/resources/what-open-source') }}>What is Open-Source.

+

{ window.open('https://opensource.guide/how-to-contribute/') }}>What is Git and GitHub.

+

{ window.open('https://docs.github.com/en/get-started/using-git/about-git') }}> How to start contributing to Open-Source. -

+

License

-
- MIT License -
-
- Code of Conduct -
+
MIT License
+
Code of Conduct
- img + {/* img img img img img img img - img + img */}
{/* image section */}
- is + {/* is is is is is is is - is + is */} {/* is */}
diff --git a/src/Componet/Navbar.jsx b/src/Componet/Navbar.jsx index a170a2c4..1528ac8f 100644 --- a/src/Componet/Navbar.jsx +++ b/src/Componet/Navbar.jsx @@ -20,7 +20,11 @@ function Navbar() { slidebarClick ? 'light' : 'dark' )); let navbar = document.querySelector(".Navbar"); + let link=document.querySelectorAll('.link'); navbar.classList.toggle("alternate"); + link.forEach((element)=>{ + element.classList.toggle('alternate'); + }); }; diff --git a/src/Componet/style.css b/src/Componet/style.css index 69e8a45e..10f3a718 100644 --- a/src/Componet/style.css +++ b/src/Componet/style.css @@ -1,33 +1,30 @@ - - - .Navbar { - display: flex; - position: sticky; - top: 0px; - color: rgb(148, 22, 233); - /* font-size: 2em; */ - font-weight: 500; - background-color: white; - justify-content: space-between; - padding: 32px 15px; - z-index: 999; -} - -.Navbar.alternate{ - background-color: #020c0c; - display: flex; - position: sticky; - top: 0px; - color: rgb(148, 22, 233); - /* font-size: 2em; */ - font-weight: 500; - justify-content: space-between; - padding: 32px 15px; - z-index: 999; -} - - /* ::-moz-selection{ + display: flex; + position: sticky; + top: 0px; + color: rgb(148, 22, 233); + /* font-size: 2em; */ + font-weight: 500; + background-color: white; + justify-content: space-between; + padding: 32px 15px; + z-index: 999; +} + +.Navbar.alternate { + background-color: #020c0c; + display: flex; + position: sticky; + top: 0px; + color: rgb(148, 22, 233); + /* font-size: 2em; */ + font-weight: 500; + justify-content: space-between; + padding: 32px 15px; + z-index: 999; +} + +/* ::-moz-selection{ ::-webkit-user-select:none; -ms-user-select: none; user-select: none; @@ -35,98 +32,99 @@ color:black; } */ -::selection{ -::-khtml-user-select:none; -::-moz-user-select:none; -::-ms-user-select:none; -::-o-user-select:none; -user-select:none; - } +::selection { + ::-khtml-user-select: none; + ::-moz-user-select: none; + ::-ms-user-select: none; + ::-o-user-select: none; + user-select: none; +} .nav-icons { - line-height: 1.6; - /* margin-inline: 2%; */ - position: absolute; - /* top: 5px; */ - + line-height: 1.6; + /* margin-inline: 2%; */ + position: absolute; + /* top: 5px; */ } .left-sight { - margin-left: 4%; - + margin-left: 4%; } .right-sight { - - display: flex; - gap: 20px; + display: flex; + gap: 20px; } /* Product file styling */ .container { - display: grid; - gap: 10px; - grid-template-columns: repeat(4, 1fr); - margin: 20px; - + display: grid; + gap: 10px; + grid-template-columns: repeat(4, 1fr); + margin: 20px; } .wrapper img { - width: 224px; - height: 300px; - border: .2px solid gray; - margin: 20px; - + width: 224px; + height: 300px; + border: 0.2px solid gray; + margin: 20px; } .wrapper { - border: 2px solid rgba(0, 0, 0, 0.427); + border: 2px solid rgba(0, 0, 0, 0.427); } .button-box { - display: flex; - justify-content: space-around; - gap: 50px; - margin: 10px; - + display: flex; + justify-content: space-around; + gap: 50px; + margin: 10px; } .btn { - font-size: large; - font-weight: 800; - - padding: 5px 12px; + font-size: large; + font-weight: 800; + padding: 5px 12px; } -.cart-item .link{ - /* text-decoration:; */ - +.cart-item .link { + /* text-decoration:; */ } -.link{ - text-decoration: none; - font-size: 1.2em; - line-height: 2.6; -color:rgb(211, 211, 211); -transition: 0.5s; -text-shadow: 1px 0 0 white; - +.link { + text-decoration: none; + font-size: 1.2em; + line-height: 2.6; + color: black; + transition: 0.5s; + text-shadow: 1px 0 0 white; } -.link::after{ - content: ''; - width: 0; - height: 3px; - background-color: rgb(148, 22, 233); - display: block; - margin:auto; - position: relative; +.link.alternate { + + text-decoration: none; + font-size: 1.2em; + line-height: 2.6; + color: white; + transition: 0.5s; + text-shadow: 1px 0 0 white; +} + +.link::after { + content: ""; + width: 0; + height: 3px; + background-color: rgb(148, 22, 233); + display: block; + margin: auto; + position: relative; } -.link:hover::after{ - color: white; - width: 100%; -margin-top: -8px; - transition: width 0.3s linear; - text-shadow: 0 0 0 white; +.link:hover::after { + color: white; + width: 100%; + margin-top: -8px; + transition: width 0.3s linear; + text-shadow: 0 0 0 white; } /* /SIDEBAR STYLING */ @@ -145,92 +143,87 @@ margin-top: -8px; } */ .sidebar { - display: flex; - gap: 10%; - font-size: 2em; - position: sticky; - top: 80vh; - background-color: #020c0c10; - color: rgb(148, 22, 233); - font-size: 2em; - font-weight: 500; - justify-content: space-between; - padding: 32px 15px; - &:hover{ - color:rgb(67, 3, 110) ; - } - /* position:sticky; + display: flex; + gap: 10%; + font-size: 2em; + position: sticky; + top: 80vh; + background-color: #020c0c10; + color: rgb(148, 22, 233); + font-size: 2em; + font-weight: 500; + justify-content: space-between; + padding: 32px 15px; + &:hover { + color: rgb(67, 3, 110); + } + /* position:sticky; font-size: 2em; justify-content: space-between; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 500; color: rgba(206, 0, 165, 0.9); */ - } .sidebar-options { - /* filter: blur(1px); */ - /* position: fixed !important; */ - backdrop-filter: blur(100px); - border: .5px solid gainsboro; - border-radius: 12px; - padding: 5px 10px; - outline: thick double blueviolet; - &:hover{ - outline-color: rgb(68, 0, 132); - } + /* filter: blur(1px); */ + /* position: fixed !important; */ + backdrop-filter: blur(100px); + border: 0.5px solid gainsboro; + border-radius: 12px; + padding: 5px 10px; + outline: thick double blueviolet; + &:hover { + outline-color: rgb(68, 0, 132); + } } -.link{ - text-decoration: none; +.link { + text-decoration: none; } /* @mediaQwery */ -@media screen and (max-width:230px) { - .left-sight{ -font-size:1.4em !important ; -margin-left: 1%; -/* text-align: start; */ - } - .nav-icons{ - display: none; - } - -} -@media screen and (max-width:320px) { - .left-sight{ -font-size:80% ; -margin-left: 1% !important; -/* text-align: start; */ - } - .nav-icons{ - display: none; - } - .sidebar{ - gap: 0%; +@media screen and (max-width: 230px) { + .left-sight { + font-size: 1.4em !important ; + margin-left: 1%; + /* text-align: start; */ + } + .nav-icons { + display: none; + } +} +@media screen and (max-width: 320px) { + .left-sight { + font-size: 80%; + margin-left: 1% !important; + /* text-align: start; */ + } + .nav-icons { + display: none; + } + .sidebar { + gap: 0%; font-size: 1em; - } -} -@media screen and (max-width:682px) { - .cart-item { - display: none; - } -/*zz remove this */ - .left-sight { - margin-left: 25%; - } - -} - -@media screen and (min-width:682px) { - .sidebar { - display: none; - } - -} -@media screen and (max-width:760px) { - .desktopImg{ - display: none; - - } + } +} +@media screen and (max-width: 682px) { + .cart-item { + display: none; + } + /*zz remove this */ + .left-sight { + margin-left: 25%; + } +} + +@media screen and (min-width: 682px) { + .sidebar { + display: none; + } +} +@media screen and (max-width: 760px) { + .desktopImg { + display: none; + } } From 3b035f0d1abd4ad06f7d2a3da8d9002ae75708db Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Tue, 14 May 2024 19:29:55 +0530 Subject: [PATCH 05/10] updating file --- src/Componet/Home.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Componet/Home.jsx b/src/Componet/Home.jsx index c716b3b0..7d81a098 100644 --- a/src/Componet/Home.jsx +++ b/src/Componet/Home.jsx @@ -58,14 +58,14 @@ function Home() {
- {/* img + img img img img img img img - img */} + img
{/* image section */}
- {/* is + is is is is is is is - is */} + is {/* is */}
From 9ba143838247fdfe26afa35663d34da73df59834 Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Tue, 14 May 2024 22:27:20 +0530 Subject: [PATCH 06/10] changing font weight in footer section --- src/Componet/Footer.css | 4 +- src/Componet/Footer.jsx | 99 ++++++++++++++++++++++++++--------------- 2 files changed, 66 insertions(+), 37 deletions(-) diff --git a/src/Componet/Footer.css b/src/Componet/Footer.css index 481e36f8..c923d7b7 100644 --- a/src/Componet/Footer.css +++ b/src/Componet/Footer.css @@ -32,7 +32,7 @@ margin-inline: 22px; padding: 6px 10px; font-size: 1.2em; - font-weight: 400; + font-weight: 600; /* color: white; */ } @@ -52,7 +52,7 @@ margin-top: 5px; /* padding-top: 10px; */ /* // font-size: 1.2em; */ - font-weight: 400; + font-weight:600; /* color: rgba(128, 128, 128, 0.489); */ diff --git a/src/Componet/Footer.jsx b/src/Componet/Footer.jsx index d9158225..a10efa8c 100644 --- a/src/Componet/Footer.jsx +++ b/src/Componet/Footer.jsx @@ -1,14 +1,13 @@ /** @format */ -import React from 'react'; -import { FaGithub, FaLinkedin, FaTwitter, FaStar } from 'react-icons/fa6'; -import './Footer.css'; -import { Link } from 'react-router-dom'; +import React from "react"; +import { FaGithub, FaLinkedin, FaTwitter, FaStar } from "react-icons/fa6"; +import "./Footer.css"; +import { Link } from "react-router-dom"; import { useSelector } from "react-redux"; import img from "../image/footer/footer-qr.jpg"; - function Footer() { const theme = useSelector((state) => state.theme.theme); @@ -22,59 +21,89 @@ function Footer() { color: theme === "light" ? "black" : "white", }} > -
+

CareerZunction

CareerZunction is a dynamic platform connecting eager students with valuable internship opportunities.

-

Documentation

- -

{ window.open('https://opensource.com/resources/what-open-source') }}>What is Open-Source.

-

{ window.open('https://opensource.guide/how-to-contribute/') }}>What is Git and GitHub.

-

{ window.open('https://docs.github.com/en/get-started/using-git/about-git') }}> - +

{ + window.open( + "https://opensource.com/resources/what-open-source" + ); + }} + > + What is Open-Source. +

+

{ + window.open("https://opensource.guide/how-to-contribute/"); + }} + > + What is Git and GitHub. +

+

{ + window.open( + "https://docs.github.com/en/get-started/using-git/about-git" + ); + }} + > How to start contributing to Open-Source. -

+

License

-
MIT License
-
Code of Conduct
-

Get in touch

+
+ MIT License +
+
+ Code of Conduct +
+

Get in touch

-
- - +
+ +
From 5a1e68555b1367a651b0220bde1eadf4d00fbc15 Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Tue, 14 May 2024 22:34:50 +0530 Subject: [PATCH 07/10] updating file --- src/Componet/Footer.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Componet/Footer.css b/src/Componet/Footer.css index c2ad1976..85a3a936 100644 --- a/src/Componet/Footer.css +++ b/src/Componet/Footer.css @@ -62,7 +62,6 @@ &:hover { text-decoration: underline; } - color: white; } .button-star { From ea0a75fb564a657bb78e1e92b6b1d9d3ba84cbe8 Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Wed, 15 May 2024 22:51:27 +0530 Subject: [PATCH 08/10] updating styling --- src/Componet/style.css | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/Componet/style.css b/src/Componet/style.css index 9ad137af..62276c52 100644 --- a/src/Componet/style.css +++ b/src/Componet/style.css @@ -111,11 +111,31 @@ transition: all 0.4s; } + +.link.alternate{ + + text-decoration: none; + font-size: 1.2em; + line-height: 2.6; + color: rgb(148, 22, 233) ; + position: relative; + transition: all 0.4s; + +} + +.link.alternate:hover{ + color:white; + +} + .link:hover{ /* text-decoration: underline; */ - color: rgb(255, 255, 255); + color: black; } + + + .link::after{ content:''; height:2px; From 3d5a8a69bed80284ad0b24482bbe632ff8b758e4 Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Thu, 16 May 2024 11:24:54 +0530 Subject: [PATCH 09/10] changing card bg and navbar hover effect in light theme --- src/Componet/Documetation/Internship/internpage.css | 11 ++++++++++- src/Componet/style.css | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/Componet/Documetation/Internship/internpage.css b/src/Componet/Documetation/Internship/internpage.css index e836a100..89e3c573 100644 --- a/src/Componet/Documetation/Internship/internpage.css +++ b/src/Componet/Documetation/Internship/internpage.css @@ -28,7 +28,8 @@ body.alternate { } .BoxContent { - background-color: #1f1f1f; + + background:linear-gradient(to bottom,black,rgba(153, 0, 255, 0.279)); border-radius: 10px; padding: 10px; margin: 10px; @@ -47,6 +48,14 @@ body.alternate { gap: 10px; } +.BoxContent:hover{ + + box-shadow: 1px 1px 10px rgba(219, 205, 205, 0.196),-2px -2px 10px rgb(15, 15, 15); + transition: 0.5s; + + +} + .ApiImg { border-radius: 5px; margin-block: 10px; diff --git a/src/Componet/style.css b/src/Componet/style.css index 62276c52..a164bb2f 100644 --- a/src/Componet/style.css +++ b/src/Componet/style.css @@ -130,7 +130,7 @@ .link:hover{ /* text-decoration: underline; */ - color: black; + color: #5f009b; } From b01ab2e1175698305238e1fe24395428eb9b63ad Mon Sep 17 00:00:00 2001 From: Ansh Agarwal Date: Sun, 19 May 2024 14:01:27 +0530 Subject: [PATCH 10/10] adding gray border on card & setting default dark mode --- .../Documetation/Internship/InternPage.jsx | 7 ++++ .../Documetation/Internship/internpage.css | 32 +++++++++++++++++++ src/Componet/Navbar.jsx | 2 +- src/Componet/style.css | 12 +++---- src/Redux/Slice/ThemeSlice.jsx | 2 +- 5 files changed, 47 insertions(+), 8 deletions(-) diff --git a/src/Componet/Documetation/Internship/InternPage.jsx b/src/Componet/Documetation/Internship/InternPage.jsx index ea08abf7..b56ccad8 100644 --- a/src/Componet/Documetation/Internship/InternPage.jsx +++ b/src/Componet/Documetation/Internship/InternPage.jsx @@ -13,7 +13,12 @@ let InternPage = () => { useEffect(() => { let body=document.querySelector('body'); + let box=document.querySelectorAll('.BoxContent'); body.classList.toggle('alternate'); + box.forEach((element)=>{ + element.classList.toggle('alternate'); + }); + //eslint-disable-next-line }, [theme==='dark']); @@ -74,6 +79,8 @@ let InternPage = () => { ); })}
+
+
); }; diff --git a/src/Componet/Documetation/Internship/internpage.css b/src/Componet/Documetation/Internship/internpage.css index 89e3c573..35831c71 100644 --- a/src/Componet/Documetation/Internship/internpage.css +++ b/src/Componet/Documetation/Internship/internpage.css @@ -23,6 +23,7 @@ body.alternate { /* justify-content:space-around; */ margin-inline: 10%; justify-content: space-evenly; + margin-bottom: 20px; /* background-color: black; */ } @@ -48,12 +49,41 @@ body.alternate { gap: 10px; } +.BoxContent.alternate { + background:linear-gradient(to bottom,black,rgba(153, 0, 255, 0.279)); + + border-radius: 10px; + padding: 10px; + margin: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); + transition: 0.5s; + cursor: pointer; + backdrop-filter: blur(10px); + width: 330px; + height: 400px; + align-items: center; + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: center; + overflow-y: hidden; + gap: 10px; + border: 1px solid gray; + /* color: black; Add this if you want the text color to be black in light theme */ +} + .BoxContent:hover{ box-shadow: 1px 1px 10px rgba(219, 205, 205, 0.196),-2px -2px 10px rgb(15, 15, 15); transition: 0.5s; + +} +.BoxContent.alternate:hover { + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1), -2px -2px 10px rgba(255, 255, 255, 0.7); + transition: 0.5s; + border: 2px solid gray; } .ApiImg { @@ -251,3 +281,5 @@ body.alternate { grid-template-columns: repeat(3, 1fr); } } + + diff --git a/src/Componet/Navbar.jsx b/src/Componet/Navbar.jsx index 0178e077..e9156769 100644 --- a/src/Componet/Navbar.jsx +++ b/src/Componet/Navbar.jsx @@ -10,7 +10,7 @@ import { useDispatch } from 'react-redux'; import { setTheme } from '../Redux/Slice/ThemeSlice'; function Navbar() { - let [slidebarClick, setSlidebarClick] = useState(true); + let [slidebarClick, setSlidebarClick] = useState(false); const dispatch = useDispatch(); const navigate=useNavigate(); function handleRedirect(){ diff --git a/src/Componet/style.css b/src/Componet/style.css index a164bb2f..861089fa 100644 --- a/src/Componet/style.css +++ b/src/Componet/style.css @@ -1,4 +1,4 @@ -.Navbar { +.Navbar.alternate { display: flex; position: sticky; top: 0px; @@ -13,7 +13,7 @@ padding: 2em 0.93em; } -.Navbar.alternate { +.Navbar{ background-color: #020c0c; display: flex; position: sticky; @@ -102,7 +102,7 @@ /* text-decoration:; */ } -.link{ +.link.alternate{ text-decoration: none; font-size: 1.2em; line-height: 2.6; @@ -112,7 +112,7 @@ } -.link.alternate{ +.link{ text-decoration: none; font-size: 1.2em; @@ -123,12 +123,12 @@ } -.link.alternate:hover{ +.link:hover{ color:white; } -.link:hover{ +.link.alternate:hover{ /* text-decoration: underline; */ color: #5f009b; diff --git a/src/Redux/Slice/ThemeSlice.jsx b/src/Redux/Slice/ThemeSlice.jsx index aeea47d6..99fe1d59 100644 --- a/src/Redux/Slice/ThemeSlice.jsx +++ b/src/Redux/Slice/ThemeSlice.jsx @@ -4,7 +4,7 @@ import { createSlice } from "@reduxjs/toolkit"; const ThemeSlice = createSlice({ name: "theme", initialState: { - theme: "light", + theme: "dark", }, reducers: { setTheme: (state) => {