diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/app.js b/app.js index e69de29..c46f95c 100644 --- a/app.js +++ b/app.js @@ -0,0 +1,24 @@ +let titulo = document.querySelector("h1"); +titulo.innerHTML = "Hora do Desafio"; + +function exibirMensagemNoConsole(){ + console.log("O botão foi clicado"); +} + +function exibirAlerta(){ + alert("Eu amo JS"); +} + +function exibirPrompt(){ + let cidadeEscolhida = prompt("Diga o nome de uma cidade do Brasil"); + alert(`Estive em ${cidadeEscolhida} e lembrei de você`); +} + +function somandoDoisNumeros(){ + let primeiroNumero = parseInt(prompt("Escolha um número")); + let segundoNumero = parseInt(prompt("Escolha outro número")); + + let soma = primeiroNumero + segundoNumero; + + alert (`O resultado da soma dos números escolhidos é ${soma}`); +} \ No newline at end of file diff --git a/index.html b/index.html index 1d2ab1b..2af1329 100644 --- a/index.html +++ b/index.html @@ -1,41 +1,22 @@ - - + - - - - - JS Game + Document - - -
-
-
-
-

Adivinhe o numero secreto

-

Escolha um número entre 1 a 10

-
- -
- - -
-
- Uma pessoa olhando para a esquerda -
-
- - - - - +
+

+
+
+ + + + +
+ + - \ No newline at end of file diff --git a/style.css b/style.css index 6c88f1d..2a46f40 100644 --- a/style.css +++ b/style.css @@ -1,140 +1,34 @@ -* { - box-sizing: border-box; +header { + text-align: center; + font-size: 30px; + color: #279EFF; + } + + main, html { margin: 0; padding: 0; - color: white; -} - -body { - background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); - height: 100vh; + height: 50%; 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: 80%; - height: 80%; - 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%; + background-color: #0C356A; + } + + .container { + text-align: center; + color: #279EFF; + } + + .button { + padding: 10px 20px; + margin: 10px; font-size: 24px; - font-weight: 700; border: none; - margin-top: 2rem; -} - -.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; -} - -button:disabled { - background-color: gray; -} - -@media screen and (max-width: 1250px) { - - h1 { - font-size: 50px; - } - - .container__botao { - font-size: 16px; - } - - - .texto__paragrafo { - font-size: 24px; - } - - .container__imagem-pessoa { - display: none; - } - - .container__conteudo { - display: block; - position: inherit; - } - - .container__informacoes { - padding: 1rem - } -} \ No newline at end of file + background-color: #3498db; + cursor: pointer; + border-radius: 5px; + } + + .button:hover { + background-color: #2980b9; + } \ No newline at end of file