Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Com projeto.

Bom dia, gostaria de saber se alguém tem um projeto tipo esse, para eu usar como exemplo.

Página-presente

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Oi Ingrid, tudo bem?

Não sei se alguém tem esse projeto pronto já, mas irei deixar aqui um exemplo básico de como você pode fazer.

Para criar um projeto semelhante, você pode começar estruturando o HTML com as seções que você viu na imagem. Depois, você pode estilizar a página com CSS para conseguir um visual parecido.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Página de Aniversário</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #f2f2f2;
            padding: 10px;
            text-align: center;
        }
        .main-title {
            color: #333;
            text-align: center;
        }
        .letter-section, .photo-section {
            margin: 20px auto;
            padding: 10px;
            max-width: 600px;
        }
        footer {
            text-align: center;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <a href="#home">Home</a> | 
        <a href="#letter">Carta</a> | 
        <a href="#photos">Nossas Fotos</a>
    </div>
    <h1 class="main-title">Essa página é um presente para você: Feliz Aniversário!</h1>
    <div id="letter" class="letter-section">
        <h2>Uma carta para você</h2>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div id="photos" class="photo-section">
        <h2>Nossas fotos</h2>
        <img src="caminho/para/imagem1.jpg" alt="Descrição da imagem 1">
        <img src="caminho/para/imagem2.jpg" alt="Descrição da imagem 2">
        <!-- Adicione mais imagens conforme necessário -->
    </div>
    <footer>
        Criado em janeiro de 2023 <br>
        Projeto Illustrations by Storyset
    </footer>
</body>
</html>

Você pode adicionar suas próprias imagens, textos e cores para personalizar a página.

Lembre-se que a prática é muito importante no desenvolvimento web, então tente criar a página por conta própria e vá ajustando conforme você aprende mais sobre HTML e CSS.

Um abraço e bons estudos.

obrigada <3