Enhance product display with horizontal image list and update text fo…

…r clarity
ORGHackathons · Nov 15, 2024 · d6174fe · d6174fe
1 parent a7f897a
commit d6174fe
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/1.html b/1.html
@@ -11,15 +11,16 @@
 <body>
     <h1>Boas-vindas a sua área de comércio!</h1>
     <h2>Seus produtos já cadastrados</h2>
-    <ul>
-        <li>Produto 1</li>
-        <li>Produto 2</li>
-        <li>Produto 3</li>
+    <ul class="horizontal-list">
+        <li><img src="hackathon.png" alt="Produto 1"><br>Produto 1</li>
+        <li><img src="hackathon.png" alt="Produto 2"><br>Produto 2</li>
+        <li><img src="hackathon.png" alt="Produto 3"><br>Produto 3</li>
     </ul>
-    <h3>Cadastre o seu produto <a href>aqui</a></h3>
-    <h2>O seu ponto estratégico pode ser visualizado no mapa:</h2>
+    <h3>Cadastre um ou mais produtos <a href>clicando aqui</a></h3>
+    <h4>O seu ponto estratégico de apoio pode ser visualizado no mapa:</h4>
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3981.073013073073!2d-60.02507368570869!3d-3.101000997747073!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92f9e4b1b1b1b1%3A0x1b1b1b1b1b1b1b1!2sManaus%20Plaza%20Shopping!5e0!3m2!1spt-BR!2sbr!4v1607520000000!5m2!1spt-BR!2sbr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
 
 
+
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -33,4 +33,29 @@ iframe {
     display: block;
     margin-left: auto;
     margin-right: auto;
+}
+/* lista com imagens na horizontal */
+.horizontal-list {
+    list-style-type: none; /* Remove os marcadores da lista */
+    padding: 0;
+    margin: 0;
+    display: flex; /* Define a lista como flexbox */
+}
+
+.horizontal-list li {
+    margin-right: 20px; /* Espaçamento entre os itens */
+    text-align: center; /* Centraliza o texto e a imagem */
+}
+
+.horizontal-list img {
+    width: 200px; /* Define a largura das imagens */
+    height: auto; /* Mantém a proporção das imagens */
+}
+
+/* cor dos links */
+a {
+    color: bluelight;
+    /* link já clicado */
+    text-decoration: none;
+    /* link não clicado */
 }