API tools faq
paste
Advertisement
Guest User

test html

a guest
Jul 20th, 2018
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.99 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.   <head lang="pt-br">
  4. <meta chartset="utf-8">
  5.     <meta name="viewport" content="width=device-width">
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <title>Teatro Sim... Por que Não?!!!</title>
  8.     <style>
  9.  
  10.     * {box-sizing:border-box}
  11.  
  12.     /* Slideshow container */
  13.     .slideshow-container {
  14.       max-width: 1000px;
  15.       position: relative;
  16.       margin: auto;
  17.     }
  18.     /* Hide the images by default */
  19.     .mySlides {
  20.         display: none;
  21.     }
  22.  
  23.  
  24.     /* Next & previous buttons */
  25.    .prev, .next {
  26.      cursor: pointer;
  27.       position: absolute;
  28.       top: 50%;
  29.       width: auto;
  30.       margin-top: -22px;
  31.       padding: 16px;
  32.       color: white;
  33.       font-weight: bold;
  34.       font-size: 18px;
  35.       transition: 0.6s ease;
  36.       border-radius: 0 3px 3px 0;
  37.     }
  38.  
  39.     /* Position the "next button" to the right */
  40.     .next {
  41.       right: 0;
  42.       border-radius: 3px 0 0 3px;
  43.     }
  44.  
  45.     /* On hover, add a black background color with a little bit see-through */
  46.     .prev:hover, .next:hover {
  47.       background-color: rgba(0,0,0,0.8);
  48.     }
  49.  
  50.     /* Caption text */
  51.     .text {
  52.       color: #f2f2f2;
  53.       font-size: 15px;
  54.       padding: 8px 12px;
  55.       position: absolute;
  56.       bottom: 8px;
  57.       width: 100%;
  58.       text-align: center;
  59.     }
  60.  
  61.     /* Number text (1/3 etc) */
  62.     .numbertext {
  63.       color: #f2f2f2;
  64.       font-size: 12px;
  65.       padding: 8px 12px;
  66.       position: absolute;
  67.       top: 0;
  68.     }
  69.  
  70.      The dots/bullets/indicators
  71.     .dot {
  72.       cursor: pointer;
  73.       height: 15px;
  74.       width: 15px;
  75.       margin: 0 2px;
  76.       background-color: #bbb;
  77.       border-radius: 50%;
  78.       display: inline-block;
  79.       transition: background-color 0.6s ease;
  80.     }
  81.  
  82.     .active, .dot:hover {
  83.       background-color: #717171;
  84.     }
  85.  
  86.     /* Fading animation */
  87.     .fade {
  88.       -webkit-animation-name: fade;
  89.       -webkit-animation-duration: 1.5s;
  90.       animation-name: fade;
  91.       animation-duration: 1.5s;
  92.     }
  93.  
  94.     @-webkit-keyframes fade {
  95.       from {opacity: .4}
  96.       to {opacity: 1}
  97.     }
  98.  
  99.     @keyframes fade {
  100.       from {opacity: .4}
  101.       to {opacity: 1}
  102.     }
  103.  
  104.     /* -------------------------------------
  105.         INLINED WITH htmlemail.io/inline
  106.     ------------------------------------- */
  107.     /* -------------------------------------
  108.         RESPONSIVE AND MOBILE FRIENDLY STYLES
  109.     ------------------------------------- */
  110.     @media only screen and (max-width: 620px) {
  111.       table[class=body] h1 {
  112.         font-size: 28px !important;
  113.         margin-bottom: 10px !important;
  114.       }
  115.       table[class=body] p,
  116.             table[class=body] ul,
  117.             table[class=body] ol,
  118.             table[class=body] td,
  119.             table[class=body] span,
  120.             table[class=body] a {
  121.         font-size: 16px !important;
  122.       }
  123.       table[class=body] .wrapper,
  124.             table[class=body] .article {
  125.         padding: 10px !important;
  126.       }
  127.       table[class=body] .content {
  128.         padding: 0 !important;
  129.       }
  130.       table[class=body] .container {
  131.         padding: 0 !important;
  132.         width: 100% !important;
  133.       }
  134.       table[class=body] .main {
  135.         border-left-width: 0 !important;
  136.         border-radius: 0 !important;
  137.         border-right-width: 0 !important;
  138.       }
  139.       table[class=body] .btn table {
  140.         width: 100% !important;
  141.       }
  142.       table[class=body] .btn a {
  143.         width: 100% !important;
  144.       }
  145.       table[class=body] .img-responsive {
  146.         height: auto !important;
  147.         max-width: 100% !important;
  148.         width: auto !important;
  149.       }
  150.     }
  151.  
  152.     /* -------------------------------------
  153.         PRESERVE THESE STYLES IN THE HEAD
  154.     ------------------------------------- */
  155.     @media all {
  156.       .ExternalClass {
  157.         width: 100%;
  158.       }
  159.       .ExternalClass,
  160.             .ExternalClass p,
  161.             .ExternalClass span,
  162.             .ExternalClass font,
  163.             .ExternalClass td,
  164.             .ExternalClass div {
  165.         line-height: 100%;
  166.       }
  167.       .apple-link a {
  168.         color: inherit !important;
  169.         font-family: inherit !important;
  170.         font-size: inherit !important;
  171.         font-weight: inherit !important;
  172.         line-height: inherit !important;
  173.         text-decoration: none !important;
  174.       }
  175.       .btn-primary table td:hover {
  176.         background-color: #34495e !important;
  177.       }
  178.       .btn-primary a:hover {
  179.         background-color: #34495e !important;
  180.         border-color: #34495e !important;
  181.       }
  182.     }
  183.     </style>
  184.   </head>
  185.   <body class="" style="background-color: #fff; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
  186.     <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
  187.       <tr>
  188.         <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
  189.         <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
  190.           <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
  191.  
  192.             <!-- START CENTERED WHITE CONTAINER -->
  193.             <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
  194.             <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
  195.  
  196. <!-- START MAIN CONTENT AREA -->
  197. <tr>
  198.   <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
  199.   <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
  200.   <tr>
  201.   <td>
  202.  <!-- INIT CAROUSEL -->
  203.  
  204.   <!-- Slideshow container -->
  205. <div class="slideshow-container">
  206.  
  207.   <!-- Full-width images with number and caption text -->
  208.   <div class="mySlides fade" style="text-align: center;" >
  209.     <div class="numbertext" >A FARSA DO ADVOGADO PATHELIN</div>
  210.     <img alt="Imagem." src="https://i.imgur.com/2J92Fph.jpg" style="width:100%">
  211.     <div class="text">A farsa do advogado Pathelin.</div>
  212.   </div>
  213.  
  214.   <div class="mySlides fade" style="text-align: center;" >
  215.     <div class="numbertext">HIPOTERMIA</div>
  216.     <img alt="Imagem." src="https://i.imgur.com/9K4M2o0.jpg" style="width:100%">
  217.     <div class="text">Hipotermia</div>
  218.   </div>
  219.  
  220.  
  221.   <!-- Next and previous buttons -->
  222.   <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  223.   <a class="next" onclick="plusSlides(1)">&#10095;</a>
  224. </div>
  225. <br>
  226.  
  227. <!-- The dots/circles -->
  228. <div style="text-align:center">
  229.   <span class="dot" onclick="currentSlide(1)"></span>
  230.   <span class="dot" onclick="currentSlide(2)"></span>
  231. </div>
  232.  
  233.  
  234.  <!-- END CAROUSEL -->
  235.   </td>
  236.   </tr>
  237.   </table>
  238.   </td>
  239. </tr>
  240. <!-- END MAIN CONTENT AREA -->
  241.             </table>
  242.  
  243.             <!-- START FOOTER -->
  244.             <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
  245.               <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
  246.                 <tr>
  247.                   <td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
  248.                     <span class="apple-link" style="color: #999999; font-size: 18px; text-align: center;"><a href="https://teatrosimporquenao.wordpress.com/">Teatro Sim... Porque Não?!!!</a></span>
  249.                   </td>
  250.                 </tr>
  251.                 <tr>
  252.                   <td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;opacity:0.5;">
  253.                     Created by <a href="https://github.com/andersonbosa" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;"><span style="color:rgb(180,140,255);">Anderson Bosa<span></a>.
  254.                     <br>
  255.                     <p>&copy; Anderson Bosa -  All rights reserved.</p>
  256.                   </td>
  257.                 </tr>
  258.               </table>
  259.             </div>
  260.             <!-- END FOOTER -->
  261.  
  262.           <!-- END CENTERED WHITE CONTAINER -->
  263.           </div>
  264.         </td>
  265.         <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
  266.       </tr>
  267.     </table>
  268.   </body>
  269. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!