├── 01-Introduccion ├── etiquetas-habituales.html └── mi-primera-pagina-web.html ├── 02-Forms-Tables ├── formularios.html ├── resultados.html └── tablas.html ├── 03-Multimedia ├── Intro.mp4 ├── gnr-welcome.mp3 ├── imagenes │ └── logohtml.webp └── multimedia.html ├── 04-Intro-css ├── estilos.css ├── imagenes │ └── fondo.jpg ├── introestilos.css ├── introestilos.html ├── textos.css ├── textosconhtml.html ├── utilidadescss.html └── webconcss.html ├── 05-Disposiciones ├── css │ ├── disposiciones.css │ ├── flex.css │ ├── multimedia.css │ ├── overflow.css │ ├── posicionamiento.css │ └── video.css ├── disposiciones.html ├── flex.html ├── img │ ├── alderdieder.jpg │ ├── bahia.jpg │ ├── concha.jpg │ ├── consti.jfif │ ├── logohtml.webp │ ├── playa.jfif │ ├── pvieja.webp │ ├── ss-grande.webp │ └── video.mp4 ├── multimedia.html ├── overflow.html ├── posicionamiento.html └── video.html ├── 06-Selectores ├── css │ ├── especificidad.css │ ├── pseudoelementos.css │ └── selectores.css └── html │ ├── especificidad.html │ ├── pseudoclases.html │ ├── pseudoelementos.html │ └── selectores.html ├── 07-Formularios ├── css │ ├── estilosformularios.css │ └── login.css ├── html │ ├── estilosformularios.html │ └── login.html └── img │ └── searchicon.png ├── 08-Bootstrap └── bootstrap.html ├── 09-Animaciones ├── animaciones.css ├── animaciones.html ├── tooltip.css └── tooltip.html ├── 10-Responsive ├── flexbox.css ├── flexbox.html ├── grid.css ├── grid.html ├── mediaqueries.css ├── mediaqueries.html ├── unidades-em.css ├── unidades-em.html ├── unidades.css ├── unidades.html ├── variables.css └── variables.html ├── 11-Bootstrap-grid ├── bootstrap-grid.html └── grid.css ├── 12-Bootstrap-elementos ├── alertas.html ├── badges.html ├── forms-2.html ├── forms-3.html ├── forms.html ├── iconos.html ├── imagenes.html ├── jumbotron.html ├── listas-2.html ├── listas.html ├── modales.html ├── progress.html ├── spinners.html ├── tablas.html ├── tarjetas.html ├── tipografias.html └── toasts.html ├── 13-Sass ├── introsass.html ├── sass │ ├── _builtin.scss │ ├── _componentes.scss │ ├── _estilos.scss │ └── _mixins.scss ├── styles.css ├── styles.css.map └── styles.scss ├── 14-15-Proyecto ├── assets │ └── img │ │ ├── bg.png │ │ ├── chart.png │ │ ├── logo.png │ │ └── wallet.png ├── css │ ├── styles.css │ └── styles.css.map ├── html │ └── proyecto.html └── sass │ └── _globals.scss └── README.md /01-Introduccion/etiquetas-habituales.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Etiquetas habituales 5 | 6 | 7 |

Encabezado 1

8 | 13 |

14 |

Hola

15 |

16 |

Esto es un Párrafo

17 | Este es un enlace externo 18 | Este es un enlace interno 19 |

20 |

Listas

21 |

22 |

Lista ordenada

23 |

Elemento 1
Elemento 2
Elemento 3
Elemento 4

29 |

30 |

31 |

Lista desordenada

32 |

Elemento 1
Elemento 2
Elemento 3
Elemento 4

38 |

39 |

40 | 41 | Este es un enlace interno 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /01-Introduccion/mi-primera-pagina-web.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Mi primera pagina web 4 | 5 | 6 |

Hola mundo

7 | 8 | Esto es un segundo párrafo 9 | 10 | -------------------------------------------------------------------------------- /02-Forms-Tables/formularios.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Formularios 5 | 6 | 7 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /02-Forms-Tables/resultados.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Resultados 5 | 6 | 7 |

Estos son los resultados

8 |

9 |
10 | Volver al formulario 11 | 12 | 19 | -------------------------------------------------------------------------------- /02-Forms-Tables/tablas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tablas en HTML 5 | 6 | 7 |

Horas para aprender HTML

8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |

Persona	Lunes	Martes	Miércoles	Jueves	Viernes	Sábado	Domingo
María	9 - 13	9 - 13	9 - 13	9 - 13	9 - 13	Descanso	Descanso
Iñigo	10 - 17	10 - 17	Descanso	10 - 17	10 - 17	Descanso	Descanso

40 | 41 | -------------------------------------------------------------------------------- /03-Multimedia/Intro.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/03-Multimedia/Intro.mp4 -------------------------------------------------------------------------------- /03-Multimedia/gnr-welcome.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/03-Multimedia/gnr-welcome.mp3 -------------------------------------------------------------------------------- /03-Multimedia/imagenes/logohtml.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/03-Multimedia/imagenes/logohtml.webp -------------------------------------------------------------------------------- /03-Multimedia/multimedia.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Multimedia con HTML 5 | 6 | 7 |

Imágenes

8 |

9 |

10 | 11 |

Vídeo

12 | 13 |

16 | 17 |

Audio

18 | 19 |

22 | 23 | -------------------------------------------------------------------------------- /04-Intro-css/estilos.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | } 4 | 5 | /* Estoy probando colores y fuentes */ 6 | p { 7 | color: blue; 8 | font-size: 16pt; 9 | } 10 | 11 | #primera-noticia { 12 | color: green; 13 | font-size: 12pt; 14 | } 15 | 16 | #segunda-noticia { 17 | /* color: darkmagenta; */ 18 | font-size: 10pt; 19 | } 20 | 21 | .encabezado { 22 | font-size: 24pt; 23 | text-transform: uppercase; 24 | } 25 | 26 | *.warning { 27 | color: red; 28 | } 29 | 30 | .autor, .fecha, .ubicacion, h1, #segunda-noticia { 31 | text-decoration: underline; 32 | } -------------------------------------------------------------------------------- /04-Intro-css/imagenes/fondo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/04-Intro-css/imagenes/fondo.jpg -------------------------------------------------------------------------------- /04-Intro-css/introestilos.css: -------------------------------------------------------------------------------- 1 | /* Estilos para colores */ 2 | .colores { 3 | color: orangered; 4 | } 5 | 6 | .color-hexadecimal { 7 | color: #BCE784; 8 | } 9 | 10 | .color-rgb { 11 | color: rgb(53, 71, 226) 12 | } 13 | 14 | .color-rgba { 15 | color: rgba(10, 10, 10, 0.85) 16 | } 17 | 18 | /* Fondos */ 19 | .fondo { 20 | /* background-color: cornflowerblue; */ 21 | background-image: url("https://d33wubrfki0l68.cloudfront.net/89a052ddc6d368ce93d9067e8444c36a3558efe7/f9e10/static/triangle_background2-6eded4a7ad80c007fb65f02c828e5dd0.jpg"); 22 | background-position: left bottom; 23 | } 24 | 25 | .fondo-interno { 26 | /* background-color: cornflowerblue; */ 27 | background-image: url("imagenes/fondo.jpg"); 28 | background-position: left bottom; 29 | } 30 | 31 | /* Tamaños */ 32 | .ancho { 33 | background-color: #BCE784; 34 | width: 100px; 35 | } 36 | 37 | .alto { 38 | background-color: aquamarine; 39 | height: 200px; 40 | } 41 | 42 | .tarjeta { 43 | border-style: solid; 44 | border-color: rgb(150, 150, 150); 45 | border-width: 1px; 46 | /* border-top: none; */ 47 | padding: 10px 20px; 48 | /* padding: 10px 20px 30px 40px; */ 49 | margin: 10px 20px; 50 | /* margin: 10px 20px 30px 40px; */ 51 | } -------------------------------------------------------------------------------- /04-Intro-css/introestilos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Intro Estilos 8 | 9 | 10 | 11 |

Colores

12 |

Color hexadecimal

13 |

Color rgb

14 |

Color rgba

15 |

16 |

Hola

17 |

Esto es un h1 dentro del div

18 |

19 |

20 |

Hola

21 |

Esto es un h1 dentro del div interno

22 |

23 |

Espacios y tamaños

24 |

25 |

Cambiar la anchura

26 |

27 |

28 |

Cambiar la altura

29 |

30 |

31 |

Título de tarjeta

32 |

Esta es la descripción de la tarjeta

33 |

34 | 35 | -------------------------------------------------------------------------------- /04-Intro-css/textos.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;1,400&display=swap'); 2 | 3 | html { 4 | /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */ 5 | font-family: 'Source Sans Pro', sans-serif; 6 | font-size: larger; 7 | font-weight: 400; 8 | font-style: italic; 9 | } -------------------------------------------------------------------------------- /04-Intro-css/textosconhtml.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Textos con HTML 8 | 14 | 15 | 16 | 17 |

Trabajando con textos

18 | 19 | 20 | -------------------------------------------------------------------------------- /04-Intro-css/utilidadescss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Utilidades CSS 8 | 9 | 13 | 21 | 22 | 23 |

Hola

24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /04-Intro-css/webconcss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Trabajando con CSS 5 | 6 | 7 | 8 |

Custom Style Sheet

9 |

Un párrafo

10 |

Esto es la sección de noticias

11 |

La primera noticia es que...

12 |

La segunda noticia es que...

13 |

Peligro!

14 | 15 |

16 |

Autor: Gorka Villar

17 |

Fecha: 21/03/2022

18 |

Ubicación: Madrid

19 |

20 | 21 | -------------------------------------------------------------------------------- /05-Disposiciones/css/disposiciones.css: -------------------------------------------------------------------------------- 1 | .div-1, 2 | .div-2 { 3 | background-color: red; 4 | /* display : block; POR DEFECTO - div tienen display block */ 5 | } 6 | 7 | .span-1 { 8 | background-color: aquamarine; 9 | /* display : inline; POR DEFECTO - span tienen display inline */ 10 | /* height : 500px; */ 11 | float: right; 12 | } 13 | 14 | .span-2 { 15 | background-color: aquamarine; 16 | /* display : inline; POR DEFECTO - span tienen display inline */ 17 | /* height : 500px; */ 18 | float : left; 19 | } 20 | 21 | .img { 22 | width : 50px; 23 | height : 50px; 24 | display: inline-block; 25 | } -------------------------------------------------------------------------------- /05-Disposiciones/css/flex.css: -------------------------------------------------------------------------------- 1 | /* https://codepen.io/enxaneta/full/adLPwv */ 2 | 3 | .flex { 4 | display: flex; 5 | flex-direction: column; 6 | background-color: yellow; 7 | height: 300px; 8 | justify-content: space-around; 9 | align-items: flex-end; 10 | /* flex-wrap: wrap; */ 11 | } 12 | 13 | .contenido-1 { 14 | background-color: white; 15 | /* height: 200px; */ 16 | width: 100px; 17 | border: 1px solid blue; 18 | } 19 | 20 | .contenido-2 { 21 | background-color: white; 22 | /* height: 200px; */ 23 | width: 100px; 24 | border: 1px solid blue; 25 | } 26 | 27 | .contenido-3 { 28 | background-color: pink; 29 | /* height: 200px; */ 30 | width: 100px; 31 | border: 1px solid blue; 32 | } -------------------------------------------------------------------------------- /05-Disposiciones/css/multimedia.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .imagen-principal { 7 | width: 100vw; 8 | opacity: 0.3; 9 | } 10 | 11 | .imagen-principal:hover { 12 | opacity: 1; 13 | } 14 | 15 | .galeria { 16 | display: flex; 17 | flex-wrap: wrap; 18 | gap: 10px; 19 | } 20 | 21 | .imagen-galeria { 22 | width: 150px; 23 | } 24 | 25 | .imagen-galeria:hover { 26 | opacity: 0.3; 27 | cursor: pointer; 28 | } -------------------------------------------------------------------------------- /05-Disposiciones/css/overflow.css: -------------------------------------------------------------------------------- 1 | .contenedor-hidden { 2 | background-color: bisque; 3 | width: 300px; 4 | height: 100px; 5 | padding: 15px; 6 | overflow: hidden; 7 | } 8 | 9 | .contenedor-scroll { 10 | margin: 10px 0px; 11 | background-color: bisque; 12 | width: 300px; 13 | height: 100px; 14 | padding: 15px; 15 | overflow: scroll; 16 | } 17 | 18 | .contenedor-visible { 19 | margin: 10px 0px; 20 | background-color: bisque; 21 | width: 300px; 22 | height: 100px; 23 | padding: 15px; 24 | overflow: visible; 25 | } 26 | .contenedor-auto { 27 | margin: 10px 0px; 28 | background-color: bisque; 29 | width: 300px; 30 | height: 100px; 31 | padding: 15px; 32 | overflow: auto; 33 | } 34 | 35 | .contenedor-scroll-x { 36 | margin: 10px 0px; 37 | background-color: bisque; 38 | width: 300px; 39 | height: 100px; 40 | padding: 15px; 41 | overflow-x: hidden; 42 | overflow-y: scroll; 43 | } -------------------------------------------------------------------------------- /05-Disposiciones/css/posicionamiento.css: -------------------------------------------------------------------------------- 1 | div { 2 | border: 1px solid gray; 3 | padding: 5px; 4 | margin: 5px; 5 | background-color: white; 6 | } 7 | 8 | /* Posicionamiento relativo - se posiciona en relación al posicionamiento original */ 9 | .relative { 10 | position: relative; 11 | left: 80px; 12 | margin-left: 10px; 13 | } 14 | 15 | /* Posicionamiento fijo - se posiciona en relación a la pantalla */ 16 | .fixed { 17 | position: fixed; 18 | bottom: 0px; 19 | left: 0px; 20 | background-color: greenyellow; 21 | z-index: 10; 22 | } 23 | 24 | /* Posicionamiento absoluto */ 25 | .absolute { 26 | position: absolute; 27 | bottom: 30px; 28 | right: 0px; 29 | } 30 | 31 | .relative.contenedor { 32 | width: 300px; 33 | height: 400px; 34 | background-color: blue; 35 | } 36 | 37 | /* Posicionamiento "pegajoso" - Al hacer scroll modifica su posicionamiento relative->fixed */ 38 | .sticky { 39 | position: -webkit-sticky; /* Safari */ 40 | position: sticky; /* IE ni Safari soporta sticky */ 41 | background-color: darksalmon; 42 | color: white; 43 | top: 0px; 44 | z-index: 2; 45 | } -------------------------------------------------------------------------------- /05-Disposiciones/css/video.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html { 7 | font-family: Helvetica; 8 | color: white; 9 | } 10 | 11 | .video { 12 | width: 100vw; 13 | height: 100vh; 14 | object-fit: cover; 15 | position: fixed; 16 | } 17 | 18 | .header { 19 | height: 100vh; 20 | position: relative; 21 | text-align: center; 22 | display: flex; 23 | flex-direction: column; 24 | gap: 10px; 25 | justify-content: center; 26 | align-items: center; 27 | } -------------------------------------------------------------------------------- /05-Disposiciones/disposiciones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Disposiciones 8 | 9 | 10 | 11 |

Esto es un div

12 | Esto es un SPAN 13 | logo

14 | Esto es otro SPAN 15 |

Esto es otro div

16 | 17 | -------------------------------------------------------------------------------- /05-Disposiciones/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex Box 8 | 9 | 10 | 11 |

12 |

13 |

Este es el contenido 1

14 |

Este es el contenido 1

15 |

Este es el contenido 1

16 |

17 |

18 |

Este es el contenido 2

19 |

20 |

21 |

Este es el contenido 3

22 |

23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /05-Disposiciones/img/alderdieder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/alderdieder.jpg -------------------------------------------------------------------------------- /05-Disposiciones/img/bahia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/bahia.jpg -------------------------------------------------------------------------------- /05-Disposiciones/img/concha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/concha.jpg -------------------------------------------------------------------------------- /05-Disposiciones/img/consti.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/consti.jfif -------------------------------------------------------------------------------- /05-Disposiciones/img/logohtml.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/logohtml.webp -------------------------------------------------------------------------------- /05-Disposiciones/img/playa.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/playa.jfif -------------------------------------------------------------------------------- /05-Disposiciones/img/pvieja.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/pvieja.webp -------------------------------------------------------------------------------- /05-Disposiciones/img/ss-grande.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/ss-grande.webp -------------------------------------------------------------------------------- /05-Disposiciones/img/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/05-Disposiciones/img/video.mp4 -------------------------------------------------------------------------------- /05-Disposiciones/multimedia.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multimedia 8 | 9 | 10 | 11 | imagen-principal

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 | 21 | -------------------------------------------------------------------------------- /05-Disposiciones/overflow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Overflow 8 | 9 | 10 | 11 |

12 |

Do aute laborum voluptate elit sunt ullamco ipsum. Mollit eu ea eiusmod sit sint et esse ad pariatur cupidatat magna irure magna nisi. Culpa ea ex est irure dolor sint ut commodo magna ea est cillum. Adipisicing sit elit nisi commodo ipsum enim nisi.

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 | 21 |

22 |

23 |

24 | 25 |

26 |

27 |

28 | 29 | -------------------------------------------------------------------------------- /05-Disposiciones/posicionamiento.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Posicionamiento 8 | 9 | 10 | 11 |

Posicionamiento en CSS

12 | 17 |

Soy un div estático (static)

18 |

Soy un div Relativo (relative)

19 |

Soy un div Fixed (fixed)

20 |

Soy un div Sticky (sticky)

21 |

22 |

Soy un div Absoluto (absolute)

23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /05-Disposiciones/video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Video 8 | 9 | 10 | 11 |

14 | 18 | 19 | -------------------------------------------------------------------------------- /06-Selectores/css/especificidad.css: -------------------------------------------------------------------------------- 1 | /* (1, 0, 0) */ 2 | /* (0, 1, 0) */ 3 | /* (0, 0, 1) */ 4 | /* (0, 0, 0) */ 5 | 6 | h1#h1-id.h1-clase { 7 | color: darksalmon; 8 | } 9 | 10 | .h1-clase { 11 | color: yellow; 12 | } 13 | 14 | h1 { 15 | color: blue !important; 16 | /* EVITAR en la medida de lo posible el !important */ 17 | } 18 | 19 | p { 20 | color: red; 21 | } -------------------------------------------------------------------------------- /06-Selectores/css/pseudoelementos.css: -------------------------------------------------------------------------------- 1 | .contenedor { 2 | width: 300px; 3 | height: 100px; 4 | background-color: aquamarine; 5 | } 6 | 7 | div { 8 | background-color: blue; 9 | } 10 | 11 | span.frase { 12 | font-style: italic; 13 | } 14 | 15 | span.frase::before { 16 | content: '<< '; 17 | font-size: xx-small; 18 | } 19 | span.frase::after { 20 | content: ' >>'; 21 | font-size: xx-small; 22 | } 23 | 24 | .libro { 25 | background-color: bisque; 26 | padding: 15px; 27 | font-family: Arial; 28 | } 29 | 30 | .libro p::first-letter { 31 | font-size: xx-large; 32 | } 33 | 34 | .libro p::first-line { 35 | color: white; 36 | } 37 | 38 | .libro p::selection { 39 | background-color: chocolate; 40 | color: lime; 41 | } 42 | 43 | .listado li::marker { 44 | color: red; 45 | } -------------------------------------------------------------------------------- /06-Selectores/css/selectores.css: -------------------------------------------------------------------------------- 1 | .p-contenedor { 2 | color: green; 3 | } 4 | 5 | body section.main .contenedor p { 6 | color: green; 7 | } 8 | 9 | .contenedor #boton-contenedor { 10 | background-color: yellow; 11 | } -------------------------------------------------------------------------------- /06-Selectores/html/especificidad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Especificidad 8 | 9 | 10 | 11 |

Este es el título

12 |

Ea enim aliqua incididunt labore enim reprehenderit. Deserunt et adipisicing sint in occaecat incididunt ullamco duis sunt laborum velit labore in. Cupidatat adipisicing sint velit sit eu mollit. Aute velit sunt adipisicing proident minim excepteur laborum reprehenderit commodo. Elit adipisicing minim adipisicing nostrud esse ad reprehenderit in dolor. Nostrud consectetur nisi proident pariatur proident labore Lorem sit.

13 | 14 | -------------------------------------------------------------------------------- /06-Selectores/html/pseudoclases.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pseudo-Clases 5 | 6 | 46 | 47 | 48 |

49 |

50 | Ea ullamco dolore reprehenderit ut consequat commodo Lorem nulla quis 51 | ea. Non quis labore mollit ex fugiat eiusmod. 52 |

53 |

54 |

55 |

Párrafo 1

56 |

Párrafo 2

57 |

Párrafo 3

58 |

59 |

60 | Enlace a Google 61 | Enlace a Marca 62 |

63 | 64 | 65 | -------------------------------------------------------------------------------- /06-Selectores/html/pseudoelementos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pseudo-Elementos 8 | 9 | 10 | 11 | 12 |

13 |

En medio de la dificultad reside la oportunidad - Albert Einstein

14 |

15 |

16 |

17 | Laboris sunt in reprehenderit adipisicing consequat id est laboris Lorem ea fugiat irure fugiat. Fugiat non consectetur do enim quis nisi culpa velit ipsum quis cillum pariatur. Esse aliquip cillum consectetur commodo irure tempor cupidatat et. Exercitation veniam voluptate non enim aute irure ut ipsum adipisicing. Aute quis mollit pariatur ad adipisicing nostrud aute velit do qui. Reprehenderit nulla exercitation nulla elit adipisicing nulla enim sint officia anim fugiat veniam ea deserunt. 18 |

19 |

20 |

21 |

Elemento 1
Elemento 2
Elemento 3

26 |

Elemento 1
Elemento 2
Elemento 3

31 |

32 | 33 | -------------------------------------------------------------------------------- /06-Selectores/html/selectores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Selectores 8 | 9 | 10 | 11 |

12 |

13 |

Esto es un párrafo

14 |

Esto es un párrafo

15 |

Esto es un párrafo

16 |

Esto es un párrafo

17 | 18 |

19 |

Esto es un párrafo de fuera del div

20 |

21 | 22 | 23 | -------------------------------------------------------------------------------- /07-Formularios/css/estilosformularios.css: -------------------------------------------------------------------------------- 1 | .input { 2 | width: 100%; 3 | padding: 5px 10px; 4 | border: 2px solid green; 5 | border-radius: 10px; 6 | margin-bottom: 10px; 7 | } 8 | 9 | .input[type="password"] { 10 | color: red; 11 | } 12 | 13 | .input-moderno { 14 | border: none; 15 | border-bottom: 1px solid #c2c2c2; 16 | outline: none; 17 | padding: 5px; 18 | color: #5f5f5f; 19 | } 20 | 21 | .input-moderno::placeholder { 22 | color: #c2c2c2; 23 | } 24 | 25 | .input-moderno:focus { 26 | border-bottom: 1px solid #5f5f5f; 27 | } 28 | 29 | .input-background { 30 | background-color: aquamarine; 31 | border: none; 32 | border-radius: 5px; 33 | padding: 5px 10px; 34 | outline: none; 35 | color: white; 36 | box-shadow: 0 0 10px #ccc; 37 | } 38 | 39 | .input-background::placeholder { 40 | color: #ccc; 41 | } 42 | 43 | .input-search { 44 | padding: 10px; 45 | padding-left: 30px; 46 | /* border: none; */ 47 | background-color: #fff; 48 | border-radius: 8px; 49 | margin: 10px; 50 | background-image: url('../img/searchicon.png'); 51 | background-repeat: no-repeat; 52 | background-position: 5px; 53 | } 54 | 55 | textarea { 56 | resize: none; 57 | } 58 | 59 | select { 60 | width: 100%; 61 | padding: 15px; 62 | background-color: #ccc; 63 | } -------------------------------------------------------------------------------- /07-Formularios/css/login.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); 2 | 3 | * { 4 | font-family: 'Ubuntu', sans-serif; 5 | } 6 | 7 | .container { 8 | margin: auto; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | gap: 30px; 14 | width: 450px; 15 | } 16 | 17 | .buttons { 18 | align-self: flex-start; 19 | display: flex; 20 | gap: 20px; 21 | } 22 | 23 | .google-btn { 24 | background-color: #1A73E8; 25 | border: none; 26 | border-radius: 5px; 27 | height: 40px; 28 | display: flex; 29 | align-items: center; 30 | padding: 2px; 31 | cursor: pointer; 32 | } 33 | 34 | .google-btn:hover { 35 | opacity: 0.75; 36 | } 37 | 38 | .google-btn picture { 39 | width: 35px; 40 | height: 35px; 41 | background-color: white; 42 | border-radius: 2px; 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | } 47 | 48 | .google-btn picture img { 49 | width: 75%; 50 | } 51 | 52 | .google-btn span { 53 | color: white; 54 | font-weight: 500; 55 | padding: 15px; 56 | } 57 | 58 | .twitter-btn { 59 | color: #bbb; 60 | background-color: #eee; 61 | border: none; 62 | width: 40px; 63 | border-radius: 5px; 64 | cursor: pointer; 65 | } 66 | 67 | .twitter-btn:hover { 68 | background-color: #ddd; 69 | } 70 | 71 | .separator { 72 | display: flex; 73 | width: 100%; 74 | gap: 15px; 75 | } 76 | 77 | .separator hr { 78 | flex-grow: 1; 79 | border: none; 80 | border-top: 1px solid #ccc; 81 | } 82 | 83 | .separator span { 84 | color: #8b8b8b; 85 | } 86 | 87 | .section-inputs { 88 | display: flex; 89 | gap: 10px; 90 | width: 100%; 91 | } 92 | 93 | form { 94 | display: flex; 95 | flex-direction: column; 96 | align-items: stretch; 97 | gap: 30px; 98 | } 99 | 100 | label { 101 | display: flex; 102 | flex-direction: column; 103 | gap: 5px; 104 | } 105 | 106 | label span { 107 | font-weight: 700; 108 | } 109 | 110 | .section-inputs label input { 111 | width: 80%; 112 | background-color: #f3f3f4; 113 | border: none; 114 | padding: 10px 20px; 115 | border-radius: 10px; 116 | outline: none; 117 | font-size: 14pt; 118 | } 119 | label input { 120 | width: 90%; 121 | background-color: #f3f3f4; 122 | border: none; 123 | padding: 10px 20px; 124 | border-radius: 10px; 125 | outline: none; 126 | font-size: 14pt; 127 | transition: background-color 0.2s, border 0.2s, box-shadow 0.2s; 128 | } 129 | 130 | label input:hover { 131 | background-color: white; 132 | border: solid 1px #f3f3f4; 133 | box-shadow: 0 0 4px #eb50ff4f; 134 | } 135 | label input:focus { 136 | background-color: white; 137 | border: solid 1px #f3f3f4; 138 | box-shadow: 0 0 4px #eb50ff4f; 139 | } 140 | 141 | .checkbox-label { 142 | display: flex; 143 | flex-direction: row; 144 | } 145 | 146 | .checkbox-label input[type="checkbox"] { 147 | width: 20px; 148 | } 149 | 150 | .checkbox-label span { 151 | font-weight: 400; 152 | } 153 | 154 | .submit-btn { 155 | background-color: #EA4C89; 156 | color: white; 157 | font-weight: 500; 158 | font-size: 14pt; 159 | text-align: center; 160 | padding: 15px; 161 | border: none; 162 | border-radius: 10px; 163 | cursor: pointer; 164 | } 165 | 166 | .submit-btn:hover { 167 | opacity: 0.75; 168 | } -------------------------------------------------------------------------------- /07-Formularios/html/estilosformularios.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Estilos Formularios 8 | 9 | 10 | 11 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /07-Formularios/html/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login Form 8 | 9 | 10 | 11 |

12 |

Regístrate en los formularios

13 |

14 | 20 | 23 |

24 |

25 |

26 | O... 27 |

28 |

29 | 54 |

55 | 56 | -------------------------------------------------------------------------------- /07-Formularios/img/searchicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/07-Formularios/img/searchicon.png -------------------------------------------------------------------------------- /08-Bootstrap/bootstrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bootstrap 8 | 14 | 21 | 22 | 23 | 32 |

33 |

34 | 35 |

36 |

37 | 38 | 39 | 44 | 45 | -------------------------------------------------------------------------------- /09-Animaciones/animaciones.css: -------------------------------------------------------------------------------- 1 | .padre { 2 | width: 400px; 3 | height: 400px; 4 | background-color: blue; 5 | } 6 | 7 | .hijo { 8 | width: 50%; 9 | height: 50%; 10 | background-color: beige; 11 | /* transition: transform 1s ease-in 2s; */ 12 | animation: traslacion 4s ease-in-out infinite forwards alternate; 13 | } 14 | 15 | .padre:hover .hijo { 16 | /* transform: translateX(100%); 17 | background-color: blueviolet; */ 18 | animation-play-state: paused; 19 | } 20 | 21 | @keyframes traslacion { 22 | 0% { 23 | background-color: beige; 24 | transform: translateX(0%) translateY(0%); 25 | } 26 | 25% { 27 | transform: translateX(100%) translateY(0%); 28 | } 29 | 50% { 30 | transform: translateX(100%) translateY(100%); 31 | } 32 | 75% { 33 | transform: translateX(0%) translateY(100%); 34 | } 35 | 100% { 36 | background-color: darkorange; 37 | transform: translateX(0%) translateY(0%); 38 | } 39 | } -------------------------------------------------------------------------------- /09-Animaciones/animaciones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animaciones 8 | 9 | 10 | 11 |

12 |

13 |

14 | 15 | -------------------------------------------------------------------------------- /09-Animaciones/tooltip.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | min-height: 100vh; 8 | } 9 | 10 | .btn-tooltip { 11 | position: relative; 12 | padding: 10px 20px; 13 | border-radius: 5px; 14 | border: none; 15 | background-color: green; 16 | color: white; 17 | border-bottom: 2px solid darkgreen; 18 | cursor: pointer; 19 | transition: background-color 150ms; 20 | } 21 | 22 | /* .btn-tooltip:hover::before { 23 | content: "Esto es un tooltip"; 24 | } */ 25 | 26 | .tooltip { 27 | position: absolute; 28 | /* visibility: hidden; */ 29 | opacity: 0; 30 | top: -50px; 31 | left: -100%; 32 | transform: translateX(25%); 33 | color: #ddd; 34 | background-color: #333; 35 | padding: 5px 10px; 36 | border-radius: 5px; 37 | transition: opacity 150ms; 38 | } 39 | 40 | .btn-tooltip:hover { 41 | background-color: rgb(0, 100, 0); 42 | } 43 | 44 | .btn-tooltip:hover .tooltip { 45 | /* visibility: visible; */ 46 | opacity: 1; 47 | } 48 | 49 | .tooltip::before { 50 | content: ''; 51 | border: solid 10px transparent; 52 | border-top-color: #333; 53 | position: absolute; 54 | top: 40px; 55 | left: 50%; 56 | transform: translateX(-50%); 57 | } 58 | 59 | /* .triangulo { 60 | border: solid 10px transparent; 61 | border-top-color: #333; 62 | } */ -------------------------------------------------------------------------------- /09-Animaciones/tooltip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip 8 | 9 | 10 | 11 | 14 |

15 | 16 | -------------------------------------------------------------------------------- /10-Responsive/flexbox.css: -------------------------------------------------------------------------------- 1 | /* https://codepen.io/enxaneta/full/adLPwv */ 2 | 3 | .contenedor { 4 | background-color: yellow; 5 | padding: 0.5rem; 6 | display: flex; 7 | gap: 0.5rem; 8 | min-height: 5rem; 9 | /* Eje principal */ 10 | justify-content: space-around; 11 | 12 | /* Eje secundario */ 13 | align-items: center; 14 | 15 | /* flex-direction: column; */ 16 | 17 | flex-wrap: wrap; 18 | } 19 | 20 | .item { 21 | background-color: salmon; 22 | padding: 0.25rem; 23 | width: 10rem; 24 | } 25 | 26 | .item2 { 27 | align-self: stretch; 28 | } -------------------------------------------------------------------------------- /10-Responsive/flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | FlexBox 9 | 10 | 11 |

12 |

Item 1

13 |

Item 2

14 |

Item 3

15 |

Item 4

16 |

17 | 18 | -------------------------------------------------------------------------------- /10-Responsive/grid.css: -------------------------------------------------------------------------------- 1 | .contenedor { 2 | display: grid; 3 | gap: 0.5rem; 4 | /* column-gap: 0.1rem; */ 5 | /* row-gap: 1rem; */ 6 | /* grid-template-columns: auto auto auto; */ 7 | /* grid-template-columns: repeat(3, auto); */ 8 | /* grid-template-columns: 20px 3rem 25vw; */ 9 | grid-template-columns: 1fr 1fr 3fr; 10 | grid-template-rows: 200px 5rem 100px; 11 | /* grid-template-areas: 'head head head' 'main main aside' 'footer footer footer'; */ 12 | } 13 | 14 | .item { 15 | background-color: aquamarine; 16 | padding: 0.25rem; 17 | font-size: 2rem; 18 | border: solid 1px blue; 19 | } 20 | 21 | .item1 { 22 | /* grid-column: 1 / 3; */ 23 | grid-column: 2 / span 2; 24 | /* grid-area: head; */ 25 | } 26 | 27 | .item9 { 28 | /* grid-area: footer; */ 29 | grid-area: 2 / 1 / 4 / 3; 30 | /* grid-area: filainicio / colinicio / filafin / colfin */ 31 | } -------------------------------------------------------------------------------- /10-Responsive/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid 8 | 9 | 10 | 11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 | 23 | -------------------------------------------------------------------------------- /10-Responsive/mediaqueries.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | font-size: 4rem; 4 | } 5 | 6 | p { 7 | color: black; 8 | font-size: 2rem; 9 | } 10 | 11 | /* @media all and (max-width: 576px) { */ 12 | /* @media (max-width: 576px) { 13 | h1 { 14 | color: blue; 15 | } 16 | } */ 17 | 18 | @media (min-width: 576px) { 19 | h1 { 20 | color: green; 21 | } 22 | } 23 | 24 | @media (min-width: 995px) { 25 | h1 { 26 | color: blue; 27 | } 28 | } 29 | 30 | @media (orientation: landscape) and (min-height: 400px) { 31 | p { 32 | color: brown; 33 | } 34 | } 35 | 36 | @media (min-height: 300px), (min-width: 1100px) { 37 | h1 { 38 | color: darksalmon; 39 | } 40 | } -------------------------------------------------------------------------------- /10-Responsive/mediaqueries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Media Queries 8 | 9 | 10 | 11 |

Título

12 |

Este es un párrafo

13 | 14 | -------------------------------------------------------------------------------- /10-Responsive/unidades-em.css: -------------------------------------------------------------------------------- 1 | .escenario { 2 | border: 1px solid #333; 3 | padding: 10px; 4 | } 5 | 6 | .escenario-1 { 7 | font-size: 32px; 8 | } 9 | 10 | .escenario-2 { 11 | font-size: 16px; 12 | } 13 | 14 | .em { 15 | font-size: 2em; 16 | } 17 | 18 | .rem { 19 | font-size: 2rem; 20 | } -------------------------------------------------------------------------------- /10-Responsive/unidades-em.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Unidades EM y REM 8 | 9 | 10 | 11 |

12 |

2em

13 |

2rem

14 |

15 |

16 |

2em

17 |

2rem

18 |

19 | 20 | -------------------------------------------------------------------------------- /10-Responsive/unidades.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px; 3 | margin: 0; 4 | } 5 | .escenario { 6 | margin: 10px 0px; 7 | border: 1px solid #ccc; 8 | padding: 10px; 9 | } 10 | 11 | .escenario-1 { 12 | width: 100%; 13 | } 14 | .escenario-2 { 15 | width: 50%; 16 | } 17 | 18 | .px { 19 | background-color: green; 20 | width: 200px; 21 | } 22 | 23 | .porcentaje { 24 | background-color: red; 25 | width: 50%; 26 | } 27 | 28 | .view { 29 | background-color: yellow; 30 | width: 50vw; 31 | } -------------------------------------------------------------------------------- /10-Responsive/unidades.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Unidades 8 | 9 | 10 | 11 |

Unidades fijas y relativas

12 |

13 |

200px

14 |

50%

15 |

50vw

16 |

17 |

18 |

200px

19 |

50%

20 |

50vw

21 |

22 | 23 | -------------------------------------------------------------------------------- /10-Responsive/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-principal: rgb(195, 0, 255); 3 | --ancho-principal: 350px; 4 | } 5 | 6 | .titulo { 7 | color: var(--color-principal); 8 | } 9 | 10 | .footer { 11 | color: var(--color-principal); 12 | } 13 | 14 | .contenedor { 15 | background-color: antiquewhite; 16 | padding: 1rem; 17 | max-width: var(--ancho-principal); 18 | } -------------------------------------------------------------------------------- /10-Responsive/variables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Variables 8 | 9 | 10 | 11 |

12 |

Título

13 |

Este es el párrafo

14 | 15 |

16 | 17 | -------------------------------------------------------------------------------- /11-Bootstrap-grid/bootstrap-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bootstrap Grid 8 | 9 | 15 | 16 | 17 |

18 |

19 |

col -> xs

20 |

col -> xs

21 |

col -> xs

22 |

23 |

24 |

col-sm

25 |

col-sm

26 |

col-sm

27 |

28 |

29 |

col-md

30 |

col-md

31 |

col-md

32 |

33 |

34 |

col-lg

35 |

col-lg

36 |

col-lg

37 |

38 |

39 |

col-xl

40 |

col-xl

41 |

col-xl

42 |

43 |

44 |

col-xxl

45 |

col-xxl

46 |

col-xxl

47 |

48 |

49 | 50 | 55 | 56 | -------------------------------------------------------------------------------- /11-Bootstrap-grid/grid.css: -------------------------------------------------------------------------------- 1 | .row div { 2 | margin: 0.25rem; 3 | } 4 | 5 | .col { 6 | background-color: cyan; 7 | } 8 | .col-sm { 9 | background-color: red; 10 | } 11 | .col-md { 12 | background-color: yellow; 13 | } 14 | .col-lg { 15 | background-color: green; 16 | } 17 | .col-xl { 18 | background-color: blue; 19 | } 20 | .col-xxl { 21 | background-color: pink; 22 | } -------------------------------------------------------------------------------- /12-Bootstrap-elementos/alertas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Alertas 8 | 14 | 15 | 16 |

17 |

18 | Esto es una alerta y aquí el link 19 |

20 |

21 |

Well done!

22 |

23 |

Esto es un texto largo

24 |

25 |

26 | 40 |

Esto es una alerta con icono

41 |

42 |

46 | Este es un alert que se puede eliminar 47 | 53 |

54 | 61 | 62 |

63 | 66 |

67 | 68 | 73 | 95 | 96 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/badges.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Badges 8 | 14 | 15 | 16 |

17 |

Este es el título Nuevo!

18 |

19 | 22 |

23 | 24 | 25 | 26 | Éxito 27 | Error 28 | 29 | Éxito 30 | Error 31 |

32 | 33 | 38 | 39 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/forms-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Forms 8 | 14 | 15 | 16 |

17 |

18 |

19 | 25 | 31 | 37 | 43 |

44 |

45 | 52 | Estoy de acuerdo con las condiciones 55 |

56 |

57 |

58 | 66 | Soy menor de edad 69 |

70 |

71 | 79 | Soy mayor de edad 82 |

83 |

84 |

85 | 86 |

87 |

88 | 89 | Estoy de acuerdo con las condiciones 92 |

93 |

94 | 102 | Exito 105 | 106 | 113 | Danger radio 116 |

117 |

118 |

119 | 120 | 125 | 126 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/forms-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Forms 8 | 14 | 15 | 16 |

17 |

18 | Selecciona el rango 19 | 28 |

29 | @ 30 | 31 |

32 | Introduce tu Email 33 |

34 | 40 | @gmail.com 41 |

42 | Introduce tu Email 43 |

44 | 50 | @gmail.com 51 |

52 |

53 |

54 | 60 |

61 | 66 |

67 |

68 |

69 | 75 |

76 | 82 | 88 |

89 |

90 | 95 | 96 |

97 |

98 | 103 | 110 | 117 |

118 |

119 | 120 | Nombre label 121 |

122 |

123 |

124 | 125 | 130 | 131 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Forms 8 | 14 | 15 | 16 |

17 |

18 |

19 | Introduce tu nombre 20 | 27 |

Introduce tu nombre de pila

28 |

29 |

30 | 36 | ¿Eres mayor de edad? 39 |

40 |

41 | Introduce tu apellido 42 | 49 |

Introduce tu apellido

50 |

51 |

52 | Por defecto 53 | 54 |

55 |

56 | Email address 59 | 67 |

68 | We'll never share your email with anyone else. 69 |

70 |

71 |

72 | Password 73 | 78 |

79 |

80 | 81 | Check me out 84 |

85 |

86 | 87 |

88 |

89 | Selecciona tu ciudad 92 | 98 | 99 | 105 |

106 | 107 |

108 |

109 | 110 | 115 | 116 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/iconos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Iconos 8 | 14 | 18 | 19 | 20 |

21 |

Iconos en Bootstrap (Bootstrap Icons)

22 | 23 | 24 | 27 |

28 | 29 | 34 | 35 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/imagenes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Imágenes 8 | 14 | 15 | 16 |

17 |

22 | 23 |

24 |

29 | 30 |

31 | 32 | logo

37 |

38 | 39 | 44 | 45 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/jumbotron.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jumbotron 8 | 14 | 15 | 16 |

17 |

18 |

19 |

Custom jumbotron

20 |

21 | Using a series of utilities, you can create this jumbotron, just 22 | like the one in previous versions of Bootstrap. Check out the 23 | examples below for how you can remix and restyle it to your liking. 24 |

25 | 26 |

27 |

28 |

29 | 30 | 35 | 36 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/listas-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Listas 2 8 | 14 | 15 | 16 |

17 |

18 |

19 |

57 |

58 |

59 |

60 |

66 | Esta es la home 67 |

68 |

74 | Este es tu perfil - personalizado 75 |

76 |

82 | Estos son tus mensajes 83 |

84 |

90 | Aquí tienes los ajustes 91 |

92 |

93 |

94 |

95 |

96 | 97 | 102 | 103 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/listas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Listas 8 | 14 | 15 | 16 |

17 |

Item 1
Item 2
Item 3
Item 4
Item 5

24 |

35 |

Item 1
Item 2
Item 3
Item 4
Item 5

42 |

44 |
45 |
Primer item
46 |
Este es el texto del primer item
47 |
48 |
49 | Badge 50 |
51 |
Item 2
Item 3
Item 4
Item 5

57 |

Item 1
Item 2
Item 3
Item 4

63 |

64 | 65 |

66 |

67 | 68 | 73 | 74 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/modales.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modales 8 | 14 | 15 | 16 |

17 | 25 | 66 |

67 | 68 | 73 | 87 | 88 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/progress.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progress Bars 8 | 14 | 15 | 16 |

17 |

18 |

39%

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

32 |

33 |

34 | 35 | 40 | 41 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/spinners.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spinners 8 | 14 | 15 | 16 |

17 |

18 | 19 |

20 |

21 |

22 | 23 |

24 |

25 |

26 |

30 | 31 | 35 |

36 | 37 | 42 | 43 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/tablas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tablas 8 | 14 | 15 | 16 |

17 |

18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |

20 | List of users 21 |
Nombre	Apellido	Usuario
Gorka	Villar	gorkavi
Jorge	Etxeberria	jetxe77
María	Suescun	masus88
Julen	García	julgarcia90
Julen	García	julgarcia90
Julen	García	julgarcia90
Julen	García	julgarcia90
Footer	Footer	Footer

74 |

75 |

76 | 77 | 82 | 83 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/tarjetas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tarjetas 8 | 14 | 15 | 16 |

17 |

18 |

Este es el encabezado

19 |

20 |

Card title

21 |

Este es el body de la tarjeta

22 |

Item 1
Item 2
Item 3

27 |

28 |

29 | 30 |

31 |

36 |

37 |

38 |

Promoción

39 |

40 |

41 | Promoción especial nuevos alumnos 42 |

43 |

44 | Haciendo clic en el botón de abajo conseguirás hasta un 50% de 45 | descuento en tus siguientes compras 46 |

47 | 48 |

49 |

50 |

51 |

52 |

54 | Principal 55 |
57 | Secundario 58 |
60 | Terciario 61 |

63 |

64 |

65 |

Special title treatment

66 |

67 | With supporting text below as a natural lead-in to additional content. 68 |

69 | Go somewhere 70 |

71 |

72 |

73 | 74 | 79 | 80 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/tipografias.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tipografía 8 | 14 | 15 | 16 |

17 |

Este es un h1

18 |

Este es un h2

19 |

Este es un h3

20 |

Este es un h4

21 |

Este es un h5

22 |

Este es un h6

23 | 24 |

Esta es una clase h1

25 |

Esta es una clase h2

26 |

Esta es una clase h3

27 |

Esta es una clase h4

28 |

Esta es una clase h5

29 |

Esta es una clase h6

30 | 31 |

Display 1

32 |

Display 2

33 |

Display 3

34 |

Display 4

35 |

Display 5

36 |

Display 6

37 | 38 |

Vivamus eleifend odio magna, at convallis justo consectetur eu.

39 |

40 | ~~Morbi posuere, risus a porttitor tempor, sapien sem viverra tellus, non 41 | volutpat enim tellus non nunc.~~ Ut imperdiet diam leo, non luctus quam 42 | efficitur id. Etiam id est massa. Donec libero risus, varius a massa 43 | vitae, fringilla aliquam justo. Donec cursus id elit in fermentum. 44 | Suspendisse sodales velit venenatis viverra pulvinar. Donec leo enim, 45 | posuere et magna sit amet, venenatis mollis ante. Proin malesuada 46 | accumsan ultrices. Maur, Maur tristique molestie lorem 47 | imperdiet in. Maecenas molestie dui aliquet, ornare erat ac, fermentum 48 | nisi.

Donec nulla enim, pulvinar sed posuere a, dapibus sit amet turpis.

49 | 52 | Nunc lacinia, eros pellentesque interdum tincidunt, lectus felis 53 | vulputate mi, pellentesque hendrerit metus metus sed massa. Suspendisse 54 | potenti. In consectetur aliquet nisi eu laoreet. Praesent sagittis, 55 | dolor in mollis ornare, turpis turpis elementum nunc, sit amet gravida 56 | mi nibh ut neque. 57 |

58 | 59 |

Este es un texto responsive

60 | 61 |

62 | Este es un párrafo donde vamos a tener una lista. 63 |

Elemento 1
Elemento 2
Elemento 3

68 |

69 | 70 |

Este es un texto muy largo etc etc

71 | 72 |

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

73 | 74 |

Texto en MiNÚSCULAS

75 |

texto en mayúsculas

76 |

texto capitalizado

77 | 78 | 79 |

fs-1

80 |

fs-2

81 |

fs-3

82 |

fs-4

83 |

fs-5

84 |

fs-6

85 | 86 | Este es un enlace normal 87 | Este es un enlace sin color 88 | Este es un enlace sin subrayado 89 | 90 |

91 | 92 | 97 | 98 | -------------------------------------------------------------------------------- /12-Bootstrap-elementos/toasts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Toasts 8 | 14 | 15 | 16 |

17 | 20 |

21 |

28 | 39 |

Esto es el mensaje

40 |

41 |

42 |

45 |

46 | 47 |

Mensaje

48 |

49 |

50 | 51 |

Mensaje

52 |

53 |

54 |

55 | 56 | 61 | 72 | 73 | -------------------------------------------------------------------------------- /13-Sass/introsass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Intro a SASS 8 | 9 | 10 | 11 |

12 |

Este es el título

13 |

Este es un párrafo

14 |

15 |

Item 1
Item 2
Item 3

20 |

21 | 22 | 23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /13-Sass/sass/_builtin.scss: -------------------------------------------------------------------------------- 1 | //// Funciones con cadenas de texto 2 | @use "sass:string"; 3 | @use "sass:math"; 4 | @use "sass:list"; 5 | @use "sass:selector"; 6 | @use "sass:color"; 7 | 8 | @debug "hola"; 9 | @debug string.index("Helvetica Neue", "Neue"); 10 | 11 | $string: "Helvetica"; 12 | $newString: string.insert($string, " Bold", 10); 13 | 14 | @debug $newString; 15 | @debug string.length($newString); 16 | @debug string.slice($newString, 5, 9); 17 | 18 | @debug string.to-upper-case("Roboto Mono"); 19 | @debug string.to-lower-case("Roboto Mono"); 20 | 21 | @debug string.unique-id(); 22 | 23 | //// Funciones con números 24 | 25 | @debug math.$e; 26 | @debug math.$pi; 27 | 28 | @debug math.floor(4.6); 29 | @debug math.ceil(4.6); 30 | @debug math.round(4.4); 31 | 32 | @debug math.clamp(0, 256.36, 10); 33 | 34 | @debug math.max(3, 4, 6, 399, 10, 2); 35 | @debug math.min(3, 4, 6, 399, 10, 2); 36 | 37 | @debug math.abs(8); 38 | @debug math.abs(-8); 39 | 40 | @debug math.pow(2, 12); 41 | @debug math.pow(2, math.abs(-23)); 42 | 43 | @debug math.cos(math.$pi); 44 | @debug math.sin(math.$pi); 45 | @debug math.tan(math.$pi); 46 | 47 | //// Funciones con listas 48 | $lista1: 10px, 10px, 0px, 15px; 49 | 50 | @debug $lista1; 51 | @debug list.append($lista1, 25px, space); 52 | 53 | $border-custom: solid 1px #ccc; 54 | @debug list.index($border-custom, 1px); // 2 55 | @debug list.index($border-custom, 2px); // null 56 | 57 | // $border-2: [solid, 1px, #ccc]; 58 | // @debug list.is-bracketed($border-2); 59 | 60 | @debug list.join($lista1, $border-custom, auto); 61 | @debug list.length(list.join($lista1, $border-custom, auto)); 62 | @debug list.separator($border-custom); 63 | @debug list.separator(list.join($lista1, $border-custom, auto)); 64 | 65 | 66 | @debug list.set-nth($border-custom, 2, 2px); 67 | 68 | //// Funciones de selector 69 | $selector-1: "a"; 70 | $selector-2: ".disabled"; 71 | @debug selector.append($selector-1, $selector-2); 72 | 73 | //// Funciones de color 74 | 75 | $color: rgb(226, 81, 255); 76 | @debug color.adjust($color, $red: -50, $alpha: -0.5); 77 | $color-2: rgb(176, 81, 255, 0.5); 78 | 79 | @debug color.complement($color); 80 | $color-comp: #6eff51; 81 | @debug darken($color, 20%); 82 | $color-dark: #c300ea; 83 | @debug lighten($color, 20%); 84 | $color-light: #f3b7ff; 85 | 86 | @debug color.red($color); 87 | @debug color.green($color); 88 | @debug color.blue($color); 89 | 90 | @debug color.hue($color); 91 | 92 | @debug color.invert($color); 93 | $color-inv: #1dae00; -------------------------------------------------------------------------------- /13-Sass/sass/_componentes.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | border: none; 3 | padding: 0.25rem 0.5rem; 4 | color: #2b2b2b; 5 | 6 | &:hover { 7 | background-color: cyan; 8 | color: red; 9 | cursor: pointer; 10 | } 11 | } 12 | 13 | .btn-2 { 14 | @extend .btn; 15 | margin: 0.5rem; 16 | border-radius: 0.25rem; 17 | } -------------------------------------------------------------------------------- /13-Sass/sass/_estilos.scss: -------------------------------------------------------------------------------- 1 | @use "mixins"; 2 | 3 | body { 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | .container { 9 | width: 100%; 10 | background-color:blanchedalmond; 11 | min-height: 100vh; 12 | padding: 0.5rem; 13 | } 14 | 15 | h1 { 16 | margin: 0; 17 | @include mixins.formato-texto(); 18 | } 19 | 20 | p { 21 | @include mixins.formato-texto(#666666); 22 | } 23 | 24 | .listado { 25 | width: 10rem; 26 | background-color: aquamarine; 27 | padding: 0.5rem; 28 | 29 | ul { 30 | margin: 0 0.5rem; 31 | 32 | li { 33 | list-style: none; 34 | 35 | &:hover { 36 | color: white; 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /13-Sass/sass/_mixins.scss: -------------------------------------------------------------------------------- 1 | $text-color: #2b2b2b; 2 | 3 | @mixin formato-texto($bg-color: #f1f1f1) { 4 | color: $text-color; 5 | text-transform: uppercase; 6 | width: 50rem; 7 | background-color: $bg-color; 8 | } -------------------------------------------------------------------------------- /13-Sass/styles.css: -------------------------------------------------------------------------------- 1 | .btn, .btn-2 { 2 | border: none; 3 | padding: 0.25rem 0.5rem; 4 | color: #2b2b2b; 5 | } 6 | .btn:hover, .btn-2:hover { 7 | background-color: cyan; 8 | color: red; 9 | cursor: pointer; 10 | } 11 | 12 | .btn-2 { 13 | margin: 0.5rem; 14 | border-radius: 0.25rem; 15 | } 16 | 17 | body { 18 | padding: 0; 19 | margin: 0; 20 | } 21 | 22 | .container { 23 | width: 100%; 24 | background-color: blanchedalmond; 25 | min-height: 100vh; 26 | padding: 0.5rem; 27 | } 28 | 29 | h1 { 30 | margin: 0; 31 | color: #2b2b2b; 32 | text-transform: uppercase; 33 | width: 50rem; 34 | background-color: #f1f1f1; 35 | } 36 | 37 | p { 38 | color: #2b2b2b; 39 | text-transform: uppercase; 40 | width: 50rem; 41 | background-color: #666666; 42 | } 43 | 44 | .listado { 45 | width: 10rem; 46 | background-color: aquamarine; 47 | padding: 0.5rem; 48 | } 49 | .listado ul { 50 | margin: 0 0.5rem; 51 | } 52 | .listado ul li { 53 | list-style: none; 54 | } 55 | .listado ul li:hover { 56 | color: white; 57 | } 58 | 59 | /*# sourceMappingURL=styles.css.map */ 60 | -------------------------------------------------------------------------------- /13-Sass/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["sass/_componentes.scss","sass/_estilos.scss","sass/_mixins.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAIR;EAEI;EACA;;;ACbJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;ECZA,OAHS;EAIT;EACA;EACA,kBAJ4B;;;ADiBhC;EChBI,OAHS;EAIT;EACA;EACA,kBDc8B;;;AAGlC;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI","file":"styles.css"} -------------------------------------------------------------------------------- /13-Sass/styles.scss: -------------------------------------------------------------------------------- 1 | // Componentes 2 | @use "sass/componentes"; 3 | // namespace 4 | // $color -> comp.$color 5 | 6 | // Mixins 7 | @use "sass/mixins"; 8 | // $color -> $color 9 | 10 | // Estilos 11 | @use "sass/estilos"; 12 | 13 | // Paginas 14 | // página principal 15 | // página de contacto 16 | // página de aviso legal 17 | 18 | // Otros 19 | @use "sass/builtin"; -------------------------------------------------------------------------------- /14-15-Proyecto/assets/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/14-15-Proyecto/assets/img/bg.png -------------------------------------------------------------------------------- /14-15-Proyecto/assets/img/chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/14-15-Proyecto/assets/img/chart.png -------------------------------------------------------------------------------- /14-15-Proyecto/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/14-15-Proyecto/assets/img/logo.png -------------------------------------------------------------------------------- /14-15-Proyecto/assets/img/wallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Open-Bootcamp/HTML-CSS/fc1d84bc79409ace1f2e0c4331ce965464fd75fe/14-15-Proyecto/assets/img/wallet.png -------------------------------------------------------------------------------- /14-15-Proyecto/css/styles.css: -------------------------------------------------------------------------------- 1 | .btn-main, .btn-main-s { 2 | padding: 0.25rem 1.5rem; 3 | border-radius: 0.25rem; 4 | background-color: #0075FF; 5 | color: white; 6 | border: solid 1px #0075FF; 7 | } 8 | .btn-main:hover, .btn-main-s:hover { 9 | background-color: white; 10 | color: #0075FF; 11 | } 12 | .btn-main-s { 13 | font-size: 0.75rem; 14 | padding: 0.1rem 1rem; 15 | } 16 | 17 | .btn-sec, .btn-sec-s { 18 | padding: 0.25rem 1.5rem; 19 | border-radius: 0.25rem; 20 | color: #000000; 21 | background-color: transparent; 22 | border: none; 23 | } 24 | .btn-sec:hover, .btn-sec-s:hover { 25 | color: #888; 26 | } 27 | .btn-sec-s { 28 | font-size: 0.75rem; 29 | padding: 0.1rem 1rem; 30 | } 31 | 32 | .main-menu { 33 | margin-bottom: 0; 34 | } 35 | .main-menu li { 36 | font-size: 0.75rem; 37 | list-style: none; 38 | display: inline; 39 | margin-right: 2rem; 40 | } 41 | .main-menu li a { 42 | color: #000; 43 | text-decoration: none; 44 | } 45 | .main-menu li a:hover { 46 | text-decoration: underline; 47 | } 48 | 49 | .icon-sm i { 50 | font-size: 1.25rem; 51 | padding: 0.4rem 0.65rem; 52 | color: #0075FF; 53 | border-radius: 50%; 54 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2509803922); 55 | } 56 | 57 | .benefit { 58 | display: flex; 59 | flex-direction: column; 60 | } 61 | .benefit i { 62 | color: #0075FF; 63 | font-size: 7.5rem; 64 | text-align: center; 65 | } 66 | .benefit .description .title { 67 | font-size: 2rem; 68 | text-align: center; 69 | } 70 | .benefit .description .text { 71 | color: #888; 72 | font-weight: 600; 73 | text-align: center; 74 | } 75 | .benefit .cta { 76 | margin-top: 3rem; 77 | color: #0075FF; 78 | font-weight: 600; 79 | text-align: center; 80 | } 81 | 82 | .icon-desc { 83 | display: flex; 84 | flex-direction: column; 85 | align-items: center; 86 | justify-content: center; 87 | } 88 | .icon-desc i { 89 | color: #0075FF; 90 | font-size: 10rem; 91 | padding: 0; 92 | } 93 | .icon-desc .title { 94 | margin-top: -1rem; 95 | font-size: 1.5rem; 96 | font-weight: 600; 97 | } 98 | 99 | html { 100 | min-width: 100vw; 101 | } 102 | 103 | body { 104 | padding: 0; 105 | margin: 0; 106 | } 107 | 108 | .nav { 109 | display: flex; 110 | align-items: center; 111 | justify-content: space-around; 112 | width: 100%; 113 | height: 4rem; 114 | border-bottom: solid 1px #ddd; 115 | } 116 | 117 | .logo a img { 118 | max-width: 7rem; 119 | } 120 | 121 | .sec-home { 122 | display: flex; 123 | align-items: center; 124 | width: 100%; 125 | max-width: 992px; 126 | margin: auto; 127 | padding: 3rem; 128 | } 129 | .sec-home .home-cta { 130 | flex: 1; 131 | } 132 | .sec-home .home-cta .cta-text { 133 | color: #0075FF; 134 | } 135 | .sec-home .home-cta .home-title { 136 | width: 20rem; 137 | font-size: 3rem; 138 | } 139 | .sec-home .home-cta .home-description { 140 | width: 300px; 141 | } 142 | .sec-home .home-cta .lead-magnet .input-col { 143 | max-width: 200px; 144 | } 145 | 146 | .sec-features, .sec-onboarding .intro, .sec-benefits .intro { 147 | width: 100%; 148 | max-width: 992px; 149 | margin: auto; 150 | padding: 3rem; 151 | display: flex; 152 | flex-direction: column; 153 | align-items: center; 154 | } 155 | .sec-features .intro, .sec-onboarding .intro .intro, .sec-benefits .intro .intro { 156 | text-align: center; 157 | } 158 | .sec-features .intro h3, .sec-onboarding .intro .intro h3, .sec-benefits .intro .intro h3 { 159 | font-size: 1.8rem; 160 | } 161 | .sec-features .intro p, .sec-onboarding .intro .intro p, .sec-benefits .intro .intro p { 162 | font-size: 0.8rem; 163 | color: #888; 164 | } 165 | .sec-features .features, .sec-onboarding .intro .features, .sec-benefits .intro .features { 166 | display: flex; 167 | gap: 1rem; 168 | align-items: center; 169 | } 170 | .sec-features .features .text, .sec-onboarding .intro .features .text, .sec-benefits .intro .features .text { 171 | padding: 2rem 0; 172 | flex: 1; 173 | } 174 | .sec-features .features .text .feature, .sec-onboarding .intro .features .text .feature, .sec-benefits .intro .features .text .feature { 175 | display: flex; 176 | flex-direction: row; 177 | align-items: center; 178 | } 179 | .sec-features .features .text .feature .description, .sec-onboarding .intro .features .text .feature .description, .sec-benefits .intro .features .text .feature .description { 180 | margin-left: 1rem; 181 | max-width: 20rem; 182 | } 183 | .sec-features .features .text .feature .description .description-title, .sec-onboarding .intro .features .text .feature .description .description-title, .sec-benefits .intro .features .text .feature .description .description-title { 184 | font-size: 1.15rem; 185 | } 186 | .sec-features .features .text .feature .description .description-text, .sec-onboarding .intro .features .text .feature .description .description-text, .sec-benefits .intro .features .text .feature .description .description-text { 187 | font-size: 1rem; 188 | } 189 | .sec-features .features .image img, .sec-onboarding .intro .features .image img, .sec-benefits .intro .features .image img { 190 | max-width: 20rem; 191 | } 192 | 193 | .sec-benefits { 194 | border-top: 1px solid #ddd; 195 | } 196 | .sec-benefits .benefit-cards { 197 | width: 100%; 198 | padding: 0 2rem 2rem 2rem; 199 | } 200 | 201 | .sec-kpis { 202 | width: 100%; 203 | background-color: #0075FF; 204 | color: white; 205 | padding: 4rem; 206 | } 207 | .sec-kpis .kpi { 208 | display: flex; 209 | flex-direction: column; 210 | align-items: center; 211 | } 212 | .sec-kpis .kpi .number { 213 | font-size: 3.5rem; 214 | font-weight: 600; 215 | } 216 | .sec-kpis .kpi .desc { 217 | font-size: 0.9rem; 218 | color: rgba(255, 255, 255, 0.6666666667); 219 | } 220 | 221 | .sec-onboarding .steps { 222 | padding: 0 7rem 5rem 7rem; 223 | display: flex; 224 | align-items: center; 225 | justify-content: center; 226 | } 227 | .sec-onboarding .steps .step-separator { 228 | flex: 1; 229 | border-top: 2px solid #ddd; 230 | margin: 0 1rem; 231 | } 232 | 233 | .sec-footer-cta { 234 | background-color: #f4f8fe; 235 | padding: 5rem; 236 | background-image: url("../assets/img/bg.png"); 237 | background-repeat: no-repeat; 238 | background-position: 100%; 239 | } 240 | .sec-footer-cta .footer-cta { 241 | width: 50%; 242 | } 243 | .sec-footer-cta .footer-cta .cta-title { 244 | font-size: 2rem; 245 | } 246 | .sec-footer-cta .footer-cta .cta-description { 247 | font-size: 1.1rem; 248 | } 249 | 250 | @media (max-width: 768px) { 251 | .sec-onboarding .steps { 252 | flex-direction: column; 253 | } 254 | .sec-onboarding .steps .icon-desc .title { 255 | text-align: center; 256 | } 257 | 258 | .sec-footer-cta { 259 | background-image: none; 260 | } 261 | .sec-footer-cta .footer-cta { 262 | width: 100%; 263 | text-align: center; 264 | } 265 | 266 | .sec-benefits .intro { 267 | text-align: center; 268 | } 269 | .sec-benefits .intro h3 { 270 | font-size: 2rem; 271 | } 272 | 273 | .sec-features .intro h3, .sec-benefits .intro .intro h3, .sec-onboarding .intro .intro h3 { 274 | font-size: 2rem; 275 | } 276 | .sec-features .intro p, .sec-benefits .intro .intro p, .sec-onboarding .intro .intro p { 277 | font-size: 1rem; 278 | } 279 | } 280 | 281 | /*# sourceMappingURL=styles.css.map */ 282 | -------------------------------------------------------------------------------- /14-15-Proyecto/css/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/_components.scss","../sass/_globals.scss"],"names":[],"mappings":"AAaA;EAZI;EACA;EAaA,kBALS;EAMT;EACA;;AAEA;EACI;EACA,OAXK;;AAcT;EAlBA;EACA;;;AAuBJ;EA7BI;EACA;EA8BA;EACA;EACA;;AAEA;EACI;;AAGJ;EAlCA;EACA;;;AAuCJ;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEA;EACI;;;AAOZ;EACI;EACA;EACA,OA1DK;EA2DL;EACA;;;AAIR;EACI;EACA;;AACA;EACI,OApEK;EAqEL;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;EACJ;;AAGJ;EACI;EACA,OArFK;EAsFL;EACA;;;AAIR;EACI;EACA;EACA;EACA;;AACA;EACI,OAjGK;EAkGL;EACA;;AAEJ;EACI;EACA;EACA;;;ACzGR;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EA9BA;EACA;EACA;EACA;;AA6BA;EACI;;AACA;EACI,OD5BC;;AC8BL;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;;;AAMhB;EApDI;EACA;EACA;EACA;EAmDA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;;AAEJ;EACI;;AAMZ;EACI;;;AAMhB;EACI;;AAIA;EACI;EACA;;;AAIR;EACI;EACA,kBDxGS;ECyGT;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;;AASR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;;AAKZ;EACI,kBD3IW;EC4IX;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AAEJ;EACI;;;AAKZ;EAEQ;IACI;;EAEI;IACI;;;EAMhB;IACI;;EACA;IACI;IACA;;;EAKJ;IACI;;EACA;IACI;;;EAOJ;IACI;;EAEJ;IACI","file":"styles.css"} -------------------------------------------------------------------------------- /14-15-Proyecto/html/proyecto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Proyecto Final 8 | 14 | 18 | 19 | 20 | 21 | 42 |

43 |

44 |

45 | Jump start your portfolio 46 | 47 |

48 |

Jump start your crypto portfolio

49 |

50 | Coinbase is the easiest place to buy and sell cryptocurrecy. Sign up 51 | and get started today. 52 |

53 |

54 |

55 | 60 |

61 |

62 | 63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

Create your cryptocurrency portfolio today

73 |

74 | Coinbase has a variety of features that make it the best place to 75 | start trading 76 |

77 |

78 |

79 |

80 |

81 | 82 | 83 | 84 |

85 |

Manage your portfolio

86 |

87 | Buy and sell popular digital currencies, keep track of them in 88 | the one place. 89 |

90 |

91 |

92 |

93 | 94 | 95 | 96 |

97 |

Recurring buys

98 |

99 | Invest in cryptocurrency slowly over time by scheduling buys 100 | daily, weekly, or monthly. 101 |

102 |

103 |

104 |

105 | 106 | 107 | 108 |

109 |

Mobile apps

110 |

111 | Stay on top of the markets with the Coinbase app for Android or 112 | iOS. 113 |

114 |

115 |

116 |

117 |

118 |

119 |

120 |

121 |

122 |

123 |

124 |

The most trusted cryptocurrency platform

125 |

Here are a few reasons why you should choose Coinbase

126 |

127 |

128 |

129 | 130 |

131 |

Secure storage

132 |

133 | We store the vast majority of the digital assets in secure offline 134 | storage. 135 |

136 |

137 |

Learn how Coinbase keeps your funds safe and secure

138 |

139 |

140 | 141 |

142 |

Protected by insurance

143 |

144 | Coinbase maintains crypto insurance and all USD cash balances are 145 | covered by FDIC insurance, up to a maximum of $250,000. 146 |

147 |

148 |

149 | Learn how your crypto is covered by our insurance policy 150 |

151 |

152 |

153 | 154 |

155 |

Industry best practices

156 |

157 | Coinbase supports a variety of the most popular digital 158 | currencies. 159 |

160 |

161 |

162 | Learn how we implement industry best practices for account security 163 |

164 |

165 |

166 |

167 |

168 |

169 | $547B 170 | Quarterly volume traded 171 |

172 |

173 | 100+ 174 | Countries supported 175 |

176 |

177 | 89+M 178 | Verified users 179 |

180 |

181 |

182 |

183 |

Get started in a few minutes

184 |

185 | Coinbase supports a variety of the most popular digital currencies. 186 |

187 |

188 |

189 |

190 | 191 |

Create an account

192 |

193 |

194 |

195 | 196 |

Link your bank account

197 |

198 |

199 |

200 | 201 |

Purchase some coin

202 |

203 |

204 |

205 | 215 | 216 | 221 | 222 | -------------------------------------------------------------------------------- /14-15-Proyecto/sass/_globals.scss: -------------------------------------------------------------------------------- 1 | @use "components"; 2 | 3 | @mixin section-display { 4 | width: 100%; 5 | max-width: 992px; 6 | margin: auto; 7 | padding: 3rem; 8 | } 9 | 10 | html { 11 | min-width: 100vw; 12 | } 13 | 14 | body { 15 | padding: 0; 16 | margin: 0; 17 | } 18 | 19 | .nav { 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-around; 23 | width: 100%; 24 | height: 4rem; 25 | border-bottom: solid 1px #ddd; 26 | } 27 | 28 | .logo a img { 29 | max-width: 7rem; 30 | } 31 | 32 | .sec-home { 33 | display: flex; 34 | align-items: center; 35 | @include section-display(); 36 | .home-cta { 37 | flex: 1; 38 | .cta-text { 39 | color: components.$color-main; 40 | } 41 | .home-title { 42 | width: 20rem; 43 | font-size: 3rem; 44 | } 45 | .home-description { 46 | width: 300px; 47 | } 48 | .lead-magnet { 49 | .input-col { 50 | max-width: 200px; 51 | } 52 | } 53 | } 54 | } 55 | 56 | .sec-features { 57 | @include section-display(); 58 | display: flex; 59 | flex-direction: column; 60 | align-items: center; 61 | .intro { 62 | text-align: center; 63 | h3 { 64 | font-size: 1.8rem; 65 | } 66 | p { 67 | font-size: 0.8rem; 68 | color: #888; 69 | } 70 | } 71 | .features { 72 | display: flex; 73 | gap: 1rem; 74 | align-items: center; 75 | .text { 76 | padding: 2rem 0; 77 | flex: 1; 78 | .feature { 79 | display: flex; 80 | flex-direction: row; 81 | align-items: center; 82 | .description { 83 | margin-left: 1rem; 84 | max-width: 20rem; 85 | .description-title { 86 | font-size: 1.15rem; 87 | } 88 | .description-text { 89 | font-size: 1rem; 90 | } 91 | } 92 | } 93 | } 94 | .image { 95 | img { 96 | max-width: 20rem; 97 | } 98 | } 99 | } 100 | } 101 | 102 | .sec-benefits { 103 | border-top: 1px solid #ddd; 104 | .intro { 105 | @extend .sec-features, .intro; 106 | } 107 | .benefit-cards { 108 | width: 100%; 109 | padding: 0 2rem 2rem 2rem; 110 | } 111 | } 112 | 113 | .sec-kpis { 114 | width: 100%; 115 | background-color: components.$color-main; 116 | color: white; 117 | padding: 4rem; 118 | .kpi { 119 | display: flex; 120 | flex-direction: column; 121 | align-items: center; 122 | .number { 123 | font-size: 3.5rem; 124 | font-weight: 600; 125 | } 126 | .desc { 127 | font-size: 0.9rem; 128 | color: #ffffffaa; 129 | } 130 | } 131 | } 132 | 133 | .sec-onboarding { 134 | .intro { 135 | @extend .sec-features, .intro; 136 | } 137 | .steps { 138 | padding: 0 7rem 5rem 7rem; 139 | display: flex; 140 | align-items: center; 141 | justify-content: center; 142 | .step-separator { 143 | flex: 1; 144 | border-top: 2px solid #ddd; 145 | margin: 0 1rem; 146 | } 147 | } 148 | } 149 | 150 | .sec-footer-cta { 151 | background-color: components.$color-footer; 152 | padding: 5rem; 153 | background-image: url("../assets/img/bg.png"); 154 | background-repeat: no-repeat; 155 | background-position: 100%; 156 | .footer-cta { 157 | width: 50%; 158 | .cta-title { 159 | font-size: 2rem; 160 | } 161 | .cta-description { 162 | font-size: 1.1rem; 163 | } 164 | } 165 | } 166 | 167 | @media (max-width: 768px) { 168 | .sec-onboarding { 169 | .steps { 170 | flex-direction: column; 171 | .icon-desc { 172 | .title { 173 | text-align: center; 174 | } 175 | } 176 | } 177 | } 178 | 179 | .sec-footer-cta { 180 | background-image: none; 181 | .footer-cta { 182 | width: 100%; 183 | text-align: center; 184 | } 185 | } 186 | 187 | .sec-benefits { 188 | .intro { 189 | text-align: center; 190 | h3 { 191 | font-size: 2rem; 192 | } 193 | } 194 | } 195 | 196 | .sec-features { 197 | .intro { 198 | h3 { 199 | font-size: 2rem; 200 | } 201 | p { 202 | font-size: 1rem; 203 | } 204 | } 205 | } 206 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS --------------------------------------------------------------------------------

Encabezado 1

Listas

Lista ordenada

Lista desordenada

Estos son los resultados

Horas para aprender HTML

Imágenes

Vídeo

Audio

Colores

Esto es un h1 dentro del div

Esto es un h1 dentro del div interno

Espacios y tamaños

Cambiar la anchura

Cambiar la altura

Título de tarjeta

Custom Style Sheet

Esto es la sección de noticias

Posicionamiento en CSS

Visita San Sebastián

Este es el título

Regístrate en los formularios

Título

Unidades fijas y relativas

Título

Well done!

Este es el título Nuevo!

Iconos en Bootstrap (Bootstrap Icons)

Custom jumbotron

Este es el header

Card title

41 | Promoción especial nuevos alumnos 42 |

Special title treatment

Este es un h1

Este es un h2

Este es un h3

Este es un h4

Este es un h5

Este es un h6

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Este es el título

Jump start your crypto portfolio

Create your cryptocurrency portfolio today

Manage your portfolio

Recurring buys

Mobile apps

The most trusted cryptocurrency platform

Secure storage

Protected by insurance

Industry best practices

Get started in a few minutes

Create an account

Link your bank account

Purchase some coin

Earn up to $7 worth of crypto