caio/Estudos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Exercicio sobre moedas

Browse Source
This commit is contained in:
Caio1w
2025-11-01 18:45:47 -03:00
parent 4a522fd86f
commit 1940701c78
3 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
site-exercicios/site01/index.html Normal file
View File

@@ -0,0 +1,79 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estudos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div class="header">
<div class="main-header">
<h1 id="Icon">SS</h1>
<section>
<h1>Site Simples</h1>
<small class="text-muted">moderno sem JavaScript</small>
</section>
</div>
<nav class="text-muted">
<a href="#">Funcionalidade</a>
<a href="#">Sobre</a>
<a href="#">Contato</a>
</nav>
</div>
<main>
<div class="container-text">
<h1>Um site moderno que qualquer iniciante consegue criar</h1>
<p class="text-muted">HTML e CSS puros — layout responsivo, tipografia limpa e componentes prontos. Use este template como base e personalize cores, fontes e conteúdo.</p>
<div class="text-buttons">
<button id="btncontato">Entrar em contrato</button>
<button id="btnsaber">Saber Mais</button>
</div>
<div class="secrets_cards">
<div class="cards">
<h2>Responsivo</h2>
<p class="text-muted">Exibe bem em celular, tablet e desktop sem ajustes extras.</p>
</div>
<div class="cards">
<h2>Fácil de editar</h2>
<p class="text-muted">Estrutura clara: basta alterar textos, imagens e cores.</p>
</div>
<div class="cards">
<h2>Sem JavaScript</h2>
<p class="text-muted">Tudo feito apenas com HTML e CSS — ideal para começar.</p>
</div>
</div>
</div>
<div class="forms-menu">
<h3>Sobre esse template</h2>
<p class="text-muted">Este bloco mostra como montar um cartão de apresentação com um pequeno formulário funcional (sem envio real — apenas HTML). Edite o código para conectar a um servidor ou serviço de formulários posteriormente.</p>
<form>
<label class="text-muted for="nome">Nome</label>
<br>
<input type="text" placeholder="Seu nome" id="nome">
<br>
<label class="text-muted for="email">Email</label>
<br>
<input type="email" placeholder="seu@exemplo.com" id="email">
<br>
<label class="text-muted for="textarea">Mensagem</label>
<br>
<textarea placeholder="Escreva sua mensagem" id="textarea"></textarea>
<br>
<div class="buttons-forms">
<button id="submitform" type="submit">Enviar</button>
<button class="text-muted" id="resetform" type="reset">Limpar</button>
</div>
</form>
</div>
</main>
</div>
</body>
</html>

174
site-exercicios/site01/style.css Normal file
View File

@@ -0,0 +1,174 @@
body {
display: flex;
justify-content: center;
background-color: #0f1724;
}
#main {
background-color: #0b1220;
width: 100%;
margin: 0.5rem 3rem;
border-radius: 0.8rem;
height: 35rem;
}
* {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.header {
display: flex;
justify-content: space-between;
margin: 15px 2rem;
}
.header h1, small {
color: white;
}
small, h1 {
margin: 0;
}
#Icon {
display: flex;
border-radius: 0.4rem;
background-color: aqua;
width: 3.5rem;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #94a3b8;
}
nav {
display: flex;
gap: 15px;
align-self: center;
}
.main-header {
gap: 10px;
display: flex;
}
main {
display: flex;
margin: 30px 2rem;
color: white;
}
#btncontato {
display: flex;
align-items: center;
height: 50px;
background-color: aqua;
border-style: none;
border-radius: 10px;
font-weight: bold;
font-size: medium;
padding: 20px;
}
#btnsaber {
display: flex;
align-items: center;
height: 50px;
background: transparent;
color: #94a3b8;
font-weight: bold;
border-radius: 10px;
font-size: medium;
border-color: #94a3b8;
border-width: 0.1px;
padding: 20px;
border:1px solid rgba(255,255,255,0.04);
}
.text-muted {
color: #94a3b8;
}
.text-buttons {
display: flex;
gap: 30px;
}
.cards {
background-color: rgba(255,255,255,0.04);
padding: 3px 20px 5px;
height: 150px;
width: 220px;
margin: 30px 0;
border-radius: 15px;
}
.secrets_cards {
display: flex;
gap: 30px;
}
.forms-menu {
background-color: rgba(255,255,255,0.04);
padding: 2px 15px 5px;
margin-left: 10px;
border-radius: 15px;
}
.container-text {
width: 64%;
}
input {
margin-top: 7px;
background: transparent ;
border-radius: 6px;
border:1px solid rgba(255,255,255,0.04);
height: 40px;
color: white;
width: 100%;
padding-left: 7px;
}
textarea {
margin-top: 7px;
background: transparent ;
border-radius: 6px;
padding-left: 7px;
border:1px solid rgba(255,255,255,0.04);
height: 50px;
color: white;
width: 100%;
}
#submitform {
background-color: aqua;
height: 40px;
width: 90px;
border-radius: 15px;
font-weight: bold;
border-style: none;
}
#resetform {
border:1px solid rgba(255,255,255,0.04);
border-radius: 6px;
height: 40px;
width: 90px;
background: transparent ;
font-weight: bold;
}
.buttons-forms {
margin-top: 5px;
}