Ejercicio Web

JackDev21 · Dec 8, 2023 · bdf90d0 · bdf90d0
1 parent 252e85b
commit bdf90d0
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 0 deletions.
diff --git a/CSS/Proyecto_Dasmotos/.gitignore b/CSS/Proyecto_Dasmotos/.gitignore
@@ -0,0 +1 @@
+/img
diff --git a/CSS/Proyecto_Dasmotos/index.html b/CSS/Proyecto_Dasmotos/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dasmoto's Arts & Crafts</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <h1>Dasmoto's Arts & Crafts</h1>
+    <div class="menu">
+        <h2 id="brush">Brushes</h2>
+        <img src="./img/hacksaw.jpeg" alt="Brushes">
+        <h3>Hacksaw Brushes</h3>
+        <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in
+            large amounts. Available in different sizes.
+            <span>Starting at $3.00 / brush.</span>
+        </p>
+    </div>
+    <div class="menu">
+        <h2 id="frame">Frames</h2>
+        <img src="./img/frames.jpeg" alt="Frames">
+        <h3>Art Frames (assorted)</h3>
+        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be
+            sanded and painted according to your needs.
+            <span>Starting at $2.00 / frame.</span>
+    </div>
+    <div class="menu">
+        <h2 id="paint">Paint</h2>
+        <img src="./img/finnish.jpeg" alt="Paint">
+        <h3>Clean Finnish Paint</h3>
+        <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.).
+            Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span>Starting
+                at $5.00 / tube.</span>
+        </p>
+    </div>
+    <footer>
+        <p>Copyright 2023</p>
+    </footer>
+
+</body>
+
+</html>
diff --git a/CSS/Proyecto_Dasmotos/style.css b/CSS/Proyecto_Dasmotos/style.css
@@ -0,0 +1,106 @@
+/* Restablece el margen, el padding y el box-sizing predeterminados para todos los elementos */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+/* Estilo para el elemento h1 */
+h1 {
+    /* Establece una imagen de fondo para el elemento h1 */
+    background: url(./img/pattern.jpeg);
+
+    /* Centra el texto en el elemento h1 */
+    text-align: center;
+
+    /* Establece el tamaño de fuente para el elemento h1 */
+    font-size: 100px;
+
+    /* Establece el color de texto para el elemento h1 */
+    color: Khaki;
+}
+
+/* Aplica la familia de fuentes Helvetica a los elementos h1, h2, h3 y p */
+h1,
+h2,
+h3,
+p {
+    font-family: Helvetica;
+}
+
+/* Establece el margen para el elemento body */
+body {
+    margin: 8px;
+    display: block;
+}
+
+/* Estilo adicional para el elemento h1 */
+h1 {
+    /* Establece la propiedad display en block para el elemento h1 */
+    display: block;
+
+    /* Establece los márgenes superior e inferior para el elemento h1 */
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+
+    /* Establece los márgenes izquierdo y derecho para el elemento h1 */
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+
+    /* Establece el peso de la fuente para el elemento h1 */
+    font-weight: bold;
+}
+
+h2 {
+    display: block;
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+#brush {
+    background-color: mediumspringgreen;
+}
+
+.menu h2 {
+    font-size: 32px;
+    color: white;
+}
+
+h3 {
+    display: block;
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+#frame {
+    background-color: lightcoral;
+}
+
+span {
+    color: blue;
+    font-weight: bold;
+}
+
+#paint {
+    background-color: skyblue;
+}
+
+footer {
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    font-size: 20px;
+    margin: 1em;
+    background-color: black;
+    color: white;
+
+}