Compare commits
No commits in common. "d9b562d3493c30baf88cf4a776c4c3237d782636" and "36c44a127581dc2a3fe115eb5432019a7c7455db" have entirely different histories.
d9b562d349
...
36c44a1275
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,2 +1 @@
|
|||||||
*.pdf
|
*.pdf
|
||||||
test/
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 04 Crea tus primeras paginas HTML5 y CSS
|
### 04 Crea tus primeras paginas HTML5 y CSS
|
||||||
|
|
||||||
#### Parte 1 - Primera página web
|
#### Parte 1 Mi primera página web
|
||||||
|
|
||||||
Diferencias entre [html y css](https://www.aluracursos.com/blog/html-css-javascript-cuales-son-las-diferencias).
|
Diferencias entre [html y css](https://www.aluracursos.com/blog/html-css-javascript-cuales-son-las-diferencias).
|
||||||
|
|
||||||
@ -168,10 +168,9 @@ Página [productos](./html_css_parte2/productos.html) y
|
|||||||
|
|
||||||
En la página [productos](./html_css_parte2/productos.html) se utiliza la
|
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
|
propiedad `display` con el valor `inline-block` para poder ajustar su contenido
|
||||||
en [productos.css](./html_css_parte2/productos.css).
|
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
|
||||||
Se utiliza una imagen como fondo con la propiedad css background
|
la etiqueta `<footer>`.
|
||||||
`background: url(./imagenes/bg.jpg)` para la etiqueta `<footer>`.
|
|
||||||
|
|
||||||
[Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
|
[Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
|
||||||
elemento con css.
|
elemento con css.
|
||||||
@ -181,17 +180,3 @@ Caracteres especiales, unicode
|
|||||||
|
|
||||||
Final curso HTML5 y CSS parte 2
|
Final curso HTML5 y CSS parte 2
|
||||||
|
|
||||||
#### Parte 3 - Formularios y Tablas
|
|
||||||
|
|
||||||
Nueva página, [contacto.html](./html_css_parte3/contacto.html).
|
|
||||||
|
|
||||||
Se renombraron los estilos css: productos.css como [style.css](./html_css_parte3/style.css),
|
|
||||||
y style.css como [style_home](./html_css_parte3/style_home.css).
|
|
||||||
|
|
||||||
Creación de formulario HTML, tags `<form>`', `<input>` (text y submit)
|
|
||||||
para entradas de usuario. Tag `<label>` como etiqueta.
|
|
||||||
|
|
||||||
Conexión del **input** () con su **label**.
|
|
||||||
|
|
||||||
Uso de `id` para el `input` asociado al atributo `for` del `label`.
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
@ -1,44 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<form>
|
|
||||||
<label for="nombre_apellido">Nombre y Apellido</label>
|
|
||||||
<input type="text" id="nombre_apellido">
|
|
||||||
|
|
||||||
<label for⁼"email">Correo Eletrónico</label>
|
|
||||||
<input type="text" id="email"/>
|
|
||||||
|
|
||||||
<label for⁼"telefono">Teléfono</label>
|
|
||||||
<input type="text" id="telefono"/>
|
|
||||||
|
|
||||||
<input type="submit" value="Enviar Formulario"/>
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
<footer>
|
|
||||||
<img src="./imagenes/logo-blanco.png">
|
|
||||||
<!-- Copyleft unicode 🄯 🄯 -->
|
|
||||||
<!-- Copyright unicode © © -->
|
|
||||||
<p class="copyright">🄯 CopyLeft 2023 - DevFzn</p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
@ -1,48 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<!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 🄯 🄯 -->
|
|
||||||
<!-- Copyright unicode © © -->
|
|
||||||
<p class="copyright">🄯 CopyLeft 2023 - DevFzn</p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
/***
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
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{
|
|
||||||
display: block;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input{
|
|
||||||
display: block;
|
|
||||||
margin: 0 0 20px;
|
|
||||||
padding: 10px 25px;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
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%;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user