Add files via upload

Página Web creada para promocionar y dar información de venta de tarjetas personalizadas.
Gasca78 · Feb 11, 2024 · 9c795f8 · 9c795f8
commit 9c795f8
Show file tree

Hide file tree

Showing 19 changed files with 466 additions and 0 deletions.
diff --git a/contacto.html b/contacto.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+
+<html lang="es">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Contacto - Art Creation FO</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
+    </head>
+
+    <body>
+
+        <header>
+            <div class="cabecera">
+                <h1><img class="logo" src="imagenes/logo.png" alt="Logo de Art Creation FO"></h1>
+                <nav>
+                    <ul>
+                        <li><a href="index.html">Home</a></li>
+                        <li><a href="productos.html">Productos</a></li>
+                        <li><a href="contacto.html">Contacto</a></li> 
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <main>
+            <section class="contacto">
+
+                <h2 class="titulo">¿Cómo contactarme?</h2>
+
+                <p>Puedes ponerte en contacto conmigo ya sea vía WhatsApp o visitando mi página de Instagram y mandando un mensaje privado.</p>
+
+                <a href="https://wa.me/523315136508?text=¡Hola!, quisiera más información" target="_blank"><img class="whatsapp" src="imagenes/whatsapp.svg" alt="logo de whatsapp"></a>
+
+                <a href="https://www.instagram.com/artcreations.fo/" target="_blank"><img class="instagram" src="imagenes/instagram.svg" alt="logo de instagram"></a>
+
+            </section>
+
+            <section class="metodos_pago">
+
+                <h3 class="titulo">Métodos de pago</h3>
+
+                <p>Para su compra se tienen 3 alternativas de pago</p>
+                <ul>
+                    <li>
+                        <p><strong>Transferencia Bancaria</strong></p>
+                        <p>Cuenta: Banamex<br><br>Nombre:<br>Maria Fernanda Oliva Sahagún<br><br>No. de Tarjeta:<br>5204 1660 2791 9499<br><br>Cuenta CLABE:<br>002320701988110154</p>
+                    </li>
+                    <li class="pago">
+                        <p><strong>Pago con Tarjeta</strong></p>
+                        <img src="imagenes/tarjeta.svg" alt="icono pago con tarjeta">
+                    </li>
+                    <li class="pago">
+                        <p><strong>Pago en Efectivo</strong></p>
+                        <img src="imagenes/billetes.svg" alt="icono pago en efectivo">
+                    </li>
+                </ul>
+
+            </section>
+        </main>
+
+        <footer>
+            <img class="logo" src="imagenes/logo.png" alt="Logo de Art Creation FO">;
+            <p class="copyright"><strong>&copy Copyright Art Creation FO - 2024</strong></p>
+        </footer>
+
+    </body>
+</html>
diff --git a/imagenes/3d.jpeg b/imagenes/3d.jpeg
diff --git a/imagenes/acuarela.jpeg b/imagenes/acuarela.jpeg
diff --git a/imagenes/acuarela_corazon.jpeg b/imagenes/acuarela_corazon.jpeg
diff --git a/imagenes/billetes.svg b/imagenes/billetes.svg
diff --git a/imagenes/calendario.jpeg b/imagenes/calendario.jpeg
diff --git a/imagenes/instagram.svg b/imagenes/instagram.svg
diff --git a/imagenes/logo.png b/imagenes/logo.png
diff --git a/imagenes/san_valentin.jpeg b/imagenes/san_valentin.jpeg
diff --git a/imagenes/sencilla.jpeg b/imagenes/sencilla.jpeg
diff --git a/imagenes/spotify.jpeg b/imagenes/spotify.jpeg
diff --git a/imagenes/tarjeta.svg b/imagenes/tarjeta.svg
diff --git a/imagenes/tejida.jpeg b/imagenes/tejida.jpeg
diff --git a/imagenes/varios_corazones.jpeg b/imagenes/varios_corazones.jpeg
diff --git a/imagenes/whatsapp.svg b/imagenes/whatsapp.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html lang="es">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Art Creation FO</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
+    </head>
+
+    <body>
+
+        <header>
+            <div class="cabecera">
+                <h1><img class="logo" src="imagenes/logo.png" alt="Logo de Art Creation FO"></h1>
+                <nav>
+                    <ul>
+                        <li><a href="index.html">Home</a></li>
+                        <li><a href="productos.html">Productos</a></li>
+                        <li><a href="contacto.html">Contacto</a></li> 
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <main>
+            <section class="principal">
+
+                <h2 class="titulo-principal">¡Feliz Día de San Valentin!</h2>
+
+                <div class="intro">
+                <img src="imagenes/san_valentin.jpeg" alt="Imagen de San Valentin">
+
+                <p>En un día tan especial como lo es el <strong>Día del Amor y la Amistad</strong> es importante tener esos pequeños detalles que marcan una gran diferencia, por lo que te invito a que pases y conozcas las tarjetas que tengo para ofrecerte y le puedas brindar ese regalo personalizado a esa persona especial.</p>
+                </div>
+
+            </section>
+        </main>
+
+        <footer>
+            <img class="logo" src="imagenes/logo.png" alt="Logo de Art Creation FO">;
+            <p class="copyright"><strong>&copy Copyright Art Creation FO - 2024</strong></p>
+        </footer>
+
+    </body>
+</html>
diff --git a/productos.html b/productos.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+
+<html lang="es">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Productos - Art Creation FO</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
+    </head>
+
+    <body>
+
+        <header>
+            <div class="cabecera">
+                <h1><img class="logo" src="imagenes/logo.png" alt="Logo de Art Creation FO"></h1>
+                <nav>
+                    <ul>
+                        <li><a href="index.html">Home</a></li>
+                        <li><a href="productos.html">Productos</a></li>
+                        <li><a href="contacto.html">Contacto</a></li> 
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <main>
+            <ul class="productos">
+                <li>
+                    <img class="tarjetas" src="imagenes/spotify.jpeg">
+                    <p class="producto-modelo">Mini tarjeta tejida con canción personalizable<br>(10 cm x 15 cm)</p>
+                    <p class="producto-precio">$40.00</p>
+                </li>
+                <li id="sencilla">
+                    <img class="tarjetas" src="imagenes/sencilla.jpeg">
+                    <p class="producto-modelo">Tarjeta Decorada<br>(14 cm x 21.5 cm)</p>
+                    <p class="producto-precio">$50.00</p>
+                </li>
+                <li>
+                    <img class="tarjetas" src="imagenes/varios_corazones.jpeg">
+                    <p class="producto-modelo">Tarjeta Brillos<br>(14 cm x 21.5 cm)</p>
+                    <p class="producto-precio">$50.00</p>
+                </li>
+                <li>
+                    <img class="tarjetas" src="imagenes/calendario.jpeg">
+                    <p class="producto-modelo">Tarjeta con Foto Personalizada<br>(14 cm x 21.5 cm)</p>
+                    <p class="producto-precio">$60.00</p>
+                </li>
+                <li>
+                    <img class="tarjetas" src="imagenes/acuarela.jpeg">
+                    <p class="producto-modelo">Tarjeta Acuarela<br>(14 cm x 21.5 cm)</p>
+                    <p class="producto-precio">$60.00</p>
+                </li>
+                <li>
+                    <img class="tarjetas" src="imagenes/acuarela_corazon.jpeg">
+                    <p class="producto-modelo">Tarjeta Acuarela<br>(14 cm x 21.5 cm)</p>
+                    <p class="producto-precio">$60.00</p>
+                </li>
+                <li>
+                    <img class="tarjetas" src="imagenes/3d.jpeg">
+                    <p class="producto-modelo">Tarjeta Globo 3D<br>(14 cm x 21.5 cm)</p>
+                    <p class="producto-precio">$70.00</p>
+                </li>
+                <li>
+                    <img class="tarjetas" src="imagenes/tejida.jpeg">
+                    <p class="producto-modelo">Tarjeta Corazón Tejido<br>(14 cm x 21.5 cm)</p>
+                    <p class="producto-precio">$70.00</p>
+                </li>
+            </ul>
+        </main>
+
+        <footer>
+            <img class="logo" src="imagenes/logo.png" alt="Logo de Art Creation FO">;
+            <p class="copyright"><strong>&copy Copyright Art Creation FO - 2024</strong></p>
+        </footer>
+
+    </body>
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}