Step 2: Updated image to figure

dhanusir · Aug 25, 2020 · b99d72d · b99d72d
1 parent 07fd876
commit b99d72d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/css/style.css b/css/style.css
@@ -26,6 +26,10 @@
 .width_60 {
   width: 60%;
 }
+figcaption {
+  font-size: 12px;
+  text-align: center;
+}
 
 /* Main CSS */
 html, body {

diff --git a/index.html b/index.html
@@ -126,7 +126,10 @@ <h1 class="text-center">Blogs</h1>
         <div class="blogs-content">
           <article class="column">
             <div class="card">
-              <img src="img/website.jpg" alt="Web Development">
+              <figure>
+                <img src="img/website.jpg" alt="Web Development">
+                <figcaption>Image: <a href="https://unsplash.com">Unsplash.com</a></figcaption>
+              </figure>
               <div class="blog-body">
                 <h3 class="blog-title">Getting start with Web Development</h3>
                 <div class="meta">
@@ -143,7 +146,10 @@ <h3 class="blog-title">Getting start with Web Development</h3>
           </article>
           <article class="column">
             <div class="card">
-              <img src="img/mentoring.jpg" alt="Mentoring">
+              <figure>
+                <img src="img/mentoring.jpg" alt="Mentoring">
+                <figcaption>Image: <a href="https://unsplash.com">Unsplash.com</a></figcaption>
+              </figure>
               <div class="blog-body">
                 <h3 class="blog-title">Why mentoring is essential to quickly shape your career</h3>
                 <div class="meta">
@@ -159,7 +165,10 @@ <h3 class="blog-title">Why mentoring is essential to quickly shape your career</
           </article>
           <article class="column">
             <div class="card">
-              <img src="img/project-planning.jpg" alt="Project">
+              <figure>
+                <img src="img/project-planning.jpg" alt="Project">
+                <figcaption>Image: <a href="https://unsplash.com">Unsplash.com</a></figcaption>
+              </figure>
               <div class="blog-body">
                 <h3 class="blog-title">Top 10 essentials tips for planning your projects</h3>
                 <div class="meta">