1
resposta

Resolução do desafio de criar "partials"

Criei dois arquivos nomeados de "header.html" e "menu_lateral.html", contendo, respectivamente, os trechos de código a seguir:

{% load static %}
        <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>
{% load static %}
            <section class="menu-lateral">
                <nav class="menu-lateral__navegacao">
                    <a href="{% url 'index' %}"><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>

Reorganizei o arquivo "base.html" para incluir as duas "partials" criadas:

{% 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">
        {% include 'galeria/partials/_header.html' %}
        <main class="principal">
            {% include 'galeria/partials/_menu_lateral.html' %}
            {% block content %}{% endblock %}
        </main>
        {% include 'galeria/partials/_footer.html' %}
    </div>
</body>

</html>
1 resposta

Oiii Elvis, tudo bem com você?

Muito bom! Fico feliz que tenha compartilhado suas complementações com a comunidade do fórum da Alura, assim, podemos ver suas ideias de implementação e seu desenvolvimento, além de que suas sugestões podem ainda ajudar os outros estudantes da plataforma :)

Em caso de dúvidas, me coloco à disposição.

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software