API tools faq
paste
Advertisement
hercioneto

Exemplo HTML 3

hercioneto
Oct 26th, 2023
1,018
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Meu Site Exemplo</title>
  6.     <style type="text/css">
  7.         /* Reset CSS para garantir consistência entre navegadores */
  8. * {
  9.     margin: 0;
  10.     padding: 0;
  11.     box-sizing: border-box;
  12. }
  13.  
  14. /* Estilo do corpo da página */
  15. body {
  16.     font-family: Arial, sans-serif;
  17.     background-color: #f5f5f5;
  18.     color: #333;
  19.     line-height: 1.6;
  20.     margin: 0;
  21.     padding: 0;
  22. }
  23.  
  24. /* Estilo do cabeçalho */
  25. header {
  26.     background-color: #333;
  27.     color: #fff;
  28.     text-align: center;
  29.     padding: 20px;
  30. }
  31.  
  32. header h1 {
  33.     font-size: 2em;
  34. }
  35.  
  36. /* Estilo da navegação no cabeçalho */
  37. nav ul {
  38.     list-style: none;
  39. }
  40.  
  41. nav li {
  42.     display: inline;
  43.     margin: 0 20px;
  44. }
  45.  
  46. nav a {
  47.     color: #fff;
  48.     text-decoration: none;
  49. }
  50.  
  51. /* Estilo do conteúdo */
  52. .content {
  53.     background-color: #fff;
  54.     padding: 20px;
  55.     margin: 20px;
  56.     border-radius: 5px;
  57.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  58. }
  59.  
  60. .content h2 {
  61.     font-size: 1.5em;
  62.     color: #333;
  63. }
  64.  
  65. /* Estilo de botão de chamada para ação (CTA) */
  66. .cta-button {
  67.     display: inline-block;
  68.     background-color: #333;
  69.     color: #fff;
  70.     padding: 10px 20px;
  71.     text-decoration: none;
  72.     border-radius: 5px;
  73. }
  74.  
  75. .cta-button:hover {
  76.     background-color: #555;
  77. }
  78.  
  79. /* Estilo do rodapé */
  80. footer {
  81.     background-color: #333;
  82.     color: #fff;
  83.     text-align: center;
  84.     padding: 20px;
  85. }
  86.  
  87. .footer-section {
  88.     width: 25%;
  89.     display: inline-block;
  90.     vertical-align: top;
  91.     padding: 10px;
  92. }
  93.  
  94. .footer-section h3 {
  95.     font-size: 1.2em;
  96. }
  97.  
  98. .footer-section ul {
  99.     list-style: none;
  100. }
  101.  
  102. .footer-section li {
  103.     margin: 5px 0;
  104. }
  105.  
  106. /* Estilo de links no rodapé */
  107. footer a {
  108.     color: #fff;
  109.     text-decoration: none;
  110. }
  111.  
  112. footer a:hover {
  113.     text-decoration: underline;
  114. }
  115.  
  116.     </style>
  117. </head>
  118. <body>
  119.     <header>
  120.         <nav>
  121.             <ul>
  122.                 <li><a href="#">Início</a></li>
  123.                 <li><a href="#">Sobre Nós</a></li>
  124.                 <li><a href="#">Serviços</a></li>
  125.                 <li><a href="#">Contato</a></li>
  126.             </ul>
  127.         </nav>
  128.         <h1>Minha Empresa</h1>
  129.     </header>
  130.  
  131.     <section class="content">
  132.         <h2>Sobre Nós</h2>
  133.         <p>Somos uma empresa dedicada a fornecer soluções criativas e inovadoras para nossos clientes.</p>
  134.     </section>
  135.  
  136.     <section class="content">
  137.         <h2>Nossos Serviços</h2>
  138.         <ul>
  139.             <li>Serviço 1</li>
  140.             <li>Serviço 2</li>
  141.             <li>Serviço 3</li>
  142.         </ul>
  143.     </section>
  144.  
  145.     <section class="content">
  146.         <h2>Entre em Contato</h2>
  147.         <p>Se você tiver alguma pergunta ou precisar de nossos serviços, entre em contato conosco.</p>
  148.         <a href="contato.html" class="cta-button">Entre em Contato</a>
  149.     </section>
  150.  
  151.     <footer>
  152.         <div class="footer-section">
  153.             <h3>Redes Sociais</h3>
  154.             <ul>
  155.                 <li><a href="#">Facebook</a></li>
  156.                 <li><a href="#">Twitter</a></li>
  157.                 <li><a href="#">LinkedIn</a></li>
  158.             </ul>
  159.         </div>
  160.         <div class="footer-section">
  161.             <h3>Contato</h3>
  162.             <p>info@minhaempresa.com</p>
  163.         </div>
  164.         <div class="footer-section">
  165.             <h3>Newsletter</h3>
  166.             <p>Assine nossa newsletter para receber as últimas notícias e atualizações.</p>
  167.             <a href="newsletter.html" class="cta-button">Assinar</a>
  168.         </div>
  169.         <div class="footer-section">
  170.             <h3>Localização</h3>
  171.             <p>Rua Exemplo, 123<br>Cidade Exemplo</p>
  172.         </div>
  173.     </footer>
  174. </body>
  175. </html>
  176.  
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!