Repository: wwpedro/restaurentedesign
Branch: main
Commit: f24a0a7f0c35
Files: 13
Total size: 38.1 KB

Directory structure:
gitextract_74_ovxoa/

├── css/
│   ├── all.css
│   ├── cardapio.css
│   ├── config.css
│   ├── index.css
│   ├── premios.css
│   ├── reseva.css
│   └── sobre.css
├── html/
│   ├── cardapio.html
│   ├── premios.html
│   ├── reserva.html
│   └── sobre.html
├── index.html
└── js/
    └── animacao.js

================================================
FILE CONTENTS
================================================

================================================
FILE: css/all.css
================================================
@import "index.css";
@import "config.css";
@import "cardapio.css";
@import "premios.css";
@import "sobre.css";
@import "reseva.css";

================================================
FILE: css/cardapio.css
================================================
#header_cardapio{
    background-color: rgb(0, 0, 0);
    height: 550px;
    display: inline-block;
    width: 100%;
    
}
.head_cardapio_titulo{
    align-items: center;
    display: flex;
    color: white;
    justify-content: center;
    font-family: "PosteramaThin";
    font-size: 145px;
    padding-top: 5%;
}
.head_cardapio_menu{
    margin-top: 7%;
    padding-bottom: 5%;
}
.head_cardapio_menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;

    
}
  
.head_cardapio_menu li {
    float: left;
    
}
  
.head_cardapio_menu li a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 30px;
    font-family: "PosteramaThin";
}

.cardapio{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.titulo_cardapio{
    margin-top: 8%;
    font-size: 3rem;
    font-family: "PosteramaLigth";
}
.itens_cardapio{
    margin-top: 3%;
    margin-bottom: 7%;
}
.itens_cardapio ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}

.itens_cardapio li{
    padding: 14px 16px;
    text-decoration: none;
    font-size: 30px;
}

.cardapio span{
    display:block;
    width:30%; /*or whatever width you want the effect of <hr>*/
    border-top: 1px solid rgb(0, 0, 0);
}

================================================
FILE: css/config.css
================================================
@font-face {
    font-family: 'PosteramaLigth';
    src: url("../fonts/Posterama 2001 W04 Light.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PosteramaThin';
    src: url("../fonts/Posterama 2001 W04 Thin.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PosteramaText';
    src: url("../fonts/Posterama Text W07 Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
body{
    padding: 0;
    margin: 0;
    font-family: "PosteramaText";
}

.linha{
    flex-direction: row;
    display: flex;
}
.coluna{
    flex-direction: column;
    display: flex;
}

#burger{
    display: inline-block;
    text-align: center;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-size: 50px;
    color: white;
}

#burger:hover{
    color: rgb(196, 196, 196);
}

#toggle {
    display: none;
}
  
  
.hamburger {
    position: absolute;
    top: 5em;
    right: 5%;
    margin-left: -2em;
    margin-top: -45px;
    width: 2em;
    height: 45px;
    z-index: 5;
    cursor: pointer;
}
  
.hamburger div {
    position: relative;
    width: 3em;
    height: 1px;
    border-radius: 3px;
    background-color: #ffffff;
    margin-top: 8px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
  
.nav {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000ca;
    top: -100%; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    transform: scale(0);
}
.nav-wrapper {
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
}
nav {
    text-align: center;
    margin-top: 12%;
}
nav a {
    position: relative;
    text-decoration: none;
    color: #ffffff;
    font-size: 2em;
    display: inline-block;
    margin-top: 1.25em;
    transition: color 0.2s ease-in-out;
    letter-spacing: 1px;
    font-family: "PosteramaThin";
}
nav a:hover {
    color: rgb(192, 192, 192);
}
nav a:hover:before {
    height: 100%;
}
  
#toggle:checked + .hamburger .top-bun {
    transform: rotate(-45deg);
    margin-top: 25px;
}
#toggle:checked + .hamburger .bottom-bun {
    opacity: 0;
    transform: rotate(45deg);
}
#toggle:checked + .hamburger .meat {
    transform: rotate(45deg);
    margin-top: -7px;
}
  
#toggle:checked + .hamburger + .nav {
    top: 0;
    transform: scale(1);
}

================================================
FILE: css/index.css
================================================
@import "config.css";

header{
    height: 680px;
    background-color: rgb(0, 0, 0);
}



.head_body{
    position: relative;
    height: 680px;
    width: 100%;
    display: flex;
    flex-direction: row;
    background: url("https://img.freepik.com/fotos-premium/restaurante_23-2148014999.jpg?w=2000");
    background-size: cover;
    background-repeat: no-repeat;
}

.head_left{
    position: relative;
    width: 50%;
    font-family: "PosteramaThin";
    font-size: 50px;
    color: white;
    font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;

}

.head_left ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
}
  
.head_left li a {
    display: block;
    color: rgb(255, 255, 255);
    padding: 8px 16px;
    text-decoration: none;
}
.head_left a:hover {
    display: block;
    color: rgb(134, 134, 134);
    padding: 8px 16px;
    text-decoration: none;
}

.head_rigth{
    position: relative;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "PosteramaThin";
    color: white;
    font-size: 145px;
    font-weight: normal;
}





.sessao1{
    height: 940px;
    background-color: rgb(244, 244, 244);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.sessao1_part1{
    font-size: 64px;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "PosteramaLigth";
}
.sessao1_part2{
    background-color: rgb(235, 235, 235);
    width: 560px;
    height: 377px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 100px;
    font-size: 20px;
}
.sessao1_part3{
    background-image: url("https://st.depositphotos.com/1014889/2123/i/600/depositphotos_21237673-stock-photo-pasta-with-tomato-sauce.jpg");
    width: 423px;
    height: 637px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: 100px;
}




.sessao2{
    height: 834px;
    background-color: rgb(0, 0, 0);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    background-image: url("https://st3.depositphotos.com/9880800/18500/i/600/depositphotos_185007696-stock-photo-view-stylish-empty-cafe-arranged.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
/*.sessao2_banner{
    background-image: url("https://st4.depositphotos.com/1875497/20057/i/600/depositphotos_200572598-stock-photo-abstract-blur-defocused-restaurant-coffee.jpg");
    height: 834px;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .5;
    position: relative;
}*/
.sessao2_part1{
    font-family: "PosteramaLigth";
    font-size: 65px;
    margin-bottom: 60px;
    color: aliceblue;
}
.sessao2_part2{
    font-family: "PosteramaText";
    padding-inline: 100px;
    margin-inline: 60px;
    font-size: 20px;
    color: aliceblue;
}



.sessao3{
    height: 1100px;
    background-color: rgb(235, 235, 235);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.sessao3_part1{
    font-family: "PosteramaLigth";
    font-size: 65px;
    margin-bottom: 100px;
}
.sessao3_part2{
    justify-content: center;
    align-items: center;
    display: flex;
}
.sessao3_elento{
    height: 434px;
    width: 344px;
    background-color: aqua;
    margin-inline: 50px;
}
.sessao3_elento img{
    width: 100%;
    height: 100%;
    object-fit: cover
}



.sessao4{
    height: 802px;
    background-color: rgb(244, 244, 244);
}
.sessao4_conteudo{
    height: 664px;
    background-color: rgb(0, 0, 0);
    display: flex;
    flex-direction: row;
}
.sessao4_part1{
    justify-content: center;
    align-items: center;
    display: flex;
    padding-left: 50px;
    flex-direction: column;
    color: white;
    width: 50%;
}
.sessao4_titulo{
    font-family: "PosteramaThin";
    font-size: 65px;
    margin-bottom: 20px;
}
.sessao4_texto{
    font-size: 20px;
    font-weight: normal;
    scroll-padding-inline: 50px;
}
.sessao4_part2{
    width: 50%;
    justify-content: center;
    display: flex;
}
.sessao4_imagem{
    height: 802px;
    width: 508px;
    background-image: url("https://st3.depositphotos.com/9880800/18500/i/600/depositphotos_185007302-stock-photo-view-stylish-empty-cafe-arranged.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 100px;
}



.sessao5{
    height: 900px;
    background-color: rgb(244, 244, 244);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.sessao5_part1{
    padding-top: 200px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.sessao5_titulo{
    font-family: "PosteramaLigth";
    font-size: 65px;
    margin-bottom: 20px;
}
.sessao5_texto{
    font-size: 25px;
    font-weight: normal;
    padding-right: 80px;
    padding-left: 80px;
    text-align: center;
    padding-top: 50px;
}
.sessao5_part2{
    padding-top: 300px;
    justify-content: center;
    display: flex;
    margin-top: -100px;
    
}
.sessao5_part2 img{
    width: 70px;
    padding-inline: 20px;
}
.sessao5_part3{
    padding-top: 50px;
    text-align: center;
}


[data-anime]{
    opacity: 0;
    transition: 1s;
}

[data-anime="down"]{
    transform: translate3d(0px ,-100px ,0px);
    transition: 0.5;
}

[data-anime="left"]{
    transform: translate3d(-100px ,0px ,0px);
    transition: 0.5s;
}

[data-anime].animate{
    opacity: 1;
    transform: translate(0px,0px,0px);
}

================================================
FILE: css/premios.css
================================================
#header_premio{
    background-color: rgb(0, 0, 0);
    height: 550px;
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.head_premio_titulo{
    align-items: center;
    display: flex;
    color: white;
    justify-content: center;
    font-family: "PosteramaThin";
    font-size: 145px;
}

.premio1{
    background-color: black;
    flex-direction: row;
    display: flex;
    height: 600px;
    width: 100%;
}
.premio1_img{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.premio1_img img{
    border: 1rem solid rgba(255, 255, 255, 0.118);
}
.premio1_conteudo{
    width: 50%;
    flex-direction: column;
    display: flex;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.premio1_conteudo_titulo{
    align-items: center;
    display: flex;
    justify-content: center;
    font-family: "PosteramaThin";
    font-size: 4rem;
}

.premio1_conteudo_texto{
    align-items: center;
    display: flex;
    justify-content: center;
    margin-inline: 3.5rem;
    margin-top: 2rem;
}


.premio2{
    background-color: black;
    flex-direction: row;
    display: flex;
    height: 600px;
    width: 100%;
}
.premio2_img{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.premio2_img img{
    border: 1rem solid rgba(255, 255, 255, 0.118);
}
.premio2_conteudo{
    width: 50%;
    flex-direction: column;
    display: flex;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.premio2_conteudo_titulo{
    align-items: center;
    display: flex;
    justify-content: center;
    font-family: "PosteramaThin";
    font-size: 4rem;
}

.premio2_conteudo_texto{
    align-items: center;
    display: flex;
    justify-content: center;
    margin-inline: 3.5rem;
    margin-top: 2rem;
}

================================================
FILE: css/reseva.css
================================================
.head_reserva_part1{
    width: 50%;
    height: 100vh;
    background-image: url("https://cdn.pixabay.com/photo/2014/10/22/17/50/bar-498420_960_720.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    flex-direction: column;
}
.head_reserva_part2{
    width: 50%;
    height: 100vh;
    background-color: rgb(0, 0, 0);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    font-family: "PosteramaThin";
    font-size: 50px;
    color: white;
}

.titulo_reserva{
    font-size: 3rem;
    font-family: "PosteramaLigth";
}

.head_reserva_part2 span{
    display:block;
    width:30%; /*or whatever width you want the effect of <hr>*/
    border-top: 1px solid rgb(255, 255, 255);
}


================================================
FILE: css/sobre.css
================================================
.head_sobre_part1{
    width: 50%;
    height: 791px;
    background-color: black;
    display: block;
    flex-direction: column;
}
.head_sobre_titulo{
    align-items: center;
    display: flex;
    color: white;
    height: 65%;
    justify-content: center;
    font-family: "PosteramaThin";
    font-size: 145px;
}
.head_sobre_part2{
    width: 50%;
    height: 710px;
    background-color: rgb(0, 0, 0);
    align-items: center;
    justify-content: center;
    display: flex;
    font-family: "PosteramaThin";
    font-size: 50px;
}

.head_sobre_part2 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
}
  
.head_sobre_part2 li a {
    display: block;
    color: rgb(255, 255, 255);
    padding: 8px 16px;
    text-decoration: none;
}
.head_sobre_part2 a:hover {
    display: block;
    color: rgb(134, 134, 134);
    padding: 8px 16px;
    text-decoration: none;
}


.sobre_sessao1{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
}
.sobre_sessao1_img{
    height: 900px;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sobre_sessao1_img img{
    margin-left: 20%;
    margin-right: 5%;
    height: 700px;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
}
.sobre_sessao1_conteudo{
    height: 900px;
    width: 50%;
    display: inline-block;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    object-fit: cover
}

.sobre_sessao1_titulo{
    font-size: 3rem;
    margin-right: 30%;
    margin-top: 40%;
    margin-left: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.sobre_sessao1_texto{
    font-size: 1.3rem;
    margin-top: 10%;
    margin-right: 30%;
    margin-left: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.sobre_sessao2{
    width: 100%;
    height: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(0, 0, 0);
}

.sobre_sessao2_titulo{
    margin-top: 5%;
    align-items: center;
    display: flex;
    color: white;
    justify-content: center;
    font-family: "PosteramaThin";
    font-size: 50px;
}

span{
    display:block;
    width:50%; /*or whatever width you want the effect of <hr>*/
    border-top: 1px solid #ccc;
}

.sobre_sessao2_texto{
    align-items: center;
    display: flex;
    color: white;
    justify-content: center;
    font-size: 20px;
    padding-inline: 20%;
    margin-top: 2%;
}

.sobre_sessao2_fotos{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}

.sessao2_fotos1{
    width: 100%;
    height: 100%;
    flex-direction: row;
    display: flex;
    background-color: rgb(0, 0, 0);
    align-items: center;
    justify-content: center;
}
.sessao2_fotos2{
    width: 100%;
    height: 100%;
    flex-direction: row;
    display: flex;
    background-color: rgb(0, 0, 0);
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
}
.fotos_img{
    margin: 10px;
    width: 40%;
    height: 95%;
    background-color: rgb(255, 255, 255);
}

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

.sobre_sessao3_titulo{
    align-items: center;
    display: flex;
    justify-content: center;
    font-family: "PosteramaThin";
    font-size: 50px;
    margin-bottom: 5%;
}

.sobre_sessao3_mapa{
    width: 100%;
    height: 550px;
    background-color: black;
}





================================================
FILE: html/cardapio.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    
</head>
<body>
    <div id="header_cardapio">
        <input id="toggle" type="checkbox"></input>

        <label for="toggle" class="hamburger">
            <div class="top-bun"></div>
            <div class="meat"></div>
            <div class="bottom-bun"></div>
          </label>
          
          <div class="nav">
            <div class="nav-wrapper">
              <nav>
                <a href="../index.html">TUCOR</a><br>
                <a href="reserva.html">RESERVAR</a><br>
                <a href="cardapio.html">CARDAPIO</a><br>
                <a href="premios.html">PREMIAÇÕES</a><br>
                <a href="sobre.html">SOBRE</a>
              </nav>
            </div>
          </div>

        <div class="head_cardapio_titulo">
            CARDAPIOS
        </div>
        <div class="head_cardapio_menu">
            <ul>
                <li><a href="#menu1">MENU 1</a></li>
                <li><a href="#menu2">MENU 2</a></li>
                <li><a href="#menu3">MENU 3</a></li>
            </ul>
        </div>
    </div>

    <section>
        <div class="cardapio">
            <div class="titulo_cardapio" data-anime>
                MENU 1
            </div>
            <span></span>
            <div class="itens_cardapio" data-anime>
                <ul>
                    <li>MENU 1</li>
                    <li>MENU 2</li>
                    <li>MENU 3</li>
                    <li>MENU 4</li>
                    <li>MENU 5</li>
                    <li>MENU 6</li>
                </ul>
            </div>
            <div class="titulo_cardapio" data-anime>
                MENU 2
            </div>
            <span></span>
            <div class="itens_cardapio" data-anime>
                <ul>
                    <li>MENU 1</li>
                    <li>MENU 2</li>
                    <li>MENU 3</li>
                    <li>MENU 4</li>
                    <li>MENU 5</li>
                    <li>MENU 6</li>
                </ul>
            </div>
            <div class="titulo_cardapio" data-anime>
                MENU 3
            </div>
            <span></span>
            <div class="itens_cardapio" data-anime>
                <ul>
                    <li>MENU 1</li>
                    <li>MENU 2</li>
                    <li>MENU 3</li>
                    <li>MENU 4</li>
                    <li>MENU 5</li>
                    <li>MENU 6</li>
                </ul>
            </div>
        </div>
    </section>
    <script src="../js/animacao.js"></script>
    <footer>
        <!--sessao5_part2-->
    </footer>
</body>
</html>

================================================
FILE: html/premios.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div id="header_premio">
            <input id="toggle" type="checkbox"></input>

            <label for="toggle" class="hamburger">
                <div class="top-bun"></div>
                <div class="meat"></div>
                <div class="bottom-bun"></div>
            </label>
            
            <div class="nav">
                <div class="nav-wrapper">
                <nav>
                    <a href="../index.html">TUCOR</a><br>
                    <a href="reserva.html">RESERVAR</a><br>
                    <a href="cardapio.html">CARDAPIO</a><br>
                    <a href="premios.html">PREMIAÇÕES</a><br>
                    <a href="sobre.html">SOBRE</a>
                </nav>
                </div>
            </div>

            <div class="head_premio_titulo">
                PREMIAÇÕES
            </div>
        </div>
        <section>
            <div class="premio1">
                <div class="premio1_img">
                    <img src="https://pbs.twimg.com/profile_images/583574892538236928/nAMq6I6e_400x400.jpg" alt="">
                </div>
                <div class="premio1_conteudo" data-anime>
                    <div class="premio1_conteudo_titulo">
                        50 BESTS
                    </div>
                    <div class="premio1_conteudo_texto">
                        curabitur elit morbi. tempor turpis lacus ipsum litora urna litora feugiat pulvinar sed, scelerisque iaculis accumsan adipiscing netus potenti senectus nisl, mollis erat vehicula quisque a taciti sem etiam. vel quam pulvinar fringilla fusce lobortis vestibulum, lacus praesent ligula ipsum malesuada tristique, tellus sociosqu ut fusce at. 
                    </div>
                </div>
            </div>
            <div class="premio2" data-anime>
                <div class="premio2_conteudo">
                    <div class="premio2_conteudo_titulo">
                        MICHELIN
                    </div>
                    <div class="premio2_conteudo_texto">
                        curabitur elit morbi. tempor turpis lacus ipsum litora urna litora feugiat pulvinar sed, scelerisque iaculis accumsan adipiscing netus potenti senectus nisl, mollis erat vehicula quisque a taciti sem etiam. vel quam pulvinar fringilla fusce lobortis vestibulum, lacus praesent ligula ipsum malesuada tristique, tellus sociosqu ut fusce at. 
                    </div>
                </div>
                <div class="premio2_img">
                    <img src="data:image/png;base64,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" alt="">
                </div>
            </div>
        </section>
        <script src="../js/animacao.js"></script>
        <footer>
            <!--sessao5_part2-->
        </footer>
</body>
</html>

================================================
FILE: html/reserva.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    
</head>
<body>
    <header>
        <div class="linha">
            <div class="head_reserva_part1">
                <input id="toggle" type="checkbox"></input>
        
                <label for="toggle" class="hamburger">
                    <div class="top-bun"></div>
                    <div class="meat"></div>
                    <div class="bottom-bun"></div>
                </label>
                
                <div class="nav">
                    <div class="nav-wrapper">
                    <nav>
                        <a href="../index.html">TUCOR</a><br>
                        <a href="reserva.html">RESERVAR</a><br>
                        <a href="cardapio.html">CARDAPIO</a><br>
                        <a href="premios.html">PREMIAÇÕES</a><br>
                        <a href="sobre.html">SOBRE</a>
                    </nav>
                    </div>
                </div>
            </div>
            <div class="head_reserva_part2">
                <div class="titulo_reserva">
                    Reservar
                </div>
                <span></span>
            </div>
        </div>
    </header>
</body>
</html>

================================================
FILE: html/sobre.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    
</head>
<body>
    <header>
        <div class="linha">
            <div class="head_sobre_part1">
                <input id="toggle" type="checkbox"></input>
        
                <label for="toggle" class="hamburger">
                    <div class="top-bun"></div>
                    <div class="meat"></div>
                    <div class="bottom-bun"></div>
                </label>
                
                <div class="nav">
                    <div class="nav-wrapper">
                        <nav>
                            <a href="../index.html">TUCOR</a><br>
                            <a href="reserva.html">RESERVAR</a><br>
                            <a href="cardapio.html">CARDAPIO</a><br>
                            <a href="premios.html">PREMIAÇÕES</a><br>
                            <a href="sobre.html">SOBRE</a>
                        </nav>
                    </div>
                </div>
                <div class="menu" id="itens_menu">
                    <ul>
                        <li><a href="html/reserva.html">RESERVAR</a></li>
                        <li><a href="html/cardapio.html">CARDAPIO</a></li>
                        <li><a href="html/premios.html">PREMIAÇÕES</a></li>
                        <li><a href="html/sobre.html">SOBRE</a></li>
                    </ul>
                </div>
                <div class="head_sobre_titulo">
                    SOBRE
                </div>
            </div>
            <div class="head_sobre_part2">
                <ul>
                    <li><a href="#home">CHEF</a></li>
                    <li><a href="#news">RESTAURANTE</a></li>
                    <li><a href="#contact">LOCALIZAÇÃO</a></li>
                    <li><a href="#about">CONTATOS</a></li>
                </ul>
            </div>
        </div>
    </header>

    <section>
        <div class="linha">
            <div class="sobre_sessao1">
                <div class="sobre_sessao1_img">
                    <img src="https://cdn.pixabay.com/photo/2015/08/16/12/37/man-890880_960_720.jpg" alt="" data-anime>
                </div>
                <div class="sobre_sessao1_conteudo">
                    <div class="sobre_sessao1_titulo" data-anime>
                        CHEF Alana
                    </div>
                    <div class="sobre_sessao1_texto" data-anime>
                        curabitur elit morbi. tempor turpis lacus ipsum litora urna litora feugiat pulvinar sed, scelerisque iaculis accumsan adipiscing netus potenti senectus nisl, mollis erat vehicula quisque a taciti sem etiam. vel quam pulvinar fringilla fusce lobortis vestibulum, lacus praesent ligula ipsum malesuada tristique, tellus sociosqu ut fusce at. 
                    </div>
                </div>
            </div>
        </div>
        <div class="sobre_sessao2">
            <div class="sobre_sessao2_titulo" data-anime>
                RESTAURANTE
            </div>
            <span></span>
            <div class="sobre_sessao2_texto" data-anime>
                curabitur elit morbi. tempor turpis lacus ipsum litora urna litora feugiat pulvinar sed, scelerisque iaculis accumsan adipiscing netus potenti senectus nisl, mollis erat vehicula quisque a taciti sem etiam. vel quam pulvinar fringilla fusce lobortis vestibulum, lacus praesent ligula ipsum malesuada tristique, tellus sociosqu ut fusce at. 
            </div>
            <div class="sobre_sessao2_fotos">
                <div class="sessao2_fotos1">
                    <div class="fotos_img" data-anime></div>
                    <div class="fotos_img" data-anime></div>
                </div>
                <div class="sessao2_fotos2">
                    <div class="fotos_img" data-anime></div>
                    <div class="fotos_img" data-anime></div>
                </div>
            </div>
        </div>
        <div class="sobre_sessao3" data-anime>
            <div class="sobre_sessao3_titulo">LOCALIZAÇÃO</div>
            <div class="sobre_sessao3_mapa">

            </div>
        </div>
    </section>
    <footer>
        <!--sessao5_part2-->
    </footer>
    <script src="../js/animacao.js"></script>
</body>
</html>

================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="head_body">
            <div class="head_left">
                <ul>
                    <li><a href="html/reserva.html">RESERVAR</a></li>
                    <li><a href="html/cardapio.html">CARDAPIO</a></li>
                    <li><a href="html/premios.html">PREMIAÇÕES</a></li>
                    <li><a href="html/sobre.html">SOBRE</a></li>
                </ul>
            </div>
            <div class="head_rigth">
                TUCOR
            </div>
        </div>
    </header>
    <section>
        <div class="sessao1">
            <div class="coluna">
                <div class="sessao1_part1" data-anime>Experiencia</div>
                <div class="sessao1_part2" data-anime>curabitur elit morbi. tempor turpis lacus ipsum litora urna litora feugiatvinar fringilla fusce ora urna litora feugiat pulvinar sed, scelerisque iaculis accumsan adipiscing netus potenti s</div>
            </div>
            <div class="sessao1_part3" data-anime="left"></div>
            
        </div>
        <div class="sessao2">
            <div class="sessao2_part1" data-anime>Pratos</div>
            <div class="sessao2_part2" data-anime>curabitur elit morbi. tempor turpis lacus ipsum litora urna litora feugiat pulvinar sed, scelerisque iaculis accumsan adipiscing netus potenti senectus nisl, mollis erat vehicula quisque a taciti sem etiam. vel quam pulvinar fringilla fusce lobortis vestibulum, lacus praesent ligula ipsum malesuada tristique, tellus sociosqu ut fusce at. </div>
        </div>
        <div class="sessao3">
            <div class="sessao3_part1" data-anime>Presente</div>
            <div class="sessao3_part2">
                <div class="sessao3_elento" data-anime><img src="https://st4.depositphotos.com/13349494/20744/i/600/depositphotos_207441784-stock-photo-cropped-shot-woman-carrying-plate.jpg" alt=""></div>
                <div class="sessao3_elento" data-anime><img src="https://st2.depositphotos.com/1037987/10279/i/600/depositphotos_102797522-stock-photo-friends-enjoying-evening-meal-in.jpg" alt=""></div>
                <div class="sessao3_elento" data-anime><img src="https://st2.depositphotos.com/1637787/8805/i/600/depositphotos_88058422-stock-photo-cafe-manager-counting-recipes-with.jpg" alt=""></div>
            </div>
        </div>
        <div class="sessao4">
            <div class="sessao4_conteudo">
                <div class="sessao4_part1">
                    <div class="sessao4_titulo" data-anime>
                        Toque EVVIA
                    </div>
                    <div class="sessao4_texto" data-anime>
                        curabitur elit morbi. tempor turpis lacus ipsum litora urna litora feugiat pulvinar  quisque a taciti sem etiam. vel quam pulvinar fringilla fusce lobortis vestibulum, lacus praesent ligula ipsum malesuada tristique, tellus sociosqu ut fusce at. 
                    </div>
                </div>
                <div class="sessao4_part2">
                    <div class="sessao4_imagem" data-anime="down">

                    </div>
                </div>
            </div>    
        </div>
        <div class="sessao5">
            <div class="sessao5_part1">
                <div class="sessao5_titulo" data-anime>
                    Politica
                </div>
                <div class="sessao5_texto" data-anime>
                    curabitur elit morbi. tempor turpis lacus ipsum litora urna litora feugiat pulvinar sed, scelerisque iaculis accumsan adipiscing netus potenti senectus nisl, mollis erat vehicula quisque a taciti sem etiam. vel quam pulvinar fringilla fusce lobortis vestibulum, lacus praesent ligula ipsum malesuada tristique, tellus sociosqu ut fusce at.  
                </div>
            </div>
            <div class="sessao5_part2" data-anime>
                <div class="linha">
                    <img src="https://assets.stickpng.com/images/5ecec78673e4440004f09e77.png" alt="">
                    <img src="https://imagensemoldes.com.br/wp-content/uploads/2020/04/WhatsApp-Black-PNG.png" alt="">
                </div>
            </div>
            <div class="sessao5_part3">
                Rua nova roça, 44 - São Paulo/SP - Brasil
            </div>
        </div>
    </section>
    <script src="js/animacao.js"></script>
</body>
</html>

================================================
FILE: js/animacao.js
================================================
const target = document.querySelectorAll("[data-anime]");

function animeScroll(){
    const windowTop = window.pageYOffset+(window.innerHeight*3)/4;
    target.forEach(element => {
        if((windowTop) > element.offsetTop){
            element.classList.add('animate');
        }else{
            element.classList.remove('animate');
        }
    });
}

window.addEventListener('scroll', function(){
    animeScroll();
});