"Pilar-Site"
Bootstrap 4.1.1 Snippet by psd13t

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="pt-br"> <head> <title>Create a Site</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #Primary { width: 33.333333333333%; background-color:powderblue; color:red; text-align=justify; font-size:12px; } #Secondary { width: 33.333333333333%; } #Tertiary { width: 33.333333333333%; } #Tertiary .row { border: 1px solid blue; padding: 5px; } #Tertiary .row .col { border: 1px solid powderblue; padding: 5px; } .produtos { text-align:center; border:1px solid red; } .pdesc { font-size: 70%; width: 90%; } img { width: 90%; } </style> </head> <body> <div class="container"> <div id="Primary"> <div style="font-size:24px;font-weight:bold;">Mirror Fashion</div> <div style="font-size:16px;font-style:italic;font-weight:bold;">Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios. </div> <p>Confira nossas promoções. Receba informações sobre nossos lançamentos por email. Navegue por todos nossos produtos em catálogo. Compre sem sair de casa.</p> </div> <div id="Secondary"> <div style="font-size:24px;font-weight:bold;">Fotos Lindas</div> <img style="width: 25%;" src="https://miro.medium.com/max/1386/1*6cN0Jfr2QodKbaiAuFXlIA.jpeg" alt="Linda Audrey Hepburn"> <img style="width: 46%;" src="https://www.ecopetit.cat/wpic/mpic/83-837892_beautiful-dog-wallpaper.jpg" alt="Lindo cachorro"> <img style="width: 25%;" src="https://i2.wp.com/theverybesttop10.com/wp-content/uploads/2016/10/Top-10-Picture-Purrfect-Totally-Photogenic-Beautiful-Cats-9-510x438.jpg" alt="Lindo gato preto"> </div> <div id="Tertiary"> <div style="font-size:24px;font-weight:bold;">Produtos de Beleza Nívea</div> <div class="row"> <div class="col" class="produtos"> <!-- 1--> <img src="https://drogariasp.vteximg.com.br/arquivos/ids/378473-500-500/Nivea-Creme-Tratamento-Lata-56g_Drogaria-SP_52981_3.jpg?v=637088334972000000" alt="Creme para as mãos"> <div class="pdesc"><p>Nivea Creme Tratamento Lata 56g</p></div> </div> <div class="col" class="produtos"> <!-- 2--> <img src="https://araujo.vteximg.com.br/arquivos/ids/3910680-1000-1000/04005808850617.jpg?v=637013917195930000" alt="Protetor labial"> <div class="pdesc">Protetor Labial Nivea Original Care Stick 4,8g</div> </div> <div class="col" class="produtos"> <!-- 3--> <img src="https://www.drogariaminasbrasil.com.br/media/product/89d/protetor-labial-nivea-med-repair-4-8g-9c1.jpg" alt="Protetor Labial Med Repair"> <div class="pdesc">Protetor Labial Nivea Med Repair 4,8g</div> </div> </div> <div class="row"> <div class="col"> <!-- 4--> <img src="https://img.drogasil.com.br/catalog/product/n/i/nivea-amora-shinne.jpg" alt="Protetor Labial Amora Shine"> <div class="pdesc">Protetor Labial Nivea Amora Shine</div> </div> <div class="col"> <!-- 5--> <img src="https://epocacosmeticos.vteximg.com.br/arquivos/ids/361165-320-320/4005808311286-2.jpg?v=637078676647430000" alt="Hidratante Desodorante Firmador"> <div class="pdesc">Hidratante Desodorante Nivea Firmador Q10 + Vitamina C</div> </div> <div class="col"> <!-- 6--> <img src="https://www.drogariaminasbrasil.com.br/media/product/491/hidratante-nivea-q10-com-vitamina-c-200ml-ee0.jpg" alt="Hidratante Q10 Com Vitamina C"> <div class="pdesc">Hidratante Nivea Q10 Com Vitamina C 200ml</div> </div> </div> <div class="row"> <div class="col"> <!-- 7--> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0AKjl0mEtgCL7BX3NQCMr_fqkzPFIE1aCasXA-jGQA4Uqhrup&s" alt="Óleo Firmador Antiestrias"> <div class="pdesc">Nivea Óleo Firmador Antiestrias</div> </div> <div class="col"> <!-- 8--> <img src="https://3.bp.blogspot.com/-Hz-7mQiutW0/Tr6wrFHMQUI/AAAAAAAADDw/2toQ2Ga1vk4/w1200-h630-p-k-no-nu/nivea.jpg" alt="Nivea Oleo para Banho"> <div class="pdesc">Nivea Oleo para Banho Natural Oil</div> </div> <div class="col"> <!-- 9--> <img src="https://io.convertiez.com.br/m/drogal/shop/products/images/5102090/medium/nivea-visage-sab-fc-gel-ss150_2058.jpg" alt="Sabonete Em Gel"> <div class="pdesc">Sabonete Em Gel Nivea Pele Normal A Seca 150ml</div> </div> </div> <div class="row"> <div class="col"> <!-- 10--> <img src="https://cdn-cosmos.bluesoft.com.br/products/nivea-invisible-black-white-clear-aerosol-feminino-150-ml_600x600-PU6d7c2_1.jpg" alt="Desodorante Aerossol Invisible Black and White Feminino"> <div class="pdesc">Desodorante Nivea Aerossol Invisible Black and White Feminino</div> </div> <div class="col"> <!-- 11-- > <img src="https://cdn-cosmos.bluesoft.com.br/products/nivea-invisible-black-white-clear-aerosol-feminino-150-ml_600x600-PU6d7c2_1.jpg" alt="Desodorante Aerossol Invisible Black and White Feminino"> <div class="pdesc">Desodorante Nivea Aerossol Invisible Black and White Feminino</div --> </div> <div class="col"> <!-- 12-- > <img src="https://cdn-cosmos.bluesoft.com.br/products/nivea-invisible-black-white-clear-aerosol-feminino-150-ml_600x600-PU6d7c2_1.jpg" alt="Desodorante Aerossol Invisible Black and White Feminino"> <div class="pdesc">Desodorante Nivea Aerossol Invisible Black and White Feminino</div --> </div> </div> </div> </div> </body> </html>

Related: See More

Material Bootstrap Wizard

Questions / Comments: