Advertisement
CarlosWGama

CSS - Aula 02

Nov 18th, 2020
884
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.70 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Atividade 2 - CSS</title>
  5.     <meta charset="utf-8"/>
  6.     <link rel="preconnect" href="https://fonts.gstatic.com">
  7.     <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  8.     <style>
  9.         html { height: 100%;}
  10.         body {
  11.             margin: 0px;
  12.             background: url('http://carloswgama.com.br/cesmac/scripts/fundo_cachorro.png');
  13.             height: 100%;
  14.         }
  15.  
  16.         #cabecalho {
  17.             background-color: #86AC41;
  18.             color: white;
  19.             padding: 20px;
  20.             font-family: 'Pacifico', cursive;
  21.         }
  22.  
  23.         #conteudo-principal {
  24.             background-color: rgb(219, 230, 228);
  25.             width: 70%;
  26.             height: 100%;
  27.             color: #86AC41;
  28.             padding:5px;
  29.             position: absolute;
  30.             left: 15%;
  31.         }
  32.  
  33.         .imagem {
  34.             border-radius: 10px;
  35.         }
  36.  
  37.         .btn-branco {
  38.             border: 3px solid white;
  39.             border-radius: 30px;
  40.             padding: 20px;
  41.             width: 80px;
  42.             display: inherit;
  43.             text-decoration: none;
  44.             color: white;
  45.             text-align: center;
  46.         }
  47.  
  48.         #formulario {
  49.             border: black 2px solid;
  50.             border-radius: 10px;
  51.             padding: 10px;
  52.             color: black;
  53.         }
  54.    
  55.         .btn-submit {
  56.             padding: 10px;
  57.             border: solid 1px #86AC41;
  58.             border-radius: 30px;
  59.             width: 100%;
  60.             color: #86AC41;
  61.             font-size: 20px;
  62.             text-align: center;
  63.         }
  64.  
  65.         #informacoes {
  66.             display: flex;
  67.             justify-content: space-around;
  68.         }
  69.     </style>
  70. </head>
  71. <body>
  72.  
  73.     <div id="cabecalho">
  74.         <!-- LOGOS -->
  75.         <h1>Clínica Online</h1>
  76.         <h2 style="position: absolute; top:60px; left:50px;">Bem Vindo!</h2>
  77.         <!-- BOTÃO SAIR -->
  78.         <a style="position: absolute; top: 20px; right: 20px;" class="btn-branco" href="http://google.com.br">Sair</a>
  79.     </div>
  80.  
  81.     <div id="conteudo-principal">
  82.    
  83.         <div id="informacoes">
  84.        
  85.             <img class="imagem" src="https://loremflickr.com/300/300"/>
  86.        
  87.             <div>
  88.                 <h3>Tabela de Preços</h3>
  89.                 <!-- PREÇO -->
  90.                 <p>Preço Consulta</p>
  91.                 <ul>
  92.                     <li>Gato (R$ 50)</li>
  93.                     <li>Cachorro (R$ 70)</li>
  94.                     <li>Pássaro (<s>R$ 40</s> por <mark><strong>R$ 20<strong></mark>)</li>
  95.                 </ul>
  96.  
  97.                 <hr/>
  98.  
  99.                 <!-- PERGUNTAS -->
  100.                 <h3>Dúvidas</h3>
  101.                 <details>
  102.                     <summary>Quais são as formas de pagamento?</summary>
  103.                     <ul>
  104.                         <li>Debito</li>
  105.                         <li>Cartão</li>
  106.                         <li>Boleto</li>
  107.                     </ul>
  108.                 </details>
  109.                
  110.                 <details>
  111.                     <summary>Horário de atendimento</summary>
  112.                     <p>Segunda a sexta das 8h as 20h</p>
  113.                 </details>
  114.             </div>
  115.         </div>
  116.  
  117.         <hr/>
  118.  
  119.  
  120.         <div id="formulario">
  121.             <!-- FORMULARIO -->
  122.             <h3>Contato</h3>
  123.             <form action="">
  124.                 <label for="dono">Dono:</label>
  125.                 <input type="text" id="dono" name="dono" placeholder="Carlos"/>
  126.                 <br/>
  127.  
  128.                 <label for="nome_animal">Nome animal:</label>
  129.                 <input type="text" id="animal" name="nome_animal" placeholder="Bob"/>
  130.                 <br/>
  131.                
  132.                 <label for="data">Data da consulta</label>
  133.                 <input type="date" id="data" name="data"/>
  134.                 <br/>
  135.                
  136.                 <label>Animal:</label>
  137.                 <input type="radio" value="gato" name="animal" checked="true" /> Gato
  138.                 <input type="radio" value="cachorro"  name="animal"/> Cachorro
  139.                 <input type="radio" value="gato"  name="animal"/> Pássaro
  140.                 <br/>
  141.                
  142.                 <label for="raca">Raça:</label>
  143.                 <input type="text" list="raca" name="raca" placeholder="Poodle"/>
  144.                 <datalist id="raca">
  145.                     <option>Vira-Lata</option>
  146.                     <option>Poodle</option>
  147.                     <option>Golden retriever</option>
  148.                     <option>Labrador</option>
  149.                 </datalist>
  150.                 <br/>
  151.  
  152.                 <label for="observacao">Observação:</label><br/>
  153.                 <textarea name="observacao" id="observacao" cols="50" rows=""> </textarea>
  154.  
  155.  
  156.                 <br/>
  157.                 <input type="submit" value="Confirmar!" class="btn-submit"/>
  158.             </form>
  159.  
  160.             <br clear="both"/>
  161.         </div>
  162.     </div>
  163.    
  164. </body>
  165. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement