From f8d0430af336abb05abe6fd9b9e7f6de4ffa100b Mon Sep 17 00:00:00 2001 From: Aman-Jangid Date: Sat, 26 Oct 2024 20:33:34 +0530 Subject: [PATCH 01/11] Add jsconfig.json --- jsconfig.json | 12 ++++++++++++ src/components/Home.jsx | 22 +++++++++++----------- 2 files changed, 23 insertions(+), 11 deletions(-) create mode 100644 jsconfig.json diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..dd37823 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "module": "ESNext", + "moduleResolution": "Bundler", + "target": "ES2022", + "jsx": "react", + "allowImportingTsExtensions": true, + "strictNullChecks": true, + "strictFunctionTypes": true + }, + "exclude": ["node_modules", "**/node_modules/*"] +} diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 25998a4..1ac9885 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -1,18 +1,18 @@ -import React from 'react' -import Navbar from './Navbar' -import Introduction from './Introduction' +import React from "react"; +import Navbar from "./Navbar"; +import Introduction from "./Introduction"; import { Courses, Slideshow, Contact, Footer } from "./index"; function Home() { return (
- - - - - -
+ + + + + +
- ) + ); } -export default Home \ No newline at end of file +export default Home; From 7dc32e3cde2d36afbdf22a6d4264efc22934ea48 Mon Sep 17 00:00:00 2001 From: Aman-Jangid Date: Sat, 26 Oct 2024 20:55:03 +0530 Subject: [PATCH 02/11] Fix linting issues & Remove unnecessary imports --- index.html | 109 ++++++++++++++------------ src/App.jsx | 17 ++-- src/components/AllCourse.jsx | 12 +-- src/components/AllCourseCard.jsx | 109 ++++++++++++++------------ src/components/AllCourses.jsx | 13 ++- src/components/Card.jsx | 11 ++- src/components/CourseCards.jsx | 93 ++++++++++++---------- src/components/Courses.jsx | 12 +-- src/components/Footer.jsx | 78 ++++++++++++------ src/components/Home.jsx | 1 - src/components/Introduction.jsx | 56 ++++++++----- src/components/Login.jsx | 53 ++++++------- src/components/Navbar.jsx | 50 +++++++----- src/components/ProgressBar.jsx | 9 ++- src/components/Signup.jsx | 58 +++++++------- src/components/Slideshow.jsx | 20 ++--- src/components/TestimonialCard.jsx | 44 ++++++----- src/components/index.jsx | 18 ++++- src/components/logo.png | Bin 221504 -> 0 bytes src/main.jsx | 24 +++--- src/{components => styles}/Login.css | 0 src/{components => styles}/Signup.css | 0 22 files changed, 441 insertions(+), 346 deletions(-) delete mode 100644 src/components/logo.png rename src/{components => styles}/Login.css (100%) rename src/{components => styles}/Signup.css (100%) diff --git a/index.html b/index.html index 10f1139..7894c34 100644 --- a/index.html +++ b/index.html @@ -1,68 +1,75 @@ - + - - - - + + + + - + - - + +
-
+
- - + domain: "www.chatbase.co", + }; + + + + - - - \ No newline at end of file + + diff --git a/src/App.jsx b/src/App.jsx index ee5feff..b1803f5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,25 +1,22 @@ -import React from "react"; import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; import "./App.css"; import AllCourses from "./components/AllCourses"; import Home from "./components/Home"; import Login from "./components/Login"; import Signup from "./components/Signup"; -import PrivacyPolicy from "./components/PrivacyPolicy"; +import PrivacyPolicy from "./components/PrivacyPolicy"; import TermsOfUse from "./components/TermsOfUse"; - function App() { return ( - } /> - } /> - } /> - } /> - } /> - } /> - + } /> + } /> + } /> + } /> + } /> + } /> ); diff --git a/src/components/AllCourse.jsx b/src/components/AllCourse.jsx index de6488e..bc463d3 100644 --- a/src/components/AllCourse.jsx +++ b/src/components/AllCourse.jsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import CourseCards from './AllCourseCard'; +import { useState } from "react"; +import CourseCards from "./AllCourseCard"; function AllCourse() { const [searchTerm, setSearchTerm] = useState(""); @@ -9,7 +9,7 @@ function AllCourse() { }; return ( -
+

Our Courses

@@ -21,7 +21,9 @@ function AllCourse() { value={searchTerm} onChange={handleSearchChange} /> - +
@@ -30,4 +32,4 @@ function AllCourse() { ); } -export default AllCourse; \ No newline at end of file +export default AllCourse; diff --git a/src/components/AllCourseCard.jsx b/src/components/AllCourseCard.jsx index c0e1b33..7cf23bb 100644 --- a/src/components/AllCourseCard.jsx +++ b/src/components/AllCourseCard.jsx @@ -1,4 +1,3 @@ -import React from "react"; import next from "../assets/next.png"; import react from "../assets/react.png"; import php from "../assets/php.png"; @@ -15,7 +14,7 @@ import CSS from "../assets/CSS.png"; import CPP from "../assets/CPP.png"; import JS from "../assets/JS.png"; import c from "../assets/C.png"; -import groovy from "../assets/groovy.png" +import groovy from "../assets/groovy.png"; import assembly from "../assets/assembly.png"; import dart from "../assets/dart.png"; import elixir from "../assets/elixir.png"; @@ -30,8 +29,8 @@ import rust from "../assets/rust.png"; import scala from "../assets/scala.png"; import shell from "../assets/shell.png"; import sql from "../assets/sql.png"; -import typescript from "../assets/typescript.png" -import clojure from "../assets/clojure.png" +import typescript from "../assets/typescript.png"; +import clojure from "../assets/clojure.png"; import Card from "./Card"; function AllCourseCard({ searchTerm }) { @@ -40,21 +39,24 @@ function AllCourseCard({ searchTerm }) { imgurl: java, coursename: "Java", authorname: "Kunal Kushwaha", - ytlink: "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ", // Introduction to Java + ytlink: + "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ", // Introduction to Java gfgLink: "https://www.geeksforgeeks.org/java/", }, { imgurl: c, coursename: "C", authorname: "College Wallah", - ytlink: "https://www.youtube.com/playlist?list=PLxgZQoSe9cg1drBnejUaDD9GEJBGQ5hMt", // C Programming Tutorial + ytlink: + "https://www.youtube.com/playlist?list=PLxgZQoSe9cg1drBnejUaDD9GEJBGQ5hMt", // C Programming Tutorial gfgLink: "https://www.geeksforgeeks.org/c-programming-language/", }, { imgurl: CPP, coursename: "C++", authorname: "Codehelp", - ytlink: "https://www.youtube.com/playlist?list=PLDzeHZWIZsTryvtXdMr6rPh4IDexB5NIA", // C++ Programming Tutorial + ytlink: + "https://www.youtube.com/playlist?list=PLDzeHZWIZsTryvtXdMr6rPh4IDexB5NIA", // C++ Programming Tutorial gfgLink: "https://www.geeksforgeeks.org/c-plus-plus/", }, { @@ -153,7 +155,8 @@ function AllCourseCard({ searchTerm }) { coursename: "Rust", authorname: "Harkirat Singh", ytlink: "https://youtu.be/qP7LzZqGh30?si=-1HbbjzodHaXBGHy", // Rust Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/introduction-to-rust-programming-language/", + gfgLink: + "https://www.geeksforgeeks.org/introduction-to-rust-programming-language/", }, { imgurl: typescript, @@ -194,7 +197,8 @@ function AllCourseCard({ searchTerm }) { imgurl: shell, coursename: "Shell Scripting", authorname: "Edureka", - ytlink: "https://www.geeksforgeeks.org/introduction-linux-shell-shell-scripting/", // Shell Scripting Tutorial + ytlink: + "https://www.geeksforgeeks.org/introduction-linux-shell-shell-scripting/", // Shell Scripting Tutorial }, { imgurl: groovy, @@ -208,7 +212,8 @@ function AllCourseCard({ searchTerm }) { coursename: "Assembly", authorname: "Free Code Camp", ytlink: "https://youtu.be/gfmRrPjnEw4?si=GISmTpHqN25AbtPp", // Assembly Language Programming - gfgLink: "https://www.tutorialspoint.com/assembly_programming/assembly_introduction.htm", + gfgLink: + "https://www.tutorialspoint.com/assembly_programming/assembly_introduction.htm", }, { imgurl: elixir, @@ -265,49 +270,51 @@ function AllCourseCard({ searchTerm }) { authorname: "Derek Banas", ytlink: "https://youtu.be/ciGyHkDuPAE?si=Gr_vcXT3Usibp6-9", // Prolog Programming Tutorial gfgLink: "https://clojure-doc.org/articles/tutorials/introduction/", - } - ]; - - // Filter courses based on the search term - const filteredCourses = courses.filter((course) => - course.coursename.toLowerCase().includes(searchTerm.toLowerCase()) - ); - - return ( -
-
- {filteredCourses.length > 0 ? ( - <> - {filteredCourses.map((course, index) => ( - - ))} - - ) : ( - -
- No course found -
-
-

No Courses Found

-

Try searching for something else!

-
- - )} -
-
+ }, + ]; + + // Filter courses based on the search term + const filteredCourses = courses.filter((course) => + course.coursename.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + return ( +
+
+ {filteredCourses.length > 0 ? ( + <> + {filteredCourses.map((course, index) => ( + + ))} + + ) : ( + +
+ No course found +
+
+

No Courses Found

+

Try searching for something else!

+
+ + )} +
+
); } - export default AllCourseCard; diff --git a/src/components/AllCourses.jsx b/src/components/AllCourses.jsx index 3da41d4..41a88b1 100644 --- a/src/components/AllCourses.jsx +++ b/src/components/AllCourses.jsx @@ -1,12 +1,11 @@ -import React from 'react' -import AllCourse from "./AllCourse" +import AllCourse from "./AllCourse"; const AllCourses = () => { -return ( + return ( <> - + -) -} + ); +}; -export default AllCourses \ No newline at end of file +export default AllCourses; diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 4d62964..965908f 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -1,6 +1,11 @@ -import React from 'react'; - -export default function Card({ imgurl, coursename, authorname, notes, ytlink, gfgLink }) { +export default function Card({ + imgurl, + coursename, + authorname, + notes, + ytlink, + gfgLink, +}) { return (
diff --git a/src/components/CourseCards.jsx b/src/components/CourseCards.jsx index 986d27b..0e6e33c 100644 --- a/src/components/CourseCards.jsx +++ b/src/components/CourseCards.jsx @@ -1,5 +1,4 @@ -import React from "react"; -import next from "../assets/next.png"; +// import next from "../assets/next.png"; import react from "../assets/react.png"; import php from "../assets/php.png"; import swift from "../assets/swift.png"; @@ -16,7 +15,7 @@ import CPP from "../assets/CPP.png"; import JS from "../assets/JS.png"; import c from "../assets/C.png"; import Card from "./Card"; -import arrow from "../assets/arrow.png" +import arrow from "../assets/arrow.png"; function CourseCards({ searchTerm }) { const courses = [ @@ -24,21 +23,24 @@ function CourseCards({ searchTerm }) { imgurl: java, coursename: "Java", authorname: "Kunal Kushwaha", - ytlink: "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ", // Introduction to Java + ytlink: + "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ", // Introduction to Java gfgLink: "https://www.geeksforgeeks.org/java/", }, { imgurl: c, coursename: "C", authorname: "College Wallah", - ytlink: "https://www.youtube.com/playlist?list=PLxgZQoSe9cg1drBnejUaDD9GEJBGQ5hMt", // C Programming Tutorial + ytlink: + "https://www.youtube.com/playlist?list=PLxgZQoSe9cg1drBnejUaDD9GEJBGQ5hMt", // C Programming Tutorial gfgLink: "https://www.geeksforgeeks.org/c-programming-language/", }, { imgurl: CPP, coursename: "C++", authorname: "Codehelp", - ytlink: "https://www.youtube.com/playlist?list=PLDzeHZWIZsTryvtXdMr6rPh4IDexB5NIA", // C++ Programming Tutorial + ytlink: + "https://www.youtube.com/playlist?list=PLDzeHZWIZsTryvtXdMr6rPh4IDexB5NIA", // C++ Programming Tutorial gfgLink: "https://www.geeksforgeeks.org/c-plus-plus/", }, { @@ -132,44 +134,49 @@ function CourseCards({ searchTerm }) { course.coursename.toLowerCase().includes(searchTerm) ); - return ( -
-
- {filteredCourses.length > 0 ? ( - <> - {filteredCourses.map((course, index) => ( - - ))} -
- Arrow -
- - ) : ( - -
- No course found -
-
-

No Courses Found

-

Try searching for something else!

-
- - )} -
-
+ return ( +
+
+ {filteredCourses.length > 0 ? ( + <> + {filteredCourses.map((course, index) => ( + + ))} +
+ + Arrow + +
+ + ) : ( + +
+ No course found +
+
+

No Courses Found

+

Try searching for something else!

+
+ + )}
- ); +
+
+ ); } export default CourseCards; diff --git a/src/components/Courses.jsx b/src/components/Courses.jsx index 48a4573..975d40d 100644 --- a/src/components/Courses.jsx +++ b/src/components/Courses.jsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import CourseCards from './CourseCards'; +import { useState } from "react"; +import CourseCards from "./CourseCards"; function Courses() { const [searchTerm, setSearchTerm] = useState(""); @@ -9,7 +9,7 @@ function Courses() { }; return ( -
+

Our Courses

@@ -21,7 +21,9 @@ function Courses() { value={searchTerm} onChange={handleSearchChange} /> - +
@@ -30,4 +32,4 @@ function Courses() { ); } -export default Courses; \ No newline at end of file +export default Courses; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 2a4cd37..6f78384 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from "react"; import logo from "../assets/logo.png"; function Footer() { @@ -27,43 +27,72 @@ function Footer() {

Code Book

-
+
-

Welcome to Code Book—your go-to resource hub for mastering coding. Whether you're a beginner or an experienced developer, we provide curated tutorials, coding challenges, and guides to enhance your skills across various programming languages and frameworks. Our mission is to create a community where learning to code is accessible, engaging, and fun for everyone. -

+

+ Welcome to Code Book—your go-to resource hub for mastering + coding. Whether you're a beginner or an experienced + developer, we provide curated tutorials, coding challenges, and + guides to enhance your skills across various programming + languages and frameworks. Our mission is to create a community + where learning to code is accessible, engaging, and fun for + everyone. +

- +

Quick Links

-
+

Connect with us

-
+

Subscribe to our Newsletter

-

Stay in the loop and subscribe to Code Book's Newsletter

+

+ Stay in the loop and subscribe to Code Book's Newsletter +

-
{message &&

{message}

} -
+
-
+

© 2024 Code Book. All Rights Reserved.

@@ -86,4 +115,3 @@ function Footer() { } export default Footer; - diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 1ac9885..b34ff0a 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -1,4 +1,3 @@ -import React from "react"; import Navbar from "./Navbar"; import Introduction from "./Introduction"; import { Courses, Slideshow, Contact, Footer } from "./index"; diff --git a/src/components/Introduction.jsx b/src/components/Introduction.jsx index d5a298b..a51ea1a 100644 --- a/src/components/Introduction.jsx +++ b/src/components/Introduction.jsx @@ -1,28 +1,42 @@ -import React from 'react' -import home from "../assets/home.png" +import home from "../assets/home.png"; function Introduction() { -return ( - <>
+ return ( + <> + {" "} +
-
-
- -
-
-

Welcome to Code Book, your ultimate coding destination. Whether you're a coding novice or a seasoned developer, we've got you covered. Master in-demand languages like Python, JavaScript, and Java while building real-world projects. Join our vibrant community of learners to collaborate and grow together. Start your coding journey today and unlock endless possibilities.

-
- -
-
- -
+
+
+ +
+
+

+ Welcome to Code Book, your ultimate coding destination. Whether + you're a coding novice or a seasoned developer, we've + got you covered. Master in-demand languages like Python, + JavaScript, and Java while building real-world projects. Join + our vibrant community of learners to collaborate and grow + together. Start your coding journey today and unlock endless + possibilities. +

+
+ +
+
+ +
-
+
-) + ); } -export default Introduction \ No newline at end of file +export default Introduction; diff --git a/src/components/Login.jsx b/src/components/Login.jsx index 7b83104..96bc7c4 100644 --- a/src/components/Login.jsx +++ b/src/components/Login.jsx @@ -1,16 +1,15 @@ -import React, { useState } from "react"; -import "./Login.css"; -import { Link } from "react-router-dom"; +import { useState } from "react"; +import "../styles/Login.css"; import { useNavigate } from "react-router-dom"; import { useDispatch } from "react-redux"; -import {login} from "../services/operations/authAPI" +import { login } from "../services/operations/authAPI"; export default function LoginPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const navigate = useNavigate(); - const dispatch = useDispatch(); + const dispatch = useDispatch(); const handleSubmit = (e) => { e.preventDefault(); @@ -25,48 +24,48 @@ export default function LoginPage() { }; return ( -
-
-
-
- 🔒 +
+
+
+
+ 🔒

Login to CodeBook

-

+

Enter your credentials to access your account

-
+
-
- +
+ setEmail(e.target.value)} required />
-
- +
+ setPassword(e.target.value)} required />
- {error &&
{error}
} - -
- Don't have an account? Signup +
+ Don't have an account? Signup
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 6142db7..c65d5f3 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,4 @@ -import React, { useState } from "react"; -import { Link } from "react-router-dom"; +import { useState } from "react"; import Logo from "../assets/logo.png"; import ProgressBar from "./ProgressBar"; @@ -22,14 +21,22 @@ function Navbar() {
- Logo + + Logo +

Code Book

-
- +
+
-
+
  • Home @@ -45,27 +52,30 @@ function Navbar() {
- { - !user? (<> - ) : + + + ) : ( + - } + )}
- + ); } export default Navbar; - diff --git a/src/components/ProgressBar.jsx b/src/components/ProgressBar.jsx index 03bcee8..fc89365 100644 --- a/src/components/ProgressBar.jsx +++ b/src/components/ProgressBar.jsx @@ -1,19 +1,20 @@ -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; const ProgressBar = () => { const [scrollPercentage, setScrollPercentage] = useState(0); const handleScroll = () => { const scrollTop = window.scrollY; - const windowHeight = document.documentElement.scrollHeight - window.innerHeight; + const windowHeight = + document.documentElement.scrollHeight - window.innerHeight; const scrollProgress = (scrollTop / windowHeight) * 100; setScrollPercentage(scrollProgress); }; useEffect(() => { - window.addEventListener('scroll', handleScroll); + window.addEventListener("scroll", handleScroll); return () => { - window.removeEventListener('scroll', handleScroll); + window.removeEventListener("scroll", handleScroll); }; }, []); diff --git a/src/components/Signup.jsx b/src/components/Signup.jsx index a917cbf..5d65e7c 100644 --- a/src/components/Signup.jsx +++ b/src/components/Signup.jsx @@ -1,5 +1,5 @@ -import React, { useState } from "react"; -import "./Signup.css"; +import { useState } from "react"; +import "../styles/Signup.css"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import { useDispatch } from "react-redux"; @@ -11,7 +11,7 @@ export default function SignupPage() { const [password, setPassword] = useState(""); const [error, setError] = useState(""); const navigate = useNavigate(); - const dispatch = useDispatch(); + const dispatch = useDispatch(); const handleSubmit = (e) => { e.preventDefault(); @@ -27,58 +27,58 @@ export default function SignupPage() { }; return ( -
-
-
-
- 🎓 +
+
+
+
+ 🎓

Join CodeBook

-

+

Create your account and start learning today!

-
+
-
- +
+ setName(e.target.value)} required />
-
- +
+ setEmail(e.target.value)} required />
-
- +
+ setPassword(e.target.value)} required />
- {error &&
{error}
} - -
- Already have an account? Log in +
+ Already have an account? Log in
diff --git a/src/components/Slideshow.jsx b/src/components/Slideshow.jsx index 372d1ce..346f57e 100644 --- a/src/components/Slideshow.jsx +++ b/src/components/Slideshow.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import B1 from "../assets/B1.png"; import G1 from "../assets/G1.png"; import B2 from "../assets/B2.png"; @@ -159,15 +159,15 @@ function Slideshow() {

Why Choose Us??

-
- {testimonials.map((_, index) => ( - handleDotClick(index)} - > - ))} -
+
+ {testimonials.map((_, index) => ( + handleDotClick(index)} + > + ))} +
-
); } diff --git a/src/components/Slideshow.jsx b/src/components/Slideshow.jsx index 18be1bf..4e560af 100644 --- a/src/components/Slideshow.jsx +++ b/src/components/Slideshow.jsx @@ -63,43 +63,46 @@ function Slideshow() { }; return ( -
-
-

Why Choose Us??

-
-
- {testimonials.map((_, index) => ( - handleDotClick(index)} - > - ))} -
-
    - {testimonials.map((testimonial, index) => ( - - ))} -
-
- - -
+ <> +
+
+
+

Why Choose Us??

+
+
+ {testimonials.map((_, index) => ( + handleDotClick(index)} + > + ))} +
+
    + {testimonials.map((testimonial, index) => ( + + ))} +
+
+ + +
+
-
+ ); } From 7f2257770e1d0dbe8f95b9ea60b8e5f7ce42e331 Mon Sep 17 00:00:00 2001 From: Aman-Jangid Date: Wed, 30 Oct 2024 21:05:28 +0530 Subject: [PATCH 10/11] Refactor media queries --- src/App.css | 157 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 92 insertions(+), 65 deletions(-) diff --git a/src/App.css b/src/App.css index 7466d25..a27b9e6 100644 --- a/src/App.css +++ b/src/App.css @@ -951,28 +951,6 @@ h1 { object-fit: cover; } -/* Responsive Design */ -@media (max-width: 768px) { - .testimonals .why { - font-size: 3rem; - } - - .carousels .card { - min-width: 250px; - } - - .user img { - width: 80px; - height: 80px; - } - - .slider { - height: 40px; - width: 40px; - font-size: 1.25rem; - } -} - @media (max-width: 660px) { .home-text { flex-direction: column; @@ -993,9 +971,13 @@ h1 { margin-right: 20px; } - /* .nav-text, .nav-button { - display: none; - } */ + .nav-up { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + flex-direction: row !important; + } .nav-icon p { font-size: 2rem; @@ -1049,9 +1031,16 @@ h1 { width: 80vw; } + .right-image { + display: flex; + justify-content: center; + padding: 1rem; + } + .home-image { + width: 80%; margin: 0px; - width: -webkit-fill-available; + /* width: -webkit-fill-available; */ padding: 20px; } @@ -1161,22 +1150,64 @@ h1 { } } -@media (max-width: 768px) { +@media (min-width: 601px) and (max-width: 840px) { + nav { + padding: 20px 0; + height: auto; + display: flex; + flex-direction: column; + } + + .nav-up { + display: flex; + flex-direction: column; + } + + .nav-icon p { + font-size: 2rem; + } .nav-item { - font-size: 1.2rem !important; - margin-left: 5px; + font-size: 1.1rem; + margin-left: 4px; } - .nav-button .btn { - height: 2rem; - width: 6rem; - font-size: 1rem; + + .nav-content { + margin-top: 1rem; } + .nav-list { - gap: 10; + margin-right: 5%; + gap: 14px; + } + + .nav-button .btn { + margin-right: 2vw; + width: 7.2rem; + height: 2.4rem; + } + + #introduction { + margin-top: 12rem; + padding-bottom: 1rem; + } + + .right-image { + display: flex; + justify-content: center; + align-items: center; + } + + .home-image { + width: 80%; + display: flex; + margin-left: 10%; + } + + .courses { } } -@media (min-width: 661px) and (max-width: 1200px) { +@media (min-width: 841px) and (max-width: 1200px) { nav { padding: 20px 0; height: auto; @@ -1194,27 +1225,35 @@ h1 { } .nav-item { - font-size: 1.5rem; + font-size: 1.3rem; + } + + .nav-content { + margin-top: 1rem; + } + + .nav-list { + margin-right: 5%; + } + + #introduction { + height: fit-content; + padding-bottom: 1rem; } .home-text { - flex-direction: row; - justify-content: space-between; - width: 90%; margin-top: 200px; - padding: 20px 0; } - .mid-text { - width: 60vw; - /* Adjusted for better readability */ + .right-image { + display: flex; + justify-content: center; + align-items: center; } .home-image { - width: 100%; - /* Scaled for medium-sized screens */ - margin: 10px auto; - padding: 20px 0; + width: 80%; + margin-left: 10%; } .search-icon { @@ -1352,7 +1391,8 @@ h1 { @media (min-width: 1201px) and (max-width: 1700px) { .home-image { - margin-left: 100px; + margin-left: 20%; + margin-top: 15%; } .explore-btn { @@ -1365,24 +1405,11 @@ h1 { } .courses { - margin: 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - } - - .course-box { - margin-bottom: 0; - } - .course-page a { - width: 20rem; - height: 25rem; + grid-template-columns: repeat(3, 1fr); } - .contact-us { - margin-bottom: 20px; - width: 100%; - height: auto; + .search-icon h2 { + font-size: 5rem; + flex: 70%; } } From 9b1833363dbff58591495897fe0469ef3ed44f7c Mon Sep 17 00:00:00 2001 From: Aman-Jangid Date: Thu, 31 Oct 2024 15:26:02 +0530 Subject: [PATCH 11/11] Rewrite media queries --- src/App.css | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/App.css b/src/App.css index a27b9e6..9e63d73 100644 --- a/src/App.css +++ b/src/App.css @@ -1191,6 +1191,16 @@ h1 { padding-bottom: 1rem; } + .search-icon { + flex-direction: column; + justify-content: space-between; + } + + .search-icon h2 { + padding: 1rem; + font-size: 4rem; + } + .right-image { display: flex; justify-content: center; @@ -1204,6 +1214,7 @@ h1 { } .courses { + grid-template-columns: repeat(2, 1fr); } } @@ -1281,23 +1292,11 @@ h1 { } .courses { - grid-template-columns: repeat(3, 2fr); - padding: 20px; - width: 100%; - gap: 20px; - margin: 0px; - } - - .course-box { - width: auto; - height: 20rem; - margin-bottom: 0; + grid-template-columns: repeat(3, 1fr); } .course-page { - padding: 10px; - margin-top: 0px; - width: 90vw; + display: flex; } .wrapper .carousels {