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