Nome de projeto adicionado a cada imagem #7

IDEjr · Aug 8, 2023 · a2b521e · a2b521e
1 parent 1baff1e
commit a2b521e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/src/components/Issue7.js b/src/components/Issue7.js
@@ -20,15 +20,40 @@ function Issue7 ()
             </h1>
             <div className={styles.containerImages}>
                 <div className={styles.imageRow}>
-                    <img className={styles.image}  src="/img/RetanguloIlustrativo.png" width={440} height={530} alt="imagem temporaria de testes"/>
-                    <img className={styles.image} src="/img/RetanguloIlustrativo.png" width={440} height={775} alt="imagem temporaria de testes"/>
+                    <figure className={styles.figure}>
+                        <label className={styles.text}>
+                            Nome do Projeto
+                        </label>
+                        <img className={styles.image}  src="/img/RetanguloIlustrativo.png" width={440} height={530} alt="imagem temporaria de testes"/>
+                    </figure>
+                    <figure className={styles.figure}>
+                        <label className={styles.text}>
+                            Nome do Projeto
+                        </label>
+                        <img className={styles.image} src="/img/RetanguloIlustrativo.png" width={440} height={775} alt="imagem temporaria de testes"/>
+                    </figure>
                 </div>
                 <div className={styles.imageBlock}>
                     <div className={styles.smallImageBlock}>
-                        <img className={styles.image} src="/img/RetanguloIlustrativo.png" width={440} height={826} alt="imagem temporaria de testes"/>
-                        <img className={styles.image} src="/img/RetanguloIlustrativo.png" width={377} height={826} alt="imagem temporaria de testes"/>
+                        <figure className={styles.figure}>
+                            <label className={styles.text}>
+                                Nome do Projeto
+                            </label>
+                            <img className={styles.image} src="/img/RetanguloIlustrativo.png" width={440} height={826} alt="imagem temporaria de testes"/>
+                        </figure>
+                        <figure className={styles.figure}>
+                            <label className={styles.text}>
+                                Nome do Projeto
+                            </label>
+                            <img className={styles.image} src="/img/RetanguloIlustrativo.png" width={377} height={826} alt="imagem temporaria de testes"/>
+                        </figure>
                     </div>
-                    <img className={styles.image} src="/img/RetanguloIlustrativo.png" width={885} height={473} alt="imagem temporaria de testes"/>
+                    <figure className={styles.figure}>
+                         <label className={styles.text}>
+                            Nome do Projeto
+                        </label>
+                        <img className={styles.image} src="/img/RetanguloIlustrativo.png" width={885} height={473} alt="imagem temporaria de testes"/>
+                    </figure>
                 </div>
             </div>
         </div>

diff --git a/src/styles/Issue7.module.css b/src/styles/Issue7.module.css
@@ -54,3 +54,18 @@
 .image{
     padding: 8px;
 }
+
+.figure{
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: space-evenly;
+    align-items: flex-end;
+}
+ .text{
+    position: relative;
+    display: flex;
+    bottom: 66px;
+    right: 85px;
+    font-size: 30px;
+ }   
+