├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   └── User2.png
    ├── index.css
    ├── setupTests.js
    ├── App.test.js
    ├── App.js
    ├── reportWebVitals.js
    ├── index.js
    ├── Components
    │   ├── TextNews.js
    │   ├── LatestArticle.js
    │   ├── TheLatest.jsx
    │   ├── TopPost.js
    │   ├── FromSerian.js
    │   ├── topPost.css
    │   ├── footer.css
    │   ├── theLatest.css
    │   ├── Featured.js
    │   ├── latestArticle.css
    │   ├── featured.css
    │   ├── Header.js
    │   ├── Footer.js
    │   └── header.css
    ├── App.css
    ├── Routes
    │   └── RouterComp.js
    ├── logo.svg
    ├── Pages
    │   ├── blogPage.css
    │   ├── Home.js
    │   ├── Hollywood.js
    │   ├── Bollywood.js
    │   ├── Fitness.js
    │   ├── Food.js
    │   ├── Technology.js
    │   └── BlogPage.js
    └── Context
    │   └── ContextData.jsx
├── .gitignore
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitinrajputind/React-Blog/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitinrajputind/React-Blog/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitinrajputind/React-Blog/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/assets/User2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitinrajputind/React-Blog/HEAD/src/assets/User2.png


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | 
 2 | *{
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   box-sizing: border-box;
 6 |   text-decoration: none;
 7 |   list-style: none;
 8 |   font-family: 'Poppins', sans-serif;
 9 | }
10 | 
11 | body{
12 |   width: 100%;
13 |   min-height: 100% !important;
14 | }


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Footer from './Components/Footer';
 3 | import Header from './Components/Header';
 4 | import RouterComp from './Routes/RouterComp';
 5 | 
 6 | 
 7 | function App() {
 8 |   return (
 9 |     <>
10 |     <Header/>
11 |     <RouterComp/>
12 |     <Footer/>
13 |     </>
14 |   );
15 | }
16 | 
17 | export default App;
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import { BrowserRouter } from 'react-router-dom';
 7 | 
 8 | 
 9 | const root = ReactDOM.createRoot(document.getElementById('root'));
10 | root.render(
11 |   // <React.StrictMode>
12 |     <BrowserRouter>
13 |     <App />
14 |     </BrowserRouter>
15 |   // </React.StrictMode>
16 | );
17 | 
18 | // If you want to start measuring performance in your app, pass a function
19 | // to log results (for example: reportWebVitals(console.log))
20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
21 | reportWebVitals();
22 | 


--------------------------------------------------------------------------------
/src/Components/TextNews.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | import "./theLatest.css"
 4 | 
 5 | const TextNews = (props) => {
 6 |   const { title, id, description , Category } = props;
 7 |   return (
 8 |     <Link  to={"/detaildescription/"+id} state={{ articleID: id , Cat : Category}}>
 9 |       <div className="card">
10 |         <h3 className="tittle">{title}</h3>
11 |         <div className="content">
12 |           <p>{description}</p>
13 |         </div>
14 |         <div className="publish">
15 |           <p>
16 |             Travel <span>/ August 21 2017</span>
17 |           </p>
18 |         </div>
19 |       </div>
20 |     </Link>
21 |   );
22 | };
23 | 
24 | export default TextNews;
25 | 


--------------------------------------------------------------------------------
/src/Components/LatestArticle.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./latestArticle.css"
 3 | import { Link } from 'react-router-dom'
 4 | 
 5 | const LatestArticle = (props) => {
 6 |   const { title, id, image, description , Category } = props;
 7 |   return (
 8 |     <Link  to={"/detaildescription/"+id} state={{ articleID: id , Cat : Category}}>
 9 |     <div className='Article_Contanier'>
10 |       <div className="articleImg">
11 |         <img src={image} alt="not Found" />
12 |       </div>
13 |       <div className="Article_Content">
14 |         <div className="articleheading">
15 |         <h2>{title}</h2>
16 |         <p>{description}</p>
17 |         </div>
18 |         <p className='publish'>TRAVEL <span> / August 21 2017</span></p>
19 |       </div>
20 |     </div>
21 |     </Link>
22 |     
23 |   )
24 | }
25 | 
26 | export default LatestArticle
27 | 


--------------------------------------------------------------------------------
/src/Components/TheLatest.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | import "./theLatest.css"
 4 | 
 5 | const TheLatest = (props) => {
 6 |   const { title, id, image, description , Category } = props;
 7 |   return (
 8 |     <Link  to={"/detaildescription/"+id} state={{ articleID: id , Cat : Category}}>
 9 |       <div className="card">
10 |         <div className="img_card">
11 |           <img src={image} alt="not Found" />
12 |         </div>
13 |         <h3 className="tittle">{title}</h3>
14 |         <div className="content">
15 |           <p>{description}</p>
16 |         </div>
17 |         <div className="publish">
18 |           <p>
19 |             Travel <span>/ August 21 2017</span>
20 |           </p>
21 |         </div>
22 |       </div>
23 |     </Link>
24 |   );
25 | };
26 | 
27 | export default TheLatest;
28 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | /* Home Style  */
 2 | 
 3 | /* Feature Style  */
 4 | .TheLatest{
 5 |     width: 90%;
 6 |     margin : auto;
 7 |     margin-top : 45px;
 8 | }
 9 | 
10 | .Latest_contanier{
11 |     margin-top: 30px;
12 |     display: flex;
13 |     flex-direction: row;
14 |     flex-wrap: wrap;
15 |     justify-content: space-between;
16 |     gap: 20px;
17 |     width: 100%;
18 | }
19 | @media screen and (max-width: 768px) {
20 |     .Latest_contanier{
21 |         justify-content: center;
22 |         /* row-gap: 10vh; */
23 |     }
24 | }
25 | 
26 | /* Featured style End  */
27 | 
28 | 
29 | 
30 | /* Latest Article and top post */
31 | .Section_Contanier{
32 |     margin-top: 90px;
33 |     display: flex;
34 |     flex-direction: row;
35 |     flex-wrap: wrap;
36 |     justify-content: space-between;
37 |     align-items: flex-start;
38 |     row-gap: 100px;
39 | }
40 | 
41 | 
42 | 


--------------------------------------------------------------------------------
/src/Components/TopPost.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./topPost.css"
 3 | import "./latestArticle.css"
 4 | import { Link } from 'react-router-dom'
 5 | 
 6 | 
 7 | const TopPost = (props) => {
 8 |   const { title, id, image, description , Category, index} = props;
 9 |   return (
10 |     <Link  to={"/detaildescription/"+id} state={{ articleID: id , Cat : Category}}>
11 |       <div className='Post_Contanier'>
12 |       <div className="PostImg">
13 |         <img src={image} alt="" />
14 |       </div>
15 |       <div className="Post_Content">
16 |         <div className="Post_heading">
17 |         <h2>{title}</h2>
18 |         <p>{description}</p>
19 |         </div>
20 |         <p className='publish'>TRAVEL <span> / August 21 2017</span></p>
21 |         <h1 className='num'>{index+1}</h1>
22 |       </div>
23 |     </div>
24 |     </Link>
25 |   )
26 | }
27 | 
28 | export default TopPost
29 | 


--------------------------------------------------------------------------------
/src/Routes/RouterComp.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Route, Routes } from 'react-router-dom'
 3 | import Home from '../Pages/Home'
 4 | import Bollywood from '../Pages/Bollywood'
 5 | import Technology from '../Pages/Technology'
 6 | import Fitness from '../Pages/Fitness'
 7 | import Food from '../Pages/Food'
 8 | import Hollywood from '../Pages/Hollywood'
 9 | import BlogPage from '../Pages/BlogPage'
10 | 
11 | const RouterComp = () => {
12 |   return (
13 |    <>
14 |    <Routes>
15 |         <Route path="/" element = {<Home/>}/>
16 |         <Route path="/Bollywood" element = {<Bollywood/>}/>
17 |         <Route path="/Technology" element = {<Technology/>}/>
18 |         <Route path="/Hollywood" element = {<Hollywood/>}/>
19 |         <Route path="/Fitness" element = {<Fitness/>}/>
20 |         <Route path="/Food" element = {<Food/>}/>
21 |         <Route path="/detaildescription/:id" element = {<BlogPage/>}/>
22 |         {/* <Route path="/*" element = {<Error/>}/> */}
23 |     </Routes>
24 |    </>
25 |   )
26 | }
27 | 
28 | export default RouterComp
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blog-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.17.0",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "react-icon": "^1.0.0",
12 |     "react-icons": "^4.10.1",
13 |     "react-router-dom": "^6.14.2",
14 |     "react-scripts": "5.0.1",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/Components/FromSerian.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import User from "../assets/User2.png"
 3 | import "./theLatest.css"
 4 | import { Link } from "react-router-dom";
 5 | 
 6 | const FromSerian = (props) => {
 7 |     const { title, id, image, description, Category} = props;
 8 |   return (
 9 |     <Link  to={"/detaildescription/"+id} state={{ articleID: id, Cat : Category}}>
10 |       <div className="card">
11 |         <div className="img_card">
12 |           <img src={image} alt="not Found" />
13 |         </div>
14 |         <h3 className="tittle">{title}</h3>
15 |         <div className="content">
16 |           <p>{description}</p>
17 |         </div>
18 |         <div className="username">
19 |                   <div className="usericon">
20 |                     <img src={User} alt=""  className="icon"/>
21 |                     {/* This is Authour name Icon */}
22 |                   </div>
23 |                   <div className="name">
24 |                     <h3>Nitin Rajput</h3>
25 |                     <p>jan 28 2019 | 10 min read</p>
26 |                   </div>
27 |                 </div>
28 |       </div>
29 |     </Link>
30 |   )
31 | }
32 | 
33 | 
34 | 
35 | export default FromSerian
36 | 


--------------------------------------------------------------------------------
/src/Components/topPost.css:
--------------------------------------------------------------------------------
 1 | .Post_Contanier{
 2 |     display: flex;
 3 |     flex-direction: row;
 4 |     justify-content: space-between;
 5 |     align-items: center;
 6 |     column-gap: 10px;
 7 |     width: 500px;
 8 |     height: 250px;
 9 |     border-bottom: 3px solid #f0f0f0;
10 |     opacity: 1;
11 | }
12 | .PostImg{
13 |     width: 600px;
14 |     height: 200px;
15 | }
16 | .PostImg img{
17 |     width: 100%;
18 |     height: 100%;
19 |     border-radius: 10px;
20 | }
21 | .Post_Content{
22 |     display: flex;
23 |     flex-direction: column;
24 |     align-items: flex-start;
25 |     justify-content: space-between;
26 |     position: relative;
27 | }
28 | .Post_heading{
29 |     display: flex;
30 |     flex-direction: column;
31 |     justify-content: space-between;
32 |     align-items: center;
33 | }
34 | .Post_heading h2{
35 |     font-size: 1.1rem;
36 |     font-weight: 700;
37 |     overflow: hidden;
38 |     color: #2d3436;
39 | }
40 | .Post_heading p{
41 |     font-size: 1rem;
42 |     color: #908D8D;
43 |     font-weight: 500;
44 | }
45 | 
46 | .num{
47 |     position: absolute;
48 |     bottom: 0px;
49 |     right: 20px;
50 |     font-size: 4rem;
51 |     line-height: 40px;
52 |     color: #F0F0F0;
53 | }
54 | 
55 | 
56 | @media screen and (max-width: 913px) {
57 |      .Post_Contanier{
58 |         width: 90vw;
59 |      }   
60 | }


--------------------------------------------------------------------------------
/src/Components/footer.css:
--------------------------------------------------------------------------------
 1 | .footer{
 2 |     width: 100%;
 3 |     margin-top: 50px;
 4 |     background-color: #b2bec3;
 5 |     height: 315px;
 6 |     padding: 20px;
 7 |     box-shadow: 0px 0px 13px 2px grey;
 8 | }
 9 | .FooterContainer{
10 |     display: flex;
11 |     justify-content: space-evenly;
12 |     align-items: flex-start;
13 |     flex-wrap: wrap;
14 |     width: 100%;
15 |     margin-top: 20px;
16 | }
17 | .Footer_text{
18 |     width: 300px;
19 |     display: flex;
20 |     justify-content: space-between;
21 | }
22 | .Footer_Pages h3{
23 |     text-transform: capitalize;
24 |     font-size: 1.3rem;
25 |     text-align: start;
26 |     color: #000;
27 |     font-weight: 700;
28 | }
29 | .Footer_Pages a{
30 |     text-align: start;
31 |     color: #000;
32 |     font-size: 1rem;
33 |     font-weight: 500;
34 | }
35 | .FooterContact h3{
36 |     text-transform: capitalize;
37 |     font-size: 1.3rem;
38 |     text-align: start;
39 |     color: #000;
40 |     font-weight: 700;
41 | }
42 | .FooterContact a{
43 |     color: #000;
44 | }
45 | .CopyRightContainer{
46 |     /* margin-top: 40px; */
47 |     padding-top: 40px;
48 |     display: flex;
49 |     flex-direction: column;
50 |     justify-content: flex-start;
51 |     align-items: center;
52 |     color: #000;
53 |     background-color: #b2bec3;
54 | }
55 | 
56 | @media screen and (max-width: 562px){
57 |     .footer{
58 |         padding: 0px;
59 |     }
60 | }


--------------------------------------------------------------------------------
/src/Components/theLatest.css:
--------------------------------------------------------------------------------
 1 | .card{
 2 |     width: 400px;
 3 |     height: max-content;
 4 |     /* border: 2px solid green; */
 5 |     position: relative;
 6 |     padding: 0.3rem;
 7 | }
 8 | .content{
 9 |     width: 100%;
10 |     text-align: justify;
11 |     height: 120px;
12 |     white-space: pre-wrap;
13 |     overflow: hidden;
14 |     text-overflow: ellipsis;
15 | }
16 | 
17 | .img_card{
18 |     width: 100%;
19 |     height: 300px;
20 |     /* border: 2px solid red; */
21 |     border-radius: 0.5rem;
22 | }
23 | 
24 | .img_card img{
25 |     width: 100%;
26 |     height: 100%;
27 |     border-radius: inherit;
28 | }
29 | .tittle{
30 |     text-align: center;
31 |     color: rgba(0, 0, 0, 0.821);
32 |     font-weight: 700;
33 |     font-size: 1.2rem;
34 | }
35 | .content{
36 |     margin: 5px;
37 |     padding: 2px;
38 |     color: grey;
39 |     font-size: 0.96rem;
40 | }
41 | .publish{
42 |     text-align: start;
43 |     font-size: 1.1rem;
44 |     font-weight: 600;
45 |     color: black;
46 | }
47 | .publish span{
48 |     color: grey;
49 | }
50 | 
51 | /* Media Queries  */
52 | @media screen and (max-width: 911px) {
53 |      .card{
54 |         width: 40vw;  
55 |         margin-bottom: 8vw;
56 |      }  
57 | }
58 | 
59 | @media screen and (max-width: 650px ) {
60 |     .card{
61 |        width: 70vw;
62 |     }  
63 | }
64 | 
65 | @media screen and (max-width: 650px ) {
66 |     .card{
67 |        margin-bottom: 50px;
68 |     }  
69 | }


--------------------------------------------------------------------------------
/src/Components/Featured.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import "./featured.css";
 3 | 
 4 | const Featured = () => {
 5 |   return (
 6 |     <>
 7 |     <div className="main-Container">
 8 |         <div className="contanier">
 9 |         <Link to={"/Hollywood"} >  
10 |             <div className="title">
11 |             <h3>Title of Vertical Gallery</h3>
12 |             <p>trvel/August 21 2017</p>
13 |             </div>
14 |             <img src="https://cdn.pixabay.com/photo/2016/11/15/07/09/photo-manipulation-1825450_1280.jpg" alt="not Found" height={"515px"} width={"100%"}/>
15 |         </Link>
16 |         </div>
17 |         
18 |         <div className="contanier-right">
19 | 
20 |             <div className="item">
21 |                 <Link to={"/Technology"}>
22 |                 <div className="title-2">
23 |                     <h3>Title of Vertical Gallery</h3>
24 |                     <p>trvel/August 21 2017</p>
25 |                 </div>
26 |                     <img src="https://cdn.pixabay.com/photo/2015/03/26/18/36/spacex-693229_1280.jpg" alt="not found" height={"250px"} width={"100%"}/>
27 |                 </Link>
28 |             </div>
29 | 
30 |             <div className="item">
31 |                 <Link to={"/Food"}>
32 |                 <div className="title-2">
33 |                     <h3>Title of Vertical Gallery</h3>
34 |                     <p>trvel/August 21 2017</p>
35 |                 </div>
36 |                     <img src="https://cdn.pixabay.com/photo/2016/07/07/13/54/burger-1502450_1280.jpg" alt="not found" height={"250px"} width={"100%"}/>
37 |                 </Link>
38 |             </div>
39 | 
40 |         </div>
41 | 
42 |     </div>
43 |     </>
44 |   )
45 | }
46 | 
47 | export default Featured
48 | 
49 | 


--------------------------------------------------------------------------------
/src/Components/latestArticle.css:
--------------------------------------------------------------------------------
 1 | .Article_Contanier{
 2 |     width: 700px;
 3 |     height: 300px;
 4 |     display: flex;
 5 |     flex-direction: row;
 6 |     justify-content: flex-end;
 7 |     align-items: center;
 8 |     /* padding: 20px; */
 9 |     column-gap: 20px;
10 |     /* border: 1px solid black; */
11 |     border-bottom: 3px solid #f0f0f0;
12 |     opacity: 1;
13 | }
14 | .articleImg{
15 |     /* border: 2px solid black; */
16 |     width: 900px;
17 |     height: 250px;
18 |     
19 | }
20 | .articleImg img{
21 |     width: 100%;
22 |     height: 100%;
23 |     border-radius: 10px;
24 | }
25 | .Article_Content{
26 |     /* border: 2px solid #ccc; */
27 |     display: flex;
28 |     flex-direction: column;
29 |     align-items: space-evenly;
30 |     justify-content: space-between;
31 |     /* row-gap: 20px; */
32 |     height: 245px;
33 |     width: 100%;
34 | 
35 | 
36 | }
37 | .articleheading{
38 |     text-align: start;
39 |     display: flex;
40 |     flex-direction: column;
41 |     justify-content: center;
42 |     align-items: center;
43 |     row-gap: 10px;
44 | 
45 | }
46 | .articleheading h2{
47 |     font-size: 1.1rem;
48 |     font-weight: 700;
49 |     overflow: hidden;
50 |     color: #2d3436;
51 | }
52 | .articleheading p{
53 |     font-size: 1rem;
54 |     color: #908D8D;
55 |     font-weight: 600;
56 | }
57 | 
58 | 
59 | @media screen and (max-width: 734px) {
60 |     .Article_Contanier{
61 |         width: 90vw;
62 |     } 
63 |     .articleImg{
64 |         width: 60vw;
65 |         max-height: 250px;
66 |     }
67 |     .Article_Content{
68 |         justify-content: space-evenly;
69 |     }
70 | }
71 | 
72 | @media screen and (max-width: 371px) {
73 |     .Article_Contanier{
74 |         /* margin: 4rem 0rem; */
75 |         height: 450px;
76 |     }
77 | }


--------------------------------------------------------------------------------
/src/Components/featured.css:
--------------------------------------------------------------------------------
 1 | .main-Container{
 2 |     display: flex;
 3 |     flex-direction: row;
 4 |     justify-content: center;
 5 |     /* align-items: flex-start; */
 6 |     /* flex-wrap: wrap; */
 7 |     gap: 20px;
 8 |     width: 90%;
 9 |     margin: auto;
10 |     margin-top: 30px;
11 | }
12 | .contanier{
13 |     width: max-content;
14 |     height: 520px;
15 |     height: fit-content;
16 |     /* flex: auto; */
17 |     /* border: 3px solid blue; */
18 |     display: flex;
19 |     justify-content: flex-start;
20 |     align-items: center;
21 |     position: relative;
22 | }
23 | .contanier img{
24 |     border-radius: 10px;
25 | }
26 | .contanier-right{
27 |     /* border: 2px solid red; */
28 |     display: flex;
29 |     flex-direction: column;
30 |     justify-content: center;
31 |     align-items: center;
32 |     flex-wrap: wrap;
33 |     row-gap: 5px;
34 | }
35 | .item{
36 |     position: relative;
37 |     display: flex;
38 |     justify-content: center;
39 |     align-items: center;
40 |     flex: auto;
41 | }
42 | 
43 | .item img{
44 |     border-radius: 10px;
45 | }
46 | 
47 | .title{
48 |     position: absolute;
49 |     left: 46px;
50 |     bottom: 80px;
51 |     color: white;
52 |     font-size: 1.2rem;
53 | }
54 | .title-2{
55 |     position: absolute;
56 |     right: 20px;
57 |     bottom: 20px;
58 |     color: white;
59 |     font-size: 1rem;
60 | }
61 | 
62 | 
63 |  /* Media Queries */
64 | 
65 |  /* MObile Repsonsive  */
66 | 
67 |  @media screen and (max-width: 768px){
68 |     .main-Container{
69 |         flex-direction: column;
70 | 
71 |     }
72 |     .contanier{
73 |         width: 100%;
74 |     }
75 |     .contanier-right{
76 |         flex-direction: column;
77 |     }
78 |     .item{
79 |         width: 100%;
80 |     }
81 |     .item img{
82 |         width: 90vw;
83 |     }
84 |  }


--------------------------------------------------------------------------------
/src/Components/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { Link, NavLink } from 'react-router-dom';
 3 | import { AiOutlineBars } from 'react-icons/ai';
 4 | import { RxCross1 } from 'react-icons/rx';
 5 | import "./header.css"
 6 | 
 7 | const Header = () => {
 8 |     const[isMobile, setIsMobile] = useState(false);
 9 |   return (
10 |     <>
11 |      <header className='Header'>
12 |         <div className="brand">
13 |             <Link to={"/"}>
14 |             <h1><span className='the'>The</span>Serian</h1>
15 |             </Link>
16 |         </div>
17 | 
18 |         <nav className={isMobile? "mobile-reponsive" : "nav-link"} onClick={()=>{setIsMobile(false)}}>
19 |             <li><NavLink to={"/"} className={({ isActive }) => (isActive ? 'activeClass' : 'notactiveClass')}>Home</NavLink></li>
20 |             <li><NavLink to={"/Bollywood"} className={({ isActive }) => (isActive ? 'activeClass' : 'notactiveClass')}>Bollywood</NavLink></li>
21 |             <li><NavLink to={"/HollyWood"} className={({ isActive }) => (isActive ? 'activeClass' : 'notactiveClass')}>HollyWood</NavLink></li>
22 |             <li><NavLink to={"/Technology"} className={({ isActive }) => (isActive ? 'activeClass' : 'notactiveClass')}>Technology</NavLink></li>
23 |             <li><NavLink to={"/Fitness"} className={({ isActive }) => (isActive ? 'activeClass' : 'notactiveClass')}>Fitness</NavLink></li>
24 |             <li><NavLink to={"/Food"} className={({ isActive }) => (isActive ? 'activeClass' : 'notactiveClass')}>Food</NavLink></li>
25 |         </nav>
26 |         <button className='mobile-menu-icon' onClick={()=>{setIsMobile(!isMobile)}}>
27 |             {isMobile ? <RxCross1/>  : <AiOutlineBars/>}
28 |         </button>
29 |         <hr  className='hr'/>
30 |     </header> 
31 |     </>
32 |   )
33 | }
34 | export default Header
35 | 


--------------------------------------------------------------------------------
/src/Components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./footer.css";
 3 | import { Link } from "react-router-dom";
 4 | import { AiFillFacebook, AiFillInstagram, AiFillGithub, AiFillLinkedin } from 'react-icons/ai';
 5 | 
 6 | 
 7 | const Footer = () => {
 8 |   return (
 9 |     <footer className="footer">
10 |       <div className="FooterContainer">
11 |         <div className="brand Footer_Brand">
12 |           <Link to={"/"}>
13 |             <h1>
14 |               <span className="the">The</span>Serian
15 |             </h1>
16 |           </Link>
17 |         </div>
18 |         <div className="Footer_text">
19 |         <div className="Footer_Pages">
20 |           <h3>Quick Link </h3>
21 |           <ul>
22 |           <li><Link to={"/"} >Home</Link></li>
23 |             <li><Link to={"/Bollywood"} >Bollywood</Link></li>
24 |             <li><Link to={"/HollyWood"} >HollyWood</Link></li>
25 |             <li><Link to={"/Technology"} >Technology</Link></li>
26 |             <li><Link to={"/Fitness"} >Fitness</Link></li>
27 |             <li><Link to={"/Food"} >Food</Link></li>
28 |           </ul>
29 |         </div>
30 |         <div className="FooterContact">
31 |             <h3> Contact US </h3>
32 |           <Link to={"https://www.facebook.com/nitinrajputindia/"} target="_blank"><div className="social_child"> <AiFillFacebook className="fb"/>facebook</div></Link>
33 |           <Link to={"https://www.instagram.com/nitinrajputindia/"} target="_blank" ><div className="social_child"><AiFillInstagram className="insta"/> Intagram</div></Link>
34 |           <Link to={"https://github.com/nitinrajputind"} target="_blank"><div className="social_child"><AiFillGithub className="git"/> github</div></Link>
35 |           <Link to={"https://www.linkedin.com/in/nitinrajputindia"} target="_blank"><div className="social_child"> <AiFillLinkedin className="link"/>linkedin</div></Link>
36 |         </div>
37 |         </div>
38 | 
39 |       </div>
40 |       <div className="CopyRightContainer">
41 |         <h3>All CopyRight @ 2023 reserved Nitin Rajput With ❤️ </h3>
42 |       </div>
43 |     </footer>
44 |   );
45 | };
46 | 
47 | export default Footer;
48 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 | 
28 |         <!-- Google Font Poppins  -->
29 |         <link rel="preconnect" href="https://fonts.googleapis.com" />
30 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
31 |         <link
32 |           href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
33 |           rel="stylesheet"
34 |         />
35 | 
36 | 
37 |     <title>Blog Project</title>
38 |   </head>
39 |   <body>
40 |     <noscript>You need to enable JavaScript to run this app.</noscript>
41 |     <div id="root"></div>
42 |     <!--
43 |       This HTML file is a template.
44 |       If you open it directly in the browser, you will see an empty page.
45 | 
46 |       You can add webfonts, meta tags, or analytics to this file.
47 |       The build step will place the bundled scripts into the <body> tag.
48 | 
49 |       To begin the development, run `npm start` or `yarn start`.
50 |       To create a production bundle, use `npm run build` or `yarn build`.
51 |     -->
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/Components/header.css:
--------------------------------------------------------------------------------
  1 | .Header{
  2 |     width: 100%;
  3 | }
  4 | 
  5 | /* Logo Style Start */
  6 | .brand{
  7 |     display: flex;
  8 |     flex-direction: row;
  9 |     justify-content: center;
 10 |     font-size: 25px;
 11 |     margin-bottom: 20px;
 12 | }
 13 | .brand h1{
 14 |     font-weight: 700;
 15 | }
 16 | .brand a{
 17 |     color: black;
 18 | }
 19 | .the{
 20 |     text-align: center;
 21 |     font-size: 25px;
 22 |     font-weight: 700;
 23 |     display: inline-block;
 24 |     height: 10px;
 25 |     margin-right: 10px;
 26 |     transform: rotate(269deg);
 27 | }
 28 | 
 29 | /* Logo Style End  */
 30 | 
 31 | /* Navbar Style Start  */
 32 | 
 33 | .nav-link{
 34 |     display: flex;
 35 |     flex-direction: row;
 36 |     justify-content: space-evenly;
 37 |     align-items: center;
 38 |     flex-wrap: wrap;
 39 | }
 40 | .nav-link a{
 41 |     font-size: 22px;
 42 |     font-weight: 600;
 43 | } 
 44 | 
 45 | .hr{
 46 |     background-color: grey;
 47 |     width: 90%;
 48 |     height: 3px;
 49 |     margin: auto;
 50 |     margin-top: 20px;
 51 | }
 52 | 
 53 | .activeClass{
 54 |     color: rgb(49, 185, 239) !important;
 55 |     transition-delay: 0.2s ease;
 56 | }
 57 | 
 58 | .notactiveClass{
 59 |     color: black !important;
 60 |     transition-delay: 0.2s ease;
 61 | }
 62 | .buger{
 63 |     display: none;
 64 | }
 65 | 
 66 | .mobile-menu-icon{
 67 |     display: none;
 68 | }
 69 | /* Media Queries  */
 70 | 
 71 | /* Mobile Size Media */
 72 | 
 73 | @media screen and (max-width: 768px){
 74 |     .Header{
 75 |         box-shadow: 0px 2px 5px grey;
 76 |     }
 77 |     .brand{
 78 |         justify-content: flex-start;
 79 |     }
 80 |     .nav-link{
 81 |         display: none;
 82 |     }
 83 |     .hr{
 84 |         display: none;
 85 |     }
 86 |     .mobile-reponsive{
 87 |         flex-direction: column;
 88 |         background: white;
 89 |         height: 18.1rem;
 90 |         position: absolute;
 91 |         z-index: 999;
 92 |         width: 100%;
 93 |     }
 94 |     .mobile-reponsive li{
 95 |         border-bottom: 1px solid grey;
 96 |         text-align: center;
 97 |         font-size: 2rem;
 98 |     }
 99 |     /* .buger{
100 |         display: block;
101 |         font-size: 2.5rem;
102 |         font-weight: 900;
103 |         position: absolute;
104 |         top: 33px;
105 |         right: 30px;
106 |     } */
107 |     .mobile-menu-icon{
108 |         background: transparent;
109 |         outline: none;
110 |         border: none;
111 |         display: block;
112 |         font-size: 3rem;
113 |         font-weight: 900;
114 |         position: absolute;
115 |         top: 16px;
116 |         right: 11px;
117 |     }
118 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/src/Pages/blogPage.css:
--------------------------------------------------------------------------------
  1 | .Main_Desc{
  2 |     position: relative;
  3 | }
  4 | .main-head{
  5 |     width: 50vw;
  6 |     margin: auto;
  7 |     /* background-color: aqua; */
  8 | }
  9 | .head{
 10 |     text-align: justify;
 11 |     font-size: 1.1rem;
 12 |     line-height: 52px;
 13 |     word-spacing: normal;
 14 | }
 15 | .head h1{
 16 |     font-weight: 500;
 17 | }
 18 | 
 19 | /* user style  */
 20 | 
 21 | .user{
 22 |     display: flex;
 23 |     flex-direction: row;
 24 |     justify-content: space-between;
 25 |     flex-wrap: wrap;
 26 |     margin-top: 30px;
 27 |     position: relative;
 28 | 
 29 | }
 30 | .username{
 31 |     display: flex;
 32 |     flex-direction: row;
 33 |     justify-content:flex-start;
 34 |     align-items: center;
 35 |     column-gap: 20px;
 36 | }
 37 | .usericon{
 38 |     width: 5rem;
 39 |     display: flex;
 40 |     justify-content: center;
 41 |     align-items: center;
 42 |     border-radius: 50%;
 43 |     box-shadow: 0px 0px 10px 1px grey;
 44 |     border: 1px solid black;
 45 | }
 46 | .icon{
 47 |     width: 100%;
 48 | }
 49 | .name{
 50 |     display: flex;
 51 |     flex-direction: column;
 52 |     justify-content: center;
 53 |     align-items: flex-start;
 54 | }
 55 | .name h3{
 56 |     font-size: 1rem;
 57 |     font-weight: 700;
 58 |     color: black;
 59 | }
 60 | .name p{
 61 |     font-size: 0.9rem;
 62 |     font-weight: 600;
 63 |     color: grey;
 64 | }
 65 | .userSocial{
 66 |     display: flex;
 67 |     flex-direction: row;
 68 |     justify-content: center;
 69 |     align-items: center;
 70 |     column-gap: 10px;
 71 |     font-size: 2rem;
 72 |     color: #5c5b5b;
 73 | }
 74 | 
 75 | /* image section */
 76 | .Main_Image{
 77 |     width: 100%;
 78 |     height: 500px;
 79 |     margin-top: 30px;
 80 | }
 81 | .Main_Image img{
 82 |     width: 100%;
 83 |     height: 100%;
 84 | }
 85 | .description{
 86 |     padding: 5px;
 87 |     text-align: justify;
 88 |     font-size: 1.2rem;
 89 |     font-weight: 400;
 90 |     margin-top: 30px;
 91 | }
 92 | .like{
 93 |     display: flex;
 94 |     flex-direction: row;
 95 |     align-items: center;
 96 |     justify-content: flex-start;
 97 |     column-gap: 10px;
 98 |     border-bottom: 3px solid grey;
 99 |     height: 6rem;
100 | }
101 | .clap{
102 |     font-size: 3rem;
103 |     color: grey;
104 | }
105 | .like p{
106 |     display: flex;
107 |     justify-content: center;
108 |     align-items: center;
109 |     font-size: 1rem;
110 |     font-weight: 700;
111 |     color: grey;
112 | }
113 | 
114 | .border{
115 |     background-color: grey;
116 |     width: 100%;
117 |     height: 3px;
118 |     border: none;
119 |     margin: 30px 0;
120 | }
121 | 
122 | /* Like and share Button  */
123 | .ShareIcon{
124 |     display: flex;
125 |     flex-direction: column;
126 |     flex-wrap: wrap;
127 |     row-gap: 10px;
128 |     justify-content: center;
129 |     position: absolute;
130 |     top: 35vh;
131 |     left: 2vw;
132 | }
133 | .div1{
134 |     display: flex;
135 |     justify-content: center;
136 |     align-items: center;
137 |     flex-wrap: wrap;
138 |     column-gap: 10px;
139 |     font-size: 1rem;
140 |     font-weight: 500;
141 |     color: grey;
142 | }
143 | .div2{
144 |     display: flex;
145 |     flex-direction: row;
146 |     flex-wrap: wrap;
147 |     align-items: center;
148 |     justify-content: center;
149 |     column-gap: 10px;
150 |     font-size: 1rem;
151 |     font-weight: 500;
152 |     color: grey;
153 | }
154 | 
155 | @media screen and (max-width: 768px) {
156 |     .main-head{
157 |         width: 80vw;
158 |     }
159 |     .top_Postion{
160 |         position: absolute;
161 |         top: 0;
162 |     }
163 |     .user{
164 |         min-height: 150px;
165 |     }
166 |     .Main_Image{
167 |         margin-top: 0;
168 |     }
169 |     .ShareIcon{
170 |         display: none;
171 |     }
172 |     .username{
173 |         margin-top: 20px;
174 |     }
175 | }
176 | 
177 | @media screen and (max-width: 442px) {
178 |     .main-head{
179 |         width: 80vw;
180 |     }
181 | }


--------------------------------------------------------------------------------
/src/Pages/Home.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import Featured from '../Components/Featured'
  3 | import { useContext } from "react";
  4 | import data from "../Context/ContextData.jsx"
  5 | import TheLatest from '../Components/TheLatest';
  6 | import TopPost from '../Components/TopPost';
  7 | import LatestArticle from '../Components/LatestArticle';
  8 | import TextNews from '../Components/TextNews';
  9 | 
 10 | const Home = () => {
 11 |   const Apidata = useContext(data);
 12 |   // console.log(Apidata)
 13 |   return (
 14 |     <div>
 15 |       <Featured/>
 16 | 
 17 |       {/* The Latest Section  */}
 18 |       <div className="TheLatest">
 19 |         <h2>The Latest
 20 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 21 |         </h2>
 22 |         <div className="Latest_contanier">
 23 |         {
 24 |           Apidata.filter((data)=>data.category === "mix").map((item,index)=>{
 25 |             // console.log(item)
 26 |             return(
 27 |               
 28 |               <TheLatest key={index}
 29 |               title = {item.title} 
 30 |               id = {item.id} 
 31 |               image = {item.img} 
 32 |               Category = {item.category}
 33 |               description ={item.description.slice(0,200)}/>
 34 |             )
 35 |           })
 36 |         }
 37 |         </div>
 38 |       </div>
 39 | 
 40 |       {/* This is Parent Contanier  */}
 41 |       <div className="TheLatest Section_Contanier">
 42 | 
 43 |       {/* This is Latest Articles Contanier  */}
 44 |       
 45 |       {/* style={{width : "710px", border : "2px solid Blue"}} */}
 46 |         <div className="left_contanier" >
 47 |         <h2>
 48 |           Latest Articles
 49 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 50 |         </h2>
 51 |         {
 52 |          Apidata.filter((data)=>data.id % 2 ===  0 && data.id % 4 === 0).map((item, index)=>{
 53 |           return(
 54 |             <LatestArticle key={index}
 55 |             title = {item.title.slice(0,100)} 
 56 |             id = {item.id} 
 57 |             image = {item.img} 
 58 |             Category = {item.category}
 59 |             description ={item.description.slice(0,100)}/>
 60 |           )
 61 |          })
 62 |         }
 63 |         </div>
 64 | 
 65 | 
 66 |         {/* This is Top Post Container  */}
 67 |         {/* style={{width : "500px" , border : "2px solid red"}} */}
 68 |         <div className="rightContanier" >
 69 |         <h2>
 70 |           To Posts
 71 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 72 |         </h2>
 73 |         {
 74 |          Apidata.filter((data)=>data.id % 3 ===  0 && data.id % 6 === 0).map((item, index)=>{
 75 |           return(
 76 |             <TopPost key={index}
 77 |             title = {item.title.slice(0,50)} 
 78 |             id = {item.id} 
 79 |             image = {item.img} 
 80 |             Category = {item.category}
 81 |             description ={item.description.slice(0,80)}
 82 |             index ={index}/>
 83 |           )
 84 |          })
 85 |         }
 86 |         </div>
 87 |       </div>
 88 | 
 89 | 
 90 |       {/* Text News Only  */}
 91 | 
 92 |       <div className="TheLatest">
 93 |       <div className="Latest_contanier">
 94 |         {
 95 |           Apidata.filter((data)=>data.id % 3 === 0 && (data.category === "Hollywood")).map((item,index)=>{
 96 |             // console.log(item)
 97 |             return(
 98 |               
 99 |               <TextNews key={index}
100 |               title = {item.title} 
101 |               id = {item.id} 
102 |               image = {item.img} 
103 |               Category = {item.category}
104 |               description ={item.description.slice(0,200)}/>
105 |             )
106 |           })
107 |         }
108 |         </div>
109 |       </div>
110 | 
111 |     </div>
112 |   )
113 | }
114 | 
115 | export default Home
116 | 


--------------------------------------------------------------------------------
/src/Pages/Hollywood.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext } from 'react'
  2 | import data from '../Context/ContextData'
  3 | import TheLatest from '../Components/TheLatest';
  4 | import LatestArticle from '../Components/LatestArticle';
  5 | import TopPost from '../Components/TopPost';
  6 | import TextNews from '../Components/TextNews';
  7 | 
  8 | 
  9 | const Hollywood = () => {
 10 |   const Apidata = useContext(data);
 11 |   return (
 12 |     <>
 13 |     <div className="TheLatest">
 14 |         <h2>Hollywood
 15 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 16 |         </h2>
 17 |         <div className="Latest_contanier">
 18 |         {
 19 |           Apidata.filter((data)=>data.category === "Hollywood"  && (data.id >= 19 && data.id <= 24) ).map((item,index)=>{
 20 |             // console.log(item)
 21 |             return(
 22 |               
 23 |               <TheLatest key={index}
 24 |               title = {item.title} 
 25 |               id = {item.id} 
 26 |               image = {item.img} 
 27 |               Category = {item.category}
 28 |               description ={item.description.slice(0,200)}/>
 29 |             )
 30 |           })
 31 |         }
 32 |         </div>
 33 |       </div>
 34 | 
 35 |             {/* TOP post and Latest Article  */}
 36 | 
 37 | 
 38 |       {/* This is Parent Contanier  */}
 39 |       <div className="TheLatest Section_Contanier">
 40 | 
 41 |       {/* This is Latest Articles Contanier  */}
 42 |       
 43 |       {/* style={{width : "710px", border : "2px solid Blue"}} */}
 44 |         <div className="left_contanier" >
 45 |         <h2>
 46 |           Latest Articles
 47 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 48 |         </h2>
 49 |         {
 50 | 
 51 |          Apidata.filter((data)=>data.category === "Hollywood" ).map((item, index)=>{
 52 |            
 53 |           return(
 54 |             <LatestArticle key={index}
 55 |             title = {item.title.slice(0,100)} 
 56 |             id = {item.id} 
 57 |             image = {item.img} 
 58 |             Category = {item.category}
 59 |             description ={item.description.slice(0,100)}/>
 60 |           ) 
 61 |          })
 62 |         }
 63 |         </div>
 64 | 
 65 | 
 66 |         {/* This is Top Post Container  */}
 67 |         {/* style={{width : "500px" , border : "2px solid red"}} */}
 68 |         <div className="rightContanier" >
 69 |         <h2>
 70 |           To Posts
 71 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 72 |         </h2>
 73 |         {
 74 |          Apidata.filter((data)=>data.id % 3 === 0 && (data.category === "Fitness" || data.category === "Technology" )).map((item, index)=>{
 75 |           return(
 76 |             <TopPost key={index}
 77 |             title = {item.title.slice(0,50)} 
 78 |             id = {item.id} 
 79 |             image = {item.img} 
 80 |             Category = {item.category}
 81 |             description ={item.description.slice(0,80)}
 82 |             index ={index}/>
 83 |           )
 84 |          })
 85 |         }
 86 |         </div>
 87 |       </div>
 88 | 
 89 | 
 90 | 
 91 |            {/* Text News Only  */}
 92 | 
 93 |            <div className="TheLatest">
 94 |       <div className="Latest_contanier">
 95 |         {
 96 |           Apidata.filter((data)=>data.id % 2 === 0 && (data.category === "Hollywood" && data.id % 4 ===0)).map((item,index)=>{
 97 |             // console.log(item)
 98 |             return(
 99 |               <TextNews key={index}
100 |               title = {item.title} 
101 |               id = {item.id} 
102 |               image = {item.img} 
103 |               Category = {item.category}
104 |               description ={item.description.slice(0,200)}/>
105 |             )
106 |           })
107 |         }
108 |         </div>
109 |       </div>
110 | 
111 | 
112 | 
113 |     </>
114 |   )
115 | }
116 | 
117 | export default Hollywood
118 | 


--------------------------------------------------------------------------------
/src/Pages/Bollywood.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext } from "react";
  2 | import data from "../Context/ContextData";
  3 | import TheLatest from "../Components/TheLatest";
  4 | import TopPost from "../Components/TopPost";
  5 | import LatestArticle from "../Components/LatestArticle";
  6 | import TextNews from "../Components/TextNews";
  7 | 
  8 | const Bollywood = () => {
  9 |   const Apidata = useContext(data);
 10 |   return (
 11 |     <div>
 12 |       {/* The Latest Section  */}
 13 |       <div className="TheLatest">
 14 |         <h2>
 15 |           The BollyWood
 16 |           <hr
 17 |             style={{
 18 |               width: "100px",
 19 |               height: "3px",
 20 |               background: "red",
 21 |               border: "none",
 22 |               outline: "none",
 23 |               borderRadius: "5px",
 24 |             }}
 25 |           />
 26 |         </h2>
 27 |         <div className="Latest_contanier">
 28 |           {Apidata.filter(
 29 |             (data) => data.category === "Bollywood" && data.id <= 12
 30 |           ).map((item, index) => {
 31 |             // console.log(item)
 32 |             return (
 33 |               <TheLatest
 34 |                 key={index}
 35 |                 title={item.title}
 36 |                 id={item.id}
 37 |                 image={item.img}
 38 |                 Category={item.category}
 39 |                 description={item.description.slice(0, 200)}
 40 |               />
 41 |             );
 42 |           })}
 43 |         </div>
 44 |       </div>
 45 | 
 46 |       {/* TOP post and Latest Article  */}
 47 | 
 48 | 
 49 |       {/* This is Parent Contanier  */}
 50 |       <div className="TheLatest Section_Contanier">
 51 | 
 52 |       {/* This is Latest Articles Contanier  */}
 53 |       
 54 |       {/* style={{width : "710px", border : "2px solid Blue"}} */}
 55 |         <div className="left_contanier" >
 56 |         <h2>
 57 |           Latest Articles
 58 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 59 |         </h2>
 60 |         {
 61 | 
 62 |          Apidata.filter((data)=>data.category === "Bollywood" ).map((item, index)=>{
 63 |            
 64 |           return(
 65 |             <LatestArticle key={index}
 66 |             title = {item.title.slice(0,100)} 
 67 |             id = {item.id} 
 68 |             image = {item.img} 
 69 |             Category = {item.category}
 70 |             description ={item.description.slice(0,100)}/>
 71 |           ) 
 72 |          })
 73 |         }
 74 |         </div>
 75 | 
 76 | 
 77 |         {/* This is Top Post Container  */}
 78 |         {/* style={{width : "500px" , border : "2px solid red"}} */}
 79 |         <div className="rightContanier" >
 80 |         <h2>
 81 |           To Posts
 82 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 83 |         </h2>
 84 |         {
 85 |          Apidata.filter((data)=>data.id % 3 === 0 && (data.category === "Hollywood" || data.category === "Technology" )).map((item, index)=>{
 86 |           return(
 87 |             <TopPost key={index}
 88 |             title = {item.title.slice(0,50)} 
 89 |             id = {item.id} 
 90 |             image = {item.img} 
 91 |             Category = {item.category}
 92 |             description ={item.description.slice(0,80)}
 93 |             index ={index}/>
 94 |           )
 95 |          })
 96 |         }
 97 |         </div>
 98 |       </div>
 99 | 
100 | 
101 |            {/* Text News Only  */}
102 | 
103 |            <div className="TheLatest">
104 |       <div className="Latest_contanier">
105 |         {
106 |           Apidata.filter((data)=>data.id % 2 === 0 && (data.category === "Bollywood" && data.id % 8 ===0)).map((item,index)=>{
107 |             // console.log(item)
108 |             return(
109 |               <TextNews key={index}
110 |               title = {item.title} 
111 |               id = {item.id} 
112 |               image = {item.img} 
113 |               Category = {item.category}
114 |               description ={item.description.slice(0,200)}/>
115 |             )
116 |           })
117 |         }
118 |         </div>
119 |       </div>
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 |     </div>
128 |   );
129 | };
130 | 
131 | export default Bollywood;
132 | 


--------------------------------------------------------------------------------
/src/Pages/Fitness.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { useContext } from "react";
  3 | import data from "../Context/ContextData";
  4 | import TheLatest from "../Components/TheLatest";
  5 | import TopPost from "../Components/TopPost";
  6 | import LatestArticle from "../Components/LatestArticle";
  7 | import TextNews from "../Components/TextNews";
  8 | 
  9 | const Fitness = () => {
 10 |   const Apidata = useContext(data);
 11 |   return (
 12 |     <>
 13 | 
 14 |     
 15 |       {/* The Latest Section  */}
 16 |       <div className="TheLatest">
 17 |         <h2>
 18 |           The Technology
 19 |           <hr
 20 |             style={{
 21 |               width: "100px",
 22 |               height: "3px",
 23 |               background: "red",
 24 |               border: "none",
 25 |               outline: "none",
 26 |               borderRadius: "5px",
 27 |             }}
 28 |           />
 29 |         </h2>
 30 |         <div className="Latest_contanier">
 31 |           {Apidata.filter((data) => data.category === "Fitness" && data.id <= 48).map(
 32 |             (item, index) => {
 33 |               // console.log(item)
 34 |               return (
 35 |                 <TheLatest
 36 |                   key={index}
 37 |                   title={item.title}
 38 |                   id={item.id}
 39 |                   image={item.img}
 40 |                   Category={item.category}
 41 |                   description={item.description.slice(0, 200)}
 42 |                 />
 43 |               );
 44 |             }
 45 |           )}
 46 |         </div>
 47 |       </div>
 48 | 
 49 |                   {/* TOP post and Latest Article  */}
 50 | 
 51 | 
 52 |       {/* This is Parent Contanier  */}
 53 |       <div className="TheLatest Section_Contanier">
 54 | 
 55 |       {/* This is Latest Articles Contanier  */}
 56 |       
 57 |       {/* style={{width : "710px", border : "2px solid Blue"}} */}
 58 |         <div className="left_contanier" >
 59 |         <h2>
 60 |           Latest Articles
 61 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 62 |         </h2>
 63 |         {
 64 | 
 65 |          Apidata.filter((data)=>data.category === "Fitness" ).map((item, index)=>{
 66 |            
 67 |           return(
 68 |             <LatestArticle key={index}
 69 |             title = {item.title.slice(0,100)} 
 70 |             id = {item.id} 
 71 |             image = {item.img} 
 72 |             Category = {item.category}
 73 |             description ={item.description.slice(0,100)}/>
 74 |           ) 
 75 |          })
 76 |         }
 77 |         </div>
 78 | 
 79 | 
 80 |         {/* This is Top Post Container  */}
 81 |         {/* style={{width : "500px" , border : "2px solid red"}} */}
 82 |         <div className="rightContanier" >
 83 |         <h2>
 84 |           To Posts
 85 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 86 |         </h2>
 87 |         {
 88 |          Apidata.filter((data)=>data.id % 3 === 0 && (data.category === "mix" || data.category === "Technology" )).map((item, index)=>{
 89 |           return(
 90 |             <TopPost key={index}
 91 |             title = {item.title.slice(0,50)} 
 92 |             id = {item.id} 
 93 |             image = {item.img} 
 94 |             Category = {item.category}
 95 |             description ={item.description.slice(0,80)}
 96 |             index ={index}/>
 97 |           )
 98 |          })
 99 |         }
100 |         </div>
101 |       </div>
102 | 
103 | 
104 | 
105 | 
106 |            {/* Text News Only  */}
107 | 
108 |            <div className="TheLatest">
109 |       <div className="Latest_contanier">
110 |         {
111 |           Apidata.filter((data)=>data.id % 2 === 0 && (data.category === "Fitness" && data.id % 4 ===0)).map((item,index)=>{
112 |             // console.log(item)
113 |             return(
114 |               <TextNews key={index}
115 |               title = {item.title} 
116 |               id = {item.id} 
117 |               image = {item.img} 
118 |               Category = {item.category}
119 |               description ={item.description.slice(0,200)}/>
120 |             )
121 |           })
122 |         }
123 |         </div>
124 |       </div>
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 |     </>
133 |   );
134 | };
135 | 
136 | export default Fitness;
137 | 


--------------------------------------------------------------------------------
/src/Pages/Food.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { useContext } from "react";
  3 | import data from "../Context/ContextData";
  4 | import TheLatest from "../Components/TheLatest";
  5 | import TopPost from "../Components/TopPost";
  6 | import LatestArticle from "../Components/LatestArticle";
  7 | import TextNews from "../Components/TextNews";
  8 | 
  9 | const Food = () => {
 10 |   const Apidata = useContext(data);
 11 |   return (
 12 |     <>
 13 | 
 14 |     
 15 |       {/* The Latest Section  */}
 16 |       <div className="TheLatest">
 17 |         <h2>
 18 |           The Food
 19 |           <hr
 20 |             style={{
 21 |               width: "100px",
 22 |               height: "3px",
 23 |               background: "red",
 24 |               border: "none",
 25 |               outline: "none",
 26 |               borderRadius: "5px",
 27 |             }}
 28 |           />
 29 |         </h2>
 30 |         <div className="Latest_contanier">
 31 |           {Apidata.filter((data) => data.category === "Food" && data.id <= 58).map(
 32 |             (item, index) => {
 33 |               // console.log(item)
 34 |               return (
 35 |                 <TheLatest
 36 |                   key={index}
 37 |                   title={item.title}
 38 |                   id={item.id}
 39 |                   image={item.img}
 40 |                   Category={item.category}
 41 |                   description={item.description.slice(0, 200)}
 42 |                 />
 43 |               );
 44 |             }
 45 |           )}
 46 |         </div>
 47 |       </div>
 48 | 
 49 | 
 50 | 
 51 | 
 52 |                   {/* TOP post and Latest Article  */}
 53 | 
 54 | 
 55 |       {/* This is Parent Contanier  */}
 56 |       <div className="TheLatest Section_Contanier">
 57 | 
 58 |       {/* This is Latest Articles Contanier  */}
 59 |       
 60 |       {/* style={{width : "710px", border : "2px solid Blue"}} */}
 61 |         <div className="left_contanier" >
 62 |         <h2>
 63 |           Latest Articles
 64 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 65 |         </h2>
 66 |         {
 67 | 
 68 |          Apidata.filter((data)=>data.category === "Food" ).map((item, index)=>{
 69 |            
 70 |           return(
 71 |             <LatestArticle key={index}
 72 |             title = {item.title.slice(0,100)} 
 73 |             id = {item.id} 
 74 |             image = {item.img} 
 75 |             Category = {item.category}
 76 |             description ={item.description.slice(0,100)}/>
 77 |           ) 
 78 |          })
 79 |         }
 80 |         </div>
 81 | 
 82 | 
 83 |         {/* This is Top Post Container  */}
 84 |         {/* style={{width : "500px" , border : "2px solid red"}} */}
 85 |         <div className="rightContanier" >
 86 |         <h2>
 87 |           To Posts
 88 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 89 |         </h2>
 90 |         {
 91 |          Apidata.filter((data)=>data.id % 3 === 0 && (data.category === "Hollywood" || data.category === "Technology" )).map((item, index)=>{
 92 |           return(
 93 |             <TopPost key={index}
 94 |             title = {item.title.slice(0,50)} 
 95 |             id = {item.id} 
 96 |             image = {item.img} 
 97 |             Category = {item.category}
 98 |             description ={item.description.slice(0,80)}
 99 |             index ={index}/>
100 |           )
101 |          })
102 |         }
103 |         </div>
104 |       </div>
105 | 
106 | 
107 | 
108 | 
109 |            {/* Text News Only  */}
110 | 
111 |            <div className="TheLatest">
112 |       <div className="Latest_contanier">
113 |         {
114 |           Apidata.filter((data)=>data.id % 2 === 0 && (data.category === "Food" && data.id % 3 !== 0)).map((item,index)=>{
115 |             console.log(item)
116 |             return(
117 |               <TextNews key={index}
118 |               title = {item.title} 
119 |               id = {item.id} 
120 |               image = {item.img} 
121 |               Category = {item.category}
122 |               description ={item.description.slice(0,200)}/>
123 |             )
124 |           })
125 |         }
126 |         </div>
127 |       </div>
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 |     </>
136 |   );
137 | };
138 | 
139 | export default Food;
140 | 


--------------------------------------------------------------------------------
/src/Pages/Technology.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { useContext } from "react";
  3 | import data from "../Context/ContextData";
  4 | import TheLatest from "../Components/TheLatest";
  5 | import TopPost from '../Components/TopPost';
  6 | import LatestArticle from '../Components/LatestArticle';
  7 | import TextNews from "../Components/TextNews";
  8 | 
  9 | const Technology = () => {
 10 |   const Apidata = useContext(data);
 11 |   return (
 12 |     <>
 13 | 
 14 |     
 15 |       {/* The Latest Section  */}
 16 |       <div className="TheLatest">
 17 |         <h2>
 18 |           The Technology
 19 |           <hr
 20 |             style={{
 21 |               width: "100px",
 22 |               height: "3px",
 23 |               background: "red",
 24 |               border: "none",
 25 |               outline: "none",
 26 |               borderRadius: "5px",
 27 |             }}
 28 |           />
 29 |         </h2>
 30 |         <div className="Latest_contanier">
 31 |           {Apidata.filter((data) => data.category === "Technology" && data.id <= 35).map(
 32 |             (item, index) => {
 33 |               // console.log(item)
 34 |               return (
 35 |                 <TheLatest
 36 |                   key={index}
 37 |                   title={item.title}
 38 |                   id={item.id}
 39 |                   image={item.img}
 40 |                   Category={item.category}
 41 |                   description={item.description.slice(0, 200)}
 42 |                 />
 43 |               );
 44 |             }
 45 |           )}
 46 |         </div>
 47 |       </div>
 48 | 
 49 | 
 50 |             {/* TOP post and Latest Article  */}
 51 | 
 52 | 
 53 |       {/* This is Parent Contanier  */}
 54 |       <div className="TheLatest Section_Contanier">
 55 | 
 56 |       {/* This is Latest Articles Contanier  */}
 57 |       
 58 |       {/* style={{width : "710px", border : "2px solid Blue"}} */}
 59 |         <div className="left_contanier" >
 60 |         <h2>
 61 |           Latest Articles
 62 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 63 |         </h2>
 64 |         {
 65 | 
 66 |          Apidata.filter((data)=>data.category === "Technology" ).map((item, index)=>{
 67 |            
 68 |           return(
 69 |             <LatestArticle key={index}
 70 |             title = {item.title.slice(0,100)} 
 71 |             id = {item.id} 
 72 |             image = {item.img} 
 73 |             Category = {item.category}
 74 |             description ={item.description.slice(0,100)}/>
 75 |           ) 
 76 |          })
 77 |         }
 78 |         </div>
 79 | 
 80 | 
 81 |         {/* This is Top Post Container  */}
 82 |         {/* style={{width : "500px" , border : "2px solid red"}} */}
 83 |         <div className="rightContanier" >
 84 |         <h2>
 85 |           To Posts
 86 |           <hr style={{width: "100px", height: "3px", background: "red", border: "none" , outline:"none" , borderRadius:"5px"}}/>
 87 |         </h2>
 88 |         {
 89 |          Apidata.filter((data)=>data.id % 3 === 0 && (data.category === "Hollywood" || data.category === "Food" )).map((item, index)=>{
 90 |           return(
 91 |             <TopPost key={index}
 92 |             title = {item.title.slice(0,50)} 
 93 |             id = {item.id} 
 94 |             image = {item.img} 
 95 |             Category = {item.category}
 96 |             description ={item.description.slice(0,80)}
 97 |             index ={index}/>
 98 |           )
 99 |          })
100 |         }
101 |         </div>
102 |       </div>
103 | 
104 | 
105 | 
106 |            {/* Text News Only  */}
107 | 
108 |            <div className="TheLatest">
109 |       <div className="Latest_contanier">
110 |         {
111 |           Apidata.filter((data)=>data.id % 2 === 0 && (data.category === "Technology" && data.id % 4 ===0)).map((item,index)=>{
112 |             // console.log(item)
113 |             return(
114 |               <TextNews key={index}
115 |               title = {item.title} 
116 |               id = {item.id} 
117 |               image = {item.img} 
118 |               Category = {item.category}
119 |               description ={item.description.slice(0,200)}/>
120 |             )
121 |           })
122 |         }
123 |         </div>
124 |       </div>
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 |     </>
133 |   );
134 | };
135 | 
136 | export default Technology;
137 | 


--------------------------------------------------------------------------------
/src/Pages/BlogPage.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext } from "react";
  2 | import { useLocation } from "react-router-dom";
  3 | import data from "../Context/ContextData";
  4 | import { BiShareAlt } from "react-icons/bi";
  5 | import { FaHands } from "react-icons/fa6";
  6 | import {
  7 |   AiFillFacebook,
  8 |   AiFillTwitterSquare,
  9 |   AiFillInstagram,
 10 |   AiOutlineYoutube,
 11 | } from "react-icons/ai";
 12 | import "./blogPage.css";
 13 | import FromSerian from "../Components/FromSerian";
 14 | 
 15 | import User from "../assets/User2.png"
 16 | 
 17 | const BlogPage = () => {
 18 |   // Take Id From The Link
 19 |   const location = useLocation();
 20 |   const { articleID , Cat } = location.state;
 21 |   console.log(articleID);
 22 |   console.log(Cat);
 23 |   
 24 | 
 25 |   const ApiData = useContext(data);
 26 |   // console.log(ApiData);
 27 |   return (
 28 |     <>
 29 |       <div className="Main_Desc">
 30 | 
 31 |         {/* Like And Share Button  */}
 32 | 
 33 |         <div className="ShareIcon">
 34 |           <div className="div1">
 35 |           <FaHands className="clap" />
 36 |           <p>9.3k Claps</p>
 37 |           </div>
 38 |           <div className="div2">
 39 |             <BiShareAlt style={{fontSize:'2rem'}}/>
 40 |             <p>Share This Article</p>
 41 |           </div>
 42 |         </div>
 43 | 
 44 |         {/* Main description Post  */}
 45 |         {ApiData.filter((data) => data.id === articleID).map((item, index) => {
 46 |           return (
 47 |             <div key={index} className="main-head">
 48 |               <div className="head">
 49 |                 <h1>{item.title}</h1>
 50 |               </div>
 51 | 
 52 |               <div className="user">
 53 |                 <div className="username">
 54 |                   <div className="usericon">
 55 | 
 56 |                     <img src={User} alt=""  className="icon"/>
 57 |                     {/* This is Authour name Icon */}
 58 |                   </div>
 59 |                   <div className="name">
 60 |                     <h3>Nitin Rajput</h3>
 61 |                     <p>jan 28 2019 | 10 min read</p>
 62 |                   </div>
 63 |                 </div>
 64 | 
 65 |                 <div className="userSocial top_Postion">
 66 |                   <AiFillFacebook />
 67 |                   <AiFillTwitterSquare />
 68 |                   <AiOutlineYoutube />
 69 |                   <AiFillInstagram />
 70 |                 </div>
 71 |               </div>
 72 | 
 73 |               <div className="Main_Image">
 74 |                 <img src={item.img} alt="not Found" />
 75 |               </div>
 76 |               <div className="description">
 77 |                 <p>{item.description}</p>
 78 |               </div>
 79 | 
 80 |               <div className="like">
 81 |                 <FaHands className="clap" />
 82 |                 <p>9.3k Claps</p>
 83 |               </div>
 84 | 
 85 |               {/* Auther Section  */}
 86 |               <div className="user">
 87 |                 <div className="username">
 88 |                   <div className="usericon">
 89 |                   <img src={User} alt=""  className="icon"/>
 90 |                     {/* This is Authour name Icon */}
 91 |                   </div>
 92 |                   <div className="name">
 93 |                     <h3>Nitin Rajput</h3>
 94 |                     <p>jan 28 2019 | 10 min read</p>
 95 |                   </div>
 96 |                 </div>
 97 |                 <div className="userSocial">
 98 |                   <AiFillFacebook />
 99 |                   <AiFillTwitterSquare />
100 |                   <AiOutlineYoutube />
101 |                   <AiFillInstagram />
102 |                 </div>
103 |               </div>
104 | 
105 |               <hr className="border" />
106 |             </div>
107 |           );
108 |         })}
109 | 
110 |         <div className="TheLatest">
111 |           <h2>
112 |             More From Serian
113 |             <hr
114 |               style={{
115 |                 width: "100px",
116 |                 height: "3px",
117 |                 background: "red",
118 |                 border: "none",
119 |                 outline: "none",
120 |                 borderRadius: "5px",
121 |               }}
122 |             />
123 |           </h2>
124 |           <div className="Latest_contanier">
125 |             {ApiData.filter((data) => data.id %2 === 0 && (data.id % 4 ===0)).map(
126 |               // eslint-disable-next-line array-callback-return
127 |               (item, index) => {
128 |                 if (item.category === Cat) {
129 |                   console.log(item.id)
130 |                   return (
131 |                     <FromSerian
132 |                        key={index}
133 |                       title={item.title}
134 |                       id={item.id}
135 |                       image={item.img}
136 |                       Category={item.category}
137 |                       description={item.description.slice(0, 200)}
138 |                    />
139 |                    );
140 |                 }
141 |               }
142 |             )}
143 |           </div>
144 |         </div>
145 |       </div>
146 |     </>
147 |   );
148 | };
149 | 
150 | export default BlogPage;
151 | 


--------------------------------------------------------------------------------
/src/Context/ContextData.jsx:
--------------------------------------------------------------------------------
  1 | import { createContext } from "react";
  2 | 
  3 | const data = createContext([
  4 |     {
  5 |         "id": 1,
  6 |         "title": "It's official! Hrithik Roshan introduced Saba Azad as his girlfriend at Karan Johar's bash",
  7 |         "img": "https://filmfare.wwmindia.com/content/2022/may/hrithikroshansabaazad41653633774.jpg",
  8 |         "category": "mix",
  9 |         "description": "Talks of Hrithik Roshan and Saba Azad’s rumoured relationship have been doing the rounds for a while. But now, the two have made it red carpet official by appearing together at Karan Johar's grand birthday bash. Hrithik and Saba arrived at the party on theme in their black outfits and made for a stunning pair. Turns out, after gracing the red carpet, Hrithik also introduced Saba Azad as his girlfriend to fellow attendeesAs per reports on a leading news portal, Hrithik Roshan was by Saba Azad's side the whole evening and went on to introduce her as his girlfriend to guests present at the bash. A source told the portal, Hrithik and Saba “didn’t leave each other’s side and were holding hands throughout the party.he couple (now that we can finally call them that) set the red carpet on fire as they posed for paps. Later, actress Preity Zinta also shared a picture with Hrithik and Saba. Take a look at their unmissable picFor the uninitiated, Hrithik Roshan and Saba Azad have been spending a lot of time together and needless to say, they’ve been the talk of the town. While they are yet to make an announcement to confirm their relationship, it cannot get more obvious than this.Recently, Hrithik and Saba also attended a birthday dinner together with the Roshan family. Hrithik’s father Rakesh Roshan and mother Pinkie were present at the intimate family gathering. Meanwhile, Karan Johar’s bash which took place in Mumbai on May 25 was attended by the most popular Bollywood stars including Aishwarya Rai Bachchan and Abhishek Bachchan, Katrina Kaif and Vicky Kaushal, Anushka Sharma, Ranveer Singh, Ranbir Kapoor and others."
 10 |     },
 11 |     {
 12 |         "id": 2,
 13 |         "title": "Top Gun Maverick BO: Tom Cruise film collects $51 mn in US, ₹4.75 cr in India ",
 14 |         "img": "https://images.hindustantimes.com/img/2022/05/28/550x309/dcf35a88-dd9e-11ec-8fe2-ac5ac3115257_1653667000472_1653747840857.jpg",
 15 |         "category": "mix",
 16 |         "description": "Top Gun Maverick box office day 1 collection: Tom Cruise's film collected $51 million at the US box office on its opening day. In India, it collected ₹4.75 crore. Top Gun came out in 1986, establishing Cruise, then 24, as an action hero. He’s nearly 60 now, promoted to US Navy captain in the sequel, and working hard to recreate the magic from 36 years ago.Director Joseph Kosinski's Top Gun Maverick, which features Tom Cruise, had a contrasting opening at the box office in India and the US. In the US, the film collected $51 million on its opening day. The film is already Tom’s best opening day ever beating Mission Impossible – Fallout's first-day collection. However, the film has not been able to make a mark in India and collected ₹4.75 crore on day one. In Top Gun Maverick, Tom essays the role of Pete 'Maverick' Mitchell, who is grappling with the diminished standing of fighter pilots in a world that now wages war with drones controlled by people miles away on computers. Top Gun Maverick is produced by Jerry Bruckheimer, Tom Cruise, Christopher McQuarrie and David Ellison.As per a Deadline report, Top Gun Maverick at this Friday night hour is on its way to a $51 million opening day (which includes $19.3 million previews). It would not be shocking to wake up on Saturday morning and see that the sequel has edged out Iron Man 2 ($51.2M) to become Paramount’s top opening day ever. Already, the sequel is Tom Cruise’s best opening day ever in US/Canada besting Mission: Impossible – Fallout‘s first day of $22.8M by 124%."
 17 |     },
 18 |     {
 19 |         "id": 3,
 20 |         "title": "Why I fell in love with Microsoft’s Surface Laptop Studio despite its shortcomings ",
 21 |         "img": "https://images.indianexpress.com/2022/05/K1.jpg",
 22 |         "category": "mix",
 23 |         "description": "As I was waiting for someone at a Delhi hotel recently, I saw a gentleman coming my way. He sat next to me and curiously asked about the laptop I was using. “It’s a Surface Laptop Studio,” I replied. “Does Microsoft make its own laptops?” He admitted he wasn’t aware of the Surface brand but told me he liked the form factor of the Surface Laptop Studio. “It’s different from my MacBook Pro,” said the man who introduced himself as the owner of an architectural firm. This conversation just reinforced my belief that there will be takers for Microsoft’s experimental Surface Laptop Studio, which blends certain elements of the desktop Surface Studio and the premium 2-in-1 Surface Book. It’s a mobile workstation that’s also a sketching slate and a portable home theater. I have been using the Surface Laptop Studio for a few days, and I am in love with this device even though it is not perfect. Here is my review."
 24 |     },
 25 |     {
 26 |         "id": 4,
 27 |         "title": "Should yoga be done on an empty stomach? Here’s what experts say ",
 28 |         "img": "https://images.indianexpress.com/2022/04/GettyImages-yoga-1200.jpg",
 29 |         "category": "mix",
 30 |         "description": "o one will understand you or your body the way you do so make sure you listen to it, protect it, do good things for it and celebrate it,” they saidYoga is now the preferred choice of many, to stay fit, active and agile. It helps in numerous ways, be it in improving flexibility, strength and posture, or reducing stress and providing a sense of calm. Nutrition and diet are an important part of fitness along with physical exercise. On that account, it becomes necessary to understand whether yoga should be done on an empty stomach or notAnshuka Parwani, a yoga expert, and Pooja Makhija, a nutritionist took to Instagram to talk about this dilemma that many face.Pooja believes that it’s important to have something before starting with your exercise in the morning. It should be quite light and not too heavy to kickstart your metabolism.While both have contrasting opinions, they strongly agreed and upheld the point that you know your body better than anyone else. Hence, it’s important to observe and understand what your body is trying to tell you and do as one may deem fit. They said, if practising yoga on an empty stomach is suiting you better, do that. On the other hand, if it feels like you need something to get a better start, follow that as a part of your routine.    "
 31 |     },
 32 |     {
 33 |         "id": 5,
 34 |         "title": "These Harmless Summer Drinks are Perfect for Diabetic Patients",
 35 |         "img": "https://images.news18.com/ibnlive/uploads/2022/05/summer-drink-16518193713x2.jpg?impolicy=website&width=510&height=356",
 36 |         "category": "mix",
 37 |         "description": "The summer season is here with soaring temperatures and dehydrating weather. And they call for cold and refreshing drinks. While many of these drinks are healthy and rehydrating, the sugar content in them might not be healthy for diabetic patients. This makes it difficult for people suffering from the chronic disease to stay hydrated and have all essential electrolytes up to their necessary levels. Here are 5 summer coolers that are healthy and contain zero sugar for diabetic patients to enjoy and help stay hydrated. Sattu is a special and popular food in Bihar. One of oldest drinks in India, Sattu cooler is the perfect way to stay hydrated for diabetic patients. It has no carbohydrates and can be enjoyed just by adding sattu powder to cold water along with some black salt and squeezing a few drops of lemon to give it a tangy touch. Spinach, beetroot, fruit juice of choice and some coconut water blended together can be a very beneficial smoothie for you even if you’re non-diabetic. Make sure that the fruit you choose is a low sugar content one and reap the benefits of this wonderful nutritious smoothie.Take 2 cups of chilled curd, a glass of water, some ice cubes and a teaspoon of cumin powder. Blend it all and you have this tasty sugarless drink ready. Salted lassi is a summer cooler that diabetic patients can enjoy without the worry of their disease aggravating.Bel or wood apple is a great source of natural fibre, iron, antioxidants and folates. Along with this it cools your stomach. If you suffer from diabetes, bel sherbet can prove to be very beneficial for you during the scorching summers."
 38 |     },
 39 |     {
 40 |         "id": 6,
 41 |         "title": "The Milky Way: Unveiling the Mysteries of Our Galactic Home",
 42 |         "img": "https://cdn.pixabay.com/photo/2011/12/14/12/21/orion-nebula-11107_640.jpg",
 43 |         "category": "mix",
 44 |         "description": "The story of the Milky Way begins nearly 13.6 billion years ago, shortly after the Big Bang. Over the eons, gravity played a pivotal role in shaping the galaxy's structure. Explore how gas and dust clouds collapsed, triggering star formation, and leading to the birth of stellar nurseries, where new stars continue to emerge. At first glance, the Milky Way appears as a streak of light across the night sky. However, it is far more intricate. Discover the different components that make up the galaxy, including the bulge, the spiral arms, and the enigmatic dark matter halo. We'll delve into the supermassive black hole at its center, believed to be 4 million times the mass of our Sun.The spiral arms of the Milky Way are one of its most striking features. Learn about the density waves that shape these arms and the star clusters nestled within them. These clusters serve as natural laboratories for studying stellar evolution and provide insights into the galaxy's history. Scientists have been intrigued by the concept of the 'Galactic Habitable Zone,' which refers to the region within the galaxy where life-supporting conditions are most likely to exist. Examine the factors that contribute to this zone and what it means for our understanding of life in the universe."
 45 |     },
 46 |     {
 47 |         "id": 7,
 48 |         "title": "Shah Rukh Khan",
 49 |         "img": "https://media2.bollywoodhungama.in/wp-content/uploads/2022/05/Why-SRK%E2%80%99s-Residence%E2%80%99s-Nameplate-Was-Removed-2.jpg",
 50 |         "category": "Bollywood",
 51 |         "description": "It seems like the diamonds on the plate are to blame here. According to a close friend of the actor the nameplate was taken down for reasons of safety.“That is one expensive nameplate, probably one of its kind in the entire world, and so after it was put up, it was brought to the host’s attention that it was not safe to have precious stones studded on to the wall. Shah Rukh decided to remove the nameplate from its place of public accessibility for the time being,” the friend reveals."
 52 |     },
 53 |     {
 54 |         "id": 8,
 55 |         "title": "Amitabh Bachchanr",
 56 |         "img": "https://media.gettyimages.com/photos/indian-actor-amitabh-bachchan-poses-on-the-red-carpet-for-the-4th-picture-id97942617?k=20&m=97942617&s=612x612&w=0&h=sjWZ5uQGKCfe3xuaEnbRluarZVhCinXidBwJjJaUtho=",
 57 |         "category": "Bollywood",
 58 |         "description": "Amitabh Bachchan was born on October 11, 1942 in Allahabad, British India (present-day Prayagraj, Uttar Pradesh, India) to legendary poet Harivansh Rai Bachchan & Teji Bachchan. He also has a brother named Ajitabh. He completed his education from Uttar Pradesh and moved to Bombay to find work"
 59 |     },
 60 |     {
 61 |         "id": 9,
 62 |         "title": "Deepika Padukone EXUDES desi vibes with a modern touch in a white ruffle saree during the closing ceremony",
 63 |         "img": "https://st1.bollywoodlife.com/wp-content/uploads/2022/05/Deepika-76.png",
 64 |         "category": "Bollywood",
 65 |         "description": "Gehraiyaan actress Deepika Padukone is among the few stars who are representing India at Cannes 2022. She is churning out some fabulous fashion stints leaving all her fans mesmerised. For the closing ceremony of the international film festival, the actress opted to go all desi. But not without a modern touch.After wearing some classic modern pieces, Deepika Padukone chose a Abu Jani-Sandeep Khosla creation to end her stint at Cannes 2022.The actress looked absolutely divine as walked the red carpet wearing this beautiful saree. The neckpiece made of pearls added much glam to the sweet saree.  The actress attended the press conference with other jury members Rebecca Hall and Jeff Nichols. Sticking to her roots, she greeted everyone with a namaste.Well, if this picture does not hypnotise you then we don't know what will. Subtle makeup, pearl earrings and more - the actress looked drop-dead gorgeous as ever."
 66 |     },
 67 |     {
 68 |         "id": 10,
 69 |         "title": "Celina Jaitly on Pakistani man claiming she slept with Fardeen, Feroz Khan: 'Twitter did nothing to stop him",
 70 |         "img": "https://www.hindustantimes.com/ht-img/img/2023/08/07/550x309/_10ab8304-75ec-11ea-bbaf-88371e4f22eb_1691385174304.jpg",
 71 |         "category": "Bollywood",
 72 |         "description": "A few months ago, 'a self-proclaimed Hindi film critic and journalist' from Pakistan Umair Sandhu had shared derogatory tweets about actor Celina Jaitly, and claimed that she 'slept with both father (Feroz Khan) and son (Fardeen Khan) many times'. In a new interview with India Today, Celina opened up about when and why she decide to file an official complaint with National Commission of Woman (NCW), and how Twitter (now X) 'did nothing' to stop the man's 'baseless, untrue character assassination via his tweets'. Also read: Celina Jaitly escalates the case against Pak journalistCelina Jaitly currently lives in Austria with husband and three sons. Celina Jaitly currently lives in Austria with husband and three sons.Twitter claimed no issues with his tweets Celina told India Today that on April 12, 2023 she filed an official complaint with NCW, adding, 'This person created the fake viral content maligning me, thousands of people, including myself, lodged a complaint with Twitter to ban his account. Twitter's auto-generated responses claimed no issues with all his tweets, encouraging him to go on a horrifying spree of baseless, untrue, character assassination via his tweets. He made multiple tweets at my expense, garnering him massive views the whole day, and Twitter still did not do anything... The height of stupidity is that some of the most reputable and credible media outlets report on the lies spread by a Pakistani imposter... He might as well be an ISI agent who is trying to infiltrate the Indian media outlets.Celina said she had no idea who Umair Sandhu was until April 11, 2023, when her 'Twitter account blew up' and she saw 'horrific and viral content' about her that he had generated. Celina said she was tagged by hundreds of people, who brought her attention to Umair Sandhu’s 'bizarre claims'. She slammed him for making content that 'is nothing short of online violence just for personal gain."
 73 |     },
 74 | 
 75 |     {
 76 |         "id": 11,
 77 |         "title": "SS Rajamouli's RRR hailed by Eternals star Patton Oswalt:  RRR is insane",
 78 |         "img": "https://filmfare.wwmindia.com/content/2022/may/rrrpattonoswalt41653717404.jpg",
 79 |         "category": "Bollywood",
 80 |         "description": "Hollywood comedian and actor Patton Oswalt cannot get enough of RRR. The actor who is best known for his Marvel roles including Eternals was left impressed with director SS Rajamouli's latest magnum opus. He recently took to Twitter to recommend the movie.RR was a megahit that had a successful box office run. Apart from breaking records in Indian cinemas, the film also garnered huge praise from international critics and audiences. In a Tweet, Patton Oswalt urged people to watch RRR. He wrote, “If this ISN’T playing near you in IMAX then this is the next best way to watch it. Fucken @RRRMovie is insane.When the team of RRR responded to thank Oswalt, he replied, “You guys are out of your f**king minds, you should not be allowed to make films, and I can’t wait to see what you do next.RR is a period drama starring Ram Charan and NTR Jr and follows two revolutionaries - Alluri Sitarama Raju and Komaram Bheem as they go up against the British rule in India. The film was released on March 24 this year. Since then, it has garnered significant buzz. It also kickstarted a debate on the way pan-India films are perceived."
 81 |     },
 82 |     {
 83 |         "id": 12,
 84 |         "title": "Shah Rukh Khan, Salman Khan and Madhuri Dixit's selfie has fans recalling Hum Tumhare Hai Sanam",
 85 |         "img": "https://filmfare.wwmindia.com/content/2022/may/shahrukhkhan41653712635.jpg",
 86 |         "category": "Bollywood",
 87 |         "description": "Karan Johar's 50th birthday bash was one big star-studded celebration. The evening saw a bevvy of Bollywood celebrities making an appearance and with so many biggies coming together, reunions were inevitable. Now, a selfie of Shah Rukh Khan, Salman Khan and Madhuri Dixit has emerged and fans are obsessed.The picture from the party sees Salman Khan flanked by Madhuri Dixit and Shah Rukh Khan. Joining them were Madhuri's husband Shriram Nene and Shah Rukh Khan's wife Gauri Khan. The Fame Game star took to Instagram to share the priceless photo in a post captioned, “So much to talk about, right? @drneneofficial @iamsrk @beingsalmankhan @gaurikhan. Fans cannot get enough of the picture. One fan commented on the sheer star power and wrote, “All Legends in one frame”. While many were thrilled to get a glimpse of Shah Rukh Khan and Salman Khan together, others recalled that the two stars appeared alongside Madhuri Dixit in Hum Tumhare Hai Sanam. The 2002 film was a romantic drama that revolved around a love triangle. Moreover, the pic also sparked nostalgia for Hum Aapke Hai Koun which saw Madhuri and Salman share screen space in an iconic pairing.Karan Johar’s birthday bash had several memorable moments. While Shah Rukh Khan did not walk the red carpet, videos of him dancing like nobody’s watching on Koi Mil Gaya from Kuch Kuch Hota Hai surfaced later. Meanwhile, Salman Khan who was one of the last guests to arrive reportedly stayed at the party till the morning."
 88 |     },
 89 |     {
 90 |         "id": 13,
 91 |         "title": "Akshay Kumar was all praise for Manushi Chillar’s sharp memory during the promotions of Prithviraj",
 92 |         "img": "https://filmfare.wwmindia.com/content/2022/may/akshaykumarwasallpraises41653652745.jpg",
 93 |         "category": "Bollywood",
 94 |         "description": "Akshay Kumar and Manushi Chhillar have kick-started promotions for their upcoming movie Prithviraj, which will be released on June 3. In a recent appearance on a comedy reality show, Akshay was all praise for Manushi Chhillar’s sharp memory. Manushi Chhillar also reciprocated by complimenting Akshay Kumar.In the reality show, Akshay Kumar said, If I talk about Manushi, she has such a sharp memory. She used to memorise all the dialogues, hers, mine as well as those of other actors. She could remember the toughest of words. The duo were also joined by the director, Chandraprakash Dwivedi, for the promotion of the movie on the reality show. He spoke in-depth about the upcoming release. The movie also stars Sanjay Dutt, Sonu Sood, Ashutosh Rana, and Sakshi Tanwar in pivotal rolesManushi also said that even though she loves Akshay Kumar’s comedy movies, she strongly feels that Prithviraj is his best movie to date. She said, I am a big fan of sir’s comedy and the few comedy films that sir has done. But, after watching Prithviraj, I can definitely say that Prithviraj is my favourite film of sir."
 95 |     },
 96 |     {
 97 |         "id": 14,
 98 |         "title": "It's official! Hrithik Roshan introduced Saba Azad as his girlfriend at Karan Johar's bash",
 99 |         "img": "https://filmfare.wwmindia.com/content/2022/may/hrithikroshansabaazad41653633774.jpg",
100 |         "category": "Bollywood",
101 |         "description": "Talks of Hrithik Roshan and Saba Azad’s rumoured relationship have been doing the rounds for a while. But now, the two have made it red carpet official by appearing together at Karan Johar's grand birthday bash. Hrithik and Saba arrived at the party on theme in their black outfits and made for a stunning pair. Turns out, after gracing the red carpet, Hrithik also introduced Saba Azad as his girlfriend to fellow attendeesAs per reports on a leading news portal, Hrithik Roshan was by Saba Azad's side the whole evening and went on to introduce her as his girlfriend to guests present at the bash. A source told the portal, Hrithik and Saba “didn’t leave each other’s side and were holding hands throughout the party.he couple (now that we can finally call them that) set the red carpet on fire as they posed for paps. Later, actress Preity Zinta also shared a picture with Hrithik and Saba. Take a look at their unmissable picFor the uninitiated, Hrithik Roshan and Saba Azad have been spending a lot of time together and needless to say, they’ve been the talk of the town. While they are yet to make an announcement to confirm their relationship, it cannot get more obvious than this.Recently, Hrithik and Saba also attended a birthday dinner together with the Roshan family. Hrithik’s father Rakesh Roshan and mother Pinkie were present at the intimate family gathering. Meanwhile, Karan Johar’s bash which took place in Mumbai on May 25 was attended by the most popular Bollywood stars including Aishwarya Rai Bachchan and Abhishek Bachchan, Katrina Kaif and Vicky Kaushal, Anushka Sharma, Ranveer Singh, Ranbir Kapoor and others."
102 |     },
103 |     {
104 |         "id": 15,
105 |         "title": "Inside pictures from Karan Johar’s 50th birthday: Anushka Sharma and Ranbir Kapoor reunite",
106 |         "img": "https://filmfare.wwmindia.com/content/2022/may/vickykaushal41653570327.jpg",
107 |         "category": "Bollywood",
108 |         "description": "Karan Johar’s 50th birthday bash is the talk of B-town. The event was attended by A-listers such as Salman Khan, Aamir Khan, Kareena Kapoor Khan, Saif Ali Khan, Kajol, Rani Mukerji, Shahid Kapoor, Mira Kapoor, Anushka Sharma, Gauri Khan, Hrithik Roshan, Ranveer Singh, Ranbir Kapoor among others.After the red-carpet pictures of celebrities riled up a storm, we are now looking at the inside pictures from the event. These pictures candidly show our favourite stars having the time of their lives. As Katrina Kaif and Vicky Kaushal dish out couple goals, Ranbir Kapoor and Anushka Sharma reunite. "
109 |     },
110 |     {
111 |         "id": 16,
112 |         "title": "Bollywood Alia Bhatt finally reacts to viral video of Ranbir Kapoor cradling a baby; cries 'happy tears'",
113 |         "img": "https://st1.bollywoodlife.com/wp-content/uploads/2022/05/Alia-Ranbir-baby-video.jpg?impolicy=Medium_Widthonly&w=800",
114 |         "category": "Bollywood",
115 |         "description": "A video of Ranbir Kapoor cradling a baby had gone viral on the internet. In the video, Ranbir was seen carrying the little one in his arms, kisses on the head and continues to play with the baby. The fan shared the video on Instagram and wrote, Many social media users started tagging Alia Bhatt after watching the video. And the viral video of Ranbir's has finally got Alia's much-needed attention, and it got her happy tears."
116 |     },
117 |     {
118 |         "id": 17,
119 |         "title": "Bollywood Deepika Padukone looks jaw droppingly stunning in latest photos",
120 |         "img": "https://images.hindustantimes.com/img/2022/01/25/1600x900/deepika_padukone_1643077687218_1643077802079.jpg",
121 |         "category": "Bollywood",
122 |         "description": "Deepika Padukone never fails to impress us with her style. The stunning actress is an epitome of grace and charm. Deepika is the highest paid actress in the country today and has made it to the Top 5 of Forbes List of Richest Indian Celebs. The actor was featured in TIME magazine’s 100 Most Influential People List and is one of the few Indian actors to have attended coveted events abroad. "
123 |     },
124 |     {
125 |         "id": 18,
126 |         "title": "Bollywood Aishwarya Rai Bachchan, Abhishek Bachchan and daughter Aaradhya return ",
127 |         "img": "https://www.hindustantimes.com/ht-img/img/2023/07/22/550x309/Abhishek_Bachchan_1689997348909_1689997357512.jpg",
128 |         "category": "Bollywood",
129 |         "description": "Aishwarya Rai Bachchan, Abhishek Bachchan and daughter Aaradhya returned to Mumbai today after ringing in 2019 abroad. Abhishek and Aishwarya shared photos from their New Year getaway as the family basked in the sun. At the airport, daughter Aaradhya was engaged in a conversation with her parents and looked cute as a button in a pink dress."
130 |     },
131 |     {
132 |         "id": 19,
133 |         "title": "Iron Man",
134 |         "img": "https://upload.wikimedia.org/wikipedia/en/0/02/Iron_Man_%282008_film%29_poster.jpg",
135 |         "category": "Hollywood",
136 |         "description": "Iron Man is a 2008 American superhero film based on the Marvel Comics character of the same name. Produced by Marvel Studios and distributed by Paramount Pictures,[N 1] it is the first film in the Marvel Cinematic Universe (MCU). Directed by Jon Favreau from a screenplay by the writing teams of Mark Fergus and Hawk Ostby, and Art Marcum and Matt Holloway, the film stars Robert Downey Jr. as Tony Stark / Iron Man alongside Terrence Howard, Jeff Bridges, Shaun Toub, and Gwyneth Paltrow. In the film, following his escape from captivity by a terrorist group, world famous industrialist and master engineer Tony Stark builds a mechanized suit of armor and becomes the superhero Iron Man."
137 |     },
138 |     {
139 |         "id": 20,
140 |         "title": "The Incredible Hulk",
141 |         "img": "https://upload.wikimedia.org/wikipedia/en/f/f0/The_Incredible_Hulk_%28film%29_poster.jpg",
142 |         "category": "Hollywood",
143 |         "description": "The Incredible Hulk is a 2008 American superhero film based on the Marvel Comics character the Hulk. Produced by Marvel Studios and distributed by Universal Pictures, it is the second film in the Marvel Cinematic Universe (MCU). It was directed by Louis Leterrier from a screenplay by Zak Penn, and stars Edward Norton as Bruce Banner alongside Liv Tyler, Tim Roth, Tim Blake Nelson, Ty Burrell, and William Hurt. In the film, Bruce Banner becomes the Hulk as an unwitting pawn in a military scheme to reinvigorate the (Super-Soldier) program through gamma radiation. Banner goes on the run from the military while attempting to cure himself of the Hulk."
144 |     },
145 |     {
146 |         "id": 21,
147 |         "title": "Thor",
148 |         "img": "https://upload.wikimedia.org/wikipedia/en/9/95/Thor_%28film%29_poster.jpg",
149 |         "category": "Hollywood",
150 |         "description": "Thor is a 2011 American superhero film based on the Marvel Comics character of the same name. Produced by Marvel Studios and distributed by Paramount Pictures,[N 1] it is the fourth film in the Marvel Cinematic Universe (MCU). It was directed by Kenneth Branagh, written by the writing team of Ashley Edward Miller and Zack Stentz along with Don Payne, and stars Chris Hemsworth as the title character alongside Natalie Portman, Tom Hiddleston, Stellan Skarsgård, Colm Feore, Ray Stevenson, Idris Elba, Kat Dennings, Rene Russo, and Anthony Hopkins. After reigniting a dormant war, Thor is banished from Asgard to Earth, stripped of his powers and his hammer Mjölnir. As his brother Loki (Hiddleston) plots to take the Asgardian throne, Thor must prove himself worthy."
151 |     },
152 |     {
153 |         "id": 22,
154 |         "title": "Amber Heard says she has received threats 'every single day' during trial: 'People want to put my baby in a microwave' ",
155 |         "img": "https://images.hindustantimes.com/img/2022/05/27/550x309/amber_heard_1652846124301_1653656835956.JPG",
156 |         "category": "Hollywood",
157 |         "description": "In a video from the trial shared by Law & Crime Network on their YouTube channel, Amber told the jury, I am harassed, humiliated, threatened, every single day. Even just walking into this courtroom. Sitting here in front of the world, having the worst parts of my life, things that I have lived through, used to humiliate me. People want to kill me and they tell me so every day. People want to put my baby in the microwave, and they tell me that. She also said, I live my life with these sets of rules I've to follow, my friends have to follow for me not to have a panic attack or a triggering event or I relive the trauma, even from training to do. In my movie, for instance, for training for Aquaman, a combat scene and a trigger happen. I have a meltdown and have to deal with that, the crew I work with have to deal with that, because of the damage I walk around with every single day. I am not sitting in this courtroom snickering. I’m not sitting in this courtroom laughing, smiling, or making snide jokes. I’m not. This is horrible. A jury is scheduled to hear the closing arguments on Friday in Johnny's lawsuit against Amber. Each side will have two hours to summarise their case in a trial that has stretched on for six weeks. Johnny Depp is suing Amber for $50 million in Virginia's Fairfax County Circuit Court over a December 2018 op-ed she wrote in The Washington Post describing herself as “a public figure representing domestic abuse”. His lawyers say he was defamed by the article even though it never mentioned his name."
158 |     },
159 |     {
160 |         "id": 23,
161 |         "title": "Captain America",
162 |         "img": "https://upload.wikimedia.org/wikipedia/en/3/37/Captain_America_The_First_Avenger_poster.jpg",
163 |         "category": "Hollywood",
164 |         "description": "Captain America: The First Avenger is a 2011 American superhero film based on the Marvel Comics character Captain America. Produced by Marvel Studios and distributed by Paramount Pictures,[N 1] it is the fifth film in the Marvel Cinematic Universe (MCU). The film was directed by Joe Johnston, written by Christopher Markus and Stephen McFeely, and stars Chris Evans as Steve Rogers / Captain America alongside Tommy Lee Jones, Hugo Weaving, Hayley Atwell, Sebastian Stan, Dominic Cooper, Neal McDonough, Derek Luke, and Stanley Tucci. During World War II, Steve Rogers, a frail man, is transformed into the super-soldier Captain America and must stop the Red Skull (Weaving) from using the Tesseract as an energy source for world domination."
165 |     },
166 |     {
167 |         "id": 24,
168 |         "title": "The Avengers",
169 |         "img": "https://upload.wikimedia.org/wikipedia/en/8/8a/The_Avengers_%282012_film%29_poster.jpg",
170 |         "category": "Hollywood",
171 |         "description": "Marvel's The Avengers[4] (classified under the name Marvel Avengers Assemble in the United Kingdom and Ireland),[1][5] or simply The Avengers, is a 2012 American superhero film based on the Marvel Comics superhero team of the same name. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures,[N 1] it is the sixth film in the Marvel Cinematic Universe (MCU). Written and directed by Joss Whedon, the film features an ensemble cast including Robert Downey Jr., Chris Evans, Mark Ruffalo, Chris Hemsworth, Scarlett Johansson, and Jeremy Renner as the Avengers, alongside Tom Hiddleston, Clark Gregg, Cobie Smulders, Stellan Skarsgård, and Samuel L. Jackson. In the film, Nick Fury and the spy agency S.H.I.E.L.D. recruit Tony Stark, Steve Rogers, Bruce Banner, Thor, Natasha Romanoff, and Clint Barton to form a team capable of stopping Thor's brother Loki from subjugating Earth."
172 |     },
173 |     {
174 |         "id": 25,
175 |         "title": "Guardians of the Galaxy",
176 |         "img": "https://upload.wikimedia.org/wikipedia/en/3/33/Guardians_of_the_Galaxy_%28film%29_poster.jpg",
177 |         "category": "Hollywood",
178 |         "description": "Guardians of the Galaxy (retroactively referred to as Guardians of the Galaxy Vol. 1)[4][5] is a 2014 American superhero film based on the Marvel Comics superhero team of the same name. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the 10th film in the Marvel Cinematic Universe (MCU). Directed by James Gunn, who wrote the screenplay with Nicole Perlman, the film features an ensemble cast including Chris Pratt, Zoe Saldaña, Dave Bautista, Vin Diesel, and Bradley Cooper as the titular Guardians, along with Lee Pace, Michael Rooker, Karen Gillan, Djimon Hounsou, John C. Reilly, Glenn Close, and Benicio del Toro. In the film, Peter Quill and a group of extraterrestrial criminals go on the run after stealing a powerful artifact."
179 |     },
180 |     {
181 |         "id": 26,
182 |         "title": "Avengers: Age of Ultron",
183 |         "img": "https://upload.wikimedia.org/wikipedia/en/f/ff/Avengers_Age_of_Ultron_poster.jpg",
184 |         "category": "Hollywood",
185 |         "description": "Avengers: Age of Ultron is a 2015 American superhero film based on the Marvel Comics superhero team the Avengers. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the sequel to The Avengers (2012) and the 11th film in the Marvel Cinematic Universe (MCU). Written and directed by Joss Whedon, the film features an ensemble cast including Robert Downey Jr., Chris Hemsworth, Mark Ruffalo, Chris Evans, Scarlett Johansson, Jeremy Renner, Don Cheadle, Aaron Taylor-Johnson, Elizabeth Olsen, Paul Bettany, Cobie Smulders, Anthony Mackie, Hayley Atwell, Idris Elba, Stellan Skarsgård, James Spader, and Samuel L. Jackson. In the film, the Avengers fight Ultron, an artificial intelligence with the goal of causing human extinction."
186 |     },
187 |     {
188 |         "id": 27,
189 |         "title": "Ant-Man",
190 |         "img": "https://upload.wikimedia.org/wikipedia/en/1/12/Ant-Man_%28film%29_poster.jpg",
191 |         "category": "Hollywood",
192 |         "description": "Ant-Man is a 2015 American superhero film based on the Marvel Comics characters of the same name: Scott Lang and Hank Pym. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the 12th film in the Marvel Cinematic Universe (MCU). The film was directed by Peyton Reed from a screenplay by the writing teams of Edgar Wright and Joe Cornish, and Adam McKay and Paul Rudd. It stars Rudd as Scott Lang / Ant-Man alongside Evangeline Lilly, Corey Stoll, Bobby Cannavale, Michael Peña, Tip T.I. Harris, Anthony Mackie, Wood Harris, Judy Greer, David Dastmalchian, and Michael Douglas as Hank Pym. In the film, Lang must help defend Pym's Ant-Man shrinking technology and plot a heist with worldwide ramifications."
193 |     },
194 |     {
195 |         "id": 28,
196 |         "title": "Doctor Strange",
197 |         "img": "https://upload.wikimedia.org/wikipedia/en/a/a1/Doctor_Strange_%282016_film%29_poster.jpg",
198 |         "category": "Hollywood",
199 |         "description": "Doctor Strange is a 2016 American superhero film based on the Marvel Comics character of the same name. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the 14th film in the Marvel Cinematic Universe (MCU). The film was directed by Scott Derrickson from a screenplay he wrote with Jon Spaihts and C. Robert Cargill, and stars Benedict Cumberbatch as neurosurgeon Stephen Strange along with Chiwetel Ejiofor, Rachel McAdams, Benedict Wong, Michael Stuhlbarg, Benjamin Bratt, Scott Adkins, Mads Mikkelsen, and Tilda Swinton. In the film, Strange learns the mystic arts after a career-ending car crash."
200 |     },
201 |     {
202 |         "id": 29,
203 |         "title": "Black Panther",
204 |         "img": "https://upload.wikimedia.org/wikipedia/en/d/d6/Black_Panther_%28film%29_poster.jpg",
205 |         "category": "Hollywood",
206 |         "description": "Black Panther is a 2018 American superhero film based on the Marvel Comics character of the same name. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the 18th film in the Marvel Cinematic Universe (MCU). The film was directed by Ryan Coogler, who co-wrote the screenplay with Joe Robert Cole, and it stars Chadwick Boseman as T'Challa / Black Panther alongside Michael B. Jordan, Lupita Nyong'o, Danai Gurira, Martin Freeman, Daniel Kaluuya, Letitia Wright, Winston Duke, Angela Bassett, Forest Whitaker, and Andy Serkis. In Black Panther, T'Challa is crowned king of Wakanda following his father's death, but he is challenged by Killmonger (Jordan), who plans to abandon the country's isolationist policies and begin a global revolution."
207 |     },
208 |     {
209 |         "id": 30,
210 |         "title": "5G",
211 |         "img": "https://upload.wikimedia.org/wikipedia/en/thumb/4/43/3GPP_5G_logo.png/330px-3GPP_5G_logo.png",
212 |         "category": "Technology",
213 |         "description": "In telecommunications, 5G is the fifth-generation technology standard for broadband cellular networks, which cellular phone companies began deploying worldwide in 2019, and is the planned successor to the 4G networks which provide connectivity to most current cellphones. 5G networks are predicted to have more than 1.7 billion subscribers and account for 25% of the worldwide mobile technology market by 2025, according to the GSM Association and Statista."
214 |     },
215 |     {
216 |         "id": 31,
217 |         "title": "Why I fell in love with Microsoft’s Surface Laptop Studio despite its shortcomings ",
218 |         "img": "https://images.indianexpress.com/2022/05/K1.jpg",
219 |         "category": "Technology",
220 |         "description": "As I was waiting for someone at a Delhi hotel recently, I saw a gentleman coming my way. He sat next to me and curiously asked about the laptop I was using. “It’s a Surface Laptop Studio,” I replied. “Does Microsoft make its own laptops?” He admitted he wasn’t aware of the Surface brand but told me he liked the form factor of the Surface Laptop Studio. “It’s different from my MacBook Pro,” said the man who introduced himself as the owner of an architectural firm. This conversation just reinforced my belief that there will be takers for Microsoft’s experimental Surface Laptop Studio, which blends certain elements of the desktop Surface Studio and the premium 2-in-1 Surface Book. It’s a mobile workstation that’s also a sketching slate and a portable home theater. I have been using the Surface Laptop Studio for a few days, and I am in love with this device even though it is not perfect. Here is my review."
221 |     },
222 |     {
223 |         "id": 32,
224 |         "title": " electric car, battery electric car",
225 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/2018_Nissan_Leaf_2.Zero_Front.jpg/338px-2018_Nissan_Leaf_2.Zero_Front.jpg",
226 |         "category": "Technology",
227 |         "description": "An electric car, battery electric car, or all-electric car is an automobile that is propelled by one or more electric motors, using only energy stored in batteries. Compared to internal combustion engine (ICE) vehicles, electric cars are quieter, have no exhaust emissions, and lower emissions overall.[1] In the United States and the European Union, as of 2020, the total cost of ownership of recent electric vehicles is cheaper than that of equivalent ICE cars, due to lower fueling and maintenance costs.[2][3] Charging an electric car can be done at a variety of charging stations; these charging stations can be installed in both houses and public areas."
228 |     },
229 |     {
230 |         "id": 33,
231 |         "title": "A face search engine anyone can use is alarmingly accurate ",
232 |         "img": "https://images.indianexpress.com/2022/05/Facial-search-engine-featured.jpg",
233 |         "category": "Technology",
234 |         "description": "For $29.99 a month, a website called PimEyes offers a potentially dangerous superpower from the world of science fiction: the ability to search for a face, finding obscure photos that would otherwise have been as safe as the proverbial needle in the vast digital haystack of the internet.A search takes mere seconds. You upload a photo of a face, check a box agreeing to the terms of service and then get a grid of photos of faces deemed similar, with links to where they appear on the internet. The New York Times used PimEyes on the faces of a dozen Times journalists, with their consent, to test its powers.PimEyes found photos of every person, some that the journalists had never seen before, even when they were wearing sunglasses or a mask, or their face was turned away from the camera, in the image used to conduct the search. PimEyes found one reporter dancing at an art museum event a decade ago, and crying after being proposed to, a photo that she didn’t particularly like but that the photographer had decided to use to advertise his business on Yelp. A tech reporter’s younger self was spotted in an awkward crush of fans at the Coachella music festival in 2011. A foreign correspondent appeared in countless wedding photos, evidently the life of every party, and in the blurry background of a photo taken of someone else at a Greek airport in 2019. A journalist’s past life in a rock band was unearthed, as was another’s preferred summer camp getaway."
235 |     },
236 |     {
237 |         "id": 34,
238 |         "title": "Artificial intelligence in healthcare",
239 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/X-ray_of_hand%2C_where_bone_age_is_automatically_found_by_BoneXpert_software.jpg/330px-X-ray_of_hand%2C_where_bone_age_is_automatically_found_by_BoneXpert_software.jpg",
240 |         "category": "Technology",
241 |         "description": "Artificial intelligence in healthcare is an overarching term used to describe the use of machine-learning algorithms and software, or artificial intelligence (AI), to mimic human cognition in the analysis, presentation, and comprehension of complex medical and health care data. Specifically, AI is the ability of computer algorithms to approximate conclusions based solely on input data.The primary aim of health-related AI applications is to analyze relationships between clinical techniques and patient outcomes.[1] AI programs are applied to practices such as diagnostics, treatment protocol development, drug development, personalized medicine, and patient monitoring and care. What differentiates AI technology from traditional technologies in healthcare is the ability to gather data, process it, and produce a well-defined output to the end-user. AI does this through machine learning algorithms and deep learning. These processes can recognize patterns in behavior and create their own logic. To gain useful insights and predictions, machine learning models must be trained using extensive amounts of input data. AI algorithms behave differently from humans in two ways: (1) algorithms are literal: once a goal is set, the algorithm learns exclusively from the input data and can only understand what it has been programmed to do, (2) and some deep learning algorithms are black boxes; algorithms can predict with extreme precision, but offer little to no comprehensible explanation to the logic behind its decisions aside from the data and type of algorithm used"
242 |     },
243 |     {
244 |         "id": 35,
245 |         "title": "Robotic process automation (RPA)",
246 |         "img": "https://upload.wikimedia.org/wikipedia/commons/6/6d/Industrial_robots-transparent.gif",
247 |         "category": "Technology",
248 |         "description": "Robotic process automation (RPA) is a form of business process automation technology based on metaphorical software robots (bots) or on artificial intelligence (AI)/digital workers.[1] It is sometimes referred to as software robotics (not to be confused with robot software).In traditional workflow automation tools, a software developer produces a list of actions to automate a task and interface to the back end system using internal application programming interfaces (APIs) or dedicated scripting language. In contrast, RPA systems develop the action list by watching the user perform that task in the application's graphical user interface (GUI), and then perform the automation by repeating those tasks directly in the GUI. This can lower the barrier to the use of automation in products that might not otherwise feature APIs for this purpose."
249 |     },
250 |     {
251 |         "id": 36,
252 |         "title": "Edge computing ",
253 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Edge_computing_infrastructure.png/330px-Edge_computing_infrastructure.png",
254 |         "category": "Technology",
255 |         "description": "Edge computing is a distributed computing paradigm that brings computation and data storage closer to the sources of data. This is expected to improve response times and save bandwidth.[1] It is an architecture rather than a specific technology.[2] It is a topology- and location-sensitive form of distributed computing.The origins of edge computing lie in content distributed networks that were created in the late 1990s to serve web and video content from edge servers that were deployed close to users.[3] In the early 2000s, these networks evolved to host applications and application components at the edge servers,[4] resulting in the first commercial edge computing services[5] that hosted applications such as dealer locators, shopping carts, real-time data aggregators, and ad insertion engines."
256 |     },
257 |     {
258 |         "id": 37,
259 |         "title": "3D printing or additive manufacturing ",
260 |         "img": "https://upload.wikimedia.org/wikipedia/commons/e/ed/Robot_3D_print_timelapse_on_RepRapPro_Fisher.gif",
261 |         "category": "Technology",
262 |         "description": "3D printing or additive manufacturing is the construction of a three-dimensional object from a CAD model or a digital 3D model.[1] It can be done in a variety of processes in which material is deposited, joined or solidified under computer control,[2] with material being added together (such as plastics, liquids or powder grains being fused), typically layer by layer.In the 1980s, 3D printing techniques were considered suitable only for the production of functional or aesthetic prototypes, and a more appropriate term for it at the time was rapid prototyping.[3] As of 2019, the precision, repeatability, and material range of 3D printing have increased to the point that some 3D printing processes are considered viable as an industrial-production technology, whereby the term additive manufacturing can be used synonymously with 3D printing."
263 |     },
264 |     {
265 |         "id": 38,
266 |         "title": "Solar power",
267 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Electrical_and_Mechanical_Services_Department_Headquarters_Photovoltaics.jpg/450px-Electrical_and_Mechanical_Services_Department_Headquarters_Photovoltaics.jpg",
268 |         "category": "Technology",
269 |         "description": "Solar power is the conversion of energy from sunlight into electricity, either directly using photovoltaics (PV), indirectly using concentrated solar power, or a combination. Photovoltaic cells convert light into an electric current using the photovoltaic effect.[2] Concentrated solar power systems use lenses or mirrors and solar tracking systems to focus a large area of sunlight to a hot spot, often to drive a steam turbine.Photovoltaics were initially solely used as a source of electricity for small and medium-sized applications, from the calculator powered by a single solar cell to remote homes powered by an off-grid rooftop PV system. Commercial concentrated solar power plants were first developed in the 1980s. Since then, as the cost of solar electricity has fallen, grid-connected solar PV systems have grown more or less exponentially. Millions of installations and gigawatt-scale photovoltaic power stations have been and are being built. Solar PV has rapidly become a viable low-carbon technology, and since 2020, provides the cheapest source of electricity in history."
270 |     },
271 |     {
272 |         "id": 39,
273 |         "title": "smart device",
274 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Galaxy_Z_Fold_%26_Z_Flip.jpg/251px-Galaxy_Z_Fold_%26_Z_Flip.jpg",
275 |         "category": "Technology",
276 |         "description": "A smart device is an electronic device, generally connected to other devices or networks via different wireless protocols (such as Bluetooth, Zigbee, near-field communication, Wi-Fi, LiFi, or 5G) that can operate to some extent interactively and autonomously. Several notable types of smart devices are smartphones, smart cars, smart thermostats, smart doorbells, smart locks, smart refrigerators, phablets and tablets, smartwatches, smart bands, smart keychains, smart glasses, and many others. The term can also refer to a device that exhibits some properties of ubiquitous computing, including—although not necessarily—machine learning."
277 |     },
278 |     {
279 |         "id": 40,
280 |         "title": "blockchain ",
281 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Bitcoin_Block_Data.svg/435px-Bitcoin_Block_Data.svg.png",
282 |         "category": "Technology",
283 |         "description": "A blockchain is a type of distributed ledger technology (DLT) that consists of growing list of records, called blocks, that are securely linked together using cryptography.[1][2][3][4] Each block contains a cryptographic hash of the previous block, a timestamp, and transaction data (generally represented as a Merkle tree, where data nodes are represented by leaves). The timestamp proves that the transaction data existed when the block was created. Since each block contains information about the previous block, they effectively form a chain (compare linked list data structure), with each additional block linking to the ones before it. Consequently, blockchain transactions are irreversible in that, once they are recorded, the data in any given block cannot be altered retroactively without altering all subsequent blocks."
284 |     },
285 |     {
286 |         "id": 41,
287 |         "title": " Hydroponics",
288 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Hydroponic_onions%2C_NASA_--_17_June_2004.jpg/413px-Hydroponic_onions%2C_NASA_--_17_June_2004.jpg",
289 |         "category": "Technology",
290 |         "description": "Hydroponics[1] is a type of horticulture and a subset of hydroculture which involves growing plants, usually crops, without soil, by using water-based mineral nutrient solutions in aqueous solvents. Terrestrial or aquatic plants may grow with their roots exposed to the nutritious liquid or in addition, the roots may be mechanically supported by an inert medium such as perlite, gravel, or other substrates.[2]Despite inert media, roots can cause changes of the rhizosphere pH and root exudates can affect rhizosphere biology and physiological balance of the nutrient solution by secondary metabolites.[3][4][5] Transgenic plants grown hydroponically allow the release of pharmaceutical proteins as part of the root exudate into the hydroponic medium"
291 |     },
292 |     {
293 |         "id": 42,
294 |         "title": "agricultural aircraft",
295 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Crop_Duster.jpg/330px-Crop_Duster.jpg",
296 |         "category": "Technology",
297 |         "description": "An agricultural aircraft is an aircraft that has been built or converted for agricultural use – usually aerial application of pesticides (crop dusting) or fertilizer (aerial topdressing); in these roles they are referred to as crop dusters or top dressers. Agricultural aircraft are also used for hydroseeding.The most common agricultural aircraft are fixed-wing, such as the Air Tractor, Cessna Ag-wagon, Gippsland GA200, Grumman Ag Cat, PZL-106 KRUK, M-18 Dromader, PAC Fletcher, Piper PA-36 Pawnee Brave, Embraer EMB 202 Ipanema, and Rockwell Thrush Commander but helicopters are also used."
298 |     },
299 |     {
300 |         "id": 43,
301 |         "title": "Running",
302 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Ludovic_and_Lauren_%288425515069%29.jpg/330px-Ludovic_and_Lauren_%288425515069%29.jpg",
303 |         "category": "Fitness",
304 |         "description": "Running is a method of terrestrial locomotion allowing humans and other animals to move rapidly on foot. Running is a type of gait characterized by an aerial phase in which all feet are above the ground (though there are exceptions).[1] This is in contrast to walking, where one foot is always in contact with the ground, the legs are kept mostly straight and the center of gravity vaults over the stance leg or legs in an inverted pendulum fashion.[2] A feature of a running body from the viewpoint of spring-mass mechanics is that changes in kinetic and potential energy within a stride occur simultaneously, with energy storage accomplished by springy tendons and passive muscle elasticity.[3] The term running can refer to any of a variety of speeds ranging from jogging to sprinting.Running in humans is associated with improved health and life expectancy.[4]"
305 |     },
306 |     {
307 |         "id": 44,
308 |         "title": "Skateboarding",
309 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Lenna_skates_in_front_of_the_Barclays_Center_-_Brooklyn%2C_NY.jpg/330px-Lenna_skates_in_front_of_the_Barclays_Center_-_Brooklyn%2C_NY.jpg",
310 |         "category": "Fitness",
311 |         "description": "Skateboarding is an action sport originating in the United States that involves riding and performing tricks using a skateboard, as well as a recreational activity, an art form, an entertainment industry job, and a method of transportation.[1][2] Skateboarding has been shaped and influenced by many skateboarders throughout the years. A 2009 report found that the skateboarding market is worth an estimated $4.8 billion in annual revenue, with 11.08 million active skateboarders in the world.[3] In 2016, it was announced that skateboarding would be represented at the 2020 Summer Olympics in Tokyo, for both male and female teams.[4]"
312 |     },
313 |     {
314 |         "id": 45,
315 |         "title": " Swimming ",
316 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Natacio.jpg/330px-Natacio.jpg",
317 |         "category": "Fitness",
318 |         "description": "Swimming is the self-propulsion of a person through water, or other liquid, usually for recreation, sport, exercise, or survival. Locomotion is achieved through coordinated movement of the limbs and the body to achieve hydrodynamic thrust which results in directional motion. Humans can hold their breath underwater and undertake rudimentary locomotive swimming within weeks of birth, as a survival response.Swimming is consistently among the top public recreational activities,[2][3][4][5] and in some countries, swimming lessons are a compulsory part of the educational curriculum.[6] As a formalized sport, swimming is featured in a range of local, national, and international competitions, including every modern Summer Olympics.Swimming involves repeated motions known as strokes in order to propel the body forward. While the front crawl, also known as freestyle, is widely regarded as the fastest out of four primary strokes, other strokes are practiced for special purposes, such as for training."
319 |     },
320 |     {
321 |         "id": 46,
322 |         "title": "football",
323 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Football_in_Bloomington%2C_Indiana%2C_1996.jpg/450px-Football_in_Bloomington%2C_Indiana%2C_1996.jpg",
324 |         "category": "Fitness",
325 |         "description": "football or soccer,[a] is a team sport played between two teams of 11 players who primarily use their feet to propel the ball around a rectangular field called a pitch. The objective of the game is to score more goals than the opposition by moving the ball beyond the goal line into the opposing side's rectangular framed goal. Traditionally, the game has been played over two 45 minute halves, for a total match time of 90 minutes. With an estimated 250 million players active in over 200 countries, it is considered the world's most popular sport."
326 |     },
327 |     {
328 |         "id": 47,
329 |         "title": "deadlift",
330 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Deadlift-phase_1.JPG/300px-Deadlift-phase_1.JPG",
331 |         "category": "Fitness",
332 |         "description": "The deadlift is a weight training exercise in which a loaded barbell or bar is lifted off the ground to the level of the hips, torso perpendicular to the floor, before being placed back on the ground. It is one of the three powerlifting exercises, along with the squat and bench press.Depending on which style one chooses to use, different muscles will be targeted. For example, with a conventional stance, the back, hamstrings, and glutes will be targeted primarily. With a sumo stance, the quads and glutes will be primarily targeted"
333 |     },
334 |     {
335 |         "id": 48,
336 |         "title": "  squat",
337 |         "img": "https://images.indianexpress.com/2022/05/sooraj-pancholi_1200_insta.jpg",
338 |         "category": "Fitness",
339 |         "description": "A squat is a strength exercise in which the trainee lowers their hips from a standing position and then stands back up. During the descent of a squat, the hip and knee joints flex while the ankle joint dorsiflexes; conversely the hip and knee joints extend and the ankle joint plantarflexes when standing up."
340 |     },
341 |     {
342 |         "id": 49,
343 |         "title": "bench press, or chest press",
344 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Bench_press_1.jpg/330px-Bench_press_1.jpg",
345 |         "category": "Fitness",
346 |         "description": "The bench press, or chest press, is a weight training exercise in which the trainee presses a weight upwards while lying on a weight training bench. Although the bench press is a full-body exercise, the muscles primarily used are the pectoralis major, the anterior deltoids, and the triceps, among other stabilizing muscles. A barbell is generally used to hold the weight, but a pair of dumbbells can also be used"
347 |     },
348 |     {
349 |         "id": 50,
350 |         "title": "push-up",
351 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Liegestuetz02_ani_fcm.gif/330px-Liegestuetz02_ani_fcm.gif",
352 |         "category": "Fitness",
353 |         "description": "The push-up (sometimes called a press-up in British English) is a common calisthenics exercise beginning from the prone position. By raising and lowering the body using the arms, push-ups exercise the pectoral muscles, triceps, and anterior deltoids, with ancillary benefits to the rest of the deltoids, serratus anterior, coracobrachialis and the midsection as a whole.[1] Push-ups are a basic exercise used in civilian athletic training or physical education and commonly in military physical training. They are also a common form of punishment used in the military, school sport, and some martial arts disciplines."
354 |     },
355 |     {
356 |         "id": 51,
357 |         "title": "plank",
358 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/A_U.S._Coast_Guard_recruit%2C_assigned_to_Company_Oscar_188%2C_performs_a_plank_during_incentive_training_at_Coast_Guard_Training_Center_Cape_May_in_Cape_May%2C_N.J.%2C_July_31%2C_2013_130731-G-WA946-943.jpg/330px-thumbnail.jpg",
359 |         "category": "Fitness",
360 |         "description": "The plank (also called a front hold, hover, or abdominal bridge) is an isometric core strength exercise that involves maintaining a position similar to a push-up for the maximum possible time."
361 |     },
362 |     {
363 |         "id": 52,
364 |         "title": "pull-up ",
365 |         "img": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9AXn_oQAl9E-nVXWxlvbZGBpRsqG5ua2n4Q&usqp=CAU",
366 |         "category": "Fitness",
367 |         "description": "A pull-up is an upper-body strength exercise. The pull-up is a closed-chain movement where the body is suspended by the hands, gripping a bar or other implement at a distance typically wider than shoulder-width, and pulled up. As this happens, the elbows flex and the shoulders adduct and extend to bring the elbows to the torso.Pull-ups build up several muscles of the upper body, including the latissimus dorsi, trapezius, and biceps brachii. A pull-up may be performed with overhand (pronated), underhand (supinated), neutral, or rotating hand position. The term chin-up is sometimes used to refer to the pull-up performed with supinated grip."
368 |     },
369 |     {
370 |         "id": 53,
371 |         "title": "Tandoori chicken",
372 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Tandoori_chicken_laccha_piyaz1_%2836886283595%29.jpg/330px-Tandoori_chicken_laccha_piyaz1_%2836886283595%29.jpg",
373 |         "category": "Food",
374 |         "description": "Tandoori chicken is a South Asian dish of chicken marinated in yogurt and spices and roasted in a tandoor, a cylindrical clay oven. The dish is now popular world-wide. The modern form of the dish was popularized by the Moti Mahal restaurant in New Delhi in the late 1940s."
375 |     },
376 |     {
377 |         "id": 54,
378 |         "title": "South Indian cuisine",
379 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Tamil_Nadu_Non-Vegetarian_Meals.png/330px-Tamil_Nadu_Non-Vegetarian_Meals.png",
380 |         "category": "Food",
381 |         "description": "South Indian cuisine includes the cuisines of the five southern states of India—Andhra Pradesh, Karnataka, Kerala, Tamil Nadu and Telangana—and the union territories of Lakshadweep, Pondicherry, and the Andaman and Nicobar Islands.There are typically vegetarian and non-vegetarian dishes for all five states. Additionally, all regions have typical main dishes, snacks, light meals, desserts, and drinks that are well known in their respective region."
382 |     },
383 |     {
384 |         "id": 55,
385 |         "title": "North Indian cuisine",
386 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Vegetarian_Curry.jpeg/288px-Vegetarian_Curry.jpeg",
387 |         "category": "Food",
388 |         "description": "North Indian cuisine is collectively the cuisine of Northern India, which includes the cuisines of Jammu and Kashmir, Punjab, Haryana, Himachal Pradesh, Rajasthan, Uttarakhand, Delhi, Uttar Pradesh and adjoining western Bihar."
389 |     },
390 |     {
391 |         "id": 56,
392 |         "title": "Rajasthani cuisine",
393 |         "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Royal_Rajasthani_Thali_at_Suvarna_Mahal%2C_Ram_Bagh_Hotel%2C_Jaipur.jpg/330px-Royal_Rajasthani_Thali_at_Suvarna_Mahal%2C_Ram_Bagh_Hotel%2C_Jaipur.jpg",
394 |         "category": "Food",
395 |         "description": "Rajasthani cuisine (Hindi: राजस्थानी व्यञ्जन) is the cuisine of the rugged Rajasthan region in North West India. It was influenced by both the warlike lifestyles of its inhabitants and the availability of ingredients in an arid region.[1] Food that could last for several days and could be eaten without heating was preferred. Scarcity of water and fresh green vegetables have all had their effect on the cooking. It is also known for its snacks like Bikaneri bhujia, Mirchi bada and Pyaaj kachori. Other famous dishes include Dal Baati, malaidar special lassi (lassi) and Lashun ki chutney (hot garlic paste), Mawa lassi from Jodhpur, Alwar ka mawa, Malpauas from Pushkar and rasgulla from Bikaner, paniya and gheriya from Mewar. Originating for the Marwar region of the state is the concept Marwari Bhojnalaya, or vegetarian restaurants, today found in many parts of India, which offer vegetarian food of the Marwari people. The history also has its effect on the diet as the Rajputs preferred majorly a non-vegetarian diet while the Brahmin, Jains, and others preferred a vegetarian diet. So, the state has a myriad of both types of delicacies.According to a 2014 survey released by the registrar general of India, Rajasthan has 74.9% vegetarians, which makes it the most vegetarian state in India."
396 |     },
397 |     {
398 |         "id": 57,
399 |         "title": "Mandi",
400 |         "img": "http://wirally.com/wp-content/uploads/2019/07/Untitled-design-151.png",
401 |         "category": "Food",
402 |         "description": "Mandi (Arabic: مندي) is a traditional dish that originated from Hadhramaut, Yemen,[2] consisting mainly of meat and rice with a special blend of spices, cooked in a pit underground. It is popular and commonly consumed in most areas of the Arabian Peninsula, and even considered a staple dish in many regions. It is also found in Egypt, India, the Levant and Turkey.Homemade mandi from Yemen In Yemen Mandi is popular among the Hadhrami people.Mandi was usually made from rice, meat(lamb, camel, goat or chicken), and a mixture of spices called hawaij.The main technique that differentiates mandi from other meat dishes is that the meat is cooked in the taboon.[3]"
403 |     },
404 |     {
405 |         "id": 58,
406 |         "title": "Biryani",
407 |         "img": "https://www.cubesnjuliennes.com/wp-content/uploads/2020/07/Chicken-Biryani-Recipe-500x500.jpg",
408 |         "category": "Food",
409 |         "description": "Biryani  is a mixed rice dish originating among the Muslims of the Indian subcontinent. It is made with Indian spices, rice, and usually some type of meat (chicken, beef, goat, lamb, prawn, fish) or in some cases without any meat, and sometimes, in addition, eggs and potatoes.[1]Biryani is one of the most popular dishes in South Asia, as well as among the diaspora from the region. Similar dishes are also prepared in other parts of the world such as in Iraq, Thailand, and Malaysia.[2] Biryani is the single most-ordered dish on Indian online food ordering and delivery services."
410 |     },
411 |     {
412 |         "id": 59,
413 |         "title": "Kebab",
414 |         "img": "https://static.toiimg.com/thumb/58360750.cms?imgsize=347996&width=800&height=800",
415 |         "category": "Food",
416 |         "description": "Kebab or kabob (North American) is a type of cooked meat dish that originates from cuisines of the Middle East. Many variants of the category are popular around the world, including the skewered shish kebab and the doner kebab with bread.Kebabs consist of cut up or ground meat, sometimes with vegetables and various other accompaniments according to the specific recipe. Although kebabs are typically cooked on a skewer over a fire, some kebab dishes are oven-baked in a pan, or prepared as a stew such as tas kebab.[1][2] The traditional meat for kebabs is most often lamb meat, but regional recipes may include beef, goat, chicken, fish, or even pork (depending on whether or not there are specific religious prohibitions)"
417 |     },
418 |     {
419 |         "id": 60,
420 |         "title": "Naga Cuisine is Just as Rich And Flavourful as its Culture",
421 |         "img": "https://images.news18.com/ibnlive/uploads/2021/12/nagaland-16386760023x2.jpg?impolicy=website&width=510&height=356",
422 |         "category": "Food",
423 |         "description": "Nagaland is known for its cultural, ethnic and linguistic diversity. The state boasts a rich socio-cultural heritage comprising several local tribes, each having their own distinct ethnic traditions. The northeastern state is also a favourite destination for nature lovers because of its diverse flora and fauna, forests, splendid valleys and waterfalls.Nagaland also has its own unique cuisines which are rich in flavour and represent the food culture of different tribal groups.Naga cuisine is based on the local produce that has been available to tribes. It mostly includes fish, meat, rice, herbs, vegetables and fermented grains. The food is definitely different than what you are used to so you may rethink trying, but there are many dishes which are delicious and worth trying at least once. To understand Naga cuisine and what a common resident consumes, you can visit the Central Market in Kohima. The market will offer you a glimpse into the exotic Naga tribal food items like mefi (wriggling hornet grubs), frogs, silkworms, snails, crabs, dried fish and pork, among others. The market also offers exotic condiments such as dried and fermented bamboo shoots, fiery king chillies and plethora of vegetables as well as a variety of leaves, which are intergral to Naga cuisine.A routine Naga meal will include rice, pork or any other meat, fish, boiled or steamed vegetables and side dishes like a variety of chutney or pickles.Axone, fermented soybean paste, is an important part of Naga cuisine. Axone, also known as Akhuni, is used in a variety of preparations like pickles, chutneys, curries and non-veg dishes"
424 |     },
425 |     {
426 |         "id": 61,
427 |         "title": "Fruits and Vegetables are Losing Their Nutrient Value, Know the Risks",
428 |         "img": "https://images.news18.com/ibnlive/uploads/2021/12/untitled-3-276-16409377143x2.jpg?impolicy=website&width=510&height=356",
429 |         "category": "Food",
430 |         "description": "Every now and then, we stress upon the fact of eating lots of fruits and vegetables as they are packed with nutrients. They are said to be the best way to provide nutrition to the body and boost immunity. Every season comes with a variety of grains, vegetables, and fruits and we can’t agree more that they are tastier than the stored ones. However, do you know with time the nutrition value of fruits and vegetables are declining? Yes, you read that right. With time, due to various reasons that nutrition in fruits and vegetables have declined tremendously leaving us with various deficiencies. According to a National Geographic report, the experts find the root of the problem in the quality of soil. In the last few decades, the soil quality has been compromised due to various reasons including excessive chemical use, fertilisers, irrigation and so on. The harvesting methods have changed from natural ways to machineries which has also taken a dig at the health of the soil. Apart from it, due to global warming and climate change, the atmospheric temperature is rising and making the soil lose its moisture even more that do not hold the crops well putting them in risk of losing nutrition.The report also states that due to carbon dioxide increase in the air, the nutrient content of the fruits, vegetables and other crops are pulling down.David R. Montgomery, a professor of geomorphology at the University of Washington in Seattle emphasis on one of the major risks of the lower nutrient value, that is making our immunity low. According to him, “Nutrient decline is going to leave our bodies with fewer of the components they need to mount defences against chronic diseases — it’s going to undercut the value of food as preventive medicine,” state National Geographic."
431 |     },
432 |     {
433 |         "id": 62,
434 |         "title": "These Harmless Summer Drinks are Perfect for Diabetic Patients",
435 |         "img": "https://images.news18.com/ibnlive/uploads/2022/05/summer-drink-16518193713x2.jpg?impolicy=website&width=510&height=356",
436 |         "category": "Food",
437 |         "description": "The summer season is here with soaring temperatures and dehydrating weather. And they call for cold and refreshing drinks. While many of these drinks are healthy and rehydrating, the sugar content in them might not be healthy for diabetic patients. This makes it difficult for people suffering from the chronic disease to stay hydrated and have all essential electrolytes up to their necessary levels. Here are 5 summer coolers that are healthy and contain zero sugar for diabetic patients to enjoy and help stay hydrated. Sattu is a special and popular food in Bihar. One of oldest drinks in India, Sattu cooler is the perfect way to stay hydrated for diabetic patients. It has no carbohydrates and can be enjoyed just by adding sattu powder to cold water along with some black salt and squeezing a few drops of lemon to give it a tangy touch. Spinach, beetroot, fruit juice of choice and some coconut water blended together can be a very beneficial smoothie for you even if you’re non-diabetic. Make sure that the fruit you choose is a low sugar content one and reap the benefits of this wonderful nutritious smoothie.Take 2 cups of chilled curd, a glass of water, some ice cubes and a teaspoon of cumin powder. Blend it all and you have this tasty sugarless drink ready. Salted lassi is a summer cooler that diabetic patients can enjoy without the worry of their disease aggravating.Bel or wood apple is a great source of natural fibre, iron, antioxidants and folates. Along with this it cools your stomach. If you suffer from diabetes, bel sherbet can prove to be very beneficial for you during the scorching summers."
438 |     },
439 | 
440 |     {
441 |         "id": 63,
442 |         "title": "Unable to Find Tofu at Local Store? Here’s an Easy Recipe to Make it at Home",
443 |         "img": "https://images.news18.com/ibnlive/uploads/2022/04/tofu-16510624083x2.jpg?impolicy=website&width=510&height=356",
444 |         "category": "Food",
445 |         "description": "If you are a fitness enthusiast and a vegan, you might be one of the people who have tofu in their meals instead of paneer. While many people find it easily in the supermarket, others may find it difficult to spot tofu at their local stores. If you are one of those people, don’t worry as this simple method can help you make protein-rich tofu at home with just two ingredients – chickpeas and water.Once the tofu is set, you can use it as and when required. It is as tasty as the tofu bought from a store and tofu is as versatile as cottage cheese. It can be used in dry and wet recipes depending on your mood and diet requirements. Chickpea is rich in protein and hence the tofu is a great source of protein to help you complete the daily protein requirement.Soak the chickpeas overnight after thoroughly washing with the help of a strainer under running water.Drain all the water and wash the chickpeas the next day. Add chickpeas with two cups of water in a blender and blend in batches until you have a smooth mixture.Strain the blended chickpeas through a muslin cloth into a bowl. Make a squeezable bag out of the muslin cloth with the mixture in it. Squeeze the blend well to strain it nicely. As the water drains slowly from the mixture, it takes some time to strain the blend.Take the strained blend and put it in a pot. Keep the pot on full flame and let the mixture boil. Once you see bubbles, lower the flame and cook the blend for another half n hour. The mixture will thicken with time. When it is thick enough, put off the flame and let the blend cool down for a while. Leave the mixture in a container for more than 2 hours idle. This will ensure that the mixture sits and the tofu sets properly"
446 |     },
447 |     {
448 |         "id": "64",
449 |         "title": "Ananya Panday, Aditya Roy Kapur, Sara Ali Khan, Ranbir Kapoor, Kiara Advani and more: Showstoppers at India Couture Week",
450 |         "img" : "https://www.hindustantimes.com/ht-img/img/2023/08/01/960x540/kiara_1690888189872_1690888247702.jpg",
451 |         "category" : "Bollywood",
452 |         "description" : "Kiara Advani's stunning appearance as the showstopper for designer duo Falguni and Shane Peacock's opening show left the audience in awe. The pink Barbie-inspired look adorned with intricate bead and sequin work showcased the perfect blend of elegance and glamour.The dress's top, featuring a daring plunging neckline, added a touch of sensuality to the overall look. As she gracefully glided down the ramp, all eyes were drawn to the mesmerizing skirt with its high slit, revealing her impeccable sense of style. The long train trailing behind her added an element of drama, making the entire ensemble a true show-stopping moment.On social media, netizens showered Kiara Advani with praises, affectionately calling her 'desi Barbie.' Her ethereal presence on the runway truly embodied the essence of a modern-day princess. The Barbie-inspired look not only captured hearts but also served as an inspiration for fashion enthusiasts across the globe.With her elegance and charm, Kiara Advani once again proved why she is one of the most sought-after and celebrated actors in the industry. Her collaboration with the visionary designers Falguni and Shane Peacock was a match made in fashion heaven, setting the tone for a memorable and glamorous event.As fashion enthusiasts eagerly await more breathtaking moments on the ramp, Kiara's charisma and poise have undoubtedly left an indelible mark on the fashion world, ensuring that she will forever be remembered as the 'desi Barbie' who stole the show.",
453 | 
454 | 
455 |     },
456 | ]);
457 | 
458 | export default data;


--------------------------------------------------------------------------------