Compare commits

...

3 Commits

Author SHA1 Message Date
248555a8b5
HTML y CSS parte 1: mi primera página - 05
tag <div> y selector de clase 'class' para estilo
2023-04-09 00:55:56 -04:00
ce78ad3209
HTML y CSS parte 1: mi primera página - 04
tag <img>
uso de archivo de estilo con selector de id '#'
2023-04-09 00:25:47 -04:00
9a8266052a
HTML y CSS parte 1: mi primera página - 02-03
02 - <!DOCTYPE html> <html lang="es">
02 - <head> <meta charset="UFT-8"> <body>
03 - inline style
2023-04-08 23:11:30 -04:00
5 changed files with 154 additions and 14 deletions

View File

@ -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)

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

View File

@ -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>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
nuestros clientes"</strong></em></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>
<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>

View 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%;
}