Curso de Design Responsivo Aula 14 Criando sessão conselhos

Nessa vídeo aula vamos cria e estilizar nossa sessão de conselhos, utilizaremos apenas marcações HTML que já utilizamos e propriedades CSS que nos já conhecemos .

Código HTML desenvolvido na vídeo aula

<div class="caixa-g-6 caixa-m-6">
                    <div class="caixa">
                        <h2>Conselhhos</h2>
                        <p>De fato, se você estiver avaliando a possibilidade de adotar um pet e quiser definir as bases de um relacionamento duradouro e feliz, talvez se interesse pelos conselhos elaborados pela Fundação Affinity para evitar o abandono de animais</p>
                        
                        <ul class="conselhos">
                                <li>
                                    <img src="uploads/conselho1.jpg" alt="Decida em família" title="Decida em família" />
                                    <h3>Decida em família</h3>
                                    <p>A decisão de ter um animal deve ser tomada em família, dividindo as diferentes tarefas e responsabilidades entre todos os membros dela.</p>
                                </li>
                                <li>
                                    <img src="uploads/conselho2.jpg" alt="Decida antes de adotar" title="Decida antes de adotar"/>
                                    <h3>Decida antes de adotar</h3>
                                    <p>É preciso informar-se e decidir que tipo de animal melhor adapta-se as suas necessidades, gostos, estilo de vida e tamanho do lar: cachorro, gato ou outro tipo de pet; macho ou fêmea; filhote ou adulto; no caso de cachorros, pequeno, médio ou grande porte...</p>
                                </li>
                                <li>
                                    <img src="uploads/conselho3.jpg" alt="Ensine comandos básicos" title="Ensine comandos básicos"/>
                                    <h3>Ensine comandos básicos</h3>
                                    <p>Ensinar ao animal, principalmente no caso dos cachorros, os comandos básicos de adestramento. Dessa maneira, a convivência será mais fácil e você aproveitará mais a companhia do seu pet.</p>
                                </li>
                                <li>
                                    <img src="uploads/conselho4.jpg" alt="Informe-se" title="Informe-se"/>
                                    <h3>Informe-se</h3>
                                    <p>Informar-se com o veterinário sobre a esterilização para exercer não só o papel de dono responsável, mas também uma "paternidade responsável" e evitar as ninhadas não desejadas.</p>
                                </li>
                            </ul>
                        
                    </div>
                </div>

Código CSS desenvolvido na vídeo aula

.conselhos li {
    padding: 10px 0 20px 0;
    border-bottom: 2px solid #006600
}
.conselhos li:last-child {
    border-bottom: none
}
.conselhos h3 {
    color: #00f400;
    font-family: "Arial";
    font-size: 1em;
    padding: 0;
    text-shadow: none
}
.conselhos p {
    color: #083000;
    font-style: italic;
    margin-bottom: 0
}
.conselhos li img {
    float: left;
    margin: 0 15px 0 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #00F400;
    border: 3px solid #00F400
}
.conselhos li img:hover {
    border: 3px solid green;
    opacity: .5
}

 



Hospedagem Profissional de Sites