Pasted

<!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>