.elementor-75 .elementor-element.elementor-element-e234eba{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--background-transition:0.3s;}.elementor-75 .elementor-element.elementor-element-e234eba.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-75 .elementor-element.elementor-element-dd75ea0{--display:flex;--min-height:331px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-75 .elementor-element.elementor-element-75a3629{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-75 .elementor-element.elementor-element-ea4b847{color:#DAA520;font-family:"Lobster", Sans-serif;font-size:26px;}.elementor-75 .elementor-element.elementor-element-6551bc9{--display:flex;--background-transition:0.3s;}.elementor-75 .elementor-element.elementor-element-6551bc9.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-75 .elementor-element.elementor-element-459a6da{--display:flex;--background-transition:0.3s;}@media(min-width:768px){.elementor-75 .elementor-element.elementor-element-e234eba{--width:100%;}.elementor-75 .elementor-element.elementor-element-dd75ea0{--width:33.3333%;}.elementor-75 .elementor-element.elementor-element-75a3629{--width:66.6666%;}.elementor-75 .elementor-element.elementor-element-6551bc9{--width:97.581%;}}/* Start custom CSS */body.elementor-page-75 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 
                 4px 4px 10px rgba(0, 0, 0, 0.3);
/* Efeito de Zoom-In em Elementos Clicáveis */
a, button, .btn, .clickable-element {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a:hover, button:hover, .btn:hover, .clickable-element:hover {
    transform: scale(1.05); /* Aumenta 5% */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra suave */
    
<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Efeito de Entrada ao Rolar</title>
    <style>
        /* Reset de estilo */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Estilo para o conteúdo */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;
            padding: 20px;
        }

        /* Secção com animação */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        /* Classe ativada ao entrar na visualização */
        .fade-in-section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Estilo das secções */
        .section {
            max-width: 600px;
            padding: 20px;
            text-align: center;
            background-color: #f0f0f0;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

    <!-- Secções com o efeito fade-in -->
    <div class="fade-in-section section">
        <h2>Bem-vindo!</h2>
        <p>Esta é a primeira secção com o efeito de entrada ao rolar.</p>
    </div>

    <div class="fade-in-section section">
        <h2>Sobre Mim</h2>
        <p>Algumas informações sobre mim e as minhas competências.</p>
    </div>

    <div class="fade-in-section section">
        <h2>Projetos</h2>
        <p>Veja os meus projetos mais recentes e realizei recentemente.</p>
    </div>

    <script>
        // Função para adicionar a classe "visible" quando o elemento entra na visualização
        const fadeInSections = document.querySelectorAll('.fade-in-section');

        const handleScroll = () => {
            fadeInSections.forEach((section) => {
                const sectionTop = section.getBoundingClientRect().top;
                const triggerBottom = window.innerHeight * 0.9;

                if (sectionTop < triggerBottom) {
                    section.classList.add('visible');
                }
            });
        };

        // Evento de scroll para acionar a função
        window.addEventListener('scroll', handleScroll);
        // Acionar imediatamente ao carregar a página
        handleScroll();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cabeçalho e Rodapé Dourados</title>
    <style>
        /* Reset de estilo */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Estilo do cabeçalho */
        header {
            background-color: #222;
            padding: 20px;
            text-align: center;
        }

        /* Estilo do rodapé */
        footer {
            background-color: #222;
            padding: 20px;
            text-align: center;
            position: fixed;
            width: 100%;
            bottom: 0;
        }

        /* Estilo do texto dourado */
        .gold-text {
            color: #FFD700; /* Dourado */
            font-size: 1.5em;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Efeito de sombra */
        }
    </style>
</head>
<body>

    <!-- Cabeçalho -->
    <header>
        <h1 class="gold-text">Bem-vindo ao Meu Site</h1>
    </header>

    <div style="padding: 80px; text-align: center;">
        <p>Aqui fica o conteúdo principal do site.</p>
    </div>

    <!-- Rodapé -->
    <footer>
        <p class="gold-text">© 2024 Meu Nome. Todos os direitos reservados.</p>
    </footer>

</body>
</html>/* End custom CSS */