Problem with Layout of my personal website, i using Django and JavaScript in this project [closed]
base.html
<body>
{% block content %}
{% endblock %}
{% block js %}
{% endblock %}
</body>
base.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
navbar.html
<header id="header">
<nav id="navbar">
<div class="photo-name">
<img id="photo" src="{% static 'images/perfil.png' %}" alt="foto-perfil" />
<h1>Gabriel Gattini</h1>
<div class="line"></div>
<p class="p-dev">{% trans "Desenvolvedor Full Stack" %}</p>
</div>
<div class="container-nav-links">
<div class="projects">
<a class="a-nav" href="#projects">{% trans "Projetos" %}</a>
<i id="icon" class="fa-solid fa-laptop-code"></i>
</div>
<div class="aboutme">
<a class="a-nav" href="#aboutme">{% trans "Sobre Mim" %}</a>
<i id="icon" class="fa-solid fa-book-open-reader"></i>
</div>
<div class="tools">
<a class="a-nav" href="#skills">{% trans "Habilidades" %}</a>
<i id="icon" class="fa-solid fa-fire"></i>
</div>
<div class="contacts">
<a class="a-nav" href="#contacts">{% trans "Contato" %}</a>
<i id="icon" class="fa-solid fa-at"></i>
</div>
<div class="background-color">
<i id="sun-icon" class="fa-solid fa-sun"></i>
<i id="moon-icon" class="fa-solid fa-moon"></i>
</div>
<form action="{% url 'set_language' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ request.get_full_path }}">
<button class="nav-btn" type="submit" name="language" value="pt-br">
<img id="brazil" src="{% static 'images/brasil.svg' %}" alt="flag-brasil" />
</button>
<button class="nav-btn" type="submit" name="language" value="en">
<img id="eua" src="{% static 'images/eua.svg' %}" alt="flag-eua" />
</button>
</form>
</div>
</nav>
</header>
navbar.css
#header {
z-index: 1;
position: fixed;
height: 100vh;
width: 20%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
#navbar {
height: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2rem;
width: 80%;
text-align: center;
padding: 1rem;
margin: 0 auto;
z-index: 10;
}
.user-manager {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 2rem;
margin-top: 2rem;
margin-left: 9rem;
width: 60%;
height: auto;
padding: 1rem;
}
homepage.html
{% block content %}
{% include 'navbar.html' %}
<main>
{% if messages %}
<div class="container-messages">
{% for message in messages %}
<span class="message {{ message.tags }}-msg">
{{ message }}
<!-- <button class="close-btn">×</button> -->
</span>
{% endfor %}
{% endif %}
<!-- Login e Criar Conta -->
<div class="user-manager">
{% if user.is_authenticated %}
<h3 class="welcome">{% trans "Bem-Vindo" %} <span>@{{user.username}}</span></h3>
<a class="a-user" href="{% url 'profile' %}">{% trans "Perfil" %} <i id="perfil-icon"
class="fa-solid fa-user"></i></a>
<a class="a-user" href="{% url 'logout' %}">{% trans "Logout" %} <i id="logout-icon" class="fa-solid fa-power-off"></i></a>
{% else %}
<h3 class="welcome">{% trans "Bem-Vindo" %}</h3>
<a class="a-user" href="{% url 'login_and_signup' %}">{% trans "Entrar" %} <i id="login-icon"
class="fa-solid fa-power-off"></i></a>
<a class="a-user" href="{% url 'login_and_signup' %}">{% trans "Criar Conta" %} <i id="create-icon"
class="fa-solid fa-user-plus"></i></a>
{% endif %}
</div>
<!-- Sobre mim -->
<section class="container" id="aboutme">
<h2>{% trans 'Sobre Mim' %}</h2>
<div class="container-aboutme">
<p class="p-aboutme">
{% trans 'Bem-vindo me chamo' %} <span class="about-me-span">Gabriel Gattini</span>,
{% trans 'desenvolvedor' %} <span class="about-me-span">Full Stack</span>
{% trans 'especializado em' %} <span class="django">Django</span>.
{% trans 'Meu objetivo é conquistar minha primeira oportunidade na área e evoluir constantemente como programador.' %}
{% trans 'Tenho experiência com' %} <span class="python">Python</span>,
<span class="django">Django</span>, <span class="html">HTML</span>,
<span class="css">CSS</span>, <span class="javascript">JavaScript</span>
{% trans 'e aprendendo atualmente' %} <span class="react">React</span>,
{% trans 'e estou sempre aprendendo novas tecnologias.' %}
{% trans 'Gosto de desafios, resolver problemas e criar aplicações eficientes e bem estruturadas.' %}
{% trans 'Além da programação, sou apaixonado por' %}
{% trans 'musculação, nutrição, psicologia.' %}
{% trans 'Estou sempre buscando melhorar e construir projetos que fazem a diferença.' %}
</p>
</div>
</section>
<!-- Seção Projetos -->
<section class="container" id="projects">
<h2>{% trans "Projetos" %}</h2>
<div class="cards-grid">
<div class="card">
<h4>{% trans "Sistema Escolar" %}</h4>
<div class="card-img">
<img class="project-image" src='{% static "images/pythontransparent.png" %}' alt="Projeto" />
</div>
<div class="card-content">
<div class="technologies">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/django/django-plain.svg" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg" />
</div>
<div class="code">
<a target="_blank" class="a-projects" href="https://github.com/gattini0928/Django-School-CRUD">{% trans "Código" %}</a>
<i class="fa-brands fa-github"></i>
</div>
<div class="video">
<a class="a-projects" href="{% url 'project' %}">Video</a>
<i class="fa-solid fa-video"></i>
</div>
</div>
</div>
</section>
<!-- Seção Habilidades -->
<section class="container" id="skills">
<h2>{% trans 'Habilidades Comportamentais' %}</h2>
<div class="soft-skills">
<p>
{% trans 'Possuo uma ótima' %} <span class="soft-skills-span">{% trans 'comunicação' %}</span>
{% trans 'e sigo aprendendo sobre comportamento humano tanto no ambiente profissional quanto pessoal,' %}
<span class="soft-skills-span">{% trans 'empatia' %}</span>
{% trans 'é o que me ajudou a saber lidar com opiniões e crenças diferentes, acredito que isso seja um diferencial,' %}
{% trans 'sou uma pessoa' %} <span class="soft-skills-span">{% trans 'resiliente' %}</span>
{% trans 'e' %} <span class="soft-skills-span">{% trans 'disciplinada' %}</span>
{% trans 'que nunca foge de um desafio por mais díficil que possa ser.' %}
{% trans 'Desejo ingressar nesta área para resolver desafios, construir sistemas novos e ajudar a equipe e a empresa em que estou empregado a' %}
<span class="soft-skills-span">{% trans 'evoluir' %}</span>. 🚀
</p>
</div>
<div class="hard-skills">
<span class="python">Python</span>
<span class="django">Django</span>
<span class="html">Html</span>
<span class="css">CSS</span>
<span class="javascript">JavaScript</span>
<span class="postgre">PostGreSQL</span>
<span class="react">React</span>
</div>
</section>
{% include 'footer.html' %}
<!-- Icones com modais -->
<div class="container-patch-notes">
<i class="fa-solid fa-bell" id="bell-icon"></i>
<div class="patch-notes" id="patch-notes">
<h4>{% trans "Notificações" %}</h4>
<strong>{% trans "Notas de Atualizações" %}:</strong>
<p>{% trans "Página de blog criada" %}:</p><a href="#" class="tooltip a-notification" data-tooltip="{% trans 'Nova Página de Blog' %}" target="_blank" >Blog</a>
<p>{% trans "Novo post na página de blog" %}:</p><a href="#" class="tooltip a-notification" data-tooltip="{% trans 'Ver post publicado em' %} 04/04/2025">Post</a>
<p>{% trans "Novo Projeto" %}:</p> <a href="#" class="tooltip a-notification" data-tooltip="{% trans 'Projeto novo lançado dia' %} 07/05/2025">{% trans "Automatização Comercial Vendas" %}</a>
<button class="patch-notes-btn">{% trans "Fechar" %}</button>
</div>
</div>
<div class="container-bug-comment">
<i id="feedback-icon" class="fa-solid fa-comment"></i>
<i id="bug-icon" class="fa-solid fa-bug"></i>
<div class="container-feedback" id="container-feedback">
<div class="cancel-button-wrapper">
<div class="line-1"></div>
<div class="line-2"></div>
</div>
<form action="" id="feedback-form">
<label for="feedback">Feedback</label>
<textarea class="textarea-homepage" name="feedback" id="feedback"
placeholder="{% trans 'Descreva o que achou até aqui.' %}"></textarea>
<button class="homepage-btn" type="submit">{% trans 'Enviar' %}</button>
</form>
</div>
<div class="container-bug-report" id="container-bug-report">
<div class="cancel-button-wrapper">
<div class="line-1"></div>
<div class="line-2"></div>
</div>
<form action="" id="bug-report-form">
<label for="bug-report">{% trans "Reportar Bug" %}</label>
<textarea class="textarea-homepage" name="bug-report" id="bug-report"
placeholder="{% trans 'Descreva com detalhes o erro que você encontrou.' %}"></textarea>
<button class="homepage-btn" type="submit">{% trans 'Enviar' %}</button>
</form>
</div>
</div>
</main>
{% endblock %}
homepage.css
main {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
width: 100%;
/* height: auto; */
margin: 0 auto;
padding: 1rem;
flex-direction: column;
min-height: 100vh;
max-width: 1200px;
background: rgba(255, 0, 0, 0.1);
border: 2px solid red !important;
position:relative;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 2rem;
margin-top: 3rem;
margin-left: 8rem;
width: 60%;
height: auto;
padding: 2rem;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
justify-content: center;
gap: 2rem;
width: 90%;
padding: 1rem;
background-color: transparent;
margin: 0 auto;
}
.card {
display: flex;
flex-direction: column;
width: 100%;
height: 35rem;
border-radius: 1.2rem;
overflow: hidden;
background-color: transparent;
border: solid 1px rgba(84, 84, 84, 0.2);
box-shadow: 0 0 0.8rem 0.4rem rgba(0, 0, 0, 0.3);
text-align: center;
padding: 2rem;
}
.card-content {
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-height: 600px;
}
.container-bug-comment {
position: fixed;
right: 2rem;
bottom: 2rem;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2rem;
margin: 0 auto;
}
.container-patch-notes {
position: fixed;
right: 2rem;
top: 2rem;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2rem;
margin: 0 auto;
}
.container-messages {
position: fixed;
top: 2rem;
left: 50%;
transform: translateX(-50%);
display:flex;
align-items: center;
justify-content: center;
flex-direction: row;
width: 80%;
padding: 1rem;
text-align: center;
font-size: 1.8rem;
z-index: 9999;
pointer-events: auto
height:5rem;
}
.message {
position: relative;
padding: 1rem;
border-radius: 0.5rem;
margin-top: 1rem;
font-weight: bold;
animation: fadeOut 5s forwards;
opacity: 1;
white-space: pre-wrap;
}
js
document.addEventListener('DOMContentLoaded', () => {
const messages = document.querySelectorAll('.message');
messages.forEach((msg) => {
setTimeout(() => {
msg.style.transition = 'opacity 0.5s ease';
msg.style.opacity = '0';
setTimeout(() => msg.style.display = 'none', 500);
}, 5000);
})
const closeBtns = document.querySelectorAll('.close-btn');
closeBtns.forEach((btn) => {
btn.addEventListener('click', (event) => {
event.preventDefault();
const msg = event.target.closest('.message');
if (msg) {
msg.style.transition = 'opacity 0.5s ease';
msg.style.opacity = '0';
setTimeout(() => msg.style.display = 'none', 500);
}
});
});
});
bro I can't explain what's going on, but basically when the message appears it seems that the content is flattened and affects the main da it doesn't fit the content in the main, the message is supposed to appear on top of the fixed user manager
here as you will notice the css applied here also applies to .user-manager of the homepage