BM Peluquería > beautymarket.es > marca2

En este documento vamos a intentar ofrecer modelos de maquetación de todos los estilos disponibles para maquetar los artículos y noticias.

Palabras o frases que no se partan

Ejemplo de estilo que no rompe los espacios en blanco: palabras que NO QUEREMOS QUE SE PARTAN Por ejemplo viene bien para número de teléfono, o para nombres de producto que quedan antiestéticos si acaban en una cifra o unas iniciales y quedan descolgadas.

Ejemplo de estilo para fotos con sumario antiguas

Este estilo alinea a izquierda o derecha la imagen, poniendole padding proporcional, y en tamaño de pantalla movil simplemente desaparece. In vehicula libero dui, sed tempus erat tincidunt non. Aliquam aliquam hendrerit leo a egestas. Phasellus ut eros ut dolor iaculis pharetra. Nam fermentum metus sed est volutpat, ac volutpat dolor tempor. Nunc cursus turpis et luctus ultricies. Nullam ut euismod nulla, eget ultrices massa. Nam scelerisque purus sed nisl lacinia, non maximus orci porta. Aliquam erat volutpat.

---

Sed ac venenatis ante. Fusce varius pellentesque elit, vitae bibendum enim rhoncus porttitor. Fusce non felis metus. Phasellus gravida rhoncus metus, ac accumsan dui scelerisque ac. Donec id mi metus. Ut finibus sollicitudin felis, quis feugiat ligula pulvinar et. Vestibulum et lacus diam. Maecenas ultricies lacus eu mauris sodales, ac fermentum purus aliquet. Cras iaculis erat vel magna euismod semper. Phasellus a pretium lorem.

Fusce quis facilisis sem. Ut sit amet venenatis purus. Donec ut elit ut metus interdum rutrum vitae sed nunc. In hac habitasse platea dictumst. Mauris sit amet eleifend libero, id lobortis lorem. In ornare sagittis nisi ac sodales. Curabitur rutrum ex eros, commodo consequat quam viverra eu. Sed nec nisi ut libero consectetur ultrices non a nisi. Donec et elementum elit, at accumsan est. Vivamus commodo placerat neque vitae facilisis. Donec condimentum lobortis ante, a accumsan magna tempor nec. Aliquam egestas vestibulum pretium. Quisque quis laoreet dolor. Quisque maximus sem vitae egestas hendrerit. Donec ligula nisi, tincidunt a felis ut, vulputate posuere neque. Pellentesque ornare sit amet libero non mattis.

Fusce quis facilisis sem. Ut sit amet venenatis purus. Donec ut elit ut metus interdum rutrum vitae sed nunc. In hac habitasse platea dictumst. Mauris sit amet eleifend libero, id lobortis lorem. In ornare sagittis nisi ac sodales.

Botón para descargar catálogo o para comprar algo

Sed nec nisi ut libero consectetur ultrices non a nisi. Donec et elementum elit, at accumsan est. Vivamus commodo placerat neque vitae facilisis. Donec condimentum lobortis ante, a accumsan magna tempor nec. Aliquam egestas vestibulum pretium. Quisque quis laoreet dolor. Quisque maximus sem vitae egestas hendrerit. Donec ligula nisi, tincidunt a felis ut, vulputate posuere neque. Pellentesque ornare sit amet libero non mattis.

Etiam justo quam, facilisis ut gravida quis, tincidunt vel libero. Duis vehicula diam non quam convallis, vitae vulputate leo euismod. Maecenas massa augue, dapibus eu enim eu, dignissim posuere ligula. Quisque ut neque eu metus rutrum lacinia. Nunc sem odio, volutpat vitae mattis sed, sollicitudin vel lacus. Morbi malesuada enim turpis, non venenatis est scelerisque eget. Donec auctor eros mi, sit amet mattis sapien consectetur nec.

Sumarios solo texto

Maecenas massa augue, dapibus eu enim eu, dignissim posuere ligula. Quisque ut neque eu metus rutrum lacinia. Nunc sem odio, volutpat vitae mattis sed, sollicitudin vel lacus. Morbi malesuada enim turpis, non venenatis est scelerisque eget. Donec auctor eros mi, sit amet mattis sapien consectetur nec. Vestibulum semper in ex sodales rhoncus. Proin semper non libero vel tempor. Pellentesque arcu libero, egestas nec erat nec, semper semper arcu. Suspendisse potenti. Mauris ut neque quis lorem aliquet pellentesque in in elit. Vestibulum maximus est at sollicitudin facilisis. Duis viverra pellentesque tincidunt.

Ut bibendum ac justo eget ullamcorper. Maecenas eu massa lacus. Morbi condimentum nulla sit amet molestie vehicula. Vivamus tempus massa et arcu tincidunt luctus. Suspendisse aliquet sodales posuere. Mauris porttitor pharetra ultrices. Suspendisse erat odio, malesuada quis massa id, facilisis gravida ante. Sed semper sit amet enim eget ullamcorper. Integer accumsan purus urna, ut cursus leo tincidunt vitae. Phasellus efficitur sollicitudin magna, a feugiat metus pretium et. Curabitur lobortis eros in risus posuere tincidunt.

Sed ac venenatis ante. Fusce varius pellentesque elit, vitae bibendum enim rhoncus porttitor. Fusce non felis metus. Phasellus gravida rhoncus metus, ac accumsan dui scelerisque ac. Donec id mi metus. Ut finibus sollicitudin felis, quis feugiat ligula pulvinar et. Vestibulum et lacus diam. Maecenas ultricies lacus eu mauris sodales, ac fermentum purus aliquet.

Esto es un experimento de cita que se pone al ancho completo.

Sed ac venenatis ante. Fusce varius pellentesque elit, vitae bibendum enim rhoncus porttitor. Fusce non felis metus. Phasellus gravida rhoncus metus, ac accumsan dui scelerisque ac. Donec id mi metus. Ut finibus sollicitudin felis, quis feugiat ligula pulvinar et. Vestibulum et lacus diam. Maecenas ultricies lacus eu mauris sodales, ac fermentum purus aliquet. Cras iaculis erat vel magna euismod semper. Phasellus a pretium lorem.

Citas para entrevistas

Las citas pueden ser a derecha o izquierda. En pantalla móvil se ponen al ancho completo. La imagen es opcional. El nombre es opcional. Fusce non felis metus. Phasellus gravida rhoncus metus, ac accumsan dui scelerisque ac. Donec id mi metus. Ut finibus sollicitudin felis, quis feugiat ligula pulvinar et. Vestibulum et lacus diam. Maecenas ultricies lacus eu mauris sodales, ac fermentum purus aliquet. Cras iaculis erat vel magna euismod semper. Phasellus a pretium lorem.

Ut bibendum ac justo eget ullamcorper. Maecenas eu massa lacus. Morbi condimentum nulla sit amet molestie vehicula. Vivamus tempus massa et arcu tincidunt luctus. Suspendisse aliquet sodales posuere. Mauris porttitor pharetra ultrices. Suspendisse erat odio, malesuada quis massa id, facilisis gravida ante. Sed semper sit amet enim eget ullamcorper. Integer accumsan purus urna, ut cursus leo tincidunt vitae. Phasellus efficitur sollicitudin magna, a feugiat metus pretium et. Curabitur lobortis eros in risus posuere tincidunt.

Suspendisse erat odio, malesuada quis massa id, facilisis gravida ante. Sed semper sit amet enim eget ullamcorper. Integer accumsan purus urna, ut cursus leo tincidunt vitae. Phasellus efficitur sollicitudin magna, a feugiat metus pretium et. Curabitur lobortis eros in risus posuere tincidunt.

Imagen centrada al ancho

In vehicula libero dui, sed tempus erat tincidunt non. Aliquam aliquam hendrerit leo a egestas. Phasellus ut eros ut dolor iaculis pharetra. Nam fermentum metus sed est volutpat, ac volutpat dolor tempor. Nunc cursus turpis et luctus ultricies. Nullam ut euismod nulla, eget ultrices massa. Nam scelerisque purus sed nisl lacinia, non maximus orci porta. Aliquam erat volutpat.

Imagen alineada a izquierda o derecha que en movil se pone al ancho completo

In vehicula libero dui, sed tempus erat tincidunt non. Aliquam aliquam hendrerit leo a egestas. Phasellus ut eros ut dolor iaculis pharetra. Nam fermentum metus sed est volutpat, ac volutpat dolor tempor. Nunc cursus turpis et luctus ultricies. Nullam ut euismod nulla, eget ultrices massa. Nam scelerisque purus sed nisl lacinia, non maximus orci porta. Aliquam erat volutpat.

Sed ac venenatis ante. Fusce varius pellentesque elit, vitae bibendum enim rhoncus porttitor. Fusce non felis metus. Phasellus gravida rhoncus metus, ac accumsan dui scelerisque ac. Donec id mi metus. Ut finibus sollicitudin felis, quis feugiat ligula pulvinar et. Vestibulum et lacus diam. Maecenas ultricies lacus eu mauris sodales, ac fermentum purus aliquet. Cras iaculis erat vel magna euismod semper. Phasellus a pretium lorem.

Imagen alineada a izquierda o derecha que en movil se pone al ancho completo: Opcion sumario

Fusce quis facilisis sem. Ut sit amet venenatis purus. Donec ut elit ut metus interdum rutrum vitae sed nunc. In hac habitasse platea dictumst. Mauris sit amet eleifend libero, id lobortis lorem. In ornare sagittis nisi ac sodales. Curabitur rutrum ex eros, commodo consequat quam viverra eu. Sed nec nisi ut libero consectetur ultrices non a nisi. Donec et elementum elit, at accumsan est. Vivamus commodo placerat neque vitae facilisis. Donec condimentum lobortis ante, a accumsan magna tempor nec. Aliquam egestas vestibulum pretium. Quisque quis laoreet dolor. Quisque maximus sem vitae egestas hendrerit. Donec ligula nisi, tincidunt a felis ut, vulputate posuere neque. Pellentesque ornare sit amet libero non mattis.

Fusce quis facilisis sem. Ut sit amet venenatis purus. Donec ut elit ut metus interdum rutrum vitae sed nunc. In hac habitasse platea dictumst. Mauris sit amet eleifend libero, id lobortis lorem. In ornare sagittis nisi ac sodales. Curabitur rutrum ex eros, commodo consequat quam viverra eu. Sed nec nisi ut libero consectetur ultrices non a nisi. Donec et elementum elit, at accumsan est. Vivamus commodo placerat neque vitae facilisis. Donec condimentum lobortis ante, a accumsan magna tempor nec. Aliquam egestas vestibulum pretium. Quisque quis laoreet dolor. Quisque maximus sem vitae egestas hendrerit. Donec ligula nisi, tincidunt a felis ut, vulputate posuere neque. Pellentesque ornare sit amet libero non mattis.

Imagen estrecha que se mantiene alineada en toda pantalla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel enim at nisi scelerisque imperdiet vel in odio. Integer est risus, ullamcorper faucibus elit in, iaculis ultrices lacus. Ut bibendum ac justo eget ullamcorper. Maecenas eu massa lacus. Morbi condimentum nulla sit amet molestie vehicula. Vivamus tempus massa et arcu tincidunt luctus. Suspendisse aliquet sodales posuere. Mauris porttitor pharetra ultrices. Suspendisse erat odio, malesuada quis massa id, facilisis gravida ante. Sed semper sit amet enim eget ullamcorper. Integer accumsan purus urna, ut cursus leo tincidunt vitae. Phasellus efficitur sollicitudin magna, a feugiat metus pretium et. Curabitur lobortis eros in risus posuere tincidunt.

In vehicula libero dui, sed tempus erat tincidunt non. Aliquam aliquam hendrerit leo a egestas. Phasellus ut eros ut dolor iaculis pharetra. Nam fermentum metus sed est volutpat, ac volutpat dolor tempor. Nunc cursus turpis et luctus ultricies. Nullam ut euismod nulla, eget ultrices massa. Nam scelerisque purus sed nisl lacinia, non maximus orci porta. Aliquam erat volutpat.

Sed ac venenatis ante. Fusce varius pellentesque elit, vitae bibendum enim rhoncus porttitor. Fusce non felis metus. Phasellus gravida rhoncus metus, ac accumsan dui scelerisque ac. Donec id mi metus. Ut finibus sollicitudin felis, quis feugiat ligula pulvinar et. Vestibulum et lacus diam. Maecenas ultricies lacus eu mauris sodales, ac fermentum purus aliquet. Cras iaculis erat vel magna euismod semper. Phasellus a pretium lorem.

Fusce quis facilisis sem. Ut sit amet venenatis purus. Donec ut elit ut metus interdum rutrum vitae sed nunc. In hac habitasse platea dictumst. Mauris sit amet eleifend libero, id lobortis lorem. In ornare sagittis nisi ac sodales. Curabitur rutrum ex eros, commodo consequat quam viverra eu. Sed nec nisi ut libero consectetur ultrices non a nisi. Donec et elementum elit, at accumsan est. Vivamus commodo placerat neque vitae facilisis. Donec condimentum lobortis ante, a accumsan magna tempor nec. Aliquam egestas vestibulum pretium. Quisque quis laoreet dolor. Quisque maximus sem vitae egestas hendrerit. Donec ligula nisi, tincidunt a felis ut, vulputate posuere neque. Pellentesque ornare sit amet libero non mattis.

Pruebas de estilos propios

Etiam justo quam, facilisis ut gravida quis, tincidunt vel libero. Duis vehicula diam non quam convallis, vitae vulputate leo euismod. Maecenas massa augue, dapibus eu enim eu, dignissim posuere ligula. Quisque ut neque eu metus rutrum lacinia. Nunc sem odio, volutpat vitae mattis sed, sollicitudin vel lacus. Morbi malesuada enim turpis, non venenatis est scelerisque eget. Donec auctor eros mi, sit amet mattis sapien consectetur nec. Vestibulum semper in ex sodales rhoncus. Proin semper non libero vel tempor. Pellentesque arcu libero, egestas nec erat nec, semper semper arcu. Suspendisse potenti. Mauris ut neque quis lorem aliquet pellentesque in in elit. Vestibulum maximus est at sollicitudin facilisis. Duis viverra pellentesque tincidunt.

Ejemplo para insertar un video de facebook o de youtube de manera responsive

Si hubiera que poner varios videos en la misma página no es necesario repetir el código css.

Fusce quis facilisis sem. Ut sit amet venenatis purus. Donec ut elit ut metus interdum rutrum vitae sed nunc. In hac habitasse platea dictumst. Mauris sit amet eleifend libero, id lobortis lorem. In ornare sagittis nisi ac sodales. Curabitur rutrum ex eros, commodo consequat quam viverra eu. Sed nec nisi ut libero consectetur ultrices non a nisi. Donec et elementum elit, at accumsan est. Vivamus commodo placerat neque vitae facilisis. Donec condimentum lobortis ante, a accumsan magna tempor nec. Aliquam egestas vestibulum pretium. Quisque quis laoreet dolor. Quisque maximus sem vitae egestas hendrerit. Donec ligula nisi, tincidunt a felis ut, vulputate posuere neque. Pellentesque ornare sit amet libero non mattis.

Productos para el brillo del cabello

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Créditos
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

"El hombre se descubre cuando se mide contra un obstáculo".
Antoine de Saint Exupery. Aviador y escritor francés, autor de la famosa obra El principito (1900-1944).