SHARE
TWEET

Untitled

a guest Jul 18th, 2019 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>dublaBlog</title>
  6.     <link rel="stylesheet" href="css/folhaDeEstilos.css">
  7. </head>
  8. <body>
  9.     <header>
  10.         <h1><span style="color: red">dubla</span>Blog</h1>
  11.         <nav class="menuDaPagina">
  12.             <ul class="listaMenu">
  13.                 <li class="itemMenu"><a href="">Home</a></li>
  14.                 <li class="itemMenu"><a href="">Anime</a></li>
  15.                 <li class="itemMenu"><a href="">Cartoons</a></li>
  16.                 <li class="itemMenu"><a href="">Filmes</a></li>
  17.             </ul>
  18.         </nav>
  19.     </header>
  20.     <article>
  21.         <section class="postagem">
  22.             <h4>Entrevista com Wendel Bezerra</h4>
  23.             <span style="color: red; font-size: 12px; display: block">Postado por Rafael Boeno</span>
  24.             <figure>
  25.                 <img src="imagens/wendel-bezerra-goku-300.png">
  26.                 <figcaption>
  27.                     <p>Maecenas in placerat urna. Proin velit ipsum, imperdiet sit amet lorem id, malesuada pellentesque
  28.                         risus. Duis porttitor justo sit amet malesuada varius. Nulla dignissim eros nec lectus suscipit
  29.                         imperdiet. Vivamus tristique quis odio sed tempor. Sed pulvinar, urna a tempor sodales, purus m
  30.                         etus mollis lectus, in congue enim nisl ut dui. Suspendisse interdum urna nec elit tincidunt por
  31.                         ta. Duis venenatis risus in semper sodales. Praesent feugiat rutrum fermentum. Nullam luctus aug
  32.                         ue sit amet ultrices cursus. Curabitur tristique ex at ante pharetra, quis scelerisque eros rutr
  33.                         um. Donec commodo nibh ligula, ut elementum risus ullamcorper quis. Nunc ut nunc sem. Mauris ut
  34.                         varius lorem, a tempor nibh. Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis
  35.                         rhoncus lorem orciDonec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis dois tres
  36.                         rhoncus lorem orc Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis teste um
  37.                         rhoncus lorem orc.
  38.                         Maecenas in placerat urna. Proin velit ipsum, imperdiet sit amet lorem id, malesuada pellentesque
  39.                         risus. Duis porttitor justo sit amet malesuada varius. Nulla dignissim eros nec lectus suscipit
  40.                         imperdiet. Vivamus tristique quis odio sed tempor. Sed pulvinar, urna a tempor sodales, purus m
  41.                         etus mollis lectus, in congue enim nisl ut dui. Suspendisse interdum urna nec elit tincidunt por
  42.                         ta. Duis venenatis risus in semper sodales. Praesent feugiat rutrum fermentum. Nullam luctus aug
  43.                         ue sit amet ultrices cursus. Curabitur tristique ex at ante pharetra, quis scelerisque eros rutr
  44.                         um. Donec commodo nibh ligula, ut elementum risus ullamcorper quis. Nunc ut nunc sem. Mauris ut
  45.                         varius lorem, a tempor nibh. Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis
  46.                         rhoncus lorem orciDonec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis dois tres
  47.                         rhoncus lorem orc Donec iaculis aliquet est, vitae feugiat turpis porttitor vel. Duis teste um
  48.                         rhoncus lorem orc.
  49.                     </p>
  50.                 </figcaption>
  51.             </figure>
  52.         </section>
  53.     </article>
  54.     <footer>
  55.  
  56.     </footer>
  57. </body>
  58. </html>
  59.      
  60. body{
  61.     background-color: #CCC5CD;
  62. }
  63.  
  64. header{
  65.     background-color: white;
  66.     width: auto;
  67.     height: 50px;
  68.     margin: auto 200px;
  69.     border-bottom:  1px solid;
  70. }
  71. a{
  72.     text-decoration: none;
  73.     color: inherit;
  74. }
  75.  
  76.  
  77. header h1{
  78.     display: inline;
  79.     position: absolute;
  80.     margin-left: 20px;
  81.     width: 141px;
  82.     margin-top: 7px;
  83. }
  84.  
  85. nav.menuDaPagina{
  86.     float: right;
  87.     position: relative;
  88. }
  89.  
  90. ul.listaMenu{
  91.     position: relative;
  92.     list-style: none;
  93. }
  94.  
  95. li.itemMenu{
  96.     position: relative;
  97.     display: inline-block;
  98.     padding: 7px;
  99.     margin-top: -15px;
  100.     margin-right: 30px;
  101. }
  102.  
  103. li:hover{
  104.     background-color: red;
  105.     color: white;
  106.     padding: 15px;
  107. }
  108.  
  109. article{
  110.     margin: auto 200px;
  111.     padding-top: 10px;
  112. }
  113.  
  114.  
  115. section.postagem{
  116.     width: 600px;
  117.     height: 275px;
  118.     background-color: white;
  119.     position: relative;
  120. }
  121.  
  122. section h4{
  123.     display: inline;
  124. }
  125.  
  126. figure{
  127.     margin: 0px;
  128. }
  129.  
  130. figure img{
  131.     float: left;
  132.     margin-right: 5px;
  133.     margin-bottom: 5px;
  134. }
  135.  
  136. figcaption p{
  137.     text-align: justify;
  138.     overflow: inherit;
  139.     text-overflow: ellipsis;
  140. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top