devfzn/Oracle_One-Alura_Latam
devfzn/Oracle_One-Alura_Latam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HTML5 y CSS3 pt. 4: Avanzando en CSS 01

Browse Source 
Ajustes de página para usar estilo 'style.css'.
Medidas proporcionales CSS con 'em'.
propiedad 'float' y 'clear'.
This commit is contained in:
devfzn 2023-04-12 22:33:32 -04:00
parent be87960502
commit ee5b469838
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
16 changed files with 485 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
004_primeras_paginas/README.md
View File

@ -302,3 +302,5 @@ transform (scale, rotate).
Final curso HTML5 y CSS parte 3 Final curso HTML5 y CSS parte 3
### Parte 4 - Avanzando en CSS

BIN
004_primeras_paginas/html_css_parte4/banner/banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

97
004_primeras_paginas/html_css_parte4/contacto.html Normal file
View File

@ -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>

BIN
004_primeras_paginas/html_css_parte4/diferenciales/diferenciales.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
004_primeras_paginas/html_css_parte4/imagenes/barba.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
004_primeras_paginas/html_css_parte4/imagenes/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
004_primeras_paginas/html_css_parte4/imagenes/cabello+barba.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
004_primeras_paginas/html_css_parte4/imagenes/cabello.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
004_primeras_paginas/html_css_parte4/imagenes/css_display_property.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
004_primeras_paginas/html_css_parte4/imagenes/logo-blanco.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
004_primeras_paginas/html_css_parte4/imagenes/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
004_primeras_paginas/html_css_parte4/imagenes/utiles.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

69
004_primeras_paginas/html_css_parte4/index.html Normal file
View File

@ -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>

52
004_primeras_paginas/html_css_parte4/productos.html Normal file
View File

@ -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>

52
004_primeras_paginas/html_css_parte4/reset.css Normal file
View File

@ -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;
}

213
004_primeras_paginas/html_css_parte4/style.css Normal file
View File

@ -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%;
}