Procurei montar uma página HTML e estilizei com classes CSS e brinquei bastante com as cores para testar, conforme segue:
<!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>Exercícios HTML-CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main>
<h1 class="titulo-blog">Eleve seu negócio digital a outro nível com um <span>Front-end</span> de Qualidade!</h1>
<p class="subtitulo-text">Olá! Sou Paulo Camargo, estudante de programação e futuro Dev front-end, <strong>estou estudando Javascript, HTML e CSS na Alura</strong>. Portanto, posso ajudar a alavancar o seu negócio.</p>
<p class="urgente">U R G E N T E - Não perca tempo, entre em contato comigo!</p>
<div class="botoes-links">
<a href="https://instagram.com/paulocamargo.psic">Instagram</a>
<a href="https://github.com/machado10666">Github</a>
</div>
<img src="classfoto.jpg" alt="Foto Paulo, estudante de programação e futuro Desenvolvedor!">
</main>
<footer>
<p class="text-contato">Entre em contato comigo:</p>
<ul class="dados-contato">
<li>Telefone: <a href="tel:+5511999999999">+55 (11) 99999-9999</a></li>
<li>Email: <a href="mailto:fernandesmetal721@hotmail.com">fernandesmetal721@hotmail.com</a></li>
</ul>
</footer>
</body>
</html>
/* Resetando o padrão da página */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Garante que padding e bordas não afetem o tamanho total */
}
body {
background-color: #000000;
color: #F6F6F6;
font-family: Arial, sans-serif; /* Adiciona uma fonte padrão */
line-height: 1.6; /* Melhora a legibilidade do texto */
}
main {
display: flex;
flex-direction: column;
align-items: center; /* Centraliza os itens horizontalmente */
text-align: center; /* Centraliza o texto */
padding: 19px;
}
.titulo-blog {
margin-bottom: 22px;
font-size: 2.5rem; /* Tamanho maior para o título */
color:#00CCFF;
}
.texto-destaque {
margin: 10px 0; /* Espaçamento vertical entre parágrafos */
max-width: 600px; /* Limita a largura do texto para melhor leitura */
color:#00CCFF;
}
.subtitulo-text {
color:#00FF00
}
.descricao-contato {
color: yellow;
}
span {
color: #999966;
border: 1px solid #999966;
padding: 5px 10px;
border-radius: 5px;
}
.urgente {
color: red;
font-weight: bold;
}
.botoes-links {
margin: 20px 0;
}
.botoes-links a {
display: inline-block;
margin: 0 10px;
padding: 10px 20px;
background-color: yellow;
color: #000000;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.text-contato {
color:yellow;
}
.dados-contato {
color:#660066;
}
.links a:hover {
background-color: #00CCFF;
}
img {
margin-top: 20px;
max-width: 100%; /* Garante que a imagem não ultrapasse o container */
height: auto;
border-radius: 10px;
}
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!