58. Footer and Heading FrontEnd
Now, we will focus on developing the front-end for the footer and heading of our website.
In the base.html file, copy the relevant lines from home.html (found in the FrontEnd folder) that are currently missing. Update base.html to include these lines so it matches the layout of the provided home.html.
base.html
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<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=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>Note: If you previously included a link to the Font Awesome CSS, you can remove it, as we will use the fonts already imported from the FrontEnd folder.
Next, import the footer section from home.html into base.html.
To do this efficiently and in an organized manner, create a new HTML file called footer.html inside the templates folder. Paste the code from the <footer> tag of home.html (found in the FrontEnd folder) into this new footer.html file.
Footer
FrontEnd\home.html
<footer class="rodape">
<section class="rodape__secao-formulario">
<div class="rodape__app-newsletter">
<div class="rodape__container-newsletter">
<div class="rodape__newsletter">
<svg
class="rodape__logo"
viewBox="0 0 18 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4909 21.4296C17.1766 21.1607 15.7103 20.13 14.9972 19.4579C14.7252 19.189 14.9138 18.8977 14.6201 18.5617C14.2223 18.1584 13.8029 17.7102 13.3629 17.2397C12.9229 16.7468 12.5045 16.2091 12.0852 15.6489C11.708 15.0887 10.556 13.386 9.6131 12.2656C8.60738 11.0558 6.70104 9.57697 6.17657 8.21022C6.15595 8.1206 6.11371 8.03098 6.09308 7.94135C5.96737 7.51564 5.92514 7.02272 5.94674 6.44017C5.96737 5.88003 6.11371 5.34229 6.67943 4.40125C7.308 3.393 7.18228 2.94488 6.97308 2.90008C6.76389 2.85526 6.53309 2.87766 6.76389 1.8246C6.97309 0.905965 6.82675 0.525068 6.70104 0.301011C6.57532 0.0769543 6.42799 -0.0350741 6.30228 0.00973726C6.03022 0.0769544 5.82102 0.749125 5.5696 0.92837C5.50674 0.973182 5.15022 1.17484 5.23371 0.323417C5.25531 0.121766 5.12959 0.0545486 4.94102 0.166577C4.66798 0.345822 4.29084 0.816342 4.08164 1.69016C4.06102 1.73498 4.01879 1.75738 3.99817 1.69016C3.95594 1.57813 3.95593 1.37649 4.01879 1.0404C4.08165 0.726719 4.20736 0.457851 4.08164 0.435445C3.9137 0.390634 3.66228 0.771531 3.47371 1.21964C3.45308 1.28686 3.43244 1.30927 3.41084 1.35408C3.39021 1.39889 3.32736 1.4437 3.32736 1.33167C3.32736 1.26446 3.34798 1.13002 3.39022 0.973182C3.41084 0.905965 3.36959 0.883559 3.34798 0.883559C3.28513 0.861154 3.22227 0.905965 3.13879 0.973182C2.95022 1.13002 2.76164 1.39889 2.6153 1.77978C2.59369 1.8246 2.59369 1.86941 2.57307 1.91422V1.93663C2.57307 1.95903 2.57307 1.95903 2.55245 1.98144C2.55245 2.00385 2.53084 2.02625 2.53084 2.04865C2.53084 2.07107 2.51022 2.11587 2.51022 2.13827V2.16068C2.48959 2.20549 2.48959 2.27271 2.46798 2.33992C2.44736 2.40714 2.44735 2.47436 2.44735 2.54158C2.44735 2.54158 2.44735 2.54158 2.44735 2.56399C2.42672 2.74323 2.42673 2.90008 2.42673 3.07932C2.42673 3.10172 2.42673 3.12413 2.42673 3.16894C2.42673 3.25857 2.21655 3.28097 2.27941 3.48262C2.3845 3.99795 2.57308 4.51328 2.65656 4.78215C2.69879 4.87177 2.63593 4.9838 2.55245 5.02861C2.11245 5.16304 0.896546 5.56635 0.058774 6.12649C0.0175238 6.14889 -0.0247159 6.23852 0.0175165 6.30574C0.0587666 6.37296 0.163858 6.37296 0.20609 6.35054C1.16958 6.01447 2.55244 5.52153 3.22226 6.03687C3.7045 6.41776 3.76736 7.31399 3.45307 8.27743C3.34798 8.63592 3.24388 8.94961 3.13879 9.2857C1.71369 13.2739 4.33308 15.1336 6.72166 17.5085C6.88961 17.6878 7.26675 18.1135 7.58104 18.6289C7.81086 18.9874 8.06229 19.4131 8.02104 19.8164C7.99943 20.1525 7.95818 20.5557 7.83246 21.0935C7.70675 21.7433 7.55944 21.4296 6.59595 21.1607C6.30229 21.0711 6.28166 21.1159 6.09308 21.5416C5.90451 21.9897 5.88388 22.0345 5.92513 22.0794C5.96736 22.1018 7.748 22.1018 7.95818 22.1241C7.97881 22.1241 8.02103 22.1466 8.04166 22.1466C8.25086 22.2586 9.23596 22.7515 9.52864 22.9756C9.59149 23.0204 9.69659 22.998 9.73882 22.9531C9.78007 22.8859 9.75945 22.7963 9.69659 22.7515C9.25659 22.4602 8.35596 21.7433 8.33533 21.5192C8.33533 21.4296 8.39819 21.1159 8.43944 20.8694C8.60739 19.7492 8.628 19.3458 9.04738 19.1218C9.44515 18.9202 10.3674 19.4354 11.0794 19.6147C11.1217 19.6147 11.1423 19.6596 11.1217 19.6819C11.1001 19.7939 11.0372 20.0628 10.9115 20.4886C10.8909 20.5557 10.8486 20.6901 10.7229 20.735C10.5766 20.7798 9.96864 20.5333 9.55025 20.4437C9.3823 20.3989 9.31944 20.2869 8.9423 21.1607C8.92167 21.2279 8.92167 21.2504 8.9423 21.2504C8.96292 21.2727 10.6601 21.3623 10.9115 21.4072C10.9537 21.4072 10.996 21.4296 11.0372 21.4519C11.6658 21.788 12.1903 22.0794 12.5252 22.2809C12.7137 22.393 12.7766 22.4379 12.8395 22.3706C12.9229 22.2809 12.8395 22.1913 12.7766 22.1241C12.7344 22.0794 12.3572 21.788 11.9801 21.5192C11.6245 21.2504 11.2887 21.0711 11.2887 20.9366C11.2887 20.8694 11.3309 20.6454 11.3515 20.5782C11.3731 20.5333 11.4988 20.018 11.5401 19.8388C11.5401 19.7939 11.5823 19.7715 11.6245 19.7939C13.4474 20.4437 14.0131 21.6984 15.396 22.4826C17.0715 23.4013 18.915 22.617 17.4909 21.4296Z"
fill="#E4002B"
></path>
</svg>
<p class="rodape__texto-newsletter">Assine nossa newsletter</p>
<p class="rodape__texto">
Cadastre-se e receba promoções exclusivas e saiba tudo antes de
todo mundo!
</p>
</div>
<form class="formulario" action="">
<input
class="formulario__input"
type="email"
name="email"
placeholder="Digite seu e-mail"
/>
<input
class="formulario__input"
type="text"
name="name"
placeholder="Digite seu nome"
/>
<button class="formulario__botao" type="submit">Cadastrar</button>
</form>
</div>
<div class="rodape__container-app">
<div class="rodape__app">
<p class="rodape__texto-newsletter">Baixe o app</p>
<p class="rodape__texto">
A Reserva todinha na palma da sua mão, baixe agora mesmo na loja
do seu smartphone.
</p>
</div>
<div class="rodape__app">
<a
href="https://play.google.com/store/apps/details?id=com.usereserva"
><img
class="rodape__imagens-loja"
src="https://lojausereserva.vtexassets.com/arquivos/playstorex2.png"
alt="Imagem Play Store"
/></a>
<a href="https://apps.apple.com/br/app/reserva/id1566861458"
><img
class="rodape__imagens-loja"
src="https://lojausereserva.vtexassets.com/arquivos/appstorex2.png"
alt="Imagem App Store"
/></a>
</div>
</div>
</div>
</section>
<section class="rodape__secao-informacoes">
<div class="rodape__container">
<div class="rodape__informacoes">
<div class="rodape__informacao">
<p class="rodape__titulo">Sobre a Reserva</p>
<ul class="rodape__links">
<li><a href="https://www.usereserva.com/1p5p">1P=5P</a></li>
<li>
<a href="https://www.usereserva.com/cultura">Cultora</a>
</li>
<li>
<a href="https://www.arezzo.com.br/sustentabilidade"
>Sustentabilidade</a
>
</li>
<li>
<a href="https://www.usereserva.com/quem-faz">Quem faz</a>
</li>
<li>
<a href="https://www.usereserva.com/sitemap"
>Mapa de Categorias</a
>
</li>
</ul>
</div>
<div class="rodape__informacao">
<p class="rodape__titulo">Vem Pra Reserva</p>
<ul class="rodape__links">
<li>
<a href="https://www.usereserva.com/sejafranqueado"
>Seja um Franqueado</a
>
</li>
<li>
<a href="https://www.usereserva.com/lojas">Nossas Lojas</a>
</li>
<li>
<a href="https://trabalheconosco.vagas.com.br/grupo-reserva/"
>Trabalhe Conosco</a
>
</li>
</ul>
</div>
<div class="rodape__informacao">
<p class="rodape__titulo">Minha Conta</p>
<ul class="rodape__links">
<li>
<a href="https://www.usereserva.com/account#/wishlist"
>Favoritos</a
>
</li>
<li>
<a href="https://www.usereserva.com/account#/orders"
>Meus Pedidos</a
>
</li>
<li>
<a href="https://www.usereserva.com/account#/wallet"
>Minha Carteira</a
>
</li>
<li>
<a href="https://www.usereserva.com/meu-cartao-de-presente"
>Meu Cartão Presente</a
>
</li>
</ul>
</div>
<div class="rodape__informacao">
<p class="rodape__titulo">Suporte</p>
<ul class="rodape__links">
<li>
<a href="https://www.usereserva.com/politica-de-privacidade"
>Política de Privacidade</a
>
</li>
<li>
<a href="https://www.usereserva.com/termos-de-uso"
>Termos de Uso</a
>
</li>
<li>
<a href="https://usereserva.zendesk.com/hc/pt-br"
>Dúvidas Frequentes</a
>
</li>
<li>
<a href="https://www.usereserva.com/"
>Compromisso Best Friday</a
>
</li>
<li>
<a
href="https://usereserva.s3.sa-east-1.amazonaws.com/PDFs-Institucionais/Reserva+-+1+Ano+em+Compras+-+Regulamento+autorizado+(1).pdf"
>Regulamento ação 1 ano de Reserva</a
>
</li>
<li>
<a href="https://www.usereserva.com/troca-e-devolucao"
>Troca e Devolução</a
>
</li>
</ul>
</div>
</div>
<div class="rodape__atendimento">
<p class="rodape__titulo">Atendimento</p>
<div class="rodape__ancoras">
<a class="rodape__ancora-icone" href="https://pslz.in/reserva"
><img
loading="lazy"
crossorigin="anonymous"
class="rodape__icone"
data-src="https://lojausereserva.vtexassets.com/assets/vtex.file-manager-graphql/images/9c4ad5b9-1b4d-4f4d-afce-fc05e3ee3b36___aac616c1eff051d87cbbe7d7ea6090db.svg"
src="https://lojausereserva.vtexassets.com/assets/vtex.file-manager-graphql/images/9c4ad5b9-1b4d-4f4d-afce-fc05e3ee3b36___aac616c1eff051d87cbbe7d7ea6090db.svg"
/>
Atendimento em libras
</a>
<div class="rodape__whatsapp">
<a class="rodape__ancora-icone" href="http://bit.ly/42nkvKc">
<img
loading="lazy"
crossorigin="anonymous"
class="rodape__icone"
data-src="https://lojausereserva.vtexassets.com/assets/vtex.file-manager-graphql/images/d20346db-d162-4873-8518-b8548620acf6___07a0cb802e61ce015e6477828969ca35.svg"
src="https://lojausereserva.vtexassets.com/assets/vtex.file-manager-graphql/images/d20346db-d162-4873-8518-b8548620acf6___07a0cb802e61ce015e6477828969ca35.svg"
/>
WhatsApp Reserva
</a>
<p class="rodape__horarios">
Segunda a Sexta: 08h às 20h<br />Sábados: 08h às 18h
</p>
</div>
<a
class="rodape__ancora-icone"
href="https://lojausereserva.troquefacil.com.br/order"
>
<img
loading="lazy"
crossorigin="anonymous"
class="rodape__icone"
data-src="https://lojausereserva.vtexassets.com/assets/vtex.file-manager-graphql/images/c9f66e16-18fc-47e7-80d2-8285e4945aab___02415dfe7c43260a39980d26a4a3f438.svg"
src="https://lojausereserva.vtexassets.com/assets/vtex.file-manager-graphql/images/c9f66e16-18fc-47e7-80d2-8285e4945aab___02415dfe7c43260a39980d26a4a3f438.svg"
/>
Solicite sua troca
</a>
</div>
<div class="rodape__redes">
<a href="https://facebook.com/usereserva" class="rodape__rede">
<img
src="https://lojausereserva.vtexassets.com/arquivos/fbx1.png"
alt="Logo Facebook"
/>
</a>
<a href="https://instagram.com/reserva" class="rodape__rede">
<img
src="https://lojausereserva.vtexassets.com/arquivos/insx1.png"
alt="Logo Instagram"
/>
</a>
<a
href="https://youtube.com/user/usereserva"
class="rodape__rede"
>
<img
src="https://lojausereserva.vtexassets.com/arquivos/ytx1.png"
alt="Logo YouTube"
/>
</a>
<a href="https://twitter.com/usereserva" class="rodape__rede">
<img
src="https://lojausereserva.vtexassets.com/arquivos/twx1.png"
alt="Logo Twitter"
/>
</a>
<a
href="https://linkedin.com/company/reserva"
class="rodape__rede"
>
<img
src="https://lojausereserva.vtexassets.com/arquivos/linx1.png"
alt="Logo LinkedIn"
/>
</a>
</div>
</div>
</div>
<div class="rodape__container">
<div class="rodape__diferenciais">
<div class="rodape__diferencial">
<img
src="https://lojausereserva.vtexassets.com/arquivos/entr3x.png"
alt="Imagem Diferencial"
class="rodape__diferencial-imagem"
/>
<p class="rodape__diferencial-titulo">Entrega Internacional</p>
<p>Entrega para mais de 40 países de forma rápida e segura.</p>
</div>
<div class="rodape__diferencial">
<img
src="https://lojausereserva.vtexassets.com/arquivos/1p5px2.png"
alt="Imagem Diferencial"
class="rodape__diferencial-imagem"
/>
<p class="rodape__diferencial-titulo">1P=5P</p>
<p>
A cada peça vendida, 5 pratos de comida são viabilizados para
quem tem fome.
</p>
</div>
<div class="rodape__diferencial">
<img
src="https://lojausereserva.vtexassets.com/arquivos/trocax2.png"
alt="Imagem Diferencial"
class="rodape__diferencial-imagem"
/>
<p class="rodape__diferencial-titulo">Troca Facilitada</p>
<p>
Compre no site ou app e troque em uma das lojas em até 7 dias.
</p>
</div>
</div>
</div>
<div class="rodape__container">
<div class="rodape__certificacoes">
<div class="rodape__certificacao">
<p class="rodape__certificacao-titulo">Somos com Orgulho</p>
<div class="rodape__certificados">
<div class="rodape__certificado">
<img
src="https://lojausereserva.vtexassets.com/arquivos/empb2x.png"
alt="Imagem Certificado"
/>
</div>
<div class="rodape__certificado">
<img
src="https://lojausereserva.vtexassets.com/arquivos/capit2x.png"
alt="Imagem Certificado"
/>
</div>
</div>
</div>
<div class="rodape__certificacao">
<p
class="rodape__certificacao-titulo rodape__certificacao-titulo--centralizado"
>
Navegue por Marcas
</p>
<div class="rodape__certificados">
<a
href="https://usereserva.com/"
class="rodape__certificado rodape__certificado--opacidade"
>
<img
src="https://lojausereserva.vtexassets.com/arquivos/rsvx1.png"
alt="Imagem Certificado"
/>
</a>
<a
href="https://usereserva.com/mini"
class="rodape__certificado rodape__certificado--opacidade"
>
<img
src="https://lojausereserva.vtexassets.com/arquivos/rsvminix1.png"
alt="Imagem Certificado"
/>
</a>
<a
href="https://usereserva.com/calcados"
class="rodape__certificado rodape__certificado--opacidade"
>
<img
src="https://lojausereserva.vtexassets.com/arquivos/rsvgox1.png"
alt="Imagem Certificado "
/>
</a>
<a
href="https://usereserva.com/reversa"
class="rodape__certificado rodape__certificado--opacidade"
>
<img
src="https://lojausereserva.vtexassets.com/arquivos/rvsx1.png"
alt="Imagem Certificado"
/>
</a>
</div>
</div>
<div class="rodape__certificacao">
<p class="rodape__certificacao-titulo">Certificações</p>
<div class="rodape__certificados">
<div class="rodape__certificado">
<img
src="https://lojausereserva.vtexassets.com/arquivos/letse2x.png"
alt="Imagem Certificado"
/>
</div>
<div class="rodape__certificado">
<img
src="https://lojausereserva.vtexassets.com/arquivos/ebit2x.png"
alt="Imagem Certificado"
/>
</div>
<div class="rodape__certificado">
<img
src="https://lojausereserva.vtexassets.com/arquivos/recla2x.png"
alt="Imagem Certificado"
/>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="rodape__secao-empresa">
<p>
AREZZO INDUSTRIA E COMERCIO S.A | CNPJ: 16.590.234/0064-50 | Inscrição
Estadual: 12297378 | AV ARTHUR ANTONIO SENDAS, 999 - GALPÃO 300 -
PARQUE JURITI - SAO JOÃO DE MERITI | CEP: 25585-085 - RJ
</p>
</section>
</footer>In base.html, before the section where JavaScript files are referenced, include the footer.html using the following line of code:
base.html
{% include 'footer.html' %}Now, the footer will appear at the bottom of every page, as it is included in base.html, which is used across all HTML files.
Last updated