未定义的TypeError:无法读取未定义的属性(读取“第一”)

Question

昨天，我姐姐要求我在她的网站上放一个按钮，这个按钮可以改变文本中的语言，但是当我尝试这样做的时候，我给了我一个错误: Uncaught :无法读取未定义的属性(读'first')，我试着用每个文本来表示它是否会产生相同的错误。它做到了;)如果有人能帮忙，我会接受的。

​

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
}

html,
body {
  overflow-y: hidden;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.container > section {
    scroll-snap-align: start;
}

.home-1 {
    height: 100vh;
    width: 100%;
    background-color: #DBDBDB;
    display: flex;
    position: relative;
}

.logo-holder {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.title-center {
    position: absolute;
    padding-bottom: 45px;
    justify-content: center;
    align-items: center;
}

.menu {
    position: absolute;
    top: 0;
    left: 0;
    padding: 75px;
    color: white;
    z-index: 3;
}

.text-menu {
    color: white;
    z-index: 3;
}

.text-menu:hover {
    color: #6d6d6d;
}

.menu:hover {
    color: #6d6d6d;
    text-decoration: none;
}

.top-links {
    width: 100%;
    display: grid;
    position: absolute;
    padding-left: 35px;
    padding-top: 75px;
    justify-content: center;
    z-index: 2;
}

.about-me {
    grid-column: 1;
    grid-row: 1;
    text-decoration: none;
    color: white;   
}

.about-me:hover {
    color: #6d6d6d;
    text-decoration: none;
}

.works:hover {
    color: #6d6d6d;
    text-decoration: none;
}

.works {
    padding-top: 25px;
    grid-column: 1;
    grid-row: 2;
    text-decoration: none;
    color: white; 
}

.right-buttons {
    position: absolute;
    right: 0;
    top: 44%;
    justify-content: center;
    align-items: center;
    padding-right: 75px;
    justify-content: space-between;
    z-index: 2;
}

.right-buttons li { 
    margin-bottom: 10px;
    list-style: none;
}

a{
    text-decoration: none;
    color: white;
    cursor: pointer;
}

a:hover {
    color: #6d6d6d;
    text-decoration: none;
}

a.active {
    text-decoration: none;
    color: #A3A3A3;
}

.bottom-links {
    bottom: 0;
    width: 100%;
    display: grid;
    position: absolute;
    padding: 75px;
    justify-content: center;
    z-index: 2;
}

.email {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 75px;
    color: white;
    z-index: 2;
}

.home-2 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
}

.home-3 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
}

.row {
    display: flex;
    padding: 100px;
    color: #A3A3A3;
}

.column {
    flex: 50%;
    align-items: center;
}

.home-3 .column h1 {
    padding-bottom: 35px;
    font-size: 40px;
}

.home-3 .column p {
    padding-top: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.4;
}

.home-3 .column hr.solid {
    border-top: 2px solid #bbb;
    width: 470px;
}

.home-3 .column-2 {
    flex: 25%;
}

.home-3 .column-2 p {
    margin-bottom: 5rem;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.3;
}

.home-3 .column-3 {
    flex: 25%;
    align-items: center;
    justify-content: center;
    display: flex;
    padding-left: 30px;
}

.home-3 .column-3 p {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.4;
}

.home-4 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
    background-image: url("../imgs/marcasA/Filautia/filautia/home/imghome.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home-5 {
    height: 100vh;
    width: 100%;
    display: flex;
    background-image: url("../imgs/marcasA/Capuchinha/home/imghome.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home-6 {
    height: 100vh;
    width: 100%;
    background-color: #DBDBDB;
}

.home-6 .gallery {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(21, 1fr);
    grid-template-rows: repeat(12, 5vw);
}
  
.home-6 .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
.home-6 .gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 15;
    grid-row-start: 1;
    grid-row-end: 7;
}
.home-6 .gallery__item--2 {
    grid-column-start: 15;
    grid-column-end: 22;
    grid-row-start: 1;
    grid-row-end: 7;
}
.home-6 .gallery__item--3 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 7;
    grid-row-end: 13;
}
.home-6 .gallery__item--4 {
    grid-column-start: 7;
    grid-column-end: 15;
    grid-row-start: 7;
    grid-row-end: 13;
}
.home-6 .gallery__item--5 {
    grid-column-start: 15;
    grid-column-end: 22;
    grid-row-start: 7;
    grid-row-end: 13;
}

.home-7 {
    margin-top: 125px;
    height: 100vh;
    width: 100%;
    background-color: #DBDBDB;
    display: flex;
    background-image: url("../imgs/marcasA/TacianoBerton/Tacianoberton/home/imghome.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home-8 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
    background-image: url("../imgs/marcasA/MaraSantiago/Marasantiago/home/imghome.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home-9 {
    height: 100vh;
    width: 100%;
    background-color: white;
}

.home-9 .gallery {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(24, 2fr);
    grid-template-rows: repeat(12, 8.35vh);
}

.home-9 .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-9 .gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 15;
    grid-row-start: 1;
    grid-row-end: 7;
  }
.home-9 .gallery__item--2 {
    grid-column-start: 15;
    grid-column-end: 26;
    grid-row-start: 1;
    grid-row-end: 7;
  }
.home-9 .gallery__item--3 {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 7;
    grid-row-end: 13;
  }
.home-9 .gallery__item--4 {
    grid-column-start: 13;
    grid-column-end: 26;
    grid-row-start: 7;
    grid-row-end: 13;
  }

.home-10 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
    background-image: url("../imgs/marcasA/AlexandreTaleb/Aleexandretaleb/home/imghome.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

<!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">
    <link rel="stylesheet" href="assets/css/main.css" type="text/css">
    <title>Portfolio</title>
</head>
<body>

    <div class="container">

        <section>

            <div class="home-1">
                <div class="menu">
                    <a href="#" class="text-menu">Menu</a>
                </div>

                <div class="top-links">
                <a href="#" class="about-me">About Me</a>
                <a href="#" class="works">Works</a>
                </div>

                <div class="right-buttons">
                <li><a href="#" language="English" class="active">En</a></li>
                <li><a href="#" language="Portuguese">Pt</a></li>
                </div>

                <div class="logo-holder">
                <div class="title-center"><img src="assets/imgs/sample-logo.png"></div>
                </div>

                <div class="bottom-links">
                <a href="#" class="about-me">Instagram</a>
                <a href="#" class="works">Behance</a>
                </div>

                <div class="email">
                <p>alo@scarrard.co</p>
                </div>

            </div>

        </section>

        <section>

        <div class="home-3">
            
            <div class="row">

                <div class="column">
                    <h1 class="title">My name is <br>
                    Sabrina Carrard,<br>
                    I’m a graphic designer <br>
                    and passionate <br>
                    about creating <br>
                    things and animals. <br>
                    </h1>

                    <hr class="solid">

                    <p class="first">Before we say goodbye, you can get in <br>
                    touch through my email in Portuguese, <br>
                    English and French (I’m learning that, <br>
                    so please, be kind). <br>
                    </p>
                </div>

                <div class="column-2">
                    <p class="second">My formal education was in UTFPR, 
                    where I graduated in graphic design 
                    as well. I started to work still I was in
                    college, and worked with brands like
                    ONU, Abril, Red Balloon, Wise up, 
                    Porcelanosa, Medianeira, SEBRAE, 
                    Prata e Arte, Bel Pesce, Universidade 
                    do Intercâmbio e Casa Paraíso 
                    Ecológico. Today I like to consider 
                    myself as a brand and editorial 
                    designer, things I really enjoy 
                    while I’m working on. 
                    </p>
                    <p class="third">I started to care about art when 
                    I was in school. At the time, I was 
                    obsessed with movies and used to 
                    watch four or five movies a day (but 
                    I was a fine student, I swear). After 
                    that I fell in love with art in 
                    my college days, especially art 
                    history. Today I’m very interested 
                    in the discussion between gender 
                    and art. Female artists, what they 
                    did and their stories, really caught me. 
                    </p>
                </div>

                <div class="column-3">
                    <p class="fourth">
                        Besides animals, other thing that
                        is really important to know is that
                        I’m fascinated by books and
                        literature. I truly believed that
                        literature opened my eyes to
                        important questions such as
                        human rights and feminism.
                        So when I’m reading something,
                        usually they are novels related
                        to these subjects because it
                        is something that I care about
                    </p>
                </div>

              </div>
        </div>

        </section>

        <section>

        <div class="home-4">
            
        </div>

        </section>

        <section>

        <div class="home-5">
            
        </div>

        </section>

        <section>

        <div class="home-6">
            
            <div class="gallery">

                <figure class="gallery__item gallery__item--1 ">
                    <img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png" class="gallery__img " alt="Image 1 ">
                </figure>

                <figure class="gallery__item gallery__item--2 ">
                    <img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png" class="gallery__img " alt="Image 2 ">
                </figure>

                <figure class="gallery__item gallery__item--3 ">
                    <img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png" class="gallery__img " alt="Image 3 ">
                </figure>

                <figure class="gallery__item gallery__item--4 ">
                    <img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg" class="gallery__img " alt="Image 4 ">
                </figure>

                <figure class="gallery__item gallery__item--5 ">
                    <img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png" class="gallery__img " alt="Image 5 ">
                </figure>

          </div>

        </div>

        </section>

        <section>

        <div class="home-7">
            
        </div>

        </section>

        <section>

        <div class="home-8">
            
        </div>

        </section>

        <section>

        <div class="home-9">

            <div class="gallery">

                <figure class="gallery__item gallery__item--1 ">
                    <img src="assets/imgs/marcasB/PrataEArte/Prata/imghome/SCARRARD-Portfolio_imagem home_Prata e arte.png" class="gallery__img " alt="Image 1 ">
                </figure>

                <figure class="gallery__item gallery__item--2 ">
                    <img src="assets/imgs/marcasB/Oliveira/oliveira/imghome/SCARRARD-Portfolio_imagem home_Oliveira.png" class="gallery__img " alt="Image 2 ">
                </figure>

                <figure class="gallery__item gallery__item--3 ">
                    <img src="assets/imgs/marcasB/Transformando/transformando/imghome/SCARRARD-Portfolio_imagem home_Tranformando.jpg" class="gallery__img " alt="Image 3 ">
                </figure>

                <figure class="gallery__item gallery__item--4 ">
                    <img src="assets/imgs/marcasB/CarinaDiniz/Carina/imghome/SCARRARD-Portfolio_imagem home_Carina Diniz.png" class="gallery__img " alt="Image 4 ">
                </figure>

          </div>
            
        </div>

        </section>

        <section>

        <div class="home-10">

        </div>

        </section>

    </div>

    <script>

        const langEl = document.querySelector('.right-buttons')
        const link = document.querySelectorAll('.right-buttons a')
        const titleEl = document.querySelector('.title')
        const firstEl = document.querySelector('.first')
        const secondEl = document.querySelector('.second')
        const thirdEl = document.querySelector('.third')
        const fourthEl = document.querySelector('.fourth')

        link.forEach(el => {
            el.addEventListener('click', () => {
                langEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                firstEl.textContent = data[attr].first;
            })
        })

        var data = {
              "english": 
              {
                "title": 
                    "My name Sabrina Carrard, I'm a graphic designer and passionate about creating things and animals.",
                "first": 
                    "Before we say goodbye, you can get in touch through my email in Portuguese, English and French (I'm learning that, so please, be kind)",
                "second": 
                    "My formal education was in UTFPR, where I graduated in graphic design as well. I started to work still I was in college, and worked with brands like ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce, Universidade do Intercâmbio e Casa Paraíso Ecológico. Today I like to consider myself as a brand and editorial designer, things I really enjoy while I’m working on.",
                "third":
                    "I started to care about art when I was in school. At the time, I was obsessed with movies and used to watch four or five movies a day (but I was a fine student, I swear). After that I fell in love with art in my college days, especially art history. Today I’m very interested in the discussion between gender and art. Female artists, what they did and their stories, really caught me.",
                "fourth":
                    "Besides animals, other thing that is really important to know is that I’m fascinated by books and literature. I truly believed that literature opened my eyes to important questions such as human rights and feminism. So when I’m reading something, usually they are novels related to these subjects because it is something that I care about."
              },
              "Português": 
              {
                "title":
                    "Meu nome é Sabrina Carrard, designer e apaixonada por criar coisas e por animais.",
                "first": 
                    "Eu me formei em design gráfico pela UTFPR e comecei a trabalhar ainda na faculdade. Nesses anos eu trabalhei para marcas como ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce, Universidade do Intercâmbio e Casa Paraíso Ecológico. Atualmente meu foco de trabalho é em marcas, identidade visual e editorial, que são os tipos de projetos que eu mais gosto de trabalhar.",
                "second":
                    "Falando sobre arte, eu comecei a me interessar pelo assunto quando eu ainda estava na escola, principalmente por cinema. Eu costumava ver de quatro a cinco filmes por dia, e mesmo assim conseguia tirar boas notas (mistério). Depois na faculdade, nasceu um interesse pela história da arte, que é o que eu mais curto até hoje. A discussão entre gênero e arte me interessa bastante: artistas mulheres, o que elas criaram, quais são suas histórias e dificuldades. ",
                "third":
                    "Além de animais, outra coisa que é bem importante para mim é que eu sou fascinada por livros e literatura. A literatura abriu meus olhos para questões importantes como direitos humanos e feminismo. Então quando eu estou lendo alguma coisa, geralmente são romances relacionados a estes temas, por ser algo que eu realmente me importo.",
                "fourth":
                    "Para conversar comigo, você pode enviar um e-mail em português, inglês ou francês (esse último eu ainda estou aprendendo, então por favor, pegue leve)."
              }
            }

    </script>
    
</body>
</html>

​

Answer 1

喝了一杯咖啡后，经过几分钟的思考，我终于发现了这个错误，我在剧本中把语言定义为：“英语”和“葡萄牙语”，但在我的html 'a‘中，我把它定义为“英语”和“葡萄牙语”。在改变了这一点之后，它运转得很好。

​

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
}

html,
body {
  overflow-y: hidden;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.container > section {
    scroll-snap-align: start;
}

.home-1 {
    height: 100vh;
    width: 100%;
    background-color: #DBDBDB;
    display: flex;
    position: relative;
}

.logo-holder {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.title-center {
    position: absolute;
    padding-bottom: 45px;
    justify-content: center;
    align-items: center;
}

.menu {
    position: absolute;
    top: 0;
    left: 0;
    padding: 75px;
    color: white;
    z-index: 3;
}

.text-menu {
    color: white;
    z-index: 3;
}

.text-menu:hover {
    color: #6d6d6d;
}

.menu:hover {
    color: #6d6d6d;
    text-decoration: none;
}

.top-links {
    width: 100%;
    display: grid;
    position: absolute;
    padding-left: 35px;
    padding-top: 75px;
    justify-content: center;
    z-index: 2;
}

.about-me {
    grid-column: 1;
    grid-row: 1;
    text-decoration: none;
    color: white;   
}

.about-me:hover {
    color: #6d6d6d;
    text-decoration: none;
}

.works:hover {
    color: #6d6d6d;
    text-decoration: none;
}

.works {
    padding-top: 25px;
    grid-column: 1;
    grid-row: 2;
    text-decoration: none;
    color: white; 
}

.right-buttons {
    position: absolute;
    right: 0;
    top: 44%;
    justify-content: center;
    align-items: center;
    padding-right: 75px;
    justify-content: space-between;
    z-index: 2;
}

.right-buttons li { 
    margin-bottom: 10px;
    list-style: none;
}

a{
    text-decoration: none;
    color: white;
    cursor: pointer;
}

a:hover {
    color: #6d6d6d;
    text-decoration: none;
}

a.active {
    text-decoration: none;
    color: #A3A3A3;
}

.bottom-links {
    bottom: 0;
    width: 100%;
    display: grid;
    position: absolute;
    padding: 75px;
    justify-content: center;
    z-index: 2;
}

.email {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 75px;
    color: white;
    z-index: 2;
}

.home-2 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
}

.home-3 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
}

.row {
    display: flex;
    padding: 100px;
    color: #A3A3A3;
}

.column {
    flex: 50%;
    align-items: center;
}

.home-3 .column h1 {
    padding-bottom: 35px;
    font-size: 40px;
    margin-right: 50px;
}

.first {
    padding-top: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.4;
    margin-right: 50px;
}

.home-3 .column hr.solid {
    border-top: 2px solid #bbb;
    width: 470px;
}

.home-3 .column-2 {
    flex: 25%;
}

.home-3 .column-2 p {
    margin-bottom: 5rem;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.3;
}

.home-3 .column-3 {
    flex: 25%;
    align-items: center;
    justify-content: center;
    display: flex;
    padding-left: 30px;
}

.home-3 .column-3 p {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.4;
}

.home-4 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
    background-image: url("../imgs/marcasA/Filautia/filautia/home/imghome.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home-5 {
    height: 100vh;
    width: 100%;
    display: flex;
    background-image: url("../imgs/marcasA/Capuchinha/home/imghome.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home-6 {
    height: 100vh;
    width: 100%;
    background-color: #DBDBDB;
}

.home-6 .gallery {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(21, 1fr);
    grid-template-rows: repeat(12, 5vw);
}
  
.home-6 .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
.home-6 .gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 15;
    grid-row-start: 1;
    grid-row-end: 7;
}
.home-6 .gallery__item--2 {
    grid-column-start: 15;
    grid-column-end: 22;
    grid-row-start: 1;
    grid-row-end: 7;
}
.home-6 .gallery__item--3 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 7;
    grid-row-end: 13;
}
.home-6 .gallery__item--4 {
    grid-column-start: 7;
    grid-column-end: 15;
    grid-row-start: 7;
    grid-row-end: 13;
}
.home-6 .gallery__item--5 {
    grid-column-start: 15;
    grid-column-end: 22;
    grid-row-start: 7;
    grid-row-end: 13;
}

.home-7 {
    margin-top: 125px;
    height: 100vh;
    width: 100%;
    background-color: #DBDBDB;
    display: flex;
    background-image: url("../imgs/marcasA/TacianoBerton/Tacianoberton/home/imghome.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home-8 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
    background-image: url("../imgs/marcasA/MaraSantiago/Marasantiago/home/imghome.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.home-9 {
    height: 100vh;
    width: 100%;
    background-color: white;
}

.home-9 .gallery {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(24, 2fr);
    grid-template-rows: repeat(12, 8.35vh);
}

.home-9 .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-9 .gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 15;
    grid-row-start: 1;
    grid-row-end: 7;
  }
.home-9 .gallery__item--2 {
    grid-column-start: 15;
    grid-column-end: 26;
    grid-row-start: 1;
    grid-row-end: 7;
  }
.home-9 .gallery__item--3 {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 7;
    grid-row-end: 13;
  }
.home-9 .gallery__item--4 {
    grid-column-start: 13;
    grid-column-end: 26;
    grid-row-start: 7;
    grid-row-end: 13;
  }

.home-10 {
    height: 100vh;
    width: 100%;
    background-color: white;
    display: flex;
    background-image: url("../imgs/marcasA/AlexandreTaleb/Aleexandretaleb/home/imghome.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

<!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">
    <link rel="stylesheet" href="assets/css/main.css" type="text/css">
    <title>Portfolio</title>
</head>
<body>

    <div class="container">

        <section>

            <div class="home-1">
                <div class="menu">
                    <a href="#" class="text-menu">Menu</a>
                </div>

                <div class="top-links">
                <a href="#" class="about-me">About Me</a>
                <a href="#" class="works">Works</a>
                </div>

                <div class="right-buttons">
                <li><a href="#" language="English" class="active">En</a></li>
                <li><a href="#" language="Portuguese">Pt</a></li>
                </div>

                <div class="logo-holder">
                <div class="title-center"><img src="assets/imgs/sample-logo.png"></div>
                </div>

                <div class="bottom-links">
                <a href="#" class="about-me">Instagram</a>
                <a href="#" class="works">Behance</a>
                </div>

                <div class="email">
                <p>alo@scarrard.co</p>
                </div>

            </div>

        </section>

        <section>

        <div class="home-3">
            
            <div class="row">

                <div class="column">
                    <h1 class="title">My name is <br>
                    Sabrina Carrard,<br>
                    I’m a graphic designer <br>
                    and passionate <br>
                    about creating <br>
                    things and animals. <br>
                    </h1>

                    <hr class="solid">

                    <p class="first">Before we say goodbye, you can get in <br>
                    touch through my email in Portuguese, <br>
                    English and French (I’m learning that, <br>
                    so please, be kind). <br>
                    </p>
                </div>

                <div class="column-2">
                    <p class="second">My formal education was in UTFPR, 
                    where I graduated in graphic design 
                    as well. I started to work still I was in
                    college, and worked with brands like
                    ONU, Abril, Red Balloon, Wise up, 
                    Porcelanosa, Medianeira, SEBRAE, 
                    Prata e Arte, Bel Pesce, Universidade 
                    do Intercâmbio e Casa Paraíso 
                    Ecológico. Today I like to consider 
                    myself as a brand and editorial 
                    designer, things I really enjoy 
                    while I’m working on. 
                    </p>
                    <p class="third">I started to care about art when 
                    I was in school. At the time, I was 
                    obsessed with movies and used to 
                    watch four or five movies a day (but 
                    I was a fine student, I swear). After 
                    that I fell in love with art in 
                    my college days, especially art 
                    history. Today I’m very interested 
                    in the discussion between gender 
                    and art. Female artists, what they 
                    did and their stories, really caught me. 
                    </p>
                </div>

                <div class="column-3">
                    <p class="fourth">
                        Besides animals, other thing that
                        is really important to know is that
                        I’m fascinated by books and
                        literature. I truly believed that
                        literature opened my eyes to
                        important questions such as
                        human rights and feminism.
                        So when I’m reading something,
                        usually they are novels related
                        to these subjects because it
                        is something that I care about
                    </p>
                </div>

              </div>
        </div>

        </section>

        <section>

        <div class="home-4">
            
        </div>

        </section>

        <section>

        <div class="home-5">
            
        </div>

        </section>

        <section>

        <div class="home-6">
            
            <div class="gallery">

                <figure class="gallery__item gallery__item--1 ">
                    <img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png" class="gallery__img " alt="Image 1 ">
                </figure>

                <figure class="gallery__item gallery__item--2 ">
                    <img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png" class="gallery__img " alt="Image 2 ">
                </figure>

                <figure class="gallery__item gallery__item--3 ">
                    <img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png" class="gallery__img " alt="Image 3 ">
                </figure>

                <figure class="gallery__item gallery__item--4 ">
                    <img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg" class="gallery__img " alt="Image 4 ">
                </figure>

                <figure class="gallery__item gallery__item--5 ">
                    <img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png" class="gallery__img " alt="Image 5 ">
                </figure>

          </div>

        </div>

        </section>

        <section>

        <div class="home-7">
            
        </div>

        </section>

        <section>

        <div class="home-8">
            
        </div>

        </section>

        <section>

        <div class="home-9">

            <div class="gallery">

                <figure class="gallery__item gallery__item--1 ">
                    <img src="assets/imgs/marcasB/PrataEArte/Prata/imghome/SCARRARD-Portfolio_imagem home_Prata e arte.png" class="gallery__img " alt="Image 1 ">
                </figure>

                <figure class="gallery__item gallery__item--2 ">
                    <img src="assets/imgs/marcasB/Oliveira/oliveira/imghome/SCARRARD-Portfolio_imagem home_Oliveira.png" class="gallery__img " alt="Image 2 ">
                </figure>

                <figure class="gallery__item gallery__item--3 ">
                    <img src="assets/imgs/marcasB/Transformando/transformando/imghome/SCARRARD-Portfolio_imagem home_Tranformando.jpg" class="gallery__img " alt="Image 3 ">
                </figure>

                <figure class="gallery__item gallery__item--4 ">
                    <img src="assets/imgs/marcasB/CarinaDiniz/Carina/imghome/SCARRARD-Portfolio_imagem home_Carina Diniz.png" class="gallery__img " alt="Image 4 ">
                </figure>

          </div>
            
        </div>

        </section>

        <section>

        <div class="home-10">

        </div>

        </section>

    </div>

    <script>

        const langEl = document.querySelector('.right-buttons')
        const link = document.querySelectorAll('.right-buttons a')
        const titleEl = document.querySelector('.title')
        const firstEl = document.querySelector('.first')
        const secondEl = document.querySelector('.second')
        const thirdEl = document.querySelector('.third')
        const fourthEl = document.querySelector('.fourth')

        link.forEach(el => {
            el.addEventListener('click', () => {
                langEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                titleEl.textContent = data[attr].title;
                firstEl.textContent = data[attr].first;
                secondEl.textContent = data[attr].second;
                thirdEl.textContent = data[attr].third;
                fourthEl.textContent = data[attr].fourth;

            })
        })

        var data = {
              "English": 
              {
                "title": 
                    "My name is Sabrina Carrard, I'm a graphic designer and passionate about creating things and animals.",
                "first": 
                    "Before we say goodbye, you can get in touch through my email in Portuguese, English and French (I'm learning that, so please, be kind)",
                "second": 
                    "My formal education was in UTFPR, where I graduated in graphic design as well. I started to work still I was in college, and worked with brands like ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce, Universidade do Intercâmbio e Casa Paraíso Ecológico. Today I like to consider myself as a brand and editorial designer, things I really enjoy while I’m working on.",
                "third":
                    "I started to care about art when I was in school. At the time, I was obsessed with movies and used to watch four or five movies a day (but I was a fine student, I swear). After that I fell in love with art in my college days, especially art history. Today I’m very interested in the discussion between gender and art. Female artists, what they did and their stories, really caught me.",
                "fourth":
                    "Besides animals, other thing that is really important to know is that I’m fascinated by books and literature. I truly believed that literature opened my eyes to important questions such as human rights and feminism. So when I’m reading something, usually they are novels related to these subjects because it is something that I care about."
              },
              "Portuguese": 
              {
                "title":
                    "Meu nome é Sabrina Carrard, designer e apaixonada por criar coisas e por animais.",
                "first": 
                    "Para conversar comigo, você pode enviar um e-mail em português, inglês ou francês (esse último eu ainda estou aprendendo, então por favor, pegue leve).",
                "second":
                    "Falando sobre arte, eu comecei a me interessar pelo assunto quando eu ainda estava na escola, principalmente por cinema. Eu costumava ver de quatro a cinco filmes por dia, e mesmo assim conseguia tirar boas notas (mistério). Depois na faculdade, nasceu um interesse pela história da arte, que é o que eu mais curto até hoje. A discussão entre gênero e arte me interessa bastante: artistas mulheres, o que elas criaram, quais são suas histórias e dificuldades. ",
                "third":
                    "Além de animais, outra coisa que é bem importante para mim é que eu sou fascinada por livros e literatura. A literatura abriu meus olhos para questões importantes como direitos humanos e feminismo. Então quando eu estou lendo alguma coisa, geralmente são romances relacionados a estes temas, por ser algo que eu realmente me importo.",
                "fourth":
                    "Eu me formei em design gráfico pela UTFPR e comecei a trabalhar ainda na faculdade. Nesses anos eu trabalhei para marcas como ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce, Universidade do Intercâmbio e Casa Paraíso Ecológico. Atualmente meu foco de trabalho é em marcas, identidade visual e editorial, que são os tipos de projetos que eu mais gosto de trabalhar."
              }
            }

    </script>
    
</body>
</html>

​