Merge pull request #375 from monhh/main

Tarea Semana 2, HTML Semántico
undefined-academy · Nov 5, 2023 · 75f902f · 75f902f
2 parents 31b1973 + 8150aca
commit 75f902f
Show file tree

Hide file tree

Showing 4 changed files with 292 additions and 0 deletions.
diff --git a/student-cvs/monh-6851/formulario_contacto.css b/student-cvs/monh-6851/formulario_contacto.css
@@ -0,0 +1,100 @@
+/* */
+
+/* apply a natural box layout model to all elements, but allowing components to change */
+html {
+    box-sizing: border-box;
+  }
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+
+  body {
+	color: #333;
+	background-color: #fafafa;
+}
+
+.page{
+    margin: 0 auto;
+    max-width: 50em;
+    font-family: Arial, Helvetica, sans-serif;
+    /* background-color: tomato; */
+}
+
+.form-group{
+    /* border: 1px solid tomato; */ /* para Debugear   */
+    margin: 20px 0;
+    /* margin: 1em; */
+}
+
+label, input {
+	vertical-align: middle; /* solo funciona para los elementos inline que estén ordenados vertical/ */
+}
+
+
+/* label, input[type="text"], input[type=email]{
+    width: 100%;
+} */
+label, input:not[type="radio"], input[type=checbox]{
+    width: 100%;
+    /* display: block; */
+}
+
+label, input {
+	vertical-align: middle; /* solo funciona para los elementos inline que estén ordenados vertical/ */
+}
+
+textarea{
+    display: block;
+    width: 100%;
+    resize: vertical;
+}
+
+label, legend {
+	font-weight: bold;
+	text-transform: uppercase;
+	font-size: 14px;
+	color: #444;
+}
+
+input[type="text"], input[type="email"], textarea {
+	background: white;
+	border: 1px solid lightgray;
+	border-radius: 4px;
+	padding: 8px 10px;
+	color: #333;
+}
+
+.help {
+	font-size: 12px;
+	margin-top: 10px;
+	color: gray;
+}
+
+button {
+	padding: 16px 60px;
+	text-transform: uppercase;
+	font-weight: bold;
+	border: 1px solid #713f12;
+	background: #eab308;
+	color: #333;
+	text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5);
+	border-radius: 8px;
+	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+	cursor: pointer; /* transforma el ratón (affordance) */
+}
+
+button:hover {
+	background: #facc15;
+}
+button:active {
+	background: #ca8a04;
+	box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
+} 
+/* nuevas propiedades css */
+form {
+	accent-color: #eab308;
+}
+input:focus-visible, textarea:focus-visible {
+	border: 1px solid #eab308;
+	outline: 3px solid #facc15;
+}
diff --git a/student-cvs/monh-6851/formulario_contacto.html b/student-cvs/monh-6851/formulario_contacto.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Formularios html</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <main class="page">
+        <h1>Contacto</h1>
+        <form action="/server" method="get">
+            <div class="form-group">
+                <label for="name">Nombre</label>
+                <input id="name" name="name" type="text" placeholder="Ingrese su nombre" required>
+            </div>
+                <div class="form-group">
+                <label for="email">Email</label>
+                <input id="email" name="email" type="email" placeholder="Ingrese email" required>
+            </div>
+            <div class="form-group">
+                <fieldset>
+                    <legend>Presupuesto</legend>
+                    <input id="10000" name="budget" type="radio" value="10000" required>
+                    <label for="10000">$10000</label>
+
+                    <input id="5000" name="budget" type="radio" value="5000" required>
+                    <label for="10000">$5000</label>
+
+                    <input id="1000" name="budget" type="radio" value="1000" required>
+                    <label for="1000">$1000</label>
+                </fieldset>
+                <div class="help">Este presupuesto es la base no el total.</div>
+            </div>
+            <div class="form-group">
+                <label for="type">Tipo de proyecto</label>
+                <select id="type" name="type" required>
+                    <option disabled selected value="">Seleccione uno</option>
+                    <option value="website">Website</option>
+                    <option value="webapp">Webapp</option>
+                    <option value="mobile">Mobile app</option>
+                    <option value="design">Diseño</option>
+                </select>
+            </div> <!-- .form-group + enter -->
+            <div class="form-group">
+                <label for="description">Descripción</label>
+                <textarea id="description" name="description" required rows="5"></textarea>
+                <div class="help">
+                    Escribe una descripción del proyecto
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="terms">
+                    <input id="terms" name="terms" type="checkbox" required>
+                    <span>Acepto los términos y condiciones</span>
+                </label>
+            </div>
+            <button>Enviar</button>
+        </form>
+    </main>
+</body>
+</html>
diff --git a/student-cvs/monh-6851/index.html b/student-cvs/monh-6851/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Semana 2, Clase 3: HTML semántico </title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+    <main>
+
+        <article>
+            <header>
+                <h1> Hello I'm Mon Hh✨ </h1> 
+                <p id="p_subtitle">living in the Atlantic Ocean of Northwest Spain</p>
+            </header>
+
+            <section>
+                <h2>I work as:</h2>
+                <ul>
+                    <li class="li_black"><strong>Full Stack Javascript Developer</strong></li>
+                    <li class="li_black"><strong>Electronic Developer</strong></li>
+                </ul>
+                <h3>I'm also a Sound Engineer and Video Editor</h3>
+                <h3>I make Generative Audio and Video</h3>
+                <h3>Design digital instruments with these tools:</h3>
+                <ul>
+                    <li class="li_font_size">max/msp</li>
+                    <li class="li_font_size">puredata</li>
+                    <li class="li_font_size">processing</li>
+                    <li class="li_font_size">others ....</li>
+                </ul>              
+            </section>
+          </article>
+    </main>
+</body>
+</html>
diff --git a/student-cvs/monh-6851/main.css b/student-cvs/monh-6851/main.css
@@ -0,0 +1,93 @@
+/* first rule ---
+Centering */
+
+/* 01 Centering */
+header,
+main {
+  margin: 0 auto;
+  max-width: 50em;
+}
+
+/* 02 Font family */
+body {
+  font-family: "Helvetica", "Arial", sans-serif;
+}
+
+/* 03 Spacing */
+body {
+	line-height: 1.5;
+	padding: 4em 1em;
+  } 
+  /* h2 {
+	margin-top: 1em;
+	padding-top: 1em;
+  } */
+  h1, h2 {
+	margin-bottom: 0em;
+	border-bottom: 0em;
+	padding-bottom: 0em;
+	}
+	h2 {
+		font-size: 1.17em;
+	}
+
+  h3 {
+	/* margin-bottom: 0em;
+	border-bottom: 0em;
+	padding-bottom: 0em; */
+	margin: 0.25em 0em;
+	font-size: 1.0em;
+  }
+
+
+/* 04 Color and contrast */
+body {
+	color: #555;
+}
+h3 {
+	color: #333;
+} 
+h3 {
+	color: #444;
+} 
+strong {
+	color: #333;
+} 
+
+
+/* 05 Balance */
+ul {
+  /* background: #eee; */
+  /* padding: 1px 1px; */
+  vertical-align: text-top;
+  margin-top: 0em;
+  padding-top: 0em;
+}
+
+/* 06 Primary color */
+h1 {
+	color: #000000;
+}
+/* 07 Secondary colors */
+body {
+background: white;
+/* color: #566b78; */
+}
+
+/* Classes */
+/* .li_black{
+	color:#1f1f1f
+} */
+
+.li_font_size{
+	font-size: 0.9em;
+}
+
+/* #id Selectors */
+#p_subtitle{
+	/* vertical-align: text-top; */
+	margin-top: 0em;
+	padding-top: 0em;
+	border-top: 0em;
+	/* color: red; */
+}