1 e 2 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>Meu Portfólio</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<header></header>
<main>
<div><img src="https://th.bing.com/th/id/OIG3.hoVyIffGCoQxuPCPAHBe?w=173&h=173&c=6&r=0&o=5&pid=ImgGn"></img></div>
<br><br><br><br><br><br><br><br>
<h1 class="titulo-blog"> Bem vindo ao <strong>Kingfy</strong></h1>
<p>O seu <strong class="texto-destaque">site de músicas</strong> favorito</p>
<button>inscreva-se</button>
</main>
<footer>
<h2>Obrigado por nos visitar</h2>
<p>Contato: exempl@gmail.com</p>
<p>Telefone: número aleatorio</p>
</footer>
</body>
</html>
CSS
body {
background-color: #000000
;
color:#f2f2f2; ;
}
strong{
color: #14d90d;
}
.titulo-blog {
color: #ffffff;
}
div {
background-image: url("https://th.bing.com/th/id/OIG3.hoVyIffGCoQxuPCPAHBe?w=173&h=173&c=6&r=0&o=5&pid=ImgGn");
height: 20px;
width: 5%;
}
.texto-destaque{
color: #14d90d;
}
3, 4, 5 e 6 (com uma historinha de bônus) espero que gostem
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>Pop News</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<header></header>
<main>
<div><img src="https://th.bing.com/th/id/OIG4.fWFPUxnQvfa0HkciIbmJ?w=173&h=173&c=6&r=0&o=5&pid=ImgGn"></img></div>
<br><br><br><br><br><br><br><br>
<h1 class="titulo-blog"> Bem vindo ao <strong>Dev News</strong></h1>
<h3>Por Pop News - 23 de fevereiro de 2024</h3>
<p>Última notícia <br><br><strong class="texto-destaque-urgente">URGENTE</strong> Conflito na Kingfy! Dono e Desenvolvedores em Disputa!</p> <br>
<p>Em uma reviravolta surpreendente nos bastidores da indústria digital, a Kingfy, renomada plataforma de músicas online,<br> se vê envolta em uma disputa acalorada entre o fundador, Fernando Marques, e sua equipe de desenvolvedores.</p> <br>
<p>Tudo começou quando Fernando Marques, o visionário por trás da Kingfy, decidiu renovar o site para proporcionar uma experiência ainda melhor aos usuários.<br> Ele recrutou Rafa Ballestrini, uma talentosa desenvolvedora front-end, para liderar o projeto de reestruturação do site.</p> <br>
<p>No entanto, as coisas rapidamente saíram dos trilhos quando Rafa expressou suas preocupações sobre a complexidade do projeto.<br>Ela insistiu que precisaria da ajuda de outro desenvolvedor, o famoso programador Gui Limão, para garantir um trabalho de qualidade.</p><br>
<p>O problema surgiu quando Fernando se recusou a aumentar o orçamento do projeto, deixando Rafa e Gui indignados.<br><strong>"Estamos sendo cobrados demais e pagos de menos"</strong>, protestou Rafa, enquanto Gui Limão assentia veementemente ao seu lado.</p><br>
<p>A tensão atingiu o ápice quando Fernando tentou convencer Rafa a continuar o projeto sozinha, argumentando que sua expertise era mais do que suficiente.<br><strong>"Não podemos comprometer a qualidade"</strong>, retrucou Rafa, firme em sua posição.</p> <br>
<p>Enquanto isso, a equipe da Kingfy observava a disputa com crescente incredulidade, sem saber se o impasse seria resolvido ou se resultaria na partida dos talentosos desenvolvedores.</p>
<p>Diante desse conflito crescente, fica a incerteza sobre o futuro da Kingfy e se Fernando Marques conseguirá encontrar um terreno comum com sua equipe de desenvolvimento. <br>Estaremos acompanhando de perto para trazer atualizações sobre essa situação em evolução.</p> <br>
<p>Fique ligado para mais atualizações em tempo real aqui no Pop News!</p>
</main>
<footer>
<button>inscreva-se</button>
<h2>Obrigado por nos visitar</h2>
<p>Contato: exempl@gmail.com</p>
<p>Telefone: número aleatorio</p>
</footer>
</body>
</html>
CSS
* {
margin: 0.5%;
padding: 10px;
}
body {
background-color: #131212
;
color:#f2f2f2; ;
}
strong{
color: #14d90d;
}
.titulo-blog {
color: #ffffff;
border: 2px solid #14d90d;
}
div {
background-image: url("https://th.bing.com/th/id/OIG4.fWFPUxnQvfa0HkciIbmJ?w=173&h=173&c=6&r=0&o=5&pid=ImgGn");
height: 50px;
width: 5%;
}
.texto-destaque-urgente {
border-radius: 50%;
border: 2px solid #14d90d;
padding: 10px;
}
OBS: Me ajudem a deixar o cód mais limpo se possível.
