Compare commits
3 Commits
69ca4c15f9
...
248555a8b5
| Author | SHA1 | Date | |
|---|---|---|---|
248555a8b5
|
|||
|
ce78ad3209
|
|||
|
9a8266052a
|
@ -10,4 +10,67 @@ Diferencias entre [html y css](https://www.aluracursos.com/blog/html-css-javascr
|
|||||||
|
|
||||||
> en NeoVim `set ff=unix`
|
> en NeoVim `set ff=unix`
|
||||||
|
|
||||||
- Página [barbería](./index.html).
|
Página [barbería](./index.html).
|
||||||
|
|
||||||
|
Formas de aplicar estilo CSS:
|
||||||
|
|
||||||
|
- style inline.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1 style="text-align: center;">Sobre la Barbería Alura</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
- style block con tag `<style>`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
- style [file](./style.css).
|
||||||
|
|
||||||
|
##### Sistema hexadecimal
|
||||||
|
|
||||||
|
Sistema número que consta de las 6 primeras letras del alfabeto y los números
|
||||||
|
del 0 al 9.
|
||||||
|
|
||||||
|
```txt
|
||||||
|
0 1 2 3 4 5 6 7 8 9 A B C D E F
|
||||||
|
```
|
||||||
|
|
||||||
|
La combinación de estos 16 elementos permiten la representación de mas valores,
|
||||||
|
en menos caracteres, que por ejemplo, en un sistema binario. Es por esto que es
|
||||||
|
ampliamente utilizado en el mundo imformático.
|
||||||
|
|
||||||
|
La representación de los colores en 6 posiciones
|
||||||
|
|
||||||
|
```txt
|
||||||
|
|
||||||
|
0 0 0 0 0 0 <--- Mínimo
|
||||||
|
F F F F F F <--- Máximo
|
||||||
|
# _ _ _ _ _ _
|
||||||
|
r r g g b b
|
||||||
|
|
||||||
|
Negro -> #000000
|
||||||
|
Blanco -> #FFFFFF
|
||||||
|
```
|
||||||
|
|
||||||
|
```txt
|
||||||
|
0 = Mínimo
|
||||||
|
255 = Máximo
|
||||||
|
|
||||||
|
Negro -> rgb(0,0,0)
|
||||||
|
Blanco -> rgb(255,255,255)
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Equipo de Front End
|
||||||
|
|
||||||
|
- Programador Front End
|
||||||
|
- Responsable por UX (user experiencie)
|
||||||
|
- Responsable por UI (user interface)
|
||||||
|
- Copywriter (Generador de Contenido)
|
||||||
|
- SEO (Search Engine Optimization)
|
||||||
|
|
||||||
|
|||||||
BIN
004_primeras_paginas/banner/banner.jpg
Normal file
BIN
004_primeras_paginas/banner/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
004_primeras_paginas/diferenciales/diferenciales.jpg
Normal file
BIN
004_primeras_paginas/diferenciales/diferenciales.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
@ -3,24 +3,42 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
<title>Barberia Barbiturico</title>
|
<title>Barbería Alura</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<img id="banner"
|
||||||
|
src="./banner/banner.jpg"
|
||||||
|
alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
|
||||||
|
|
||||||
<h1>Sobre la Barbería Alura</h1>
|
<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
|
<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,
|
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
|
la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes
|
||||||
diariamente.</p>
|
diariamente.</p>
|
||||||
|
|
||||||
<p><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a
|
<p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a
|
||||||
nuestros clientes"</strong></em></p>
|
nuestros clientes"</strong></em></p>
|
||||||
|
|
||||||
<p>Ofrecemos profesionales experimentados que están constantemente observando los
|
<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
|
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,
|
las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad,
|
||||||
garantizando calidad y satisfacción de nuestros clientes.</p>
|
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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
59
004_primeras_paginas/style.css
Normal file
59
004_primeras_paginas/style.css
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
body{
|
||||||
|
background-color: #1a1c1d;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
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