Mão na massa 1****
- Estilizando elementos com classes CSS index1.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<header>
</header>
<main>
<p class="texto-destaque">Olá! Sou Joana Santos, desenvolvedora
Front-end com especialidade em <strong>React, HTML e
CSS.</strong> Ajudo pequenos negócios e designers a
colocarem em prática boas ideias. Vamos
conversar?</p>
<br>
<p >Olá! Sou Joana Santos, desenvolvedora
Front-end com especialidade em <strong>React, HTML e
CSS.</strong> Ajudo pequenos negócios e designers a
colocarem em prática boas ideias. Vamos
conversar?</p>
</main>
<footer>
</footer>
</body>
</html>
style1.css
body {
background-color:#000000;
color:#f6f6f6;
}
.texto-destaque {
color: #22d4fd;
}
- Destacando títulos com CSS index2.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header>
</header>
<main>
<h1 class="titulo-blog">Eleve seu negócio digital a outro nível
<strong class="titulo-destaque">um Front-end de qualidade!</strong></h1>
<br>
<h1>Eleve seu negócio digital a outro nível
<strong>um Front-end de qualidade!</strong></h1>
<br>
</main>
<footer>
</footer>
</body>
</html>
style2.css
body {
background-color:#000000;
color:#f6f6f6;
}
.titulo-blog {
color: #22d4fd;
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
}
.titulo-destaque {
color: #e11794;
}
- Estilos situacionais com classes CSS index3.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<header>
</header>
<main>
<h1>Eleve seu negócio digital a outro nível
<strong>um Front-end de qualidade!</strong></h1>
<br>
<p class="urgente">Noticia : Eleve seu negócio digital a outro nível
um Front-end de qualidade!</p>
<br>
</main>
<footer>
</footer>
</body>
</html>
style3.css
body {
background-color:#000000;
color:#f6f6f6;
}
.urgente {
color: red;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
- Entendendo e aplicando o reset CSS index4.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<header>
</header>
<main>
<h1 class="titulo-blog">Eleve seu negócio digital a outro nível
<strong class="titulo-destaque">um Front-end de qualidade!</strong></h1>
<br>
<h1>Eleve seu negócio digital a outro nível
<strong>um Front-end de qualidade!</strong></h1>
<br>
</main>
<footer>
</footer>
</body>
</html>
style4.css
*{
margin: 0;
padding: 0;
}
body {
background-color:#000000;
color:#f6f6f6;
}
.titulo-blog {
color: #22d4fd;
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
}
.titulo-destaque {
color: #e11794;
}
