"Adriele - O Pequeno Príncipe"
Bootstrap 4.1.1 Snippet by psd11m

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <!--Configura a janela de visualização para deixar o site com boa aparência em todos os dispositivos--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> O Pequeno Príncipe </title> <!--Bootstrap link CDN--><!--Twitter Bootstrap--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!--CSS Incorporado--> <style> h1,h3,h4{text-align:center;} </style> </head> <body> <div id="livro"> <div id="autor"> <h3> Antoine de Saint-Exupéry</h3> </div> <div id="titulo"> <h1>O pequeno príncipe</h1> </div> <div id="figuras"> </div> <div id="aquarelas"> <!--CSS Inline--> <p style="text-align:right; padding:20px 40px;">Com aquarelas do autor</p> </div> <div id="rodape"> <h4>global</h4> </div> </div> </body> </html>
/*CSS Externo*/ body{background-color:rgb(255,255,251); color:black; } #livro{ border:1px solid yellow; margin:60px; } #autor{ color:mediumblue; padding:20px 40px; margin:5px;/*todas as 4 margens:5px*/ } #titulo{ font-family:cursive; padding:20px 40px; /*preenchimento superior e inferior:20px. Direito e esquerdo:40px*/ margin:5px; } #figuras{ height:530px; width:410px; background-image:url(https://data.whicdn.com/images/859682/original.jpg); background-size:cover;/*redimensiona o tamanho da imagem de fundo para cobrir todo o contêiner*/ float:right; margin:5px; } #aquarelas{ position:absolute; top:250px; margin:5px; padding:20px 40px; } #rodape{ height:60px; margin:5px; clear:both;/*Posiciona a div pra baixo*/ }

Related: See More

Vue Now UI Kit PRO

Questions / Comments: