devfzn/desafio_encriptador
devfzn/desafio_encriptador
1
0
Fork 0
Code Pull Requests Activity

HTML y CSS parte 1: mi primera página - 04

Browse Source 
tag <img>
uso de archivo de estilo con selector de id '#'
This commit is contained in:
devfzn 2023-04-09 00:21:19 -04:00
parent 9a8266052a
commit ce78ad3209
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
4 changed files with 101 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
004_primeras_paginas/README.md
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

11
004_primeras_paginas/index.html
View File

@ -4,19 +4,24 @@
<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>Barbería Alura</title>
<link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
<h1 style="text-align: center;">Sobre la Barbería Alura</h1> <img id="banner"
src="./banner/banner.jpg"
alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
<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 style="font-size: 20px; text-align: center;"><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 style="text-align: center;">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>

29
004_primeras_paginas/style.css Normal file
View File

@ -0,0 +1,29 @@
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;
}