Denuncie   Favoritos   Indicar  

Enteder o código...por quê não funciona.

1. Enteder o código...por quê não funciona.

Rogerio Nunes Calistro
Calistro
(usa Ubuntu)

Enviado em 29/09/2023 - 21:58h

Boa noite pessoas, já estive diversas vezes por aqui, só com dúvidas sobre linux. hoje preciso de uma explicação (na verdade uma luz). Eu copie este código na internet pois achei muito elegante. No entanto, o código parece funcional (visto na explicação de onde tirei). Mas quando coloquei para ver como ficava, ele simplesmente não funciona. Alguém poderia me dizer porque disso.
Sempre ocorre erro neste ponto do programa (em negrito).

HTML:

    <header class="header">

      <a href="#" class="logo">My Name.</a>

      <div class="bx bx-menu" id="menu-icon"></div>

      

      <nav class="navbar">

        <a href="#home" class="active">Home</a>

        <a href="#about">HOME</a>

        <a href="#education">EDUCATION</a>

        <a href="#skills">SKILLS</a>

        <a href="#contact">CONTACT</a>



        <span class="active-nav"></span>

      </nav>

    </header>


Javascript:

let menuIcon = document.querySelector('#menu-icon');

let navbar = document.querySelector('.navbar');



menuIcon.onclick = () => {

    menuIcon.classList.toggle('bx-x');

    navbar.classList.toggle('active');

}



let sections = document.querySelectorAll('section');

let navlinks = document.querySelectorAll('header nav a');



window.onscroll = () => {

    sections.forEach(sec => {

        let top = window.scrollY;

        let offset = sec.offsetTop - 100;

        let height = sec.offsetHeight;

        let id = sec.getAttribute('id');



        if(top >= offset && top < offset + height) {



            navlinks.forEach(links => {

                links.classList.remove('active');

                document.querySelector('header nav a[href*=' + id + ']').classList.add('active');

            });



            sec.classList.add('show-animate');

        }



        else {

            sec.classList.remove('show-animate');

        }

    });





    let header = document.querySelector('header')



    header.classList.toggle('sticky', window.scrollY > 100);





    menuIcon.classList.remove('bx-x');

    navbar.classList.remove('active');





    let footer = document.querySelector('footer');

    footer.classList.toggle('show-animate', this.innerHeight + this.scrollY >= document.scrollingElement.scrollHeight);

}


0 0
  • Quote

    •   


    2. Re: Enteder o código...por quê não funciona.

    Tipoff *tipoff
    tipoff
    (usa Nenhuma)

    Enviado em 30/09/2023 - 08:51h

    O código manipula diversas classes CSS que não estão no código que enviou. Manda o CSS também para podermos rodar o código e ver o que esta de errado.

    Já te adianto que o menuIcon.onclick está funcionando, coloquei um console.log dentro e printou corretamente ao clicar no elemento na tela. Falta só o CSS.


    0 0
  • Quote

    • 3. Re: Enteder o código...por quê não funciona.

    Marcelo Oliver
    msoliver
    (usa Debian)

    Enviado em 30/09/2023 - 23:03h


    Calistro escreveu:

    Boa noite pessoas, já estive diversas vezes por aqui, só com dúvidas sobre linux. hoje preciso de uma explicação (na verdade uma luz). Eu copie este código na internet pois achei muito elegante. No entanto, o código parece funcional (visto na explicação de onde tirei). Mas quando coloquei para ver como ficava, ele simplesmente não funciona. Alguém poderia me dizer porque disso.
    Sempre ocorre erro neste ponto do programa (em negrito).

    HTML:

        <header class="header">
    
      <a href="#" class="logo">My Name.</a>
    
      <div class="bx bx-menu" id="menu-icon"></div>
    
      
    
      <nav class="navbar">
    
        <a href="#home" class="active">Home</a>
    
        <a href="#about">HOME</a>
    
        <a href="#education">EDUCATION</a>
    
        <a href="#skills">SKILLS</a>
    
        <a href="#contact">CONTACT</a>
    

    
        <span class="active-nav"></span>
    
      </nav>
    
    </header>


    Javascript:

    let menuIcon = document.querySelector('#menu-icon');
    
let navbar = document.querySelector('.navbar');
    

    
menuIcon.onclick = () => {
    
    menuIcon.classList.toggle('bx-x');
    
    navbar.classList.toggle('active');
    
}
    

    
let sections = document.querySelectorAll('section');
    
let navlinks = document.querySelectorAll('header nav a');
    

    
window.onscroll = () => {
    
    sections.forEach(sec => {
    
        let top = window.scrollY;
    
        let offset = sec.offsetTop - 100;
    
        let height = sec.offsetHeight;
    
        let id = sec.getAttribute('id');
    

    
        if(top >= offset && top < offset + height) {
    

    
            navlinks.forEach(links => {
    
                links.classList.remove('active');
    
                document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
    
            });
    

    
            sec.classList.add('show-animate');
    
        }
    

    
        else {
    
            sec.classList.remove('show-animate');
    
        }
    
    });
    

    

    
    let header = document.querySelector('header')
    

    
    header.classList.toggle('sticky', window.scrollY > 100);
    

    

    
    menuIcon.classList.remove('bx-x');
    
    navbar.classList.remove('active');
    

    

    
    let footer = document.querySelector('footer');
    
    footer.classList.toggle('show-animate', this.innerHeight + this.scrollY >= document.scrollingElement.scrollHeight);
    
}

    Calistro, boa noite.
    O <html>, parece incompleto....

    let sections = document.querySelectorAll('section');
    captura os elementos 'section', que não existem.

    A função:
    window.onscroll = () => {
    sections.forEach(sec => {
    ....
    })
    ....
    }
    Que 'pega ' o evento onscroll,
    O forEache, usa os elementos de "sections",
    bem provável que esse trecho não funcione.


    ______________________________________________________________________
    
Att.: Marcelo Oliver
    
______________________________________________________________________


    0 0
  • Quote

    • 4. Re: Enteder o código...por quê não funciona.

    Rogerio Nunes Calistro
    Calistro
    (usa Ubuntu)

    Enviado em 17/10/2023 - 21:08h


    Calistro escreveu:

    Boa noite pessoas, não pude dar retorno com o código pois andei bem ocupado. Segue código completo HTML, CSS e JAVASCRIPT:

    HTML:

    [quote]<!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">
    <link href="styleCss/style.css" rel="stylesheet"><!--Link para estilo CSS3-->
    <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=Quicksand:wght@300&display=swap" rel="stylesheet">
    <script type="text/javascript" src="javascript/menu.js"></script>
    <title>Documento Teste</title>
    <!-- box icons -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    </head>
    <body>

    <header class="header">
    <a href="#" class="logo">Lorem ipsum dolor sit.<span class="animate" style="--i:1;"></span></a>
    <div class="bx bx-menu" id="menu-icon"><span class="animate" style="--i:2;"></span></div>

    <nav class="navbar">
    <a href="#home" class="active">HOME</a>
    <a href="#about">ABOUT</a>
    <a href="#education">EDUCATION</a>
    <a href="#skills">SKILLS</a>
    <a href="#contact">CONTACT</a>

    <span class="active-nav"></span>
    <span class="animate" style="--i:2;"></span>
    </nav>
    </header>

    <!-- home section design -->
    <section class="home show-animate" id="home">
    <div class="home-content">
    <h1>Lorem, Ipsun Dolor <span>Lorem ipsum dolor</span><span class="animate" style="--i:2;"></span></h1>
    <div class="text-animate">
    <h3>LOREM IPSUM DOLOR</h3>
    <span class="animate" style="--i:3;"></span>
    </div>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati illum eum vitae cum deserunt pariatur officia sit ducimus corporis? Esse aliquam, eius vitae
    itaque possimus debitis at?</p>
    <span class="animate" style="--i:4;"></span>

    <div class="btn-box">
    <a href="#" class="btn">Hire me</a>
    <a href="#" class="btn">Let's talk</a>
    <span class="animate" style="--i:5;"></span>
    </div>
    </div>

    <div class="home-sci">
    <a href="#"><i class='bx bxl-facebook'></i></a>
    <a href="#"><i class='bx bxl-linkedin'></i></a>
    <a href="#"><i class='bx bxl-instagram-alt'></i></a>
    <a href="#"><i class='bx bxl-github'></i></a>
    <span class="animate" style="--i:6;"></span>
    </div>

    <div class="home-imgHover"></div>
    <span class="animate home-img" style="--i:7;"></span>

    </section>

    <!-- ABOUT SECTION DESIGN -->
    <section class="about" id="about">
    <h2 class="heading">About <span>Me</span><!--<span class="animate" style="--i:1;"></span>--></h2>

    <div class="about-img">
    <img src="#" alt="">
    <span class="circle-spin"></span>
    <!--<span class="animate scroll" style="--i:2;"></span>-->
    </div>

    <div class="about-content">
    <h3>LOREM IPSUM DOLOR ! <!--<span class="animate scroll" style="--i:3;"></span>--></h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit vel doloremque
    laudantium harum dolore ab officiis quasi magni quod in pariatur, quas velit esse! Accusantium nesciunt nam tenetur unde perspiciatis laborum similique natus, corporis debitis
    voluptates neque sunt in quos hic voluptate nobis nostrum beatae architecto magni
    inventore. Molestiae, eum!
    <!--<span class="animate scroll" style="--i:4;"></span>-->
    </p>

    <div class="btn-box btns">
    <a href="#" class="btn">Read More</a>
    <!--<span class="animate scroll" style="--i:5;"></span>-->
    </div>
    </div>
    </section>

    <!-- EDUCATION SECTION DESIGN -->
    <section class="education" id="education">
    <h2 class="heading">My <span>Journey</span><!--<span class="animate scroll" style="--i:1;"></span>--></h2>

    <div class="education-row">
    <div class="education-column">
    <h3 class="title">Education<!--<span class="animate scroll" style="--i:2;"></span>--></h3>

    <div class="education-box">
    <div class="education-content">
    <div class="content">
    <div class="year"><i class='bx bxs-calendar'></i> 2017 - 2018</div>
    <h3>Master Degree - University</h3>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. A cum, vero maiores natus
    recusandae at harum laboriosam accusantium ducimus ipsam?</p>
    </div>
    </div>

    <div class="education-content">
    <div class="content">
    <div class="year"><i class='bx bxs-calendar'></i> 2018 - 2019</div>
    <h3>Master Degree - University</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
    ullam iste nemo blanditiis neque sequi tempora natus.</p>
    </div>
    </div>

    <div class="education-content">
    <div class="content">
    <div class="year"><i class='bx bxs-calendar'></i> 2019 - 2020</div>
    <h3>Master Degree - University</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
    ullam iste nemo blanditiis neque sequi tempora natus.</p>
    </div>
    </div>

    <!--<span class="animate scroll" style="--i:3;"></span>-->

    </div>
    </div>

    <div class="education-column">
    <h3 class="title">Experience<!--<span class="animate scroll" style="--i:5;"></span>--></h3>

    <div class="education-box">
    <div class="education-content">
    <div class="content">
    <div class="year"><i class='bx bxs-calendar'></i> 2017 - 2018</div>
    <h3>Web Developer - Company</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
    ullam iste nemo blanditiis neque sequi tempora natus.</p>
    </div>
    </div>

    <div class="education-content">
    <div class="content">
    <div class="year"><i class='bx bxs-calendar'></i> 2018 - 2019</div>
    <h3>Master Degree - University</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
    ullam iste nemo blanditiis neque sequi tempora natus.</p>
    </div>
    </div>

    <div class="education-content">
    <div class="content">
    <div class="year"><i class='bx bxs-calendar'></i> 2019 - 2020</div>
    <h3>Master Degree - University</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
    ullam iste nemo blanditiis neque sequi tempora natus.</p>
    </div>
    </div>
    </div>
    </div>
    </section>

    <!-- SKILLS SECTION DESIGN -->
    <section class="skills" id="skills">
    <h2 class="heading">Lorem <span>Ipsum</span><!--<span class="animate scroll" style="--i:1;"></span>--></h2>

    <div class="skills-row">
    <div class="skills-column">
    <h3 class="title">Coding Skills<!--<span class="animate scroll" style="--i:2;"></span>--></h3>

    <div class="skills-box">
    <div class="skills-content">
    <div class="progress">
    <h3>LOREM <span>90%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM <span>80%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM <span>80%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM <span>80%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM <span>70%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM <span>70%</span></h3>
    <div class="bar"><span></span></div>
    </div>
    </div>

    <!--<span class="animate scroll" style="--i:3;"></span>-->
    </div>
    </div>

    <!--INICIO DE SESSÃO-->
    <div class="skills-column">
    <h3 class="title">LOREM IPSUM DOLOR<!--<span class="animate scroll" style="--i:5;"></span>--></h3>

    <div class="skills-box">
    <div class="skills-content">
    <div class="progress">
    <h3>LOREM IPSUM <span>70%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM IPSUM <span>85%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM IPSUM <span>70%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM IPSUM <span>50%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM IPSUM <span>70%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    <div class="progress">
    <h3>LOREM IPSUM <span>70%</span></h3>
    <div class="bar"><span></span></div>
    </div>

    </div>

    <!--<span class="animate scroll" style="--i:6;"></span>-->
    </div>
    </div>
    </div>
    </section>

    <!-- CONTACT SECTION DESIGN -->
    <section class="contact" id="contact">
    <h2 class="heading">Lorem <span>Ipsum !</span><!--<span class="animate scroll" style="--i:1;"></span>--></h2>

    <form id="frmMesage" name="formMesage" action="#" method="post">
    <div class="input-box">
    <div class="input-field">
    <input type="text" placeholder="*Nome Completo" title="*Preenchimento obrigatório." required>
    <span class="focus"></span>
    </div>

    <div class="input-field">
    <input type="text" placeholder="*seu@email.com" title="*Preenchimento obrigatório." required>
    <span class="focus"></span>
    </div>

    <!--<span class="animate scroll" style="--i:3;"></span>-->
    </div>

    <div class="input-box">
    <div class="input-field">
    <input type="number" placeholder="*(xx) x xxxx-xxxx" title="*Preenchimento obrigatório." required>
    <span class="focus"></span>
    </div>

    <div class="input-field">
    <input type="text" placeholder="*Assunto do email" title="*Preenchimento obrigatório." required>
    <span class="focus"></span>
    </div>
    <!--<span class="animate scroll" style="--i:5;"></span>-->
    </div>

    <div class="textarea-field">
    <textarea name="" id="" cols="30" rows="10" placeholder="*Sua Mensagem" title="*Preenchimento obrigatório." required></textarea>
    <span class="focus"></span>
    <!--<span class="animate scroll" style="--i:7;"></span>-->
    </div>

    <div class="btn-box btns" >
    <button type="submit" class="btn" value="enviar">Enviar</button>

    <!--<span class="animate scroll" style="--i:9;"></span>-->
    </div>
    </form>
    </section>

    <div class="footer">
    <div class="footer-text">
    <p>Copyright &copy; 2023 by Lorem Ipsum Dolor | All Rights Reserved.</p>
    <!--<span class="animate scroll" style="--i:1;"></span>-->
    </div>

    <div class="footer-iconTop">
    <a href="#"><i class='bx bx-up-arrow-alt'></i></a>
    <!--<span class="animate scroll" style="--i:3;"></span>-->
    </div>
    </div>

    </body>
    </html>


    CSS:

    @charset "UTF-8";
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
    /*-------CSS3 DOCUMENT------*/

    /*RESET*/
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Quicksand', sans-serif;
    }

    :root {
    --bg-color: #081b29;
    --second-bg-color: #112e42;
    --text-color: #ededed;
    --main-color: #00abf0;
    }

    html {
    font-size: 62.5%;
    overflow-x: hidden;
    }

    body {
    background: var(--bg-color);
    color: var(--text-color);
    }

    .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    background: var(--bg-color);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: .3s;
    }

    .header.sticky {
    display: flex; /*SOMENTE UM TESTE DE DISPLAY*/
    background: var(--bg-color);
    transition: .0s;
    }

    .logo {
    position: relative;
    font-size: 2.5rem;
    color: var(--text-color);
    font-weight: 600;
    }

    .navbar {
    position: relative;
    }

    .navbar a {
    font-size: 1.7rem;
    color: var(--text-color);
    font-weight: 500;
    margin-left: 3.5rem;
    transition: .3s;
    }

    .navbar a:hover,
    .navbar a.active {
    color: var(--main-color);
    }

    #menu-icon {
    position: relative;
    font-size: 3.6rem;
    color: var(--text-color);
    cursor: pointer;
    display: none;
    }

    section {
    min-height: 100vh;
    padding: 10rem 9% 2rem;
    }

    .home {
    display: flex;
    align-items: center;
    padding: 0 9%;
    background: url('') no-repeat;
    /*INSERIR IMAGEM*/
    background-size: cover;
    background-position: center;
    }

    .home-content {
    max-width: 60rem;
    z-index: 99;
    }

    .home-content h1 {
    position: relative;
    display: inline-block;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.3;
    }

    .home-content h1 span {
    color: var(--text-color);
    }

    .home-content .text-animate {
    position: relative;
    width: 32.8rem;
    }

    .home-content .text-animate h3 {
    font-size: 3.2rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: .7px var(--main-color);
    background-image: linear-gradient(var(--main-color), var(--main-color));
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-position: -33rem 0;
    animation: homeBgText 6s linear infinite;
    animation-delay: 2s;
    }

    .home.show-animate .home-content .text-animate h3 {
    animation: homeBgText 6s linear infinite;
    animation-delay: 2s;
    }

    .home-content .text-animate h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-right: 2px solid var(--main-color);
    z-index: -1;
    animation: homeCursorText 6s linear infinite;
    animation-delay: 2s;
    }

    .home.show-animate .home-content .text-animate h3::before {
    animation: homeCursorText 6s linear infinite;
    animation-delay: 2s;
    }

    .home-content p {
    position: relative;
    font-size: 1.6rem;
    margin: 2rem 0 4rem;
    }

    .btn-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 34.5rem;
    height: 5rem;
    }

    .btn-box .btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 15rem;
    height: 100%;
    background: var(--main-color);
    border: .2rem solid var(--main-color);
    border-radius: .8rem;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .1rem;
    color: var(--bg-color);
    z-index: 1;
    overflow: hidden;
    transition: .5s;
    }

    .btn-box .btn:hover {
    color: var(--main-color);
    }

    .btn-box .btn:nth-child(2) {
    background: transparent;
    color: var(--main-color);
    }

    .btn-box .btn:nth-child(2):hover {
    color: var(--bg-color);
    }

    .btn-box .btn:nth-child(2)::before {
    background: var(--main-color);
    }

    .btn-box .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--bg-color);
    z-index: -1;
    transition: .5s;
    }

    .btn-box .btn:hover::before {
    width: 100%;
    }

    .home-sci {
    position: absolute;
    bottom: 4rem;
    width: 170px;
    display: flex;
    justify-content: space-between;
    }

    .home-sci a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 20px;
    color: var(--main-color);
    z-index: 1;
    overflow: hidden;
    transition: .5s;
    }

    .home-sci a:hover {
    color: var(--bg-color);
    }

    .home-sci a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--main-color);
    z-index: -1;
    transition: .5s;
    }

    .home-sci a:hover::before {
    width: 100%;
    }

    .home-imgHover {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background: transparent;
    transition: 3s;
    }

    .home-imgHover:hover {
    background: var(--bg-color);
    opacity: .8;
    }

    .about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    background: var(--second-bg-color);
    padding-bottom: 6rem;
    }

    .heading {
    position: relative;
    display: inline-block;
    font-size: 5rem;
    margin-bottom: 3rem;
    text-align: center;
    }

    span {
    color: var(--main-color);
    }

    .about-img {
    position: relative;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .about-img img {
    width: 90%;
    border-radius: 50%;
    border: .2rem solid var(--main-color);
    }

    .about-img .circle-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top: .2rem solid var(--second-bg-color);
    border-bottom: .2rem solid var(--second-bg-color);
    border-left: .2rem solid var(--main-color);
    border-right: .2rem solid var(--main-color);
    animation: aboutSpinner 8s linear infinite;
    }

    .about-content {
    text-align: center;
    }

    .about-content h3 {
    position: relative;
    display: inline-block;
    font-size: 2.6rem;
    }

    .about-content p {
    position: relative;
    font-size: 1.6rem;
    margin: 2rem 0 3rem;
    }

    .btn-box.btns {
    display: inline-block;
    width: 15rem;
    }

    .btn-box.btns a::before {
    background: var(--second-bg-color);
    }

    /**** EDUCATION ****/
    .education {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: auto;
    padding-bottom: 5rem;
    }

    .education .education-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    }

    .education-row .education-column {
    flex: 1 1 40rem;
    }

    .education-column .title {
    position: relative;
    display: inline-block;
    font-size: 2.5rem;
    margin: 0 0 1.5rem 2rem;
    }

    .education-column .education-box {
    position: relative;
    border-left: .2rem solid var(--main-color);
    }

    .education-box .education-content {
    position: relative;
    padding-left: 2rem;
    }

    .education-box .education-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1.1rem;
    width: 2rem;
    height: 2rem;
    background: var(--main-color);
    border-radius: 50%;
    }

    .education-content .content {
    position: relative;
    padding: 1.5rem;
    border: .2rem solid var(--main-color);
    border-radius: .6rem;
    margin-bottom: 2rem;
    overflow: hidden;
    }

    .education-content .content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--second-bg-color);
    z-index: -1;
    transition: .5s;
    }

    .education-content .content:hover::before {
    width: 100%;
    }

    .education-content .content .year {
    font-size: 1.5rem;
    color: var(--main-color);
    padding-bottom: .5rem;
    }

    .education-content .content .year {
    padding-right: .5rem;
    }

    .education-content .content h3 {
    font-size: 2rem;
    }

    .education-content .content p {
    font-size: 1.6rem;
    padding-top: .5rem;
    }


    /**** SKILLS ****/
    .skills {
    min-height: auto;
    padding-bottom: 7rem;
    background: var(--second-bg-color);
    }

    .skills h2 {
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    }

    .skills .skills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    }

    .skills-row .skills-column {
    flex: 1 1 40rem;
    }

    .skills-column .title {
    position: relative;
    display: inline-block;
    font-size: 2.5rem;
    margin: 0 0 1.5rem;
    }

    .skills-column .skills-box {
    position: relative;
    }

    .skills-box .skills-content {
    position: relative;
    border: .2rem solid var(--main-color);
    border-radius: .6rem;
    padding: .5rem 1.5rem;
    z-index: 1;
    overflow: hidden;
    }

    .skills-box .skills-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--bg-color);
    z-index: -1;
    transition: .5s;
    }

    .skills-box .skills-content:hover::before {
    width: 100%;
    }

    .skills-content .progress {
    padding: 1rem 0;
    }

    .skills-content .progress h3 {
    font-size: 1.7rem;
    display: flex;
    justify-content: space-between;
    }

    .skills-content .progress h3 span {
    color: var(--text-color);
    }

    .skills-content .progress .bar {
    height: 2.5rem;
    border-radius: .6rem;
    border: .2rem solid var(--main-color);
    padding: .5rem;
    margin: 1rem 0;
    }

    .skills-content .progress .bar span {
    display: block;
    height: 100%;
    border-radius: .3rem;
    background: var(--main-color);
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(1) .bar span {
    width: 90%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(2) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(3) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(4) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(5) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(6) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(7) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(8) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(9) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(10) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(11) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(12) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(13) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(14) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(1) .skills-content .progress:nth-child(15) .bar span {
    width: 80%;
    }

    /********** PROFISSIONAL SKILLS **********/
    .skills-column:nth-child(2) .skills-content .progress:nth-child(1) .bar span {
    width: 20%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(2) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(3) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(4) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(5) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(6) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(7) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(8) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(9) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(10) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(11) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(12) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(13) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(14) .bar span {
    width: 80%;
    }

    .skills-column:nth-child(2) .skills-content .progress:nth-child(15) .bar span {
    width: 80%;
    }

    .contact {
    min-height: auto;
    padding-bottom: 7rem;
    }

    .contact h2 {
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    }

    .contact form {
    max-width: 70rem;
    margin: 0 auto;
    text-align: center;
    }

    .contact form .input-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    .contact form .input-box .input-field {
    position: relative;
    width: 49%;
    margin: .8rem 0;
    }

    .contact form .input-box .input-field input,
    .contact form .textarea-field textarea {
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--text-color);
    background: transparent;
    border-radius: .6rem;
    border: .2rem solid var(--main-color);
    }

    .contact form .input-box .input-field input::placeholder,
    .contact form .textarea-field textarea::placeholder {
    color: var(--text-color);
    }

    .contact form .focus {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--second-bg-color);
    border-radius: .6rem;
    z-index: -1;
    transition: .5s;
    }

    .contact form .input-box .input-field input:focus~.focus,
    .contact form .input-box .input-field input:valid~.focus,
    .contact form .textarea-field textarea:focus~.focus,
    .contact form .textarea-field textarea:valid~.focus {
    width: 100%;
    }

    .contact form .textarea-field {
    position: relative;
    margin: .8rem 0 2.7rem;
    display: flex;
    }

    .contact form .textarea-field textarea {
    resize: none;
    }

    .contact form .btn-box.btns .btn {
    cursor: pointer;
    }

    .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem 9%;
    background: var(--second-bg-color);
    }

    .footer-text,
    .footer-iconTop {
    position: relative;
    }

    .footer-text p {
    font-size: 1.6rem;
    }

    .footer-iconTop a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .8rem;
    background: var(--main-color);
    border: .2rem solid var(--main-color);
    border-radius: .6rem;
    z-index: 1;
    overflow: hidden;
    }

    .footer-iconTop a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--second-bg-color);
    z-index: -1;
    transition: .5s;
    }

    .footer-iconTop a:hover::before {
    width: 100%;
    }

    .footer-iconTop a i {
    font-size: 2.4rem;
    color: var(--bg-color);
    transition: .5s;
    }

    .footer-iconTop a:hover i {
    color: var(--main-color);
    }

    /****** ANIMATION RELOAD ANDA SCROLL ******/
    .animate {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    z-index: 98;
    }

    .animate.home-img {
    width: 50%;
    }

    .logo .animate,
    .navbar .animate,
    #menu-icon .animate,
    .home.show-animate .animate {
    animation: showRight 1s ease forwards;
    animation-delay: calc(.3s * var(--i));
    }

    .animate.scroll {
    transition: 1s ease;
    transition-delay: calc(.3s / var(--i));
    animation: none;
    }

    section:nth-child(odd) .animate.scroll,
    .footer,
    .animate.scroll {
    background: var(--second-bg-color);
    }

    .education .education-box .animate.scroll {
    width: 105%;
    }

    .about.show-animate .animate.scroll,
    .education.show-animate .animate.scroll,
    .skills.show-animate .animate.scroll,
    .contact.show-animate .animate.scroll,
    .footer.show-animate .animate.scroll {
    transition-delay: calc(.3s * var(--1));
    width: 0;
    }

    /******** BRAKPOINTS *******/
    @media (max-width: 1200px) {
    html {
    font-size: 55%;
    }
    }

    @media (max-width: 991px) {
    .header {
    padding: 2rem 4%;
    }

    section {
    padding: 10rem 4% 2rem;
    }

    .home {
    padding: 0 4%;
    }

    .footer {
    padding: 2rem 4%;
    }
    }

    @media (max-width: 768px) {
    .header {
    background: var(--bg-color);
    }

    #menu-icon {
    display: block;
    }

    .navbar {
    position: absolute;
    top: 100%;
    left: -100%;
    width: 100%;
    padding: 1rem 4%;
    background: var(--main-color);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
    z-index: 1;
    transition: .25s ease;
    transition-delay: .25s;
    }

    .navbar.active {
    left: 0;
    transition-delay: 0s;
    }

    .navbar .active-nav {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    border-top: .1rem solid rgba(0, 0, 0, .2);
    z-index: -1;
    transition: .25s ease;
    transition-delay: 0s;
    }

    .navbar.active .active-nav {
    left: 0;
    transition-delay: .25s;
    }

    .navbar a {
    border-radius: 15vh;
    display: block;
    font-size: 2rem;
    margin: 3rem 0;
    padding: 1.3%;
    text-align: center;
    transform: translateX(-20rem);
    transition: .25s ease;
    transition-delay: 0s;
    }

    .navbar a:hover {
    background: var(--second-bg-color);
    color: var(--text-color);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);
    }

    .navbar.active a {
    transform: translateX(0);
    transition-delay: .25s;
    }

    .home-imgHover {
    pointer-events: none;
    background: var(--bg-color);
    opacity: .6;
    }

    }

    @media (max-width: 780px) {
    .header {
    background: var(--bg-color);
    }

    #menu-icon {
    display: block;
    }

    .navbar {
    position: absolute;
    top: 100%;
    left: -100%;
    width: 100%;
    padding: 1rem 4%;
    background: var(--main-color);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
    z-index: 1;
    transition: .25s ease;
    transition-delay: .25s;
    }

    .navbar.active {
    left: 0;
    transition-delay: 0s;
    }

    .navbar .active-nav {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    border-top: .1rem solid rgba(0, 0, 0, .2);
    z-index: -1;
    transition: .25s ease;
    transition-delay: 0s;
    }

    .navbar.active .active-nav {
    left: 0;
    transition-delay: .25s;
    }

    .navbar a {
    border-radius: 15vh;
    text-align: center;
    display: block;
    font-size: 2rem;
    margin: 3rem 0;
    transform: translateX(-20rem);
    transition: .25s ease;
    transition-delay: 0s;
    }

    .navbar.active a {
    transform: translateX(0);
    transition-delay: .25s;
    }

    .home-imgHover {
    pointer-events: none;
    background: var(--bg-color);
    opacity: .6;
    }
    }

    @media (max-width: 520px) {
    html {
    font-size: 50%;
    }

    .home-content h1 {
    display: flex;
    flex-direction: column;
    }

    .home-sci {
    width: 160px;
    }

    .home-sci a {
    width: 38px;
    height: 38px;
    }

    }

    @media (max-width: 462px) {
    .home-content h1 {
    font-size: 5.2rem;
    }

    .education {
    padding: 10rem 4% 5rem 5%;
    }

    .contact form .input-box .input-field {
    width: 100%;
    }

    .footer {
    flex-direction: column-reverse;
    }

    .footer p {
    margin-top: 2rem;
    text-align: center;
    }

    }

    @media (max-width: 371px) {
    .home {
    justify-content: center;
    }

    .home-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    }

    .home-content h1 {
    font-size: 5rem;
    }

    }

    /******* KEYFRAMES ANIMATION *******/
    @keyframes homeBgText {

    0%, 10%, 100% {
    background-position: -33rem 0;
    }

    65%,
    85% {
    background-position: 0 0;
    }

    }

    @keyframes homeCursorText {

    0%,
    10%,
    100% {
    width: 0;
    }

    65%,
    78%,
    85% {
    width: 100%;
    opacity: 1;
    }

    75%,
    81% {
    opacity: 0;
    }

    }

    @keyframes aboutSpinner {
    100% {
    transform: translate(-50%, -50%) rotate(360deg);
    }

    }

    @keyframes showRight {
    100% {
    width: 0;
    }
    }



    JAVASCRIPT:

    // TOGGLE ICON NAVBAR
    let menuIcon = document.querySelector('#menu-icon');
    let navbar = document.querySelector('.navbar');

    menuIcon.onclick = () => {
    menuIcon.classList.toggle('bx-x');
    navbar.classList.toggle('active');
    }

    let sections = document.querySelectorAll('section');
    let navLinks = document.querySelectorAll('header nav a');

    window.onscroll = () => {
    sections.forEach(sec => {
    let top = window.scrollY;
    let offset = sec.offsetTop - 100;
    let height = sec.offsetHeight;
    let id = sec.getAttribute('id');

    if(top >= offset && top < offset + height) {

    navLinks.forEach(links => {
    links.classList.remove('active');
    document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
    });

    sec.classList.add('show-animate');
    }

    else {
    sec.classList.remove('show-animate');
    }
    });

    let header = document.querySelector('header')

    header.classList.toggle('sticky', window.scrollY > 100);

    menuIcon.classList.remove('bx-x');
    navbar.classList.remove('active');

    let footer = document.querySelector('footer');
    footer.classList.toggle('show-animate', this.innerHeight + this.scrollY >= document.scrollingElement.scrollHeight);
    }



    Mais uma vez peço desculpas pelo tempo e fico grato pela atenção de todos.

    0 0
  • Quote

    • 5. Re: Enteder o código...por quê não funciona.

    Marcelo Oliver
    msoliver
    (usa Debian)

    Enviado em 19/10/2023 - 01:02h

    Boa noite Calistro.
    Testando aqui, o erro apresentado é referente a linha:
    let footer = document.querySelector('footer');
    Somente um "PONTO" resolveu o problema....
    let footer = document.querySelector('.footer');

    Estava 'tentando' pegar o 'elemento' footer, mas, deve "pegar" o elemento cuja classe é "footer" ....

    
Mensagem de erro no console
    
Uncaught TypeError: Cannot read properties of null (reading 'classList')
    
    at window.onscroll

    É isso....



    ______________________________________________________________________
    
Importante:
    
lynx --dump https://www.vivaolinux.com.br/termos-de-uso/ | sed -nr '/^[ ]+Se/,/dou.$/p'
    
______________________________________________________________________
    
Nota de esclarecimento:
    
O comando: ACIMA, faz parte da minha assinatura.
    
Att.: Marcelo Oliver
    
______________________________________________________________________


    1 0
  • Quote





    • Patrocínio

    Site hospedado pelo provedor RedeHost.
    Linux banner

    Destaques

    Artigos

    Liberte-se: Crie um Servidor Proxy na Nuvem para Acessar Conteúdos Bloqueados

    Run0 - Elevação de privilégios com systemd

    kvrt: O novo antivírus gratuito da Kaspersky para Linux

    DOOM clássico rapidão

    Como otimizar o desempenho do vídeo Intel com o driver i915

    Dicas

    Como instalar ou remover ambientes gráficos facilmente no openSUSE

    Alternativa para Habilitar Hibernação no Lubuntu ou Ubuntu

    [Resolvido] Navegador bloqueou o perfil

    Como Limpar Pacotes Órfãos no openSUSE

    Dividir tela como no Windows

    Tópicos

    Drivers .so ou .dll (5)

    Tamanho de Partição No Debian (6)

    Ping de uma routerboard (RB) para a rede de outra RB (0)

    Usuário samba AD/DC não consegue acessar compartilhame... da rede. (13)

    Pendrives não montam (6)

    Top 10 do mês

    Scripts

    [Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)

    [Shell Script] Script para adicionar bordas às imagens de uma pasta

    [Shell Script] Telegram direto do site

    [Shell Script] Pós-instalação do openSUSE Tumbleweed

    [Shell Script] Jogo da velha em rede local

    A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.

    Site hospedado por: