1
resposta

[Projeto] Desafio Imagem

{% load static %}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Space</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'styles/style.css' %}">

</head>

<body>
    <div class="pagina-inicial">
        <header class="cabecalho">
            <img src="{% static '/assets/logo/Logo(2).png' %}" alt="Logo da Alura Space" />
            <div class="cabecalho__busca">
                <div class="busca__fundo">
                    <input class="busca__input" type="text" placeholder="O que você procura?">
                    <img class="busca__icone" src="{% static '/assets/ícones/1x/search.png' %}" alt="ícone de search">
                </div>
            </div>
        </header>
        <main class="principal">
            <section class="menu-lateral">
                <nav class="menu-lateral__navegacao">
                    <a href="index.html"><img src="{% static '/assets/ícones/1x/Home - ativo.png' %}"> Home</a>
                    <a href="#"><img src="{% static '/assets/ícones/1x/Mais vistas - inativo.png' %}"> Mais vistas</a>
                    <a href="#"><img src="{% static '/assets/ícones/1x/Novas - inativo.png' %}"> Novas</a>
                    <a href="#"><img src="{% static '/assets/ícones/1x/Surpreenda-me - inativo.png' %}"> Surpreenda-me</a>
                </nav>
            </section>
            <section class="conteudo">
                <section class="imagem">
                    <div class="imagem__conteudo">
                        <img class="imagem__imagem" src="{% static '/assets/imagens/galeria/carina-nebula.png' %}">
                        <div class="imagem__info">
                            <div class="imagem__texto">
                                <p class="imagem__titulo">“Penhascos Cósmicos” na Nebulosa Carina</p>
                                <p class="imagem__descricao">12 de julho de 2022</p>
                                <p class="imagem__texto">O que se parece muito com montanhas escarpadas em uma noite enluarada é na verdade a borda de uma região jovem e próxima de formação de estrelas NGC 3324 na Nebulosa Carina. Capturada em luz infravermelha pela Near-Infrared Camera ( NIRCam ) no Telescópio Espacial James Webb da NASA, esta imagem revela áreas anteriormente obscurecidas do nascimento de estrelas.</p>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
        </main>
    </div>
    <footer class="rodape">
        <div class="rodape__icones">
            <a href="https://twitter.com/AluraOnline" target=”_blank” >
                <img src="{% static '/assets/ícones/1x/twitter.png' %}" alt="ícone twitter">
            </a>
            <a href="https://www.instagram.com/aluraonline/" target=”_blank” >
                <img src="{% static '/assets/ícones/1x/instagram.png' %}" alt="ícone instagram">
            </a>
        </div>
        <p class="rodape__texto">Desenvolvido por Alura</p>
    </footer>
</body>

</html>
1 resposta

Olá, Mateus! Como vai?

Muito bem! Continue resolvendo os desafios e compartilhando com a comunidade Alura.

Observei que você explorou o uso de template tags do Django para carregar arquivos estáticos, utilizou muito bem o conceito de componentização com sections e classes para estruturar a página, e ainda compreendeu a importância do uso de boas práticas em HTML semântico aliado ao CSS externo.

Permaneça postando as suas soluções, com certeza isso ajudará outros estudantes e tem grande relevância para o fórum.

Ícone de sugestão Para saber mais:

Sugestão de conteúdo para você mergulhar ainda mais sobre o tema:

Alguns materiais estão em inglês, mas é possível compreendê-los usando o recurso de tradução de páginas do próprio navegador.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

AluraConte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!