79 lines
3.3 KiB
HTML
79 lines
3.3 KiB
HTML
<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> |