commit jun 6

news.html

@@ -164,12 +164,15 @@
         <div class="breadcrumb-item-about" aria-current="page">News</div>
     </div>
 
-    <section>
+    <section class="d-flex flex-column flex-lg-row">
+
+        <div class="left-side">
         <!-- First part -->
-        <div class="news-first-part mx-3">
+        <div class="news-first-part clearfix d-flex flex-column justify-content-center">
-            <div class="news-card">
+            <div class="news-card clearfix d-flex flex-column flex-lg-row ">
                 <div class="news-img-container">
                     <img class="news-img" src="assets/images/image42-640x506.jpg" alt="">
+                    <i id="star" class="fa-regular fa-star"></i>
                     <div class="img-text-container">
                         <a class="news-img-text" href="#">Business plan consulting</a>
                     </div>
@@ -182,35 +185,39 @@
                         </div>
                         <h4 class="news-card-text">
                             Is it viable now for IT companies to file an IPO?</h4>
+                        <p class="news-card-p d-none d-md-flex d-lg-flex">It’s no dotcom-bubble burst today as it was at the verge of the centuries. But still, with so many different trends receiving investment funding, is it wise for a company to file an IPO at this time in the stock’s history.</p>
                     </div>
-                    <div class="news-card-date">
+                    <input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
+                    <div class="news-card-date mt-md-3">
                         <a class="date-a" href="">16.06.2016</a>
                         <a class="by-admin" href="">by admin</a>
                     </div>
                 </div>
             </div>
-            <div class="news-card">
+            <div class="news-card d-flex flex-column flex-lg-row">
                 <div class="news-img-container">
                     <img class="news-img" src="assets/images/image41-640x506.jpg" alt="">
                     <div class="img-text-container">
                         <a class="news-img-text" href="#">Conflict managment</a>
                         <a class="news-img-text" href="#">Exit planning</a>
-                        <a class="news-img-text" href="#">Human resource planning</a>
+                        <a class="news-img-text d-md-none" href="#">Human resource planning</a>
-                        <a class="news-img-text" href="#">Market research</a>
+                        <a class="news-img-text d-md-none" href="#">Market research</a>
                     </div>
                 </div>
                 <div class="news-card-description">
                     <div class="news-card-description-header">
                         <h4 class="news-card-text">
                             How long before the exit you must be planning it?</h4>
+                            <p class="news-card-p d-none d-md-flex d-lg-flex">The ideal timing for planning an exit strategy is at least 5-10 years beforehand. But unfortunately, that kind of diligent approach is not always applicable. So how does a CEO or an owner can perform a quicker exit?</p>
                     </div>
-                    <div class="news-card-date">
+                    <input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
+                    <div class="news-card-date mt-md-3">
                         <a class="date-a" href="">16.07.2016</a>
                         <a class="by-admin" href="">by admin</a>
                     </div>
                 </div>
             </div>
-            <div class="news-card">
+            <div class="news-card d-flex flex-column flex-lg-row">
                 <div class="news-img-container">
                     <img class="news-img" src="assets/images/image43-640x506.jpg" alt="">
                     <div class="img-text-container">
@@ -222,14 +229,16 @@
                     <div class="news-card-description-header">
                         <h4 class="news-card-text">
                             Bringing a new CFO at the time of crisis?</h4>
+                            <p class="news-card-p d-none d-md-flex d-lg-flex">There are many different approaches for saving a company during a period of a financial meltdown. Hiring a new Chief Financial Officer may seem like an obvious managerial solution from that list. But actually, is it the best decision?</p>
                     </div>
-                    <div class="news-card-date">
+                    <input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
+                    <div class="news-card-date mt-md-3">
                         <a class="date-a" href="">17.05.2016</a>
                         <a class="by-admin" href="">by admin</a>
                     </div>
                 </div>
             </div>
-            <div class="news-card">
+            <div class="news-card d-flex flex-column flex-lg-row">
                 <div class="news-img-container">
                     <img class="news-img" src="assets/images/image5-640x506.jpg" alt="">
                     <div class="img-text-container">
@@ -240,14 +249,16 @@
                     <div class="news-card-description-header">
                         <h4 class="news-card-text">
                             Image Format</h4>
+                            <p class="news-card-p d-none d-md-flex d-lg-flex">When you need your company to have a new website or if you venture on updating your old webpage with a new look and functionality, the choices are versatile… Assuming that you will go the easy way and choose a theme for your WordPress website,…</p>
                     </div>
-                    <div class="news-card-date">
+                    <input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
+                    <div class="news-card-date mt-md-3">
                         <a class="date-a" href="">17.05.2016</a>
                         <a class="by-admin" href="">by admin</a>
                     </div>
                 </div>
             </div>
-            <div class="news-card">
+            <div class="news-card d-flex flex-column flex-lg-row">
                 <div class="news-img-container">
                     <img class="news-img" src="assets/images/image6-640x506.jpg" alt="">
                     <div class="img-text-container">
@@ -258,14 +269,16 @@
                     <div class="news-card-description-header">
                         <h4 class="news-card-text">
                             IT: using visual "hotzones" for market research among customers</h4>
+                            <p class="news-card-p d-none d-md-flex d-lg-flex">There are many practical and experimental ways nowadays to get the customer’s mind analyzed. This “hotzones” trend lets us all see a much wider scope on how people react and interact with the web and hardware these days. So let’s try to analyze, which marketing…</p>
                     </div>
-                    <div class="news-card-date">
+                    <input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
+                    <div class="news-card-date mt-md-3">
                         <a class="date-a" href="">17.05.2016</a>
                         <a class="by-admin" href="">by admin</a>
                     </div>
                 </div>
             </div>
-            <div class="news-card">
+            <div class="news-card d-flex flex-column flex-lg-row">
                 <div class="news-img-container">
                     <img class="news-img" src="assets/images/image2-640x506.jpg" alt="">
                     <div class="img-text-container">
@@ -281,29 +294,33 @@
                         </div>
                         <h4 class="news-card-text">
                             Gallery Format</h4>
+                            <p class="news-card-p d-none d-md-flex d-lg-flex">When you need your company to have a new website or if you venture on updating your old webpage with a new look and functionality, the choices are versatile… Assuming that you will go the easy way and choose a theme for your WordPress website,…</p>
                     </div>
-                    <div class="news-card-date">
+                    <input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
+                    <div class="news-card-date mt-md-3">
                         <a class="date-a" href="">17.05.2016</a>
                         <a class="by-admin" href="">by admin</a>
                     </div>
                 </div>
             </div>
-            <div class="news-card">
+            <div class="news-card d-flex flex-column flex-lg-row">
                 <div class="news-img-container">
                     <img class="news-img" src="assets/images/image7-640x506.jpg" alt="">
                     <div class="img-text-container">
                         <a class="news-img-text" href="#">Business plan consulting</a>
                     </div>
                     <div class="link-on-image">
-                        <a class="link-a" href="#">https://www.templatemonster.com</a>
+                        <a class="link-a" href="#">https://www.templatemonster.com/</a>
                     </div>
                 </div>
                 <div class="news-card-description">
                     <div class="news-card-description-header">
                         <h4 class="news-card-text">
                             Link Format</h4>
+                            <p class="news-card-p d-none d-md-flex d-lg-flex">When you need your company to have a new website or if you venture on updating your old webpage with a new look and functionality, the choices are versatile… Assuming that you will go the easy way and choose a theme for your WordPress website,…</p>
                     </div>
-                    <div class="news-card-date">
+                    <input type="submit" class="view-more d-none d-md-flex d-lg-flex" value="read-more">
+                    <div class="news-card-date mt-md-3">
                         <a class="date-a" href="">17.05.2016</a>
                         <a class="by-admin" href="">by admin</a>
                     </div>
@@ -323,8 +340,12 @@
             </div>
         </div>
 
+    </div>
+
+        <div class="side-bar d-flex flex-column ">
+
         <!-- search -->
-        <div class="search-news mx-3">
+        <div class="search-news ">
             <div class="search-news-form d-flex">
                 <input class="search-news-input" type="text" placeholder="Search...">
                 <div class="search-news-icon"><i class="fa-solid fa-magnifying-glass"></i></div>
@@ -333,15 +354,15 @@
 
         <!-- Recent posts -->
 
-        <div class="recent-posts mt-3 mx-3 pt-5">
+        <div class="recent-posts mt-3 pt-5">
             <h5 class="recent-title">Recent Posts</h5>
             <div class="custom-post-container d-flex ">
                 <div class="custom-post ">
                     <img src="assets/images/image41-130x136.jpg" alt="">
-                    <h4 class="recent-subtitle" >How long before the exit you must be planning it?</h4>
+                    <h4 class="recent-subtitle" >How long before the <br> exit you must be<br> planning it?</h4>
                     <a class="date-a" href="#"> 26.06.2016</a>
                 </div>
-                <div class="custom-post" >
+                <div class="custom-post" style="margin-left: 35px;" >
                     <img src="assets/images/fakeimg.png" alt="">
                     <h4 class="recent-subtitle" >Gallery Format</h4>
                     <a class="date-a" href="#"> 17.05.2016</a>
@@ -351,12 +372,155 @@
 
         <!-- Quotes -->
 
-        <div class="recent-posts mt-3 mx-3 pt-5">
+        <div class="recent-posts mt-3 pt-5">
             <h5 class="recent-title">Quotes on Science</h5>
-            <blockquote></blockquote>
+            <blockquote>
-            <div class="quotes-text">An investment in knowledge pays the best interest. </div>
+                <div class="quotes-text">An investment in knowledge pays the best interest. </div>
+            </blockquote>
         </div>
 
+        <!-- Categories  -->
+        <div class="categories-news  mt-4 pt-5">
+            <h5 class="categories-title ">Categories</h5>
+            <ul class="categories-ul">
+                <li class="categories-li"><a href="#">Business plan consulting</a></li>
+                <li class="categories-li" ><a href="#">Conflict menagment</a></li>
+                <li class="categories-li"><a href="#">Exit planning</a></li>
+                <li class="categories-li"><a href="#">Governance</a></li>
+                <li class="categories-li"><a href="#">Human resources planning</a></li>
+                <li class="categories-li"><a href="#">Market research</a></li>
+            </ul>
+        </div>
+
+        <!-- Recent coments -->
+        <div class="categories-news mt-4 pt-5">
+            <h5 class="categories-title">Recent coments</h5>
+            <ul class="recent-com-ul">
+                <li class="recent-com-li">
+                    <span class="admin-on">admin on</span>
+                    <a href="#">Image Format</a>
+                </li>
+                <li class="recent-com-li">
+                    <span class="admin-on">admin on</span>
+                    <a href="#">Bringing a new CFO at the time of crisis?</a>
+                </li>
+                <li class="recent-com-li">
+                    <span class="admin-on">admin on</span>
+                    <a href="#">Image Format</a>
+                </li>
+                <li class="recent-com-li">
+                    <span class="admin-on">admin on</span>
+                    <a href="#">Is it viable now for IT companies to file an IPO?</a>
+                </li>
+                <li class="recent-com-li">
+                    <span class="admin-on">admin on</span>
+                    <a href="#">Is it viable now for IT companies to file an IPO?</a>
+                </li>
+            </ul>
+        </div>
+        <!-- Tags -->
+
+        <div class="categories-news  mt-4 pt-5">
+            <h5 class="categories-title">Tags</h5>
+            <div class="tag-container">
+                <a href="#">Advice</a>
+                <a href="#">Finances</a>
+                <a href="#">Insight</a>
+                <a href="#">Investments</a>
+                <a href="#">Money</a>
+                <a href="#">Stock</a>
+            </div>
+        </div>
+
+        <!-- Archives -->
+
+        <div class="categories-news mt-4 pt-5">
+            <h5 class="categories-title">Archives</h5>
+            <div class="archives-container">
+                <select name="" id="archives-select">
+                    <option value="">Select Month</option>
+                    <option value="">April 2016</option>
+                    <option value="">May 2016</option>
+                    <option value="">June 2016</option>
+                    <option value="">July 2016</option>
+                </select>
+            </div>
+        </div>
+
+
+        <div class="categories-news  mt-4 pt-5 mb-3">
+            <h5 class="categories-title">Calendar</h5>
+            <div class="calendar calendar-table d-flex justify-content-center flex-column ">
+                <div class="caption">May 2024</div>
+                <table class="">
+                    <thead>
+                        <tr>
+                            <th>M</th>
+                            <th>T</th>
+                            <th>W</th>
+                            <th>T</th>
+                            <th>F</th>
+                            <th>S</th>
+                            <th>S</th>
+                        </tr>
+                    </thead>
+                    
+                    <tbody>
+                        <tr>
+                            <td colspan="2" class="pad">&nbsp;</td>
+                            <td>1</td>
+                            <td>2</td>
+                            <td>3</td>
+                            <td>4</td>
+                            <td>5</td>
+                        </tr>
+                        <tr>
+                            <td>6</td>
+                            <td>7</td>
+                            <td>8</td>
+                            <td>9</td>
+                            <td>10</td>
+                            <td>11</td>
+                            <td>12</td>
+                        </tr>
+                        <tr>
+                            <td>13</td>
+                            <td>14</td>
+                            <td>15</td>
+                            <td>16</td>
+                            <td>17</td>
+                            <td>18</td>
+                            <td>19</td>
+                        </tr>
+                        <tr>
+                            <td>20</td>
+                            <td>21</td>
+                            <td>22</td>
+                            <td>23</td>
+                            <td>24</td>
+                            <td>25</td>
+                            <td>26</td>
+                        </tr>
+                        <tr>
+                            <td class="last-row">27</td>
+                            <td class="last-row">28</td>
+                            <td class="last-row">29</td>
+                            <td class="last-row">30</td>
+                            <td class="last-row">31</td>
+                        </tr>   
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <td id="month-name-table">« Jul</td>
+                            <td class="pad">&nbsp;</td>
+                            <td colspan="3" class="pad">&nbsp;</td>
+                        </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
+        
+    </div>
         
 
 

style/news/_categories-news.scss

@@ -0,0 +1,198 @@
+
+.categories-news{
+    border-top: 1px solid #e0e0e8;
+    margin: auto 15px;
+
+    .categories-title{
+        font-size: 18px;
+            line-height: 1.2;
+            font-family: Merriweather, serif;
+            color: #15c1c6;
+            font-weight: 700;
+            margin-bottom: 18px;
+            
+    }
+    .categories-ul{
+        font-family: Merriweather, serif;
+        font-style: italic;
+        font-weight: 400;
+        list-style: none;
+        padding: 0;
+        font-size: 16px;
+        line-height: 1.4375;
+        letter-spacing: 0px;
+        text-align: left;
+    }
+    .categories-li{
+        margin-top: 12.8px;
+        a{
+            text-decoration: none;
+            color: #15c1c6;
+        }
+        a:hover{
+            color: #333333;
+            transition: 0.3s;
+        }
+    }
+
+    // Recent com
+
+    .recent-com-ul{
+        list-style: none;
+        padding: 0;
+        .recent-com-li{
+            display: flex;
+            flex-direction: column;
+            margin-top: 35.2px;
+            .admin-on{
+                color: #777777;
+                font-family: Merriweather, serif;
+                font-style: italic;
+                font-weight: 400;
+                text-transform: lowercase;
+                font-size: 16px;
+                line-height: 1.4375;
+                letter-spacing: 0px;
+            }
+            a{
+                text-decoration: none;
+                color: #333333;
+                font-size: 1.125rem;
+                line-height: 1.333;
+                font-style: normal;
+                font-weight: 500;
+                font-family: Merriweather, serif;
+            }
+            a:hover{
+                color: #15c1c6;
+                transition: 0.3s;
+            }
+        }
+    }
+
+    // Tags
+    .tag-container{
+        display: block;
+        a{
+            margin:0 18px 12px 0;
+            text-decoration: none;
+            font-size: 16px;
+            line-height: 1.4375;
+            font-family: Merriweather, serif;
+            font-style: italic;
+            font-weight: 400;
+            letter-spacing: 0px;
+            text-align: left;
+            color: #777777;
+        }
+        a:hover{
+            color: #15c1c6;
+            transition: 0.3s;
+        }
+    }
+
+    //Archives
+
+    .archives-container{
+
+
+
+        #archives-select{
+            background-color: #f6f6f6;
+            font-family: Merriweather, serif;
+            font-style: italic;
+            font-weight: 400;
+            border: 0px;
+            color: #777777;
+            width: 100%;
+            padding: 17px 56px 16px 20px;
+            cursor: pointer;
+        }
+        #archives-select:hover{
+            background-color: rgb(237, 237, 237);
+            transition: 0.3s;
+        }
+    }
+
+    // Calendar
+
+    .calendar{
+        text-align: center;
+        border-left: 1px solid #e0e0e8;
+        border-right: 1px solid #e0e0e8;
+        border-bottom: 1px solid #e0e0e8;
+        padding-left: 19px;
+        padding-right: 19px;
+
+        .caption{
+            text-align: center;
+            color: #ffffff;
+            background-color: #15c1c6;
+            margin-bottom: .9em;
+            margin-left: -20px;
+            margin-right: -20px;
+            padding: .7em .5em;
+            text-transform: uppercase;
+            letter-spacing: .05em;
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 700;
+            font-family: Merriweather, serif;
+        }
+
+        thead{
+            text-align: center;
+            th{
+                color: #233457;
+                font-size: .75rem;
+                width: 14.22%;
+                padding: 7px 2px;
+                text-align: center;
+                font-weight: 500;
+                font-family: Merriweather, serif;
+            }
+        }
+        tfoot{
+            border-top: 1px solid #e0e0e8;
+            #month-name-table{
+                font-size: .8125rem;
+                text-transform: uppercase;
+                font-family: Merriweather, serif;
+                cursor: pointer;
+                font-weight: 700;
+                color: #777777;
+            padding: 10px 0 15px 0;
+
+            }
+            #month-name-table:hover {    
+                transition: 0.3s;
+                color: black;
+            }
+        }
+
+
+        tr{
+            padding-left: 19px;
+            padding-right: 19px;
+        }
+        .last-row{
+            padding-bottom: 20px;
+        }
+
+        td{
+            font-size: .80rem;
+            padding: 7px 2px;
+            width: 14.22%;
+            font-family: MerriweatherSans, sans-serif;
+        }
+
+    }
+}
+
+@media only screen and (min-width:768px) {
+    .categories-news{
+        margin-right: 60px;
+        margin-left: 60px;
+
+    }
+}

style/news/_custom-post.scss

@@ -1,5 +1,7 @@
 .recent-posts{
     border-top: 1px solid #e0e0e8;
+    margin-right: 15px;
+    margin-left: 15px;
     .date-a{
         text-decoration: none;
         color: #15c1c6;
@@ -31,27 +33,38 @@
         letter-spacing: 0px;
 
     }
-    blockquote{
+    blockquote::before{
         content: '\201c';
-        font-family: serif;
+        font-family: 'Times New Roman',  serif;
-        font-size: 4em;
+        font-size: 6em;
         line-height: 1;
         margin-left: -12px;
         font-style: italic;
         font-weight: 700;
         quotes: none;
+        color: #15c1c6;
+    }
+
+    blockquote{
+        padding: 0 39px 0 44px;
     }
     .quotes-text{
         font-style: italic;
         font-weight: 700;
-        font-size: 22px;
+        font-size: 25px;
         line-height: 1.33333;
         font-family: MerriweatherSans, sans-serif;
         letter-spacing: 0;
         color: #333333;
         text-align: center;
-        padding: 0 60px;
     }
 
 }
 
+@media only screen and (min-width:768px) {
+    .recent-posts{
+        margin-right: 60px;
+        margin-left: 60px;
+
+    }
+}

style/news/_news-first.scss

@@ -1,15 +1,16 @@
 .news-first-part {
     .news-card {
         border: 1px solid #ebebeb;
-        margin-top: 16px;
+        margin: 16px 15px 0 15px;
         position: relative;
 
-        .news-card-description{
+        .news-card-description {
             padding: 15px;
 
-            .post-tags{
+            .post-tags {
                 margin: 8px 0 12px 0;
-                .post-tags-a{
+
+                .post-tags-a {
                     text-decoration: none;
                     color: #15c1c6;
                     margin-right: 12px;
@@ -20,13 +21,13 @@
                     line-height: 1.4375;
                 }
 
-                .post-tags-a:hover{
+                .post-tags-a:hover {
-                    color:#31353d;
+                    color: #31353d;
                     transition: 0.3s;
                 }
             }
 
-            .news-card-text{
+            .news-card-text {
                 font-style: normal;
                 font-weight: 500;
                 font-size: 24px;
@@ -35,15 +36,27 @@
                 letter-spacing: 0px;
                 text-align: inherit;
                 color: #31353d;
-                cursor:pointer;
+                cursor: pointer;
             }
 
-            .news-card-text:hover{
+            .news-card-p {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 1.4375;
+                font-family: MerriweatherSans, sans-serif;
+                letter-spacing: 0px;
+                text-align: left;
+                color: #777777;
+            }
+
+            .news-card-text:hover {
                 color: #15c1c6;
                 transition: 0.3s;
             }
-            .news-card-date{
+
-                .date-a{
+            .news-card-date {
+                .date-a {
                     text-decoration: none;
                     color: #15c1c6;
                     margin-right: 15px;
@@ -51,35 +64,53 @@
                     font-style: italic;
                     font-weight: 400;
                 }
-                .date-a:hover{
+
+                .date-a:hover {
                     color: #31353d;
-                    transition:0.3s;
+                    transition: 0.3s;
                 }
-                .by-admin{
+
+                .by-admin {
                     text-decoration: none;
                     color: #777777;
                     font-family: Merriweather, serif;
                     font-style: italic;
                     font-weight: 400;
                 }
-                .by-admin:hover{
+
-                    color:#15c1c6;
+                .by-admin:hover {
+                    color: #15c1c6;
                     transition: 0.3s;
                 }
             }
         }
 
         .news-img-container {
-            .link-on-image{
+            #star{
+                text-align: center;
+                position: absolute;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                left: 15px;
+                top: 15px;
+                background-color: #15c1c6;
+                color: white;
+                border-radius: 50%;
+                font-size: 17px;
+                height: 58px;
+                width: 58px;
+            }
+            .link-on-image {
                 position: absolute;
                 bottom: 55%;
                 left: 10%;
                 text-align: center;
                 padding: 10px 20px 10px 15px;
                 color: #ffffff;
-                background-color: rgba(51,51,51,0.78);
+                background-color: rgba(51, 51, 51, 0.78);
 
-                .link-a{
+                .link-a {
                     text-decoration: none;
                     color: #ffffff;
                     font-family: Merriweather, serif;
@@ -87,16 +118,18 @@
                     font-weight: 400;
                 }
             }
-            .link-on-image:hover{
+
-                background-color: rgba(21,193,198,0.78);
+            .link-on-image:hover {
+                background-color: rgba(21, 193, 198, 0.78);
                 transition: 0.3s;
             }
+
             .news-img {
                 max-width: 100%;
                 height: auto;
             }
 
-            .img-text-container{
+            .img-text-container {
                 padding: 15px 0 0 15px;
                 word-wrap: break-word;
                 word-break: break-word;
@@ -116,18 +149,96 @@
                 padding: 4px 12px;
                 margin-bottom: 6px;
                 display: inline-block;
-
-
             }
-            .news-img-text:hover{
+
+            .news-img-text:hover {
                 background-color: #31353d;
                 transition: 0.3s;
             }
-
         }
-
-
-
     }
-
+}
+
+@media only screen and (min-width:768px) {
+    .news-first-part {
+        margin: 0 60px !important;
+
+        .news-card {
+            .news-img-container {
+
+                .link-on-image {
+                    position: absolute;
+                    bottom: 63%;
+                    left: 25%;
+                    text-align: center;
+                }
+
+                .img-text-container {
+                    position: absolute;
+                    top: 30px;
+                    right: 30px;
+                    overflow: hidden;
+                    width: auto;
+                    max-width: 80%;
+                    text-align: right;
+                    z-index: 1;
+                    left: auto;
+
+                }
+
+                .news-img {
+                    width: 688px;
+                }
+
+            }
+        }
+    }
+}
+
+@media only screen and (min-width:992px) {
+    .news-first-part {
+        margin-top: 34px !important;
+        
+        .news-card {
+            margin-bottom: 25px !important;
+            .news-card-description{
+                padding: 45px 50px 0 59px;
+
+                .news-card-text{
+                    font-size: 29px;
+                }
+
+                .news-card-date {
+                    margin-top: 50px !important;
+                }
+                .post-tags{
+                    margin-bottom: 40px;
+                }
+            }
+
+            .news-img-container {
+                #star{
+                    left: 30px;
+                    top: 30px;
+                }
+                .img-text-container {
+                    position: absolute;
+                    top: 30px;
+                    right: 55%;
+                }
+
+                .news-img {
+                    min-width: 629px;
+                    height: 497px;
+                }
+
+                .link-on-image {
+                    position: absolute;
+                    bottom: 47%;
+                    left: 12%;
+                    text-align: center;
+                }
+            }
+        }
+    }
 }

style/news/_page-nav.scss

@@ -44,3 +44,16 @@
         }
     }
 }
+@media only screen and (min-width:768px) {
+    .page-navigation{
+        margin-left: 60px !important;
+        margin-right: 60px !important;
+        padding: 52px 0 45px 0;
+        .next-icon{
+            margin-left: 100px !important;
+        
+        }
+    }
+    
+    
+}

style/news/_search-news.scss

@@ -1,6 +1,7 @@
 .search-news{
     padding-top: 48px;
     margin-top: 24px;
+    margin: 24px 15px 0 15px;
     border-top: 1px solid #e0e0e8;
     .search-news-form{
         .search-news-input{
@@ -27,7 +28,27 @@
             border-radius: 29px;
             font-size: large;
             height: 57px;
+            cursor:pointer;
 
         }
+
+        .search-news-icon:hover{
+            background-color: #333333;
+            transition: 0.3s;
+        }
+
+    }
+}
+
+@media only screen and (min-width:768px) {
+    .search-news{
+        margin-top: 48px;
+        margin-left: 60px ;
+        margin-right: 60px;
+        .search-news-input{
+            width: 90% !important;
+        }
     }
 }
+    
+    

style/style.css

@@ -1713,7 +1713,7 @@ footer .footer-copyright a:hover {
 }
 .news-first-part .news-card {
   border: 1px solid #ebebeb;
-  margin-top: 16px;
+  margin: 16px 15px 0 15px;
   position: relative;
 }
 .news-first-part .news-card .news-card-description {
@@ -1747,6 +1747,16 @@ footer .footer-copyright a:hover {
   color: #31353d;
   cursor: pointer;
 }
+.news-first-part .news-card .news-card-description .news-card-p {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.4375;
+  font-family: MerriweatherSans, sans-serif;
+  letter-spacing: 0px;
+  text-align: left;
+  color: #777777;
+}
 .news-first-part .news-card .news-card-description .news-card-text:hover {
   color: #15c1c6;
   transition: 0.3s;
@@ -1774,6 +1784,21 @@ footer .footer-copyright a:hover {
   color: #15c1c6;
   transition: 0.3s;
 }
+.news-first-part .news-card .news-img-container #star {
+  text-align: center;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 15px;
+  top: 15px;
+  background-color: #15c1c6;
+  color: white;
+  border-radius: 50%;
+  font-size: 17px;
+  height: 58px;
+  width: 58px;
+}
 .news-first-part .news-card .news-img-container .link-on-image {
   position: absolute;
   bottom: 55%;
@@ -1823,6 +1848,70 @@ footer .footer-copyright a:hover {
   transition: 0.3s;
 }
 
+@media only screen and (min-width: 768px) {
+  .news-first-part {
+    margin: 0 60px !important;
+  }
+  .news-first-part .news-card .news-img-container .link-on-image {
+    position: absolute;
+    bottom: 63%;
+    left: 25%;
+    text-align: center;
+  }
+  .news-first-part .news-card .news-img-container .img-text-container {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    overflow: hidden;
+    width: auto;
+    max-width: 80%;
+    text-align: right;
+    z-index: 1;
+    left: auto;
+  }
+  .news-first-part .news-card .news-img-container .news-img {
+    width: 688px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .news-first-part {
+    margin-top: 34px !important;
+  }
+  .news-first-part .news-card {
+    margin-bottom: 25px !important;
+  }
+  .news-first-part .news-card .news-card-description {
+    padding: 45px 50px 0 59px;
+  }
+  .news-first-part .news-card .news-card-description .news-card-text {
+    font-size: 29px;
+  }
+  .news-first-part .news-card .news-card-description .news-card-date {
+    margin-top: 50px !important;
+  }
+  .news-first-part .news-card .news-card-description .post-tags {
+    margin-bottom: 40px;
+  }
+  .news-first-part .news-card .news-img-container #star {
+    left: 30px;
+    top: 30px;
+  }
+  .news-first-part .news-card .news-img-container .img-text-container {
+    position: absolute;
+    top: 30px;
+    right: 55%;
+  }
+  .news-first-part .news-card .news-img-container .news-img {
+    min-width: 629px;
+    height: 497px;
+  }
+  .news-first-part .news-card .news-img-container .link-on-image {
+    position: absolute;
+    bottom: 47%;
+    left: 12%;
+    text-align: center;
+  }
+}
 .page-navigation {
   padding: 30px 0 23px;
   margin: 57.6px 0;
@@ -1864,9 +1953,20 @@ footer .footer-copyright a:hover {
   padding: 16px 22px;
 }
 
+@media only screen and (min-width: 768px) {
+  .page-navigation {
+    margin-left: 60px !important;
+    margin-right: 60px !important;
+    padding: 52px 0 45px 0;
+  }
+  .page-navigation .next-icon {
+    margin-left: 100px !important;
+  }
+}
 .search-news {
   padding-top: 48px;
   margin-top: 24px;
+  margin: 24px 15px 0 15px;
   border-top: 1px solid #e0e0e8;
 }
 .search-news .search-news-form .search-news-input {
@@ -1896,10 +1996,27 @@ footer .footer-copyright a:hover {
   border-radius: 29px;
   font-size: large;
   height: 57px;
+  cursor: pointer;
+}
+.search-news .search-news-form .search-news-icon:hover {
+  background-color: #333333;
+  transition: 0.3s;
 }
 
+@media only screen and (min-width: 768px) {
+  .search-news {
+    margin-top: 48px;
+    margin-left: 60px;
+    margin-right: 60px;
+  }
+  .search-news .search-news-input {
+    width: 90% !important;
+  }
+}
 .recent-posts {
   border-top: 1px solid #e0e0e8;
+  margin-right: 15px;
+  margin-left: 15px;
 }
 .recent-posts .date-a {
   text-decoration: none;
@@ -1931,24 +2048,205 @@ footer .footer-copyright a:hover {
   line-height: 1.38462;
   letter-spacing: 0px;
 }
-.recent-posts blockquote {
+.recent-posts blockquote::before {
   content: "“";
-  font-family: serif;
+  font-family: "Times New Roman", serif;
-  font-size: 4em;
+  font-size: 6em;
   line-height: 1;
   margin-left: -12px;
   font-style: italic;
   font-weight: 700;
   quotes: none;
+  color: #15c1c6;
+}
+.recent-posts blockquote {
+  padding: 0 39px 0 44px;
 }
 .recent-posts .quotes-text {
   font-style: italic;
   font-weight: 700;
-  font-size: 22px;
+  font-size: 25px;
   line-height: 1.33333;
   font-family: MerriweatherSans, sans-serif;
   letter-spacing: 0;
   color: #333333;
   text-align: center;
-  padding: 0 60px;
+}
+
+@media only screen and (min-width: 768px) {
+  .recent-posts {
+    margin-right: 60px;
+    margin-left: 60px;
+  }
+}
+.categories-news {
+  border-top: 1px solid #e0e0e8;
+  margin: auto 15px;
+}
+.categories-news .categories-title {
+  font-size: 18px;
+  line-height: 1.2;
+  font-family: Merriweather, serif;
+  color: #15c1c6;
+  font-weight: 700;
+  margin-bottom: 18px;
+}
+.categories-news .categories-ul {
+  font-family: Merriweather, serif;
+  font-style: italic;
+  font-weight: 400;
+  list-style: none;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1.4375;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.categories-news .categories-li {
+  margin-top: 12.8px;
+}
+.categories-news .categories-li a {
+  text-decoration: none;
+  color: #15c1c6;
+}
+.categories-news .categories-li a:hover {
+  color: #333333;
+  transition: 0.3s;
+}
+.categories-news .recent-com-ul {
+  list-style: none;
+  padding: 0;
+}
+.categories-news .recent-com-ul .recent-com-li {
+  display: flex;
+  flex-direction: column;
+  margin-top: 35.2px;
+}
+.categories-news .recent-com-ul .recent-com-li .admin-on {
+  color: #777777;
+  font-family: Merriweather, serif;
+  font-style: italic;
+  font-weight: 400;
+  text-transform: lowercase;
+  font-size: 16px;
+  line-height: 1.4375;
+  letter-spacing: 0px;
+}
+.categories-news .recent-com-ul .recent-com-li a {
+  text-decoration: none;
+  color: #333333;
+  font-size: 1.125rem;
+  line-height: 1.333;
+  font-style: normal;
+  font-weight: 500;
+  font-family: Merriweather, serif;
+}
+.categories-news .recent-com-ul .recent-com-li a:hover {
+  color: #15c1c6;
+  transition: 0.3s;
+}
+.categories-news .tag-container {
+  display: block;
+}
+.categories-news .tag-container a {
+  margin: 0 18px 12px 0;
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 1.4375;
+  font-family: Merriweather, serif;
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: 0px;
+  text-align: left;
+  color: #777777;
+}
+.categories-news .tag-container a:hover {
+  color: #15c1c6;
+  transition: 0.3s;
+}
+.categories-news .archives-container #archives-select {
+  background-color: #f6f6f6;
+  font-family: Merriweather, serif;
+  font-style: italic;
+  font-weight: 400;
+  border: 0px;
+  color: #777777;
+  width: 100%;
+  padding: 17px 56px 16px 20px;
+  cursor: pointer;
+}
+.categories-news .archives-container #archives-select:hover {
+  background-color: rgb(237, 237, 237);
+  transition: 0.3s;
+}
+.categories-news .calendar {
+  text-align: center;
+  border-left: 1px solid #e0e0e8;
+  border-right: 1px solid #e0e0e8;
+  border-bottom: 1px solid #e0e0e8;
+  padding-left: 19px;
+  padding-right: 19px;
+}
+.categories-news .calendar .caption {
+  text-align: center;
+  color: #ffffff;
+  background-color: #15c1c6;
+  margin-bottom: 0.9em;
+  margin-left: -20px;
+  margin-right: -20px;
+  padding: 0.7em 0.5em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  font-family: Merriweather, serif;
+}
+.categories-news .calendar thead {
+  text-align: center;
+}
+.categories-news .calendar thead th {
+  color: #233457;
+  font-size: 0.75rem;
+  width: 14.22%;
+  padding: 7px 2px;
+  text-align: center;
+  font-weight: 500;
+  font-family: Merriweather, serif;
+}
+.categories-news .calendar tfoot {
+  border-top: 1px solid #e0e0e8;
+}
+.categories-news .calendar tfoot #month-name-table {
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  font-family: Merriweather, serif;
+  cursor: pointer;
+  font-weight: 700;
+  color: #777777;
+  padding: 10px 0 15px 0;
+}
+.categories-news .calendar tfoot #month-name-table:hover {
+  transition: 0.3s;
+  color: black;
+}
+.categories-news .calendar tr {
+  padding-left: 19px;
+  padding-right: 19px;
+}
+.categories-news .calendar .last-row {
+  padding-bottom: 20px;
+}
+.categories-news .calendar td {
+  font-size: 0.8rem;
+  padding: 7px 2px;
+  width: 14.22%;
+  font-family: MerriweatherSans, sans-serif;
+}
+
+@media only screen and (min-width: 768px) {
+  .categories-news {
+    margin-right: 60px;
+    margin-left: 60px;
+  }
 }/*# sourceMappingURL=style.css.map */

style/style.scss

@@ -40,6 +40,7 @@
 @import 'news/_page-nav';
 @import 'news/_search-news';
 @import 'news/_custom-post';
+@import 'news/_categories-news';