Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, Davy! Tudo bem?
Analisando as informações que você compartilhou, nenhum dos trechos de código apresentam alguma inconsistência que possa causar esse problema.
Logo, o problema deve estar no arquivo "style.css", então peço que compartilhe os códigos desse arquivo comigo, peço que copie e não tire print, pois assim poderei fazer testes para identificar o problema.
Fico no aguardo!
// Index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h1>Hora do desafio</h1>
</header>
<main class="container">
<button onclick="" class="button">Console</button>
<button onclick="" class="button">Alert</button>
<button onclick="" class="button">Prompt</button>
<button onclick="" class="button">Soma</button>
</main>
<script src="app.js"></script>
</body>
</html>
// JS.app
function exibirTextoNaTela(tag){
let campo = document.querySelector(tag);
campo.innerHTML = texto;
}
exibirTextoNaTela('h1' , 'Jogo do número secreto')
exibirTextoNaTela('p' , 'Escolha um número entre 1 e 10')
function verificarChute(){
console.log('O botão foi clicado!');
}
// Style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
}
body {
background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
body::before {
background-image: url("img/code.png");
background-repeat: no-repeat;
background-position: right;
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
opacity: 0.4;
}
.container {
width: 1200px;
height: 600px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 24px;
border: 1px solid #1875E8;
box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15);
background-image: url("img/Ruido.png");
background-size: 100% 100%;
position: relative;
}
.container__conteudo {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
}
.container__informacoes {
flex: 1;
padding: 3rem;
}
.container__botao {
border-radius: 16px;
background: #1875E8;
padding: 16px 24px;
width: 100%;
font-size: 24px;
font-weight: 700;
border: none;
margin-top: 2rem;
}
button:disabled {
background-color: gray;
}
.container__texto {
margin: 16px 0 16px 0;
}
.container__texto-azul {
color: #1875E8;
}
.container__input {
width: 100%;
height: 72px;
border-radius: 16px;
background-color: #FFF;
border: none;
color: #1875E8;
padding: 2rem;
font-size: 24px;
font-weight: 700;
font-family: 'Inter', sans-serif;
}
.container__botoes {
display: flex;
gap: 2em;
}
h1 {
font-family: 'Chakra Petch', sans-serif;
font-size: 72px;
padding-bottom: 3rem;
}
p,
button {
font-family: 'Inter', sans-serif;
}
.texto__paragrafo {
font-size: 32px;
font-weight: 400;
}
Boa tarde, Davy! Tudo bem?
Recomendo que o utilize outras configurações de estilização para esse desafio, como primeiramente pensei que se tratava do projeto das aulas e não de um desafio eu indiquei que o problema era em alguma parte do código CSS, mas é que o código que você deve usar é quase totalmente diferente. Enfim segue o código CSS que você deve substituir no arquivo "style.css":
header {
text-align: center;
font-size: 30px;
color: #279EFF;
}
main, html {
margin: 0;
padding: 0;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #0C356A;
}
.container {
text-align: center;
color: #279EFF;
}
.button {
padding: 10px 20px;
margin: 10px;
font-size: 24px;
border: none;
background-color: #3498db;
cursor: pointer;
border-radius: 5px;
}
.button:hover {
background-color: #2980b9;
}
Fico à disposição em caso de mais problemas!
Davy, resolveu ?