News page

index.html

@@ -18,6 +18,7 @@ <h1>Welcome</h1>
 <!-- google fonts end -->
 <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Manrope:wght@200&family=Monoton&family=Roboto:wght@300&family=Tilt+Prism&family=Ysabeau+SC:wght@1;100&display=swap" rel="stylesheet">
   <title>Collaboration and Contribution</title>
+  <link rel="stylesheet" href="./src/css/style.css">
 
 
 </head>
@@ -82,8 +83,43 @@ <h1 id="about">Learning design</h1>
 
       </div>
         <!--  -->
-      </div>       
+    </div>       
       <!-- end of education solutions -->
+
+
+
+      <!--news section-->
+      <div class="news-body">
+        <div class="news-header"><h3>News</h3></div>
+        <div class="news">
+
+            <p>Conversational learning ipsum dolar</p>
+            <p>Eos qui ratione voluptatem sequi nesciunt.</p>
+            <p>Read more</p>
+
+        </div>
+          <hr/>
+          <div class="news">
+
+              <p>Conversational learning ipsum dolar</p>
+              <p>Eos qui ratione voluptatem sequi nesciunt.</p>
+              <p>Read more</p>
+
+
+          </div>
+          <hr/>
+          <div class="news">
+
+              <p>Conversational learning ipsum dolar</p>
+              <p>Eos qui ratione voluptatem sequi nesciunt.</p>
+              <p>Read more</p>
+
+
+          </div>
+          <hr/>
+      </div>
+
+      <!--end of news section-->
 
 
 </body>

src/css/style.css

@@ -1,7 +1,7 @@
 
 /*{footer styling}*/
 
-  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap');
 
 *{margin: 0;} *
 
@@ -376,7 +376,6 @@ body{
    }
     /* education solution design */
    .education-solutions{
-    position: absolute;
     /* background-color: white; */
     width: 90%;
     margin: 1% 0 0 5%;
@@ -824,4 +823,77 @@ body{
        } 
     /*  end section 2 */
 
-}
+}
+
+/* Importing the DM Sans font */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap');
+
+.news-body{
+    background-color: #F9F8F4;
+    margin: 0;
+    font-family: 'DM Sans', 'sans-serif';
+
+}
+
+/*Styling the header container*/
+.news-header{
+    display: flex;
+    margin-left: 165px;
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+/*Styling the header*/
+.news-header h3{
+    font-size: 30px;
+    letter-spacing: 3px;
+} 
+
+/*Styling the news container*/
+.news{
+    display: flex;
+    flex-direction:row;
+    justify-content: space-evenly;
+}
+
+/*Styling the link*/
+.news a{
+    text-decoration: none;
+
+}
+/*Styling the paragraphs*/
+.news p{
+    color: #404040;
+    font-weight: bold;
+}
+/*Styling the second child of the paragraph*/
+.news p:nth-child(2){
+    font-weight: normal;
+}
+
+hr{
+    margin: 10px 165px 10px 165px;
+}
+
+@media screen and (max-width: 768px) {
+    hr{
+        margin: 10px 20px 10px 30px;
+    }
+    .news-header{
+        margin-left: 30px;
+    }
+
+}
+
+@media screen and (max-width: 360px) {
+    .news{
+        margin: 0 20px 0 20px;
+    }
+    hr{
+        margin: 0 20px 0 20px;
+    }
+    .news-header{
+        margin-left: 20px;
+    }
+}
+