Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Estilizando o projeto com CSS

Olá, não entendi bem se era para usar o projeto passado na aula e fazer somente as alterações ou fazer um novo. Fiz um novo, espero que esteja de acordo.

/* estilo formal e elegante */

body {
    background-color: black ;
    color: white;
    text-align:center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header { background-color:black;
    font-size: 20px;  
}

h1 {
    background-color:black;
    color: white;
    text-align:center;
    font-size: 20px;
}

strong {
    font-style: oblique;
}

p { font-size: 18px;
    text-align:center;
}

main {
    background-color:gray;
    text-align:left;
    color:midnightblue;
    font-size: 18px;
}

img {
     max-width: 30%;
     max-height: 30%;    
     }

Button {
    text-align: center;
    background-color:goldenrod;
    border-color: black;
    border-radius: 15px;
    width: 150px;
    height: 50px;
    font-size: 18px;
}

footer {
    background-color:gray;
    text-align:center;
    color:midnightblue;
    font-size: 20px;
}
/* estilo colorido e divertido */

body {
    background-color: black ;
    color: white;
    text-align:center;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

header { background-color:black;
    font-size: 20px;  
}

h1 {
    background-color:darkblue;
    color: white;
    text-align:center;
    font-size: 20px;
}

strong {
    font-style: oblique;
}

p { font-size: 18px;
    text-align:center;
}

main {
    background-color:gray;
    text-align:left;
    color:midnightblue;
    font-size: 18px;
}

img {
     max-width: 30%;
     max-height: 30%;    
}

Button {
    text-align: center;
    background-color:aqua;
    border-color: midnightblue;
    border-radius: 25px;
    width: 150px;
    height: 50px;
    font-size: 18px;
}

footer {
    background-color:gray;
    text-align:center;
    color:midnightblue;
    font-size: 20px;
}
/* visual minimalista e limpo. */

body {
    background-color: black ;
    color: white;
    text-align:center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

header { background-color:black;
    font-size: 22px;  
}

h1 {
    background-color:black;
    color: white;
    text-align:center;
    font-size: 24px;
}

strong {
    font-style: oblique;
}

p { font-size: 20px;
    text-align:center;
}

main {
    background-color:gray;
    text-align:left;
    color:midnightblue;
    font-size: 20px;
}

img {
     max-width: 30%;
     max-height: 30%;    
     margin: 15px 15px 15px 0;
     display:inline-block;
}

Button {
    text-align: center;
    background-color:darkgray;
    border-color: midnightblue;
    border-radius: 5px;
    width: 150px;
    height: 50px;
    font-size: 18px;
}

footer {
    background-color:gray;
    text-align:center;
    color:midnightblue;
    font-size: 22px;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Segue o arquivo Html

<!DOCTYPE html>
<html>
    <head>
       <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Tezza Serviços Automotivos</title>
         <link rel="stylesheet" href="style.css">
    </head>
        <body>
         <header>A perfeição é o desafio que nos move!</header>
         <main>
            <h1> Bem Vindo a <strong>Tezza Serviços Automotivos </strong></h1>
            <p> Olá, seja bem vindo e fique à vontade para conhecer nossos tratamentos.  </p>        
            <ol>
                <li>Tratamentos externos
                    <ul>
                        <li>Lavagem Detalhada;</li>
                        <li>Lavagem de Motor;</li>
                        <li>Lavagem de Chassis;</li>
                        <Li>Polimento de vidros;</Li>
                        <li>Polimento Técnico;</li>
                        <li>Vitrificação de Pintura</li>
                    </ul>
                </li>
                <p>
                <li>Tratamentos internos</li>
                    <ul>
                        <li>Higienização interna</li>
                        <li>Hidratação de bancos de couro</li>
                        <li>Revitalização de plásticos</li>
                    </ul>
            </ol></p>
            <button> <a href="https://www.instagram.com/renato_rjt">Instagram</a> </button>
            <button>
            <a href="https://rt-estetica-automotiva.negocio.site/">Google</a>
        </button>
            <img src="silhueta.png" alt="Imagem com a silhueta de um carro">
            
         </main>
            
         <footer>Paraná - Brasil</footer>

        </body>
    
</html>
solução!

Olá Renato, como vai?

Seu projeto ficou muito bacana, é isso aí! Continue se dedicando aos estudos e colocando em prática seus aprendizados.

Caso surjam dúvidas, fico à disposição.

Abraços e bons estudos!