SlideShare una empresa de Scribd logo
1 de 8
responsive
Flexbox, CSS grid, float y media queries
• Flexbox
• Box model
• Iconos svg
• Gradientes
• Float
• Imágenes
• CSS grid
• Media queries
Fontawesome
• Conectar kit al head
• Insertar iconos en elementos del body
Gradientes
Degradados de dos o mas colores con o sin transparencia
• Lineales
• Radiales
• Repeticion
.selector {
background: linear-gradient(<direccion>, <color1>, <color2>,…);
}
float
Para diseños de dos o más columnas
Por ejemplo una barra lateral y un contenido principal
Para imágenes
Propiedades:
float: left;
float: right;
float: none;
clear: both; /* el elemento salta a un nuevo espacio disponible */
Lab_05 Flex Awesome
Carpeta comprimida
Lab_05_nombre_apellido
Correo adjunto
Asunto: Lab_05 Nombre Apellido
Pagina web index.html
Hoja de estilos en una carpeta css de nombre main.css
Todos los nombres en minúsculas sin caracteres especiales y unidos por
_ (guion bajo)
Lab_05 requisitos
Favicon, title, SEO, semántica, archivos, validación w3, estilo, box
model, reseteo, comentarios
Header con logo
Pagina con contenido principal y contenido lateral
En el contenido principal flex-ítems con o imágenes y texto
En el aside lista de vínculos con formato y efectos al posicionar el
puntero
Footer con mínimo 6 iconos fontawesome de redes sociales, con
efectos.
El contenido debe al menos llenar toda la pantalla
Lab_06 Grid Responsive Rainbow
Cumplir todos los requisitos genéricos
Crear una pagina que se ajuste a tres versiones, dos de escritorio y otra para celular
Con cuatro secciones: header, main, aside, footer.
Dentro del main crear contenedores con iconos fontawesome.
Imágenes responsivas y optimas para cada pantalla.
Footer con iconos de redes sociales con efectos.
Cada salto a un nuevo estilo debe tener un marcado cambio en el background de las cuatro
secciones.
El background color de cada sección debe ser un gradiente.
Para la versión mas pequeña debe ser un arcoíris de fondo
Los gradientes deben declararse en un archivo rainbow.css

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Good/Bad Web Design
Good/Bad Web DesignGood/Bad Web Design
Good/Bad Web Design
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers
 
Intro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS PropertyIntro to Flexbox - A Magical CSS Property
Intro to Flexbox - A Magical CSS Property
 
Lab#9 graphic and color
Lab#9 graphic and colorLab#9 graphic and color
Lab#9 graphic and color
 
Css positioning
Css positioningCss positioning
Css positioning
 
Front end architecture patterns
Front end architecture patternsFront end architecture patterns
Front end architecture patterns
 
CSS Dasar #6 : Background
CSS Dasar #6 : BackgroundCSS Dasar #6 : Background
CSS Dasar #6 : Background
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentation
 
CSS
CSSCSS
CSS
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
CSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-classCSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-class
 
Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
 
CSS Dasar #10 : Specificity
CSS Dasar #10 : SpecificityCSS Dasar #10 : Specificity
CSS Dasar #10 : Specificity
 
Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4
 
CSS
CSSCSS
CSS
 
Lab#5 style and selector
Lab#5 style and selectorLab#5 style and selector
Lab#5 style and selector
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
 
Design sitemap
Design sitemapDesign sitemap
Design sitemap
 
CSS Boc model
CSS Boc model CSS Boc model
CSS Boc model
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
 

Similar a 0X0D - Responsive (20)

css3
css3css3
css3
 
Conceptos Básicos CSS
Conceptos Básicos CSSConceptos Básicos CSS
Conceptos Básicos CSS
 
hojas de_estilo_css
 hojas de_estilo_css hojas de_estilo_css
hojas de_estilo_css
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS
 
CSS estilos.pptx
CSS estilos.pptxCSS estilos.pptx
CSS estilos.pptx
 
Presentación3
Presentación3Presentación3
Presentación3
 
Instrucciones html
Instrucciones htmlInstrucciones html
Instrucciones html
 
Hablando de css
Hablando de cssHablando de css
Hablando de css
 
3 Estilos Css.pdf
3 Estilos Css.pdf3 Estilos Css.pdf
3 Estilos Css.pdf
 
Box Model
Box ModelBox Model
Box Model
 
Hojas de Estilo en Cascada - CSS
Hojas de Estilo en Cascada - CSSHojas de Estilo en Cascada - CSS
Hojas de Estilo en Cascada - CSS
 
Css
CssCss
Css
 
Curso css
Curso   cssCurso   css
Curso css
 
HTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y BoostrapHTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y Boostrap
 
Que es css
Que es cssQue es css
Que es css
 
Clase1
Clase1Clase1
Clase1
 
02 introduccion-css
02 introduccion-css02 introduccion-css
02 introduccion-css
 
06 Introduccion a CSS
06 Introduccion a CSS06 Introduccion a CSS
06 Introduccion a CSS
 

Más de Ronald Alexander Rivero (9)

0x06-css_box_model.pdf
0x06-css_box_model.pdf0x06-css_box_model.pdf
0x06-css_box_model.pdf
 
0x04-HTML_FORMS.pdf
0x04-HTML_FORMS.pdf0x04-HTML_FORMS.pdf
0x04-HTML_FORMS.pdf
 
0x03-HTML_elementos.pdf
0x03-HTML_elementos.pdf0x03-HTML_elementos.pdf
0x03-HTML_elementos.pdf
 
0x01-HTML_intro.pdf
0x01-HTML_intro.pdf0x01-HTML_intro.pdf
0x01-HTML_intro.pdf
 
0x00-Frontend_intro.pdf
0x00-Frontend_intro.pdf0x00-Frontend_intro.pdf
0x00-Frontend_intro.pdf
 
static libraries and dynamic libraries
static libraries and dynamic librariesstatic libraries and dynamic libraries
static libraries and dynamic libraries
 
File permissions symbolic_notation
File permissions symbolic_notationFile permissions symbolic_notation
File permissions symbolic_notation
 
Twos complement
Twos complementTwos complement
Twos complement
 
Low level programming: C libraries
Low level programming: C librariesLow level programming: C libraries
Low level programming: C libraries
 

Último

LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...JAVIER SOLIS NOYOLA
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdfenelcielosiempre
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfPaolaRopero2
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Alejandrino Halire Ccahuana
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfMaritzaRetamozoVera
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 

Último (20)

LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdf
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 

0X0D - Responsive

  • 2. Flexbox, CSS grid, float y media queries • Flexbox • Box model • Iconos svg • Gradientes • Float • Imágenes • CSS grid • Media queries
  • 3. Fontawesome • Conectar kit al head • Insertar iconos en elementos del body
  • 4. Gradientes Degradados de dos o mas colores con o sin transparencia • Lineales • Radiales • Repeticion .selector { background: linear-gradient(<direccion>, <color1>, <color2>,…); }
  • 5. float Para diseños de dos o más columnas Por ejemplo una barra lateral y un contenido principal Para imágenes Propiedades: float: left; float: right; float: none; clear: both; /* el elemento salta a un nuevo espacio disponible */
  • 6. Lab_05 Flex Awesome Carpeta comprimida Lab_05_nombre_apellido Correo adjunto Asunto: Lab_05 Nombre Apellido Pagina web index.html Hoja de estilos en una carpeta css de nombre main.css Todos los nombres en minúsculas sin caracteres especiales y unidos por _ (guion bajo)
  • 7. Lab_05 requisitos Favicon, title, SEO, semántica, archivos, validación w3, estilo, box model, reseteo, comentarios Header con logo Pagina con contenido principal y contenido lateral En el contenido principal flex-ítems con o imágenes y texto En el aside lista de vínculos con formato y efectos al posicionar el puntero Footer con mínimo 6 iconos fontawesome de redes sociales, con efectos. El contenido debe al menos llenar toda la pantalla
  • 8. Lab_06 Grid Responsive Rainbow Cumplir todos los requisitos genéricos Crear una pagina que se ajuste a tres versiones, dos de escritorio y otra para celular Con cuatro secciones: header, main, aside, footer. Dentro del main crear contenedores con iconos fontawesome. Imágenes responsivas y optimas para cada pantalla. Footer con iconos de redes sociales con efectos. Cada salto a un nuevo estilo debe tener un marcado cambio en el background de las cuatro secciones. El background color de cada sección debe ser un gradiente. Para la versión mas pequeña debe ser un arcoíris de fondo Los gradientes deben declararse en un archivo rainbow.css