Aydogdy
/
hhm-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

news article done

This commit is contained in:
Kakabay 2023-01-31 15:02:18 +05:00
parent 95ba3a8e5d
commit 3de507eb4c
2 changed files with 90 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/NewsArticle.tsx
View File

@ -9,14 +9,16 @@ const NewsArticle = () => {
<div className="container">
<div className="news-article-inner">
<div className="news-article-content">
<div className="news-article-status">
<h3 className="news-article-category">Спорт</h3>
<h3 className="news-article-date">15:23, 21 января 2023</h3>
<div className="news-article-info">
<div className="news-article-status">
<h3 className="news-article-category">Спорт</h3>
<h3 className="news-article-date">15:23, 21 января 2023</h3>
</div>
<h2 className="news-article-title">
В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на
2023 год
</h2>
</div>
<h2 className="news-article-title">
В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на
2023 год
</h2>
<div className="news-article-image">
<img src={placeholder} alt="image" />
</div>
@ -25,23 +27,30 @@ const NewsArticle = () => {
commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Vestibulum eget
elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet
consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
consectetur. Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales.
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem
ipsum dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam
commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Vestibulum eget
elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet
consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
consectetur. Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales.
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem
ipsum dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam
commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Vestibulum eget
elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet
consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
consectetur. Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales.
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem
ipsum dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam
commodo mauris ac sodales.
consectetur. <br />
<br /> Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum
dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo mauris ac
sodales.
<br />
<br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna
tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
<br />
<br /> Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo
mauris ac sodales.
<br />
<br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna
tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
<br />
<br /> Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo
mauris ac sodales.
</p>
</div>
<Aside />

57
src/styles/_news-article.scss
View File

@ -0,0 +1,57 @@
.news-article-inner {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2.4rem;
}
.news-article-info {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.news-article-content {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.news-article-status {
display: flex;
gap: 3.2rem;
align-items: center;
}
.news-article-category {
@include roboto;
color: $main;
text-transform: uppercase;
font-size: 1.8rem;
font-weight: 700;
}
.news-article-date {
color: $body;
font-size: 1.4rem;
font-weight: 400;
@include roboto;
}
.news-article-title {
@include raleway;
font-weight: 700;
font-size: 2.4rem;
color: $black;
}
.news-article-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-article-text {
@include roboto;
color: $body;
font-size: 1.8rem;
font-weight: 400;
}