Merge pull request vishanurag#732 from Son7c/main

Blog cards design changed and hovering effects added

Blog_page.html

@@ -160,6 +160,54 @@ <h2>Recent Designs</h2>
           <h2>Latest Blog</h2>
           <p>recent blogs about art & design</p>
         </div>
+
+        <div class = "">
+          <div class="contain">
+              <div class="card-container">
+                <div class="card">
+                  <span>20 January, 2020</span>
+                  <h2 style="font-size: 23px;">Organizing the environment for productive work</h2>
+                  <p>Organizing the work place is very much important as it gives you the motivation to work for longer duration.</p>
+                  <a href = "#" style="position: relative; top: 40px;">Read More</a>
+                </div>
+
+                <div class="card">
+                  <span>05 October, 2024</span>
+                  <h2>Enhancing Creativity by Drawing</h2>
+                  <p>We can able to enhance our creativity only when we can able to visualize things properly and draw it.</p>
+                  <a href = "#">Read More</a>
+                </div>
+
+                <div class="card">
+                  <span>05 October, 2024</span>
+                  <h2>Organizing other household stuffs</h2>
+                  <p>Beside work we also have to organize our other household item to make house neat and clean.</p>
+                  <a href = "#" style="top: 95px;">Read More</a>
+                </div>
+              </div>
+              <div class="card-container">
+                <div class="card">
+                  <span>05 October, 2024</span>
+                  <h2>Spreading greenery in house</h2>
+                  <p>Green plants spread greenery and make us feel fresh during through the day.</p>
+                  <a href = "#">Read More</a> 
+                </div>
+
+                <div class="card">
+                  <span>05 October, 2024</span>
+                  <h2>Organizing the bed</h2>
+                  <p>This is a very good habit of organizing the bed after waking up.</p>
+                  <a href = "#" style="top: 100px;">Read More</a>
+                </div>
+
+                <div class="card">
+                  <span>05 October, 2024</span>
+                  <h2>Exploring creative fields</h2>
+                  <p>Art is something which helps us to be creative, so it's necessary to explore more and learn.</p>
+                  <a href = "#" style="top: 100px;">Read More</a>
+                </div>
+              </div>
+          </div> 
         <div class = "blog-content">
 
           <div class = "blog-item">

src/Styles/Style_Blog_page.css

@@ -299,6 +299,70 @@ footer{
     font-family: var(--Playfair);
     letter-spacing: 2px;
 }
+.card-container{
+    display: flex;
+    margin-bottom: 50px;
+    justify-content: space-around;
+    width: 100%;
+}
+
+.card{
+    height: 350px;
+    width: 450px;
+    background: linear-gradient(135deg,#112d60,#b6c0c5);
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin: 0px 30px 010px;
+    padding: 30px;
+    transition: all 0.4s ease;
+}
+.card span{
+    color: white;
+    position: relative;
+    top: 15px;
+    left: 10px;
+    font-size: 1.4rem;
+}
+.card h2{
+    color: white;
+    padding: 30px 0 10px 10px;
+}
+.card p{
+    color: white;
+    position: relative;
+    left: 10px;
+    top: 20px;
+    font-size: 20px;
+}
+.card a{
+    position:relative;
+    left: 10px;
+    top :70px;
+    height: 40px;
+    width: 120px;
+    background-color: rgba(0,0,0,0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    color: #fff;
+    line-height: 20px;
+    transition: all 0.4s ease;
+}
+
+.card:hover{
+    background: linear-gradient(105deg,#112d60,#b6c0c5);
+    transform: scale(0.95);
+}
+
+.card a:hover{
+    width: 140px;
+    height: 50px;
+    font-size: 15px;
+    transform: scale(1.1);
+}
 
 /* Media Queries */
 @media screen and (min-width: 540px){