the language toggle doesn’t work accordingly

I am making a language toggle so that I can have the french and english text option,
so far so good except when I ran the code the button doesn’t move.
I am no expert in html nor css so maybe the answer is obvious, but I cannot see where it went wrong…
also the english text doesn’t appear either.

when i click on the toggle button the colors change (like wanted) but that’s it. the ‘english’ text doesn’t turn blue, the english text doesn’t appear and so on.

help? thanks

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--(Universal Character Set + Transformation Format—8-bit)-->
    <meta charset="UTF-8"

    <!--writting font title-->

    <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=Whisper&display=swap" rel="stylesheet">
    <!--font-awesome cdn-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!--link to CSS-->
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="script.js" defer></script> 
    
    <title>CL- Ceramique & Lumiere</title>
  </head>



<body>

  <header>
    <div class="header">
      <div class="inner_header">
        <div class="logo_container">
          <h1 style="text-align: center;">Céramique & Lumière</h1> 
          <p>UNIQUE CREATION PRODUCT</p>
          <p>HANDMADE</p>
          <img src="../photos/240610_ logo_1.png" alt>
        </div> 
      </div>      
    </div>
  </header>

  <!--navigation bar below-->
  <div class="menu_navbar">
    <ul>
      <li><a href="website.html">HOME</a></li>
      <li><a href="gallery_page.html">GALLERY</a></li>
      <li><a href="artist_page.html">THE ARTIST</a></li>
      <li><a href="shop_page.html">SHOP</a></li>
      <li><a href="events_page.html">EVENTS</a>
      <li><a href="contact_page.html">CONTACT</a></li>
      </li>
    </ul>    
  </div>

  <div class="language_option">
    <span class="en">ENGLISH</span>
    <input type="checkbox" class="check">
    <span class="fr">FRANCAIS</span>
    <div class="content english_content">
      <h1>MORE ABOUT ME</h1>
      <p>I am an artist who graduated from the École Nationale Supérieure des Beaux-Arts in Paris, France.
  
        My work is mainly inspired by nature: as it overflows in colors, shapes and in its capacity to adapt, it offers an infinite source of creative possibilities. I relish the idea of telling and sharing a beautiful story: that of my amazement at nature, its beauty, its ingenuity.
  
        Each creation is unique, each element shaped by hand. There is no mechanical repetition of form like molding. Even though my sculptures often visually resemble reality, I do not strive for photographic perfection, but for emotion.</p>
  
      <h1>Time of Creation:</h1>
  
        <p>Even a small flower or sculpture requires a considerable amount of time to shape: 
        Between a minimum of one hour and up to five hours, or even more depending on the size of the sculpture. Additionally, one must account for the clay to dry, thus between a day and a week. 
        Following this process, is the firing process which includes heating and cooling. This can easily takes 10 hours. 
        For colored sculptures or with a gilded edge, there is a second firing. (which can add another...10 hours).
        In total, the process takes around 4 days & several weeks...</p>
  
      <h1>The Type of Clay:</h1>
  
      <p>I enjoy working with porcelain (one of the most precious and expensive clays). I mainly use porcelains that, in their fine thickness, allow light to pass through. 
        I frequently work with the Australian white porcelain, ‘Southern Ice’, as I find it very plastic and translucent.
        However, no clay is better than another. They must be tested to find the one that suits best.</p>
  
      <h1>Sculpture Technique:</h1>
  
      <p>I am often asked which technique I use for sculpting and the answer is none in particular, everything is worth testing and experimenting with. 
        I use pottery tools, brushes, kitchen utensils (whisk), bathroom items: toothbrush, or even a straw, or a DIY article, etc. ... everything is interesting to test. 
        I only exceptionally use a mold, because it is too repetitive. Flowers, for example have each different petal; it is not a mechanical repetition of form and this is what contributes to bringing the sculpture to life.</p>
  
      <h1>Philosophical Minute:</h1>
  
      <p>So, why flowers?
        Flowers, in a certain way, express a connection to the joy of living: they are beautiful to look at, have wonderful colors, and divine scents. When we want to please someone, we offer a bouquet of flowers, etc.
        Flowers resonate with the vibration of love, beauty, and possibly the divine.</p>
  
      <h1>What Do We Express?</h1>
  
      <p>Life is composed of a thousand vibrations with which we sometimes harmonize wonderfully, but not always.
        Sounds, colors, nature, those that we love.
        Creating is a state of mind, a sort of vibration, a state of soul.
        We then enter an expansive universe where everything is possible.
        Thus, I enjoy playing with porcelain and making light pass through the thickness of the material: The thinner it gets, the more light passes through.
        Creation is the image of what we perceive and interpret.</p>
  
      <h1>Relationship to Time:</h1>
  
      <p>In an era of speed, of fast in every sense, my work is rather one of a different rhythm, of a suspended time where one must be calm, focused, and agile.
        Porcelain clay has its demands that do not always favor speed, whether it is the drying time, the working time, nor the firing process. For a splendid result it will be slow. If we try to speed up time, the clay protests, cracks, warps, deform, and the work has to be restarted until the lesson is learned.
        The result is never guaranteed, and the most exciting moment is the opening of the kiln. I am often impatient to see how the pieces have behaved during firing...</p>
  
      <h1>Flowers of Continuity:</h1>
  
      <p>All my creations are made for the pleasure of the eye, to create a room ambiance, to decorate, to offer.
        However, among the flowers I had created, I chose one specifically for a particular intention.
        Time passes by, and one day our parents leave us. I lost mine a few years ago and wondered how to pay my respects to them. Among the possibilities, I placed a flower in the tomb, as a farewell, as a thought materialized in the floral form that will last almost forever since once fired, porcelain does not change over time. This is what I call the flowers of continuity, to choose among those offered if one wishes to have this approach.</p>
  
      <h1>White sculptures & flowers</h1>
      <p>The white porcelain I use is really delicate. Light penetrates through the thinnest parts of the sculptures. The fact that it is unpainted does not necessarily imply an absence of color, as the varying shades of transparency animate this material. The lack of color leaves room for imagination, as color is a form of interpretation. However, some of my pieces are colored, while others are white and gold.</p>
  
      <h1>I would like to thank those who are and have been on my life journey and have supported me, especially
        My husband and daughter, my parents, and close ones.</h1>
  
    </div>
    <div class="french_content">
      <h1>A PROPOS DE MOI</h1>
      <p>Je suis artiste diplômée de l’Ecole Nationale Supérieure des Beaux-Arts de Paris en France. 

        Mon travail, principalement s’inspire de la nature : en effet, elle est tellement riche en couleurs, en formes, en capacités d’adaptation qu’elle offre une source infinie de possibilités créatrices. J’aime l’idée de raconter et partager une belle histoire : celle de mon émerveillement face à cette nature, sa beauté, son ingéniosité.
        
        Chaque création est unique, chaque élément façonné à la main. Il n’y a pas de répétition mécanique de forme comme le moulage. 
        Même si mes sculptures se rapprochent souvent visuellement de la réalité, Je ne cherche pas la perfection photographique, mais l’émotion.</p>
        
      <h1>Temps de réalisation:</h1>
  
        <p>Même petite, une fleur ou une sculpture demande beaucoup de temps à façonner :
          Entre une heure minimum et cinq heures, voire bien plus selon la taille de la sculpture. 
          À cela, il faut compter le temps de de séchage : entre un jour et une semaine. 
          Ensuite viens la cuisson incluant la montée en température et le refroidissement. Cela prend facilement 10 heures. 
          Puis, pour les sculptures qui ont de la couleur ou un liseré doré, il y a une deuxième cuisson. (Rajoutons de nouveau environ…10h)
          Au total entre 4 jours et plusieurs semaines...</p>
  
      <h1>Quelle terre:</h1>
  
      <p>J’aime travailler avec la porcelaine (une des terres les plus précieuses et chère.) J’utilise principalement des porcelaines qui, dans la finesse de l’épaisseur laissent passer la lumière.  
        Je travaille beaucoup avec la porcelaine blanche australienne ‘southern ice’ car je la trouve très plastique et transparente.
        Mais, il n’y a pas de terre meilleure que d’autre. Il faut les tester, afin de trouver celle qui convient le mieux. </p>
  
      <h1>Quelle technique de sculpture:</h1>
  
      <p>On me demande souvent quelle technique j’utilise pour la sculpture : aucune en particulier, tout est utile à tester et expérimenter. 
        Je m’aide d’outils de poterie, de pinceaux, de la cuisine (fouet), de la salle de bain: brosse à dents,  ou encore une paille, ou un article de bricolage, etc. …tout est utile à tester. 
        Je n’utilise qu’exceptionnellement un moule, car c’est trop répétitif.  Pour les fleurs par exemple, chaque pétale est différent, ce n’est pas une mécanique de répétition de forme et c’est cela qui contribue à donner vie à la sculpture.</p>
  
      <h1>La minute philosophique</h1>
  
      <p>Alors pourquoi les Fleurs ?
        Les fleurs expriment d’une certaine façon un rapport à la joie de vivre : elles sont belles à regarder, ont des couleurs merveilleuses et des parfums divins. Quand on veut faire plaisir à quelqu’un, on offre un bouquet de fleurs, etc. 
        La fleur surfe sur la vibration de l’amour, du beau et pourquoi pas du divin.</p>
  
      <h1>Créer: Qu'exprime t'on?</h1>
  
      <p>La vie est composée de mille vibrations avec lesquelles on s’accorde parfois merveilleusement, mais pas toujours. 
        Les sons, les couleurs, la nature, ceux qu’on aime. 
        Créer est un état d’esprit, une sorte de vibration, un état d’âme. 
        On rentre alors dans un univers d’expansion ou tout est possible.
         Ainsi, J’aime jouer avec la porcelaine et faire passer des Jeux de lumière, à travers l’épaisseur de la matière : Plus elle s’affine, plus la lumière passe. 
        La création est l’image de ce que l’on perçoit et interprète.</p>
  
      <h1>Le rapport au Temps:</h1>
  
      <p>A l’heure de la vitesse, du fast en tout genre, mon travail serait plutôt celui d’un autre rythme, d’un autre temps suspendu, ou il faut être posé, concentré, et agile. 
        La terre porcelaine a ses exigences qui n’aiment pas la vitesse: temps de séchage, de travail, de cuisson, tout est lent pour bien faire. Si on veut accélérer le temps, la terre proteste, fendille, vrille, se déforme et le travail est à recommencer tant que la leçon n’est pas apprise.
        Le résultat n’est jamais garanti, et le moment le plus excitant est celui de l ‘ouverture du four. Je suis souvent impatiente de voir comment les pièces se sont  comportées a la cuisson…</p>
  
      <h1>Les fleurs de continuité:</h1>
  
      <p>Toutes mes créations sont faites pour le plaisir de la vue, donner une ambiance dans une pièce, décorer, offrir. 

        Cependant parmi les fleurs que j’avais réalisées, j’en ai choisi une spécialement pour une intention particulière. 
        Le temps passe, et un jour nos parents nous quittent. J’ai perdu les miens il y a quelques années et je me suis demandé comment leur rendre hommage. Parmi les différentes possibilités, j’ai placé une fleur dans le caveau, comme un au revoir, une pensée matérialisée dans la forme florale qui durera presque éternellement puisque la porcelaine une fois cuite ne bouge pas dans le temps. C’est ce que j’appelle les fleurs de continuité à choisir parmi celles proposées si on souhaite avoir cette démarche.</p>
  
      <h1>Fleurs & sculptures blanches</h1>
      <p>La porcelaine blanche que j’utilise est d’une grande finesse. La lumière passe à travers les parties les plus fines des sculptures.
        Le fait qu’elle ne soit pas peinte ne représente pas forcément une absence de couleurs car toutes les nuances de transparence font vibrer cette matière.
        L’absence de couleur laisse place à l’imagination, car la couleur est une interprétation.
        Cependant, certaines de mes pièces sont colorées, d’autres sont blanches et or.</p>
  
      <h1>Remerciements à ceux qui sont, ou ont été sur mon parcours de vie et qui m’ont soutenue, particulièrement
        Mon mari et ma fille, mes parents et proches.</h1>
  
    </div>
    <img src="../photos/240610_ logo_1.png" alt>
  </div>











  <footer>
    <div class="footer_content">
      <h3>CL- Céramique & Lumière</h3>
      <p>PARIS, FRANCE</p>
      <p>UNIQUE CREATION PRODUCT</p>
      <ul class="socials">
        <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
        
        <button id="shareBtn"<i class="fa-solid fa-share"></i></button>


        <li><a id="share"><i class="fa-solid fa-share"></i></a></li>  
      </ul>
    </div>
    <div class="footer_bottom">
      <p>copyright © 2024 CL. designed by <span>LEA</span></p>
    </div>
  </footer>
</body>




</html>

*{
    margin: 5px;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

body{
    background-color: rgb(16,12,8);
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}


.header{
   width: 100%;
   height: 300px;
   background-color: rgb(16,12,8);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center;
}


.inner_header{
    width: 1000px;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-top: 60px;
}


.logo_container{
    height: 100%;
    display: table;
    margin: 0 auto;
    
}
.logo_container h1{
    color: rgb(255,250,240);
    font-family: "Whisper", cursive;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    align-items: center;
    font-size: 70px;
}
.logo_container p{
    max-width: 500px;
    margin: 5px auto;
    line-height: 18px;
    font-size: 16px;
    color: rgb(255,250,240);
}
.logo_container img{
    width: 200px;
    height: 170px;
    object-fit: fill;
}

.menu_navbar{
    background: transparent;
    text-align: center;
}
.menu_navbar ul{
    display: inline-flex;
    list-style: none;
    text-align: center;
}
.menu_navbar a{
    transition: color .6s ease;
}
.menu_navbar ul :hover a{
    color: aqua;
}
.menu_navbar ul li {
    width: 120px;
    margin: 18px;
    padding: 15px;
}
.menu_navbar ul li a{
    text-decoration: none;
    color: rgb(255,250,240);
}
.menu_navbar ul li:hover{
    background: transparent;
}


footer{
    background: rgb(16,12,8);
    height: auto;
    width: 1000px;
    padding-top: 40px;
    color: rgb(255,250,240);
    margin: 0 auto;
}

.footer_content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.footer_content h3{
    font-size: 1.8rem;
    text-transform: capitalize;
    line-height: 3rem;
    font-family: "Whisper", cursive;
    font-weight: 400;
    font-style: normal;
}
.footer_content p{
    max-width: 500px;
    margin: 5px auto;
    line-height: 18px;
    font-size: 12px;
}


.socials{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 3rem 0;
}
.socials li{
    margin: 0 10px;
}
.socials a{
    text-decoration: none;
    color: rgb(255,204,51);
}
.socials a i{
    font-size: 1.1rem;
    transition: color .4s ease;
}
.socials a:hover i{
    color: aqua;
}


.footer_bottom{
    background: #000000;
    width:1000px;
    padding: 20px 0;
    text-align: center;
}
.footer_bottom p{
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize; 
}
.footer_bottom span{
    text-transform: uppercase;
    opacity: 4;
    font-weight: 200;
}

.language_option{
    position: relative;
    max-width: 600px;
    height: 500px;
    padding: 50px;
    color: blue;
}
.language_option .content{
    display: none;
    margin-top: 20px;

}
.language_option .content .english_content{
    display: block;
}

.check{
    position: relative;
    width: 50px;
}
.check:before{
    content: '';
    position: absolute;
    width: 50px;
    height: 25px;
    background: #000000;
    border-radius: 25px;
}
.check:checked:before{
    background: aqua;
}
.check:after{
    content: '';
    position: absolute;
    left: 0px;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 25px;
    transition: 0.25s;
    border: 2px solid #333;
    box-sizing: border-box;
}
.check:checked:after{
    left:25px
    border 2px solid #00a1ff; 
}
.check:checked ~ .content.english_content{
    display: none;
}
.check:checked ~.content.french_content{
    display: block;
}

.en{
    color: rgb(255,250,240);
}
.fr{
    color: aqua
}

Filed under: Kiến thức lập trình - @ 17:47

Thẻ: htmlcsswebtoggle

Thiết kế website giá rẻ

Danh mục

the language toggle doesn’t work accordingly