Mão na massa 2****
- Ajustando a altura da tela com 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>
<h1 class="titulo-destaque">Olá tudo bem</h1>
<h2 >Noticias do Dia</h2>
</main>
<footer>
</footer>
</body>
</html>
style1.css
*{
margin: 0;
padding: 0;
}
body {
height: 80vh;
border-style: solid;
border-color: #22d4fd;
padding: 3em;
background-color:#000000;
color:#f6f6f6;
}
.titulo-destaque {
color: #e90d94;
}
- Controlando o tamanho de elementos com Box Sizing 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-destaque">Olá tudo bem</h1>
<h2 >Noticias do Dia</h2>
</main>
<footer>
</footer>
</body>
</html>
style2.css
*{
margin: 0;
padding: 0;
}
body {
height: 100vh;
box-sizing: border-box;
border-style: solid;
border-color: #22d4fd;
padding: 3em;
background-color: #000000;
color: #f6f6f6;
}
.titulo-destaque {
color: #e90d94;
}
- Criando um layout sem scroll 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 class="apresentacao">
<p class="texto-destaque1">informação sobre cursos de alura e suas facilidades
para a compra e pagamentos dos pacotes de formação
para todas as pessoas interessadas nessa situação</p>
<p class="texto-destaque2" >nome dos cursos de formação: desenvolvedor full stack,
web designer, logica de programação, linux, programação
em java e linguagem Ce C++</p>
</main>
<footer>
</footer>
</body>
</html>
style3.css
*{
margin: 0;
padding: 0;
}
body {
height: 100vh;
box-sizing: border-box;
border-style: solid;
border-color: #22d4fd;
padding: 3em;
background-color: #000000;
color: #f6f6f6;
}
.texto-destaque1 {
color: #e90d94;
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.texto-destaque2 {
color: #0de927;
font-size: 24px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.apresentacao {
display: flex;
align-items: center;
}
