Skip to content

Commit e187b6a

Browse files
nitinrajputindnitinrajputind
committed
Home
1 parent bafe963 commit e187b6a

22 files changed

+1101
-61
lines changed

‎package-lock.json

+74
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
"@testing-library/user-event": "^13.5.0",
99
"react": "^18.2.0",
1010
"react-dom": "^18.2.0",
11+
"react-icon": "^1.0.0",
12+
"react-icons": "^4.10.1",
13+
"react-router-dom": "^6.14.2",
1114
"react-scripts": "5.0.1",
1215
"web-vitals": "^2.1.4"
1316
},

‎public/index.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,17 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
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>
2838
</head>
2939
<body>
3040
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

+21-31
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,28 @@
1-
.App {
2-
text-align: center;
3-
}
1+
/* Home Style */
42

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
3+
/* Feature Style */
4+
.TheLatest{
5+
width: 90%;
6+
margin : auto;
7+
/* margin-top : 45px; */
88
}
99

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
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%;
1418
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
19+
@media screen and (max-width: 768px) {
20+
.Latest_contanier{
21+
justify-content: center;
22+
/* row-gap: 10vh; */
23+
}
2524
}
2625

27-
.App-link {
28-
color: #61dafb;
29-
}
26+
/* Featured style End */
27+
3028

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}

‎src/App.js

+8-17
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,15 @@
1-
import logo from './logo.svg';
21
import './App.css';
2+
import Header from './Components/Header';
3+
import RouterComp from './Routes/RouterComp';
4+
35

46
function App() {
57
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
8+
<>
9+
<Header/>
10+
<RouterComp/>
11+
12+
</>
2213
);
2314
}
2415

‎src/Components/Featured.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+

‎src/Components/Header.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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={"/Food"} className={({ isActive }) => (isActive ? 'activeClass' : 'notactiveClass')}>Food</NavLink></li>
24+
</nav>
25+
<button className='mobile-menu-icon' onClick={()=>{setIsMobile(!isMobile)}}>
26+
{isMobile ? <RxCross1/> : <AiOutlineBars/>}
27+
</button>
28+
<hr className='hr'/>
29+
</header>
30+
</>
31+
)
32+
}
33+
export default Header

‎src/Components/TheLatest.jsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 } = props;
7+
return (
8+
<Link to={":category/articleId"} state={{ articleID: id }}>
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;

0 commit comments

Comments
 (0)