section não acompanha o height do conteúdo

19/08/2021

0

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}

#preloader{
    width: 100%;
    height: 100vh;
    position: fixed;
    background: #00070D url(img/Preloader.gif) no-repeat center center;
    z-index: 10;
}

.content{
    max-width: 1550px;
    margin: auto;
    padding: 0 30px;
}

/* NAV */
.navbar{
    position: fixed;
    z-index: 5;
    width: 100%;
    padding: 20px 0;
    transition: all .3s ease;
}

.navbar.sticky{
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 0;
}

.navbar .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo img{
    width: 50px;
}

.navbar .menu-list{
    display: inline-flex;
}

.menu-list li a{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: all .3s ease;
}

.menu-list li a::before{
    position: absolute;
    content: '';
    left: 25px;
    bottom: 0;
    height: 3px;
    width: 73%;
    background-color: #DB3636;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s linear;
}

.menu-list li a:hover::before{
    transform: scaleX(1);
    transform-origin: left;
}

.icon{
    color: #DB3636;
    font-size: 35px;
    cursor: pointer;
    display: none;
}

.icon.cancel-btn{
    position: absolute;
    right: 30px;
    top: 20px;
}

/* HOME */
.home{
    width: 100%;
    height: 100vh;
    background: url(img/20215.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.home .content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home .home-text{
    width: 70%;
    line-height: 1.1;
    color: #fff;
}

.home .home-text h3{
    font-size: 30px;
    font-weight: 500;
}

.home .home-text h1, .name, .typing-dot{
    font-family: 'Bebas Neue', sans-serif;
    font-size: 92px;
    font-weight: 400;
}

.home .home-text h1 .name{
    color: #DB3636;
}

.home .home-text h2{
    font-weight: 500;
    font-size: 60px;
    padding-bottom: 10px;
    line-height: .8;
}

.home .home-text h2 span{
    color: #DB3636;
}

.home .home-text p{
    width: 75%;
    line-height: 1.4;
    font-size: 20px;
}

.home .home-text .home-btn{
    width: 150px;
    height: 40px;
    margin: 20px 0;
    border: none;
    border-radius: 100px;
    background-color: #DB3636;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    transition: all .3s ease;
}

.home .home-text .home-btn:hover{
    transform: scale(1.1);
    box-shadow: 0 0 10px #DB3636;
}

.home-media{
    position: relative;
    width: 30%;
    height: 100%;
    color: #fff;
}

.icon-media{
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 90%;
    bottom: 0;
}

.icon-media i{
    color: #fff;
    font-size: 40px;
    padding: 7px;
    transition: all .3s ease;
}

.icon-media i:hover{
    transform: scale(1.1);
    color: #DB3636;
    text-shadow: 0 0 1px #DB3636;
}

.icon-media .line-content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.icon-media .line-content .line{
    width: 3px;
    height: 150px;
    background-color: #fff;
}

/* ABOUT */
.about{
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #00070D;
}

.about .content{
    width: 100%;
    height: 100%;
}

.title{
    width: 100%;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
}

.title .title-text{
    font-size: 60px;
    color: #fff;
}

.title .title-text span{
    color: #DB3636;
}

.title .title-underline{
    width: 100%;
    height: 3px;
}

.title .title-underline .underline{
    width: 100%;
    height: 3px;
    background-color: #DB3636;
}

.about .about-content{
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about .about-content .about-text{
    width: 50%;
}

.about .about-content .about-text p{
    font-size: 25px;
    color: #fff;
    padding: 15px 0;
}

.about .about-content .about-text .my-works{
    font-size: 20px;
    padding: 10px 15px;
    border: none;
    border-radius: 100px;
    color: #fff;
    background-color: #DB3636;
    cursor: pointer;
    transition: all .3s ease;
}

.about .about-content .about-text .my-works:hover{
    transform: scale(1.1);
    box-shadow: 0 0 10px #DB3636;
}

.tech-icons{
    width: 100%;
    margin: 10px;
    display: flex;
    justify-content: center;
}

.tech-icons i{
    font-size: 60px;
    color: #DB3636;
    transition: all .3s ease;
}

.tech-icons i:hover{
    transform: scale(1.1);
    text-shadow: 0 0 10px #DB3636;
}

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

.about-img img{
    width: 400px;
    border-radius: 10px;
    z-index: 1;
}

.about-img .border{
    position: absolute;
    width: 400px;
    height: 425px;
    right: 150px;
    bottom: -20px;
    border-radius: 10px;
    border: solid 7px #DB3636;
}

/* RESPONSIVE */
@media (max-width: 1375px){
    .about-img img{
        border: solid 5px #DB3636;
    }

    .about-img .border{
        display: none;
    }

    .about-img{
        margin: 30px;
    }
}
@media (max-width: 1116px){
    .home .home-text{
        position: absolute;
        width: 100%;
        padding: 0 40px;
    }
}
@media (max-width: 868px){
    .icon{
        display: block;
    }

    .icon.hide{
        display: none;
    }

    .navbar .menu-list{
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        max-width: 400px;
        background-color: #222;
        display: block;
        padding: 40px 0;
        text-align: center;
        transition: all .3s ease;
    }

    .navbar .menu-list.active{
        left: 0%;
    }

    .navbar .menu-list li{
        margin-top: 45px;
    }

    .navbar .menu-list li a{
        font-size: 23px;
    }

    .home-media{
        display: none;
    }

    .home .home-text h3{
        font-size: 25px;
    }

    .home .home-text h1, .name, .typing-dot{
        font-size: 80px;
    }

    .home .home-text h2{
        font-size: 50px;
    }

    .home .home-text p{
        font-size: 17px;
    }

    .about-content{
        flex-direction: column;
    }

    .about .about-content .about-text{
        width: 100%;
    }

    .about-img img{
        width: 90%;
    }
}

@media (max-width: 702px){
    .home .home-text h3{
        font-size: 20px;
    }

    .home .home-text h1, .name, .typing-dot{
        font-size: 65px;
    }

    .home .home-text h2{
        font-size: 40px;
    }

    .home .home-text p{
        font-size: 15px;
    }
}

@media (max-width: 702px){
    .home .home-text h2{
        font-size: 30px;
    }
}

@media (max-width: 458px){
    .home .home-text h1, .name, .typing-dot{
        font-size: 60px;
    }

    .home .home-text h2{
        font-size: 24px;
    }

    .home .home-text p{
        font-size: 13px;
    }
}

@media (max-width: 376px){
    .home .home-text h2{
        font-size: 20px;
    }
}

@media (max-width: 340px){
    .home .home-text h2{
        font-size: 19px;
    }
}


<!DOCTYPE html>
<html lang="en">
<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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
    <script src="https://unpkg.com/boxicons@2.0.9/dist/boxicons.js"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.c
Gabriel Araujo

Gabriel Araujo

Responder

Posts

19/08/2021

Gabriel Araujo

<!DOCTYPE html>
<html lang="en">
<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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
    <script src="https://unpkg.com/boxicons@2.0.9/dist/boxicons.js"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
    <title>Gabriel S. A. | My Works</title>
</head>
<body>
    <div id="preloader"></div>

    <!-- NAV -->
    <nav class="navbar">
        <div class="content">
            <div class="logo" data-aos="zoom-in" data-aos-duration="1200"><a href="#"><img src="img/Logo.png" alt="Logo"></a></div>
            <ul class="menu-list">
                <div class="icon cancel-btn">
                    <i class='bx bx-x'></i>
                </div>
                <div data-aos="fade-down" data-aos-duration="1000"><li><a href="#">About</a></li></div>
                <div data-aos="fade-down" data-aos-duration="1200"><li><a href="#">Experience</a></li></div>
                <div data-aos="fade-down" data-aos-duration="1400"><li><a href="#">Work</a></li></div>
                <div data-aos="fade-down" data-aos-duration="1600"><li><a href="#">Contact</a></li></div>
            </ul>
            <div class="icon menu-btn">
                <i class='bx bx-menu'></i>
            </div>
        </div>
    </nav>

    <!-- HOME -->
    <section class="home">
        <div class="content">
            <div class="home-text">
                <h3 data-aos="fade-up" data-aos-duration="600">Hi my name is</h3>
                <h1 data-aos="fade-up" data-aos-duration="800">GABRIEL S. <span class="name">A<span class="typing-dot"></span></span></h1>
                <h2 data-aos="fade-up" data-aos-duration="1000">I’m <span class="typing-text"></span> Developer</h2>
                <p data-aos="fade-up" data-aos-duration="1200">Junior developer, student at the University Paulista focused on fullstack development. Currently working with Design as well.</p>
                <div data-aos="fade-up" data-aos-duration="1400"><button class="home-btn">get in touch</button></div>
            </div>
            <div class="home-media">
                <div class="icon-media">
                    <div data-aos="fade-up" data-aos-duration="1000"><a href="#"><i class='bx bxl-github'></i></a></div>
                    <div data-aos="fade-up" data-aos-duration="1200"><a href="#"><i class='bx bxl-linkedin-square'></i></a></div>
                    <div class="line-content" data-aos="fade-up" data-aos-duration="1400"><div class="line"></div></div>
                </div>
            </div>
        </div>
    </section>

    <section class="about">
        <div class="content">
            <div class="title">
                <div class="title-text">About <span>me</span></div>
                <div class="title-underline">
                    <div class="underline"></div>
                </div>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <p>Hello there, my name is Gabriel and i'm a Junior developer, I love programming everything, and design every where. Let's see what am I done.</p>
                    <button class="my-works">see my works</button>
                    <p>Here are a few technologies I've been working with recently:</p>
                    <div class="tech-icons">
                        <i class='bx bxl-html5'></i>
                        <i class='bx bxl-css3' ></i>
                        <i class='bx bxl-javascript' ></i>
                        <i class='bx bxl-react' ></i>
                        <i class='bx bxl-python' ></i>
                    </div>
                </div>
                <div class="about-img">
                    <img src="img/me.jpeg" alt="">
                    <div class="border"></div>
                </div>
            </div>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>
Responder

19/08/2021

Yuri Aguiar

Amigo, tudo em cima?
Peguei o código disponibilizado, mas não foi produzido nenhum conteúdo... fica apenas um fundo com cor azul escuro.

Revise e reposte por favor
Responder

20/08/2021

Gabriel Araujo

Amigo, tudo em cima?
Peguei o código disponibilizado, mas não foi produzido nenhum conteúdo... fica apenas um fundo com cor azul escuro.

Revise e reposte por favor


Vdd esqueci que tem que ter as imagens tbm
Responder

20/08/2021

Gabriel Araujo

Consegui resolver galera, vlw
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar