[Projeto] Exercício Mão na massa - Aula 04 HTML e CSS | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

HTML de base

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Portfólio de Joana Santos</title>
    <link rel="stylesheet" href ="style.css">
</head>
<body>
    <header>
        <img id="logotipo" src="frontend logotipo.png" alt="Frontend logotipo. Uma tela de computador com um site aberto" width="85" height="85">
    </header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong>um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <a class="rede" href="https://www.instagram.com">Instagram</a>
        <a class="rede" href="http://www.github.com">Github</a>
        <br>
        <br>
        <img class="joana" src="Imagem.png" alt="Foto de Joana Santos">
    </main>
    <footer>
        <p>Contatos:<br>
             (xx)xxxxx-xxxx <br>
             contato@email.com
        </p>     
    </footer>
</body>
</html>

Um arquivo com um estilo formal e elegante

body {
    background-color: whitesmoke;
    color: black;
}

h1 {
    font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
    color:SlateGrey
}
strong { 
    color:rgb(184, 178, 57)
}

p {
    font-family: 'Courier New', Courier, monospace;
    color: black;
}
a {
    font-family: 'Monaco', monospace;
    color: peru;
}

.joana { 
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Um arquivo com um estilo colorido e divertido

body {
    background-color: indigo;
}

h1 {
    font-family: Brush Script MT;
    color: fuchsia
}
strong { 
    color:rgb(184, 178, 57)
}

p {
    font-family: papyrus;
    color: rgb(65, 212, 35);
}
a {
    font-family: 'Monaco', monospace;
    color: rgb(212, 88, 5);
}

.joana { 
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Um arquivo com um visual minimalista e limpo

body {
    background-color: whitesmoke;
}

h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(68, 68, 68)
}
strong { 
    color: rgb(36, 33, 33)
}

p {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(37, 36, 36);
}
a {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(156, 67, 8);
}

.joana { 
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

PRORROGAMOS O DESCONTO!