added blogs section via blogs branch

dohinaf · Oct 1, 2024 · 9fabc96 · 9fabc96
1 parent 14349a0
commit 9fabc96
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -157,6 +157,31 @@ <h3>Very Very Peachy</h3>
 
 <!-- Menu Section Ends Here -->
 
+<!--Blogs Section Starts Here-->
+
+<section class="blogs" id="blogs">
+    <h1 class="heading"> Blo<span>gs</h1>
+    <div class="content">
+        <h3> Never settle for just one scoop</h3><br><br>
+        <div class="row">
+            <img class="image" src="https://t3.ftcdn.net/jpg/05/64/02/34/360_F_564023464_RaZb95D8yFPt2DnxbsYLQaQQ5BSrUImO.jpg" alt="icecream img">
+            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta ligula ligula, eu pretium sapien tempor ut. Donec blandit ante sed magna luctus, quis laoreet sapien suscipit. Suspendisse lacinia lorem quis velit ullamcorper ultrices.
+             Maecenas eleifend feugiat enim ut pretium. Nullam eros quam, scelerisque nec mattis imperdiet, molestie ultricies sem. Aliquam vulputate tellus nec auctor dapibus.</p>
+        </div>
+        <p>Mauris arcu velit, dignissim in odio vel, scelerisque porttitor justo. Nunc nisi nulla, molestie nec sollicitudin a, tincidunt 
+            vitae velit. Curabitur lacus erat, hendrerit non orci non, rhoncus placerat purus. Praesent eget nulla enim. Integer porttitor 
+            massa lacinia, condimentum purus eget, porttitor nibh. Integer neque libero, maximus vitae massa nec, imperdiet tempus est. Donec velit nibh,
+            fermentum massa, id placerat sapien. In hac habitasse platea dictumst.</p>
+        <center><a href="#" class="btn">Read More</a></center>
+        <!--Need to add backend if need to add blogs and delete it. there require an admin pannel-->
+    </div>
+
+</section>
+
+<!--Blogs Section Ends Here-->
+
+
+
 <!-- Footer Section Starts Here -->
 
 <section class="footer" id="footer">

diff --git a/style.css b/style.css
@@ -310,6 +310,52 @@ button:hover {
 	line-height: 1.8;
 }
 
+/* Blogs Styles */
+
+.heading{
+	text-align: center;
+	color: #fff;
+	text-transform: uppercase;
+	padding-top: 4rem;
+	padding-bottom: 3.5rem;
+	font-size: 4rem;
+}
+
+.heading span{
+	color:var(--main-color);
+	text-transform:uppercase;
+}
+
+.blogs .row{
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap:10px;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.blogs .row .image img{
+	width:100%;
+	padding-left: 20px;
+}
+
+.blogs .content{
+	flex:1 1 45rem;
+	padding: 2rem;
+}
+
+.blogs .content h3{
+	font-size: 3rem;
+	color: #fff;
+}
+
+.blogs .content p{
+	font-size:  2rem;
+	color: #ffffff;
+	padding: 1rem 0;
+	line-height: 1.8;
+}
+
 
 /* Menu Styles */