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
|
||||
test/
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
### 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).
|
||||
|
||||
@ -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
|
||||
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.
|
||||
@ -181,17 +180,3 @@ Caracteres especiales, unicode
|
||||
|
||||
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