API tools faq
paste
Andrrms

Html e Php

Andrrms
Jan 13th, 2018
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.30 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.     <!--Import Google Icon Font-->
  4.     <link  href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  5.     <!--Import materialize.css-->
  6.     <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection">
  7.  
  8.     <!--Let browser know website is optimized for mobile-->
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <meta charset="utf-8">
  11. </head>
  12. <body>
  13.     <!--Import jQuery before materialize.js-->
  14.     <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  15.     <script type="text/javascript" src="js/materialize.min.js"></script>
  16.    
  17.  
  18.     <!--Start code-->
  19.     <nav class="deep-purple darken-1">
  20.         <div class="nav-wrapper container">
  21.             <a href="#!" class="brand-logo">LPBR</a>
  22.             <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
  23.             <!--Computer links-->
  24.             <ul id="nav-mobile" class="right hide-on-med-and-down">
  25.                 <li><a href="#!">Link 1</a></li>
  26.                 <li><a href="#!">Link 2</a></li>
  27.                 <li><a href="#!">Link 3</a></li>
  28.             </ul>
  29.             <!--Mobile sidenav links-->
  30.             <ul class="side-nav" id="mobile-sidenav">
  31.                 <li><a href="#!">Link 1</a></li>
  32.                 <li><a href="#!">Link 2</a></li>
  33.                 <li><a href="#!">Link 3</a></li>
  34.             </ul>
  35.         </div>
  36.     </nav>
  37.     <div class="slider">
  38.         <ul class="slides">
  39.             <li>
  40.                 <img src="https://lorempixel.com/1080/720/nature/1">
  41.                 <!--Caso o background seja claro, mude a classe white-text para black-text-->
  42.                 <div class="caption left-align white-text">
  43.                     <h3>Titulo noticia 1</h3>
  44.                     <h5>Descri&ccedil;ao da noticia</h5>
  45.                     <!--Botão com link da notícia-->
  46.                     <a href="#!" class="waves-effect waves-light white-text btn-flat">Ler mais</a>
  47.                 </div>
  48.             </li>
  49.             <li>
  50.                 <img src="https://lorempixel.com/1080/720/nature/2">
  51.                 <!--Caso o background seja claro, mude a classe white-text para black-text-->
  52.                 <div class="caption center-align white-text">
  53.                     <h3>Titulo noticia 2</h3>
  54.                     <h5>Descri&ccedil;ao da noticia</h5>
  55.                     <!--Botão com link da notícia-->
  56.                     <a href="#!" class="waves-effect waves-light white-text btn-flat">Ler mais</a>
  57.                 </div>
  58.             </li>
  59.             <li>
  60.                 <img src="https://lorempixel.com/1080/720/nature/3">
  61.                 <!--Caso o background seja claro, mude a classe white-text para black-text-->
  62.                 <div class="caption right-align white-text">
  63.                     <h3>Titulo noticia 3</h3>
  64.                     <h5>Descri&ccedil;ao da noticia</h5>
  65.                     <!--Botão com link da notícia-->
  66.                     <a href="#!" class="waves-effect waves-light white-text btn-flat">Ler mais</a>
  67.                 </div>
  68.             </li>
  69.         </ul>
  70.     </div>
  71.     <div class="container">
  72.         <br>
  73.         <!--Cria uma linha separadora-->
  74.         <div class="divider"></div>
  75.         <br>
  76.         <div class="row">
  77.             <div class="col l4 m4 s12">
  78.                 <div class="card sticky-action">
  79.                     <div class="card-image waves-effect waves-block waves-light">
  80.                         <img class="activator" src="http://materializecss.com/images/office.jpg">
  81.                     </div>
  82.                     <!--Face primária-->
  83.                     <div class="card-content">
  84.                         <span class="card-title activator grey-text text-darken-4">Titulo da noticia 1<i class="material-icons right">more_vert</i></span>
  85.                         <p>Pequena descri&ccedil;ao da noticia. Clique na imagem ou no titulo para ver mais detalhes.</p>
  86.                     </div>
  87.                     <!--Descrição maior da notícia-->
  88.                     <div class="card-reveal">
  89.                         <p>Um resumo um pouco maior da noticia aparecera aqui. Sabe quando voce nao quer ler a noticia mas quer saber do que se trata? Este lugar e ideal para mostrar essa informa&ccedil;ao.</p>
  90.                     </div>
  91.                     <!--Ações da notícia. Geralmente, ler mais já é o suficiente-->
  92.                     <div class="card-action">
  93.                         <a href="#!">Ler mais</a>
  94.                     </div>
  95.                 </div>
  96.             </div>
  97.             <div class="col l4 m4 s12">
  98.                 <div class="card sticky-action">
  99.                     <div class="card-image waves-effect waves-block waves-light">
  100.                         <img class="activator" src="http://materializecss.com/images/office.jpg">
  101.                     </div>
  102.                     <!--Face primária-->
  103.                     <div class="card-content">
  104.                         <span class="card-title activator grey-text text-darken-4">Titulo da noticia 2<i class="material-icons right">more_vert</i></span>
  105.                         <p>Pequena descri&ccedil;ao da noticia. Clique na imagem ou no titulo para ver mais detalhes.</p>
  106.                     </div>
  107.                     <!--Descrição maior da notícia-->
  108.                     <div class="card-reveal">
  109.                         <p>Um resumo um pouco maior da noticia aparecera aqui. Sabe quando voce nao quer ler a noticia mas quer saber do que se trata? Este lugar e ideal para mostrar essa informa&ccedil;ao.</p>
  110.                     </div>
  111.                     <!--Ações da notícia. Geralmente, ler mais já é o suficiente-->
  112.                     <div class="card-action">
  113.                         <a href="#!">Ler mais</a>
  114.                     </div>
  115.                 </div>
  116.             </div>
  117.             <div class="col l4 m4 s12">
  118.                 <div class="card sticky-action">
  119.                     <div class="card-image waves-effect waves-block waves-light">
  120.                         <img class="activator" src="http://materializecss.com/images/office.jpg">
  121.                     </div>
  122.                     <!--Face primária-->
  123.                     <div class="card-content">
  124.                         <span class="card-title activator grey-text text-darken-4">Titulo da noticia 3<i class="material-icons right">more_vert</i></span>
  125.                         <p>Pequena descri&ccedil;ao da noticia. Clique na imagem ou no titulo para ver mais detalhes.</p>
  126.                     </div>
  127.                     <!--Descrição maior da notícia-->
  128.                     <div class="card-reveal">
  129.                         <p>Um resumo um pouco maior da noticia aparecera aqui. Sabe quando voce nao quer ler a noticia mas quer saber do que se trata? Este lugar e ideal para mostrar essa informa&ccedil;ao.</p>
  130.                     </div>
  131.                     <!--Ações da notícia. Geralmente, ler mais já é o suficiente-->
  132.                     <div class="card-action">
  133.                         <a href="#!">Ler mais</a>
  134.                     </div>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     </div>
  139.     <footer class="page-footer deep-purple darken-1">
  140.         <div class="container">
  141.             <div class="row">
  142.                 <div class="col l6 s12">
  143.                     <h5 class="white-text">LPBR Families</h5>
  144.                     <p class="grey-text text-lighten-2">Aqui vem uma pequena descrição do site, sua finalidade, etc.</p>
  145.                 </div>
  146.                 <div class="col l4 offset-l2 s12">
  147.                     <h5 class="white-text">Links</h5>
  148.                     <ul>
  149.                         <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
  150.                         <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
  151.                         <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
  152.                         <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
  153.                     </ul>
  154.                 </div>
  155.             </div>
  156.         </div>
  157.         <div class="footer-copyright">
  158.             <div class="container">
  159.                 &copy; LPBR Families <?php echo date("Y"); ?>
  160.                 <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
  161.             </div>
  162.         </div>
  163.     </footer>
  164.  
  165.     <!--Activate jQuery scripts-->
  166.     <script>
  167.         $(".button-collapse").sideNav()(jQuery);
  168.     </script>
  169.     <!--Activate JS scripts-->
  170.     <script type="text/javascript">
  171.         $(document).ready(function(){
  172.             $('.slider').slider({
  173.                 // Todos os valores abaixo são valores padrão
  174.                 // Bolinhas em baixo do slider
  175.                 indicators: true,
  176.                 // Altura do slider
  177.                 height: 400,
  178.                 // Os valores abaixo são em ms (milisegundos)
  179.                 // Duração da animação de transição
  180.                 transition: 500,
  181.                 // Duração entre transações (tempo de leitura)
  182.                 interval: 6000
  183.             });
  184.         });
  185.     </script>
  186. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!