HTML5 y CSS3 pt. 4: Avanzando en CSS 01

Ajustes de página para usar estilo 'style.css'. Medidas proporcionales CSS con 'em'. propiedad 'float' y 'clear'.
2023-04-12 22:33:32 -04:00 · 2023-04-12 22:33:32 -04:00 · ee5b469838
commit ee5b469838
parent be87960502
16 changed files with 485 additions and 0 deletions
--- a/004_primeras_paginas/README.md
+++ b/004_primeras_paginas/README.md
@ -302,3 +302,5 @@ transform (scale, rotate).

 Final curso HTML5 y CSS parte 3

+### Parte 4 - Avanzando en CSS
+
--- a/004_primeras_paginas/html_css_parte4/banner/banner.jpg
+++ b/004_primeras_paginas/html_css_parte4/banner/banner.jpg
--- a/004_primeras_paginas/html_css_parte4/contacto.html
+++ b/004_primeras_paginas/html_css_parte4/contacto.html
@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Contacto - Barbería Alura</title>
+        <link rel="stylesheet" href="./reset.css"/>
+        <link rel="stylesheet" href="./style.css"/>
+    </head>
+    <body>
+        <header>
+            <div class="caja">
+                <h1><img src="./imagenes/logo.png" alt="logo Barbería Alura"></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>
+            <form>
+                <label for="nombre_apellido">Nombre y Apellido</label>
+                <input type="text" id="nombre_apellido" class="input-padron"
+                required/>
+
+                <label for⁼"email">Correo Eletrónico</label>
+                <input type="email" id="email" class="input-padron" required
+                placeholder="mail@dominio.com"/>
+
+                <label for⁼"telefono">Teléfono</label>
+                <input type="tel" id="telefono" class="input-padron" required
+                placeholder="(99) 9999 9999"/>
+
+                <label for="mensaje">Mensaje</label>
+                <textarea id="mensaje" cols="70" rows="10"class="input-padron"
+                required></textarea>
+                <fieldset>
+                    <legend>¿Como prefieres que te contactemos?</legend>
+
+                    <label for="radio-email"><input type="radio" name="contacto"
+                    value="email" id="radio-email"> Email</label>
+
+                    <label for="radio-telefono"><input type="radio" name="contacto"
+                    value="telefono" id="radio-telefono"> Teléfono</label>
+
+                    <label for="radio-whatsap"><input type="radio" name="contacto"
+                    value="whatsap" id="radio-whatsap" checked> Whatsapp</label>
+                </fieldset>
+                <fieldset>
+                    <legend>¿En que horario prefieres ser contactado?</legend>
+                    <select>
+                        <option>Mañana</option>
+                        <option>Tarde</option>
+                        <option>Noche</option>
+                    </select>
+                </fieldset>
+                <label class="checkbox"><input type="checkbox" checked>
+                    ¿Te interesa recibir novedades y ofertas?
+                </label>
+                <input type="submit" class="enviar" value="Enviar Formulario"/>
+            </form>
+
+            <table>
+                <thead>
+                    <tr>
+                        <th>Días</th>
+                        <th>Horario</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Lunes</td>
+                        <td>9h ~ 20h</td>
+                    </tr>
+                    <tr>
+                        <td>Miercoles</td>
+                        <td>9h ~ 20h</td>
+                    </tr>
+                    <tr>
+                        <td>Viernes</td>
+                        <td>9h ~ 20h</td>
+                    </tr>
+                </tbody>
+            </table>
+
+        </main>
+        <footer>
+            <img src="./imagenes/logo-blanco.png" alt="logo Barbería Alura">
+            <!-- Copyleft  unicode 🄯 &#127279; -->
+            <!-- Copyright unicode  &copy &#169; -->
+            <p class="copyright">&#127279; CopyLeft 2023 - DevFzn</p>
+        </footer>
+    </body>
+</html>
--- a/004_primeras_paginas/html_css_parte4/diferenciales/diferenciales.jpg
+++ b/004_primeras_paginas/html_css_parte4/diferenciales/diferenciales.jpg
--- a/004_primeras_paginas/html_css_parte4/imagenes/barba.jpg
+++ b/004_primeras_paginas/html_css_parte4/imagenes/barba.jpg
--- a/004_primeras_paginas/html_css_parte4/imagenes/bg.jpg
+++ b/004_primeras_paginas/html_css_parte4/imagenes/bg.jpg
--- a/004_primeras_paginas/html_css_parte4/imagenes/cabello+barba.jpg
+++ b/004_primeras_paginas/html_css_parte4/imagenes/cabello+barba.jpg
--- a/004_primeras_paginas/html_css_parte4/imagenes/cabello.jpg
+++ b/004_primeras_paginas/html_css_parte4/imagenes/cabello.jpg
--- a/004_primeras_paginas/html_css_parte4/imagenes/css_display_property.png
+++ b/004_primeras_paginas/html_css_parte4/imagenes/css_display_property.png
--- a/004_primeras_paginas/html_css_parte4/imagenes/logo-blanco.png
+++ b/004_primeras_paginas/html_css_parte4/imagenes/logo-blanco.png
--- a/004_primeras_paginas/html_css_parte4/imagenes/logo.png
+++ b/004_primeras_paginas/html_css_parte4/imagenes/logo.png
--- a/004_primeras_paginas/html_css_parte4/imagenes/utiles.jpg
+++ b/004_primeras_paginas/html_css_parte4/imagenes/utiles.jpg
--- a/004_primeras_paginas/html_css_parte4/index.html
+++ b/004_primeras_paginas/html_css_parte4/index.html
@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Barbería Alura</title>
+        <link rel="stylesheet" href="./reset.css">
+        <link rel="stylesheet" href="./style.css">
+    </head>
+    <body>
+        <div class="header">
+            <header><h1 id="header">Barbería Alura</h1></header>
+            <header>
+                <div class="caja">
+                    <h1><img src="./imagenes/logo.png"></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>
+        </div>
+        <img class="banner"
+             src="./banner/banner.jpg"
+             alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
+        <main>
+            <section class="principal">
+                <h2 class="titulo-principal">Sobre Barbería Alura</h1>
+
+                <img class="utiles" src="./imagenes/utiles.jpg" alt="Utensilios de barbero" />
+
+                <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae
+                para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020,
+                la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes
+                diariamente.</p>
+
+                <p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a
+                nuestros clientes"</strong></em></p>
+
+                <p>Ofrecemos profesionales experimentados que están constantemente observando los
+                cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes
+                las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad,
+                garantizando calidad y satisfacción de nuestros clientes.</p>
+            </section>
+            <section class="diferencias">
+                <h3 class="titulo-principal">Lo que nos diferencia</h2>
+                <ul>
+                    <li class="items">Atención personalizada para cada cliente</li>
+                    <li class="items">Espacio diferenciado</li>
+                    <li class="items">Localización</li>
+                    <li class="items">Profesionales calificados</li>
+                </ul>
+
+                <img class="imagen_diferencias"
+                     src="diferenciales/diferenciales.jpg"
+                     alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
+            </section>
+        </main>
+        <footer>
+            <img src="./imagenes/logo-blanco.png">
+            <!-- Copyleft  unicode 🄯 &#127279; -->
+            <!-- Copyright unicode  &copy &#169; -->
+            <p class="copyright">&#127279; CopyLeft 2023 - DevFzn</p>
+        </footer>
+    </body>
+</html>
--- a/004_primeras_paginas/html_css_parte4/productos.html
+++ b/004_primeras_paginas/html_css_parte4/productos.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Barbería Alura - Productos</title>
+        <link rel="stylesheet" href="./reset.css"/>
+        <link rel="stylesheet" href="./style.css"/>
+    </head>
+    <body>
+        <header>
+            <div class="caja">
+                <h1><img src="./imagenes/logo.png"></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>
+                    <h2>Cabello</h2>
+                    <img src="./imagenes/cabello.jpg"/>
+                    <p class="prod_descripcion">Corte tijera y/o maquina</p>
+                    <p class="prod_precio">$ 3.500.-</p>
+                </li>
+                <li>
+                    <h2>Barba</h2>
+                    <img src="./imagenes/barba.jpg"/>
+                    <p class="prod_descripcion">Corte y diseño de barba</p>
+                    <p class="prod_precio">$ 3.000.-</p>
+                </li>
+                <li>
+                    <h2>Cabello + Barba</h2>
+                    <img src="./imagenes/cabello+barba.jpg"/>
+                    <p class="prod_descripcion">Pack full, cabello y barba</p>
+                    <p class="prod_precio">6.000.-</p>
+                </li>
+            </ul>
+        </main>
+        <footer>
+            <img src="./imagenes/logo-blanco.png">
+            <!-- Copyleft  unicode 🄯 &#127279; -->
+            <!-- Copyright unicode  &copy &#169; -->
+            <p class="copyright">&#127279; CopyLeft 2023 - DevFzn</p>
+        </footer>
+    </body>
+</html>
--- a/004_primeras_paginas/html_css_parte4/reset.css
+++ b/004_primeras_paginas/html_css_parte4/reset.css
@ -0,0 +1,52 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+
+   *PROBAR* version fork actual:
+   https://github.com/elad2412/the-new-css-reset
+   https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css
+*/
+
+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;
+}
--- a/004_primeras_paginas/html_css_parte4/style.css
+++ b/004_primeras_paginas/html_css_parte4/style.css
@ -0,0 +1,213 @@
+header {
+    background: #046dfc;
+    padding: 20px 0;
+}
+
+.caja {
+    width: 80%;
+    position: relative;
+    margin: 0 auto;
+}
+
+nav {
+    position: absolute;
+    top: 118px;
+    right: 0px;
+}
+
+nav li {
+    display: inline;
+    margin: 0 0 0 15px;
+}
+
+nav a {
+    text-transform: uppercase;
+    color: #000000;
+    font-weight: bold;
+    font-size: 22px;
+    text-decoration: none;
+}
+
+nav a:hover {
+    color: #cd4f39;
+    text-decoration: underline;
+}
+
+.productos {
+    width: 80%;
+    margin: 0 auto;
+    padding: 30px;
+}
+
+.productos li {
+    display: inline-block;
+    text-align: center;
+    width: 30%;
+    vertical-align: top;
+    /*background: #cd4f39; <- se usó para visualizar modificaciones */
+    margin: 0 1.5%;
+    /*padding: 30px 20px;*/
+    padding: 5% 2%;
+    box-sizing: border-box;
+    /*border-width: 2px;   <- estas 3 propiedades se
+    border-style: solid;   <- pueden reemplazar con la
+    border-color: #cd4f39; <- propiedad de abajo */
+    border: 2px solid #cd4f39;
+    border-radius: 10px;
+}
+
+.productos li:hover {
+    border-color: #046dfc;
+}
+
+.productos li:active {
+    border-color: #088C19;
+}
+
+.productos h2 {
+    font-size: 26px;
+    font-weight: bold;
+}
+
+.productos li:hover h2 {
+    font-size: 32px;
+}
+
+.prod_descripcion {
+    font-size: 18px;
+}
+
+.prod_precio {
+    font-size: 20px;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+footer {
+    text-align: center;
+    background: url(./imagenes/bg.jpg);
+    padding: 40px;
+}
+
+.copyright {
+    color: #6f6f6f;
+    font-size: 14px;
+}
+
+main {
+    width: 80%;
+    margin: 0 auto;
+}
+
+form {
+    margin: 50px 0%;
+}
+
+form label, form legend {
+    display: block;
+    font-size: 20px;
+    margin: 0 0 10px;
+}
+
+.input-padron {
+    display: block;
+    margin: 0 0 20px;
+    padding: 10px 25px;
+    width: 50%;
+}
+
+.checkbox {
+    margin: 20px 0;
+}
+
+.enviar {
+    width: 40%;
+    padding: 15px 0;
+    font-size: 18px;
+    font-weight: bold;
+    color: #f1f1f1;
+    background: #046dfc;
+    border: none;
+    border-radius: 5px;
+    /*transition: 0.3s background;*/
+    transition: 0.3s all;
+    cursor: pointer;
+}
+
+.enviar:hover{
+    background-color: #cd4f39;
+    transform: scale(1.2) rotate(4deg);
+}
+
+table {
+    margin: 40px 40px;
+}
+
+thead {
+    background: #046dfc;
+    color: #f1f1f1;
+    font-weight: bold;
+}
+
+td, th {
+    border: 1px solid #046dfc;
+    padding: 8px 15px;
+}
+
+/* Usados para observar Jerarquía en CSS
+form p {
+    color: blue;
+}
+
+p {
+    color: red;
+}
+
+.test {
+    color: yellow;
+}
+
+p.test {
+    color: magenta;
+}
+
+#test {
+    color: cyan;
+} */
+
+/* la configuración de stilo inline sobrescribe todo */
+
+/* CSS para index.html */
+
+.banner {
+    width: 100%;
+}
+
+.titulo-principal {
+    text-align: center;
+    font-size: 2em;
+    margin: 0 0 1em;
+    clear:left;
+}
+
+.principal p{
+    margin: 0 0 1em;
+}
+
+.principal strong {
+    font-weight: bold;
+}
+
+.principal em {
+    font-style: italic;
+}
+
+.utiles {
+    width: 120px;
+    float: left;
+    margin: 0 20px 20px 0;
+}
+
+.imagen_diferencias {
+    width: 60%;
+}