Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Atividade 2 - CSS</title>
- <meta charset="utf-8"/>
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
- <style>
- html { height: 100%;}
- body {
- margin: 0px;
- background: url('http://carloswgama.com.br/cesmac/scripts/fundo_cachorro.png');
- height: 100%;
- }
- #cabecalho {
- background-color: #86AC41;
- color: white;
- padding: 20px;
- font-family: 'Pacifico', cursive;
- }
- #conteudo-principal {
- background-color: rgb(219, 230, 228);
- width: 70%;
- height: 100%;
- color: #86AC41;
- padding:5px;
- position: absolute;
- left: 15%;
- }
- .imagem {
- border-radius: 10px;
- }
- .btn-branco {
- border: 3px solid white;
- border-radius: 30px;
- padding: 20px;
- width: 80px;
- display: inherit;
- text-decoration: none;
- color: white;
- text-align: center;
- }
- #formulario {
- border: black 2px solid;
- border-radius: 10px;
- padding: 10px;
- color: black;
- }
- .btn-submit {
- padding: 10px;
- border: solid 1px #86AC41;
- border-radius: 30px;
- width: 100%;
- color: #86AC41;
- font-size: 20px;
- text-align: center;
- }
- #informacoes {
- display: flex;
- justify-content: space-around;
- }
- </style>
- </head>
- <body>
- <div id="cabecalho">
- <!-- LOGOS -->
- <h1>Clínica Online</h1>
- <h2 style="position: absolute; top:60px; left:50px;">Bem Vindo!</h2>
- <!-- BOTÃO SAIR -->
- <a style="position: absolute; top: 20px; right: 20px;" class="btn-branco" href="http://google.com.br">Sair</a>
- </div>
- <div id="conteudo-principal">
- <div id="informacoes">
- <img class="imagem" src="https://loremflickr.com/300/300"/>
- <div>
- <h3>Tabela de Preços</h3>
- <!-- PREÇO -->
- <p>Preço Consulta</p>
- <ul>
- <li>Gato (R$ 50)</li>
- <li>Cachorro (R$ 70)</li>
- <li>Pássaro (<s>R$ 40</s> por <mark><strong>R$ 20<strong></mark>)</li>
- </ul>
- <hr/>
- <!-- PERGUNTAS -->
- <h3>Dúvidas</h3>
- <details>
- <summary>Quais são as formas de pagamento?</summary>
- <ul>
- <li>Debito</li>
- <li>Cartão</li>
- <li>Boleto</li>
- </ul>
- </details>
- <details>
- <summary>Horário de atendimento</summary>
- <p>Segunda a sexta das 8h as 20h</p>
- </details>
- </div>
- </div>
- <hr/>
- <div id="formulario">
- <!-- FORMULARIO -->
- <h3>Contato</h3>
- <form action="">
- <label for="dono">Dono:</label>
- <input type="text" id="dono" name="dono" placeholder="Carlos"/>
- <br/>
- <label for="nome_animal">Nome animal:</label>
- <input type="text" id="animal" name="nome_animal" placeholder="Bob"/>
- <br/>
- <label for="data">Data da consulta</label>
- <input type="date" id="data" name="data"/>
- <br/>
- <label>Animal:</label>
- <input type="radio" value="gato" name="animal" checked="true" /> Gato
- <input type="radio" value="cachorro" name="animal"/> Cachorro
- <input type="radio" value="gato" name="animal"/> Pássaro
- <br/>
- <label for="raca">Raça:</label>
- <input type="text" list="raca" name="raca" placeholder="Poodle"/>
- <datalist id="raca">
- <option>Vira-Lata</option>
- <option>Poodle</option>
- <option>Golden retriever</option>
- <option>Labrador</option>
- </datalist>
- <br/>
- <label for="observacao">Observação:</label><br/>
- <textarea name="observacao" id="observacao" cols="50" rows=""> </textarea>
- <br/>
- <input type="submit" value="Confirmar!" class="btn-submit"/>
- </form>
- <br clear="both"/>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement