Compare commits
No commits in common. "248555a8b5f7e64b4b3f3fb1c50b42a522df1673" and "69ca4c15f907fe63d03a4b9f310f88a6ec16122a" have entirely different histories.
248555a8b5
...
69ca4c15f9
@ -10,67 +10,4 @@ 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)
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
@ -3,42 +3,24 @@
|
|||||||
<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>Barbería Alura</title>
|
<title>Barberia Barbiturico</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"/>
|
|
||||||
|
|
||||||
<div class="principal">
|
<h1>Sobre la Barbería Alura</h1>
|
||||||
<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 id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a
|
<p><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>
|
||||||
|
|||||||
@ -1,59 +0,0 @@
|
|||||||
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