HTML5 y CSS3 pt. 3: Formularios y Tablas 01

Nueva página 'contacto', renombre de estilos css.
2023-04-11 14:58:40 -04:00 · 2023-04-11 14:58:40 -04:00 · d40db98196
commit d40db98196
parent 36c44a1275
16 changed files with 405 additions and 4 deletions
--- a/004_primeras_paginas/README.md
+++ b/004_primeras_paginas/README.md
@ -4,7 +4,7 @@

 ### 04 Crea tus primeras paginas HTML5 y CSS

-#### Parte 1 Mi primera página web
+#### Parte 1 - Primera página web

 Diferencias entre [html y css](https://www.aluracursos.com/blog/html-css-javascript-cuales-son-las-diferencias).

@ -168,9 +168,10 @@ Página [productos](./html_css_parte2/productos.html) y

 En la página [productos](./html_css_parte2/productos.html) se utiliza la
 propiedad `display` con el valor `inline-block` para poder ajustar su contenido
-en [productos.css](./html_css_parte2/productos.css). Se utiliza una imagen como
-fondo con la propiedad css background `background: url(./imagenes/bg.jpg)` para
-la etiqueta `<footer>`.
+en [productos.css](./html_css_parte2/productos.css).
+
+Se utiliza una imagen como fondo con la propiedad css background
+`background: url(./imagenes/bg.jpg)` para la etiqueta `<footer>`.

 [Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
 elemento con css.
@ -180,3 +181,6 @@ Caracteres especiales, unicode

 Final curso HTML5 y CSS parte 2

+#### Parte 3 - Formularios y Tablas
+
+
--- a/004_primeras_paginas/html_css_parte3/banner/banner.jpg
+++ b/004_primeras_paginas/html_css_parte3/banner/banner.jpg
--- a/004_primeras_paginas/html_css_parte3/contacto.html
+++ b/004_primeras_paginas/html_css_parte3/contacto.html
@ -0,0 +1,33 @@
+<!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"></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>
+            test
+        </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_parte3/diferenciales/diferenciales.jpg
+++ b/004_primeras_paginas/html_css_parte3/diferenciales/diferenciales.jpg
--- a/004_primeras_paginas/html_css_parte3/imagenes/barba.jpg
+++ b/004_primeras_paginas/html_css_parte3/imagenes/barba.jpg
--- a/004_primeras_paginas/html_css_parte3/imagenes/bg.jpg
+++ b/004_primeras_paginas/html_css_parte3/imagenes/bg.jpg
--- a/004_primeras_paginas/html_css_parte3/imagenes/cabello+barba.jpg
+++ b/004_primeras_paginas/html_css_parte3/imagenes/cabello+barba.jpg
--- a/004_primeras_paginas/html_css_parte3/imagenes/cabello.jpg
+++ b/004_primeras_paginas/html_css_parte3/imagenes/cabello.jpg
--- a/004_primeras_paginas/html_css_parte3/imagenes/css_display_property.png
+++ b/004_primeras_paginas/html_css_parte3/imagenes/css_display_property.png
--- a/004_primeras_paginas/html_css_parte3/imagenes/logo-blanco.png
+++ b/004_primeras_paginas/html_css_parte3/imagenes/logo-blanco.png
--- a/004_primeras_paginas/html_css_parte3/imagenes/logo.png
+++ b/004_primeras_paginas/html_css_parte3/imagenes/logo.png
--- a/004_primeras_paginas/html_css_parte3/index.html
+++ b/004_primeras_paginas/html_css_parte3/index.html
@ -0,0 +1,48 @@
+<!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_home.css">
+    </head>
+    <body>
+        <div class="header">
+            <header><h1 id="header">Barbería Alura</h1></header>
+        </div>
+        <img id="banner"
+             src="./banner/banner.jpg"
+             alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
+
+        <div class="principal">
+            <h1>Sobre Barbería Alura</h1>
+
+            <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>
+        </div>
+        <div class="diferencias">
+            <h2>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"/>
+        </div>
+    </body>
+</html>
--- a/004_primeras_paginas/html_css_parte3/productos.html
+++ b/004_primeras_paginas/html_css_parte3/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_parte3/reset.css
+++ b/004_primeras_paginas/html_css_parte3/reset.css
@ -0,0 +1,99 @@
+/***
+    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+    all: unset;
+    display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+    cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+    list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+    border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+    -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+    white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+    -webkit-appearance: revert;
+    appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+    all: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+    color: unset;
+}
+
+/* remove default dot (•) sign */
+::marker {
+    content: initial;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+    display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    overflow-wrap: break-word;
+    -webkit-line-break: after-white-space;
+    -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+    -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+    all: revert;
+}
--- a/004_primeras_paginas/html_css_parte3/style.css
+++ b/004_primeras_paginas/html_css_parte3/style.css
@ -0,0 +1,94 @@
+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;
+    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;
+}
--- a/004_primeras_paginas/html_css_parte3/style_home.css
+++ b/004_primeras_paginas/html_css_parte3/style_home.css
@ -0,0 +1,71 @@
+body{
+    background-color: #1a1c1d;
+}
+
+#banner{
+    width: 100%;
+}
+
+.header {
+    padding-top: 2px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 2px;
+}
+
+#header {
+    font-size: 64px;
+    font-family: monospace;
+}
+
+p{
+    color: #FFFCC6;
+    text-align: center;
+    /*background: #fc9304;*/
+    /*background: #df28f6;*/
+}
+
+h1{
+    text-align: center;
+    background: #046dfc;
+}
+
+/* selección de diferentes selectores de stilo*/
+em strong{
+    color: red;
+}
+
+/* selector de id */
+#mision {
+    font-size: 20px;
+}
+
+h2{
+    text-align: center;
+    padding: 25px;
+}
+
+.items {
+    font-style: italic;
+}
+
+ul{
+    display: inline-block;
+    vertical-align: top;
+    width: 30%;
+    margin-right: 15%;
+}
+
+.principal {
+    background: #0e384b;
+    padding: 20px;
+}
+
+.diferencias {
+    background: #cd4f39;
+    padding: 20px;
+}
+
+.imagen_diferencias{
+    width: 50%;
+}