Мобильная версия{% block content %}
{% endblock %}
{% block js %}
{% endblock %}
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
Gabriel Gattini
{% trans "Desenvolvedor Full Stack" %}
{% trans "Projetos" %}
{% trans "Sobre Mim" %}
{% trans "Habilidades" %}
{% trans "Contato" %}
{% csrf_token %}
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' %}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
{% endif %}
{% if user.is_authenticated %}
{% trans "Bem-Vindo" %} @{{user.username}}
{% trans "Perfil" %}
{% trans "Logout" %}
{% else %}
{% trans "Bem-Vindo" %}
{% trans "Entrar" %} class="fa-solid fa-power-off">
{% trans "Criar Conta" %} class="fa-solid fa-user-plus">
{% endif %}
{% trans 'Sobre Mim' %}
{% trans 'Bem-vindo me chamo' %} Gabriel Gattini,
{% trans 'desenvolvedor' %} Full Stack
{% trans 'especializado em' %} Django.
{% trans 'Meu objetivo é conquistar minha primeira oportunidade na área e evoluir constantemente como programador.' %}
{% trans 'Tenho experiência com' %} Python,
Django, HTML,
CSS, JavaScript
{% trans 'e aprendendo atualmente' %} React,
{% 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.' %}
{% trans "Projetos" %}
{% trans "Sistema Escolar" %}
{% trans "Código" %}
Video
{% trans 'Habilidades Comportamentais' %}
{% trans 'Possuo uma ótima' %} {% trans 'comunicação' %}
{% trans 'e sigo aprendendo sobre comportamento humano tanto no ambiente profissional quanto pessoal,' %}
{% trans 'empatia' %}
{% 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' %} {% trans 'resiliente' %}
{% trans 'e' %} {% trans 'disciplinada' %}
{% 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' %}
{% trans 'evoluir' %}.
Python
Django
Html
CSS
JavaScript
PostGreSQL
React
{% include 'footer.html' %}
{% trans "Notificações" %}
{% trans "Notas de Atualizações" %}:{% trans "Página de blog criada" %}:
Blog
{% trans "Novo post na página de blog" %}:
Post
{% trans "Novo Projeto" %}:
{% trans "Automatização Comercial Vendas" %}
{% trans "Fechar" %}
Feedback
{% trans 'Enviar' %}
{% trans "Reportar Bug" %}
{% trans 'Enviar' %}
{% 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);
}
});
});
});
< /code>
bro Я не могу объяснить, что происходит, но в основном, когда появляется сообщение
кажется, что содержание сглаживается, и влияет на основную DA, оно не соответствует
Содержание в основном, сообщение должно появиться на вершине фиксированного пользовательского менеджера < /p>
, когда вы заметите, что CSS, применяемые здесь также к
using-maner of-leprage.>
Подробнее здесь: https://stackoverflow.com/questions/795 ... ipt-in-thi
