cards

index.html

@@ -57,8 +57,13 @@ <h1>Dr. Maneesha Atre-Mhamane</h1>
           <a href="https://webdesign.tutsplus.com/tutorials/how-to-code-a-scrolling-alien-lander-website--cms-26826" class="card">
             <div class="thumb" style="background-image: url(/images/children.png);"></div>
             <article>
-              <h1>How to Code a Scrolling “Alien Lander” Website</h1>
-              <h4>We’ll be putting things together so that as you scroll down from the top of the page you’ll see an “Alien Lander” making its way to touch down.</h4>
+              <h1>PEDIATRICS</h1>
+                <ul>
+                  <li>Homeopathy is a common form of treatment in pediatrics</li>
+                  <li>Almost no adverse effects</li>
+                  <li>Helps boost immunity</li>
+                  <li>useful in all medical problems in children</li>
+                </ul>
             </article>
           </a>
         </div>
@@ -68,7 +73,13 @@ <h4>We’ll be putting things together so that as you scroll down from the top o
           <a href="https://design.tutsplus.com/tutorials/stranger-things-inspired-text-effect--cms-27139" class="card">
             <div class="thumb" style="background-image: url(/images/joints.png);"></div>
             <article>
-              <h1>How to Create a “Stranger Things” Text Effect in Adobe Photoshop</h1>
+              <h1>MUSCULOSKELETAL</h1>
+              <ul>
+                <li>Acute and chronic diseases</li>
+                <li>Useful in inflamation, swelling, traumatic conditions</li>
+                <li>Helps in bone, ligament, cartilage problems</li>
+                <li>Sports injuries</li>
+              </ul>
             </article>
           </a>
         </div>
@@ -77,7 +88,12 @@ <h1>How to Create a “Stranger Things” Text Effect in Adobe Photoshop</h1>
           <a href="https://photography.tutsplus.com/articles/5-inspirational-business-portraits-and-how-to-make-your-own--cms-27338" class="card">
             <div class="thumb" style="background-image: url(/images/skin.png);"></div>
             <article>
-              <h1>5 Inspirational Business Portraits and How to Make Your Own</h1>
+              <h1>SKIN AND HAIR</h1>
+              <ul>
+                <li>Enhances the quality of skin</li>
+                <li>All kinds of dermatological conditions</li>
+                <li>Inflamatory, immunological, fungal, allergic skin conditions</li>
+              </ul>
             </article>
           </a>
         </div>
@@ -86,7 +102,12 @@ <h1>5 Inspirational Business Portraits and How to Make Your Own</h1>
           <a href="https://webdesign.tutsplus.com/articles/notes-from-behind-the-firewall-the-state-of-web-design-in-china--cms-22281" class="card">
             <div class="thumb" style="background-image: url(/images/oldage.png);"></div>
             <article>
-              <h1>Notes From Behind the Firewall: The State of Web Design in China</h1>
+              <h1>OLD AGE CARE</h1>
+              <ul>
+                <li>Homeopathy fullfills all parameters required for being an ideal system of medicine for geriatric care</li>
+                <li>Enhances the health status</li>
+                <li>Helps in psychological conditons of old peoples</li>
+              </ul>
             </article>
           </a>
         </div>

styles.css

@@ -450,6 +450,7 @@ html {
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     grid-gap: 20px;
+    padding-bottom: 30px;;
 
     @media (min-width: 30em) {
       grid-template-columns: 1fr 1fr;
@@ -461,22 +462,24 @@ html {
   }
 
   .card {
-    background: white;
+    background: #b7e4c7;
     text-decoration: none;
     color: #444;
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     display: flex;
     flex-direction: column;
     min-height: 100%;
+    border-radius: 20px;
+
 
     // sets up hover state
     position: relative;
     top: 0;
-    transition: all .1s ease-in;
+    transition: all .1s ease-in;s
 
     &:hover {
       top: -2px;
-      box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+      box-shadow: 0 4px 5px rgba(0,0,0,0.8);
     }
 
     article {
@@ -486,14 +489,17 @@ html {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+      text-align: left;
+      justify-content: left;
     }
 
     h1 {
-      font-size: 20px;
+      font-size: 25px;
       margin: 0;
       color: #333;
+      font-weight: bolder;
     }
-
+    sss
     span {
       font-size: 12px;
       font-weight: bold;
@@ -507,6 +513,23 @@ html {
       padding-bottom: 60%;
       background-size: cover;
       background-position: center center;
+      border-radius: 25px;
+    }
+
+    .thumb:hover
+    {
+      transform: scale(1.02);
+    }
+
+    ul
+    {
+      font-size: 20px;
+      list-style: circle;
+    }
+
+    li
+    {
+      list-style: square;
     }
   }