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`
|
||||
|
||||
- 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>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Barberia Barbiturico</title>
|
||||
<title>Barbería Alura</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<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
|
||||
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><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>
|
||||
|
||||
<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>
|
||||
|
||||
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