From 3de507eb4cf733c95793924deaf410005f5070ca Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Tue, 31 Jan 2023 15:02:18 +0500
Subject: [PATCH] news article done

---
 src/pages/NewsArticle.tsx     | 57 ++++++++++++++++++++---------------
 src/styles/_news-article.scss | 57 +++++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 24 deletions(-)

diff --git a/src/pages/NewsArticle.tsx b/src/pages/NewsArticle.tsx
index 750ad9e..41b8aa5 100644
--- a/src/pages/NewsArticle.tsx
+++ b/src/pages/NewsArticle.tsx
@@ -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 />
diff --git a/src/styles/_news-article.scss b/src/styles/_news-article.scss
index e69de29..21457a9 100644
--- a/src/styles/_news-article.scss
+++ b/src/styles/_news-article.scss
@@ -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;
+}