newsitem
This commit is contained in:
parent
b1b04a4768
commit
95032a5221
16
src/App.tsx
16
src/App.tsx
|
|
@ -1,17 +1,18 @@
|
|||
// Modules
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
|
||||
// Styles
|
||||
import "react-lazy-load-image-component/src/effects/blur.css";
|
||||
import "./styles/style.scss";
|
||||
import 'react-lazy-load-image-component/src/effects/blur.css';
|
||||
import './styles/style.scss';
|
||||
|
||||
// Pages
|
||||
import Main from "./pages/Main";
|
||||
import Main from './pages/Main';
|
||||
import News from './pages/News';
|
||||
|
||||
// Static
|
||||
import Header from "./components/header/Header";
|
||||
import Footer from "./components/footer/Footer";
|
||||
import Video from "./components/video/Video";
|
||||
import Header from './components/header/Header';
|
||||
import Footer from './components/footer/Footer';
|
||||
import Video from './components/video/Video';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
|
|
@ -19,6 +20,7 @@ const App = () => {
|
|||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Main />} />
|
||||
<Route path="/news" element={<News />} />
|
||||
</Routes>
|
||||
<Video />
|
||||
<Footer />
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
|
|
@ -0,0 +1,65 @@
|
|||
// Modules
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component';
|
||||
|
||||
// Images
|
||||
import News from '../../assets/images/news.png';
|
||||
|
||||
const NewsItem = () => {
|
||||
return (
|
||||
<section className="news-item">
|
||||
<div className="news-head">
|
||||
<div className="news-head-top">
|
||||
<h4>СПОРТ</h4>
|
||||
<p>15:23, 21 января 2023</p>
|
||||
</div>
|
||||
<h1 className="news-head-bottom">
|
||||
В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на 2023
|
||||
год
|
||||
</h1>
|
||||
</div>
|
||||
<div className="news-img">
|
||||
<LazyLoadImage src={News} effect="blur" useIntersectionObserver />
|
||||
</div>
|
||||
<div className="news-content">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
|
||||
autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
|
||||
nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
|
||||
exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
|
||||
corrupti impedit at molestias vitae distinctio.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
|
||||
earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
|
||||
aut ducimus eaque eum cupiditate?
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
|
||||
autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
|
||||
nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
|
||||
exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
|
||||
corrupti impedit at molestias vitae distinctio.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
|
||||
earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
|
||||
aut ducimus eaque eum cupiditate?
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
|
||||
autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
|
||||
nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
|
||||
exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
|
||||
corrupti impedit at molestias vitae distinctio.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
|
||||
earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
|
||||
aut ducimus eaque eum cupiditate?
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsItem;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// Components
|
||||
import NewsItem from '../components/news/NewsItem';
|
||||
|
||||
const News = () => {
|
||||
return (
|
||||
<main className="news">
|
||||
<div className="container">
|
||||
<div className="news-inner">
|
||||
<NewsItem />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default News;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.news-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(60rem, 30rem);
|
||||
gap: 4.8rem;
|
||||
padding: 6.4rem 0;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.4rem;
|
||||
}
|
||||
|
||||
.news-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.4rem;
|
||||
}
|
||||
|
||||
.news-head-top {
|
||||
display: flex;
|
||||
gap: 3.2rem;
|
||||
|
||||
h4 {
|
||||
font-size: 1.8rem;
|
||||
color: $main;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
color: $main;
|
||||
}
|
||||
}
|
||||
|
||||
.news-head-bottom {
|
||||
font-size: 2.4rem;
|
||||
color: $main;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import "./variables";
|
||||
@import "./general";
|
||||
@import "./header";
|
||||
@import "./footer";
|
||||
@import "./video";
|
||||
@import './variables';
|
||||
@import './general';
|
||||
@import './header';
|
||||
@import './footer';
|
||||
@import './video';
|
||||
@import './news';
|
||||
|
|
|
|||
Loading…
Reference in New Issue