💅 style: Add figcaption

Were added figcaption and stylized them.
Raphael-GC · Oct 8, 2024 · 77cb547 · 77cb547
1 parent 21243eb
commit 77cb547
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/week02/holygrail.html b/week02/holygrail.html
@@ -37,18 +37,24 @@ <h2>Belém Brazil Temple</h2>
     </main>
 
     <aside>
-        <img src="https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/rio-de-janeiro-brazil/800x800/11-44a124e6fe618047c177f883622a35d3a95dec86.jpeg" 
-            alt="Rio de Janeiro Temple Celestial Room" 
-            width="200"
-        >
+        <figure>
+            <img src="https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/rio-de-janeiro-brazil/800x800/11-44a124e6fe618047c177f883622a35d3a95dec86.jpeg" 
+                alt="Rio de Janeiro Temple Celestial Room" 
+                width="200"
+            />
+            <figcaption>Rio de Janeiro Temple Celestial Room</figcaption>
+        </figure>
+
+        <figure>
+            <img src="https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/belem-brazil/800x500/belem_brazil_temple_sealing.jpg" 
+                alt="Belem Brazil Temple Sealing Room" 
+                width="200"
+            />
+            <figcaption>Belem Brazil Temple Sealing Room</figcaption>
+        </figure>
+
     </aside>
-    <aside>
-        <img src="https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/belem-brazil/800x500/belem_brazil_temple_sealing.jpg" 
-            alt="Belem Brazil Temple Sealing Room" 
-            width="200"
-        >
-    </aside>
-
+
     <footer>
         <p>©2024 Raphael Carneiro 🌳 Rio de Janeiro, Brazil</p>
     </footer>

diff --git a/week02/styles/holygrail.css b/week02/styles/holygrail.css
@@ -60,7 +60,7 @@ main p {
 aside {
     display: flex;
     flex-direction: row;
-    float: right;
+    justify-content: center;
 }
 
 aside img {
@@ -72,6 +72,10 @@ aside img {
     margin: 15px;
 }
 
+figcaption {
+    text-align: center;
+}
+
 footer {
     text-align: center;
 }