• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dodanie przycisku zmiany wersji na angielski

Aruba Cloud - Virtual Private Server VPS
0 głosów
627 wizyt
pytanie zadane 1 czerwca 2022 w HTML i CSS przez Krzysiek Górka Nowicjusz (140 p.)
zmienione kategorie 1 czerwca 2022 przez ScriptyChris

Dzień dobry,
potrzebuję pomocy na swojej stronie. Dokładnie chciałbym wrzucić przycisk zmiany wersji z polskiej na angielską np. poprzez flagę lub napis ENG. Niestety jestem nawet poniżej osoby początkującej i stworzyłem stronę na podstawie poradnika.

Kod strony:

 

   <header class="header-area header-sticky">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav class="main-nav">

                        <ul class="nav">
                            <li class="scroll-to-section"><a href="#welcome" class="menu-item">START</a></li>
                            <li class="scroll-to-section"><a href="#about" class="menu-item">O NAS</a></li>
                            <li class="scroll-to-section"><a href="#promotion" class="menu-item">Social Media</a>
							<li class="scroll-to-section"><a href="#promotion2" class="menu-item">Grafika</a>
							<li class="scroll-to-section"><a href="#promotion3" class="menu-item">Komputery</a>
                            </li>
                            <li class="scroll-to-section"><a href="#contact-us" class="menu-item">KONTAKT</a></li>
                        </ul>
                        <a class='menu-trigger'>
                            <span>Menu</span>
                        </a>
                    </nav>
                </div>
            </div>
        </div>
    </header> 



    <div class="welcome-area" id="welcome">


        <div class="header-text">
            <div class="container">
                <div class="row">
                    <div class="left-text col-lg-6 col-md-12 col-sm-12 col-xs-12"
                        data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
                        <h1>Z NAMI JUĹ» JESTEĹš <em>WYGRANYM</em></h1>
                        <p>Nowo powstajÄ…ca agencja marketingowa to tak naprawdÄ™
                           Grupa znajomych działająca w różnych tematach i łącząca swoją pasję z danymi dziedzinami</p> 
                        <a href="#about" class="main-button-slider">Zobacz nasze zdolności</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="section" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
                    data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
                    <div class="features-item">
                        <div class="features-icon">
                            <h2></h2>
                            <img src="assets/images/features-icon-1.png" alt="">
                            <h4>Prowadzenie Social mediĂłw</h4>
                            <p>Efektywne prowadzenie konta firmowego na social mediach do pozyskiwania fanów, zwiększenia zysku oraz sprzedaży.
							</p>
                            <a href="#contact-us" class="main-button">
                                Kontakt
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
                    data-scroll-reveal="enter bottom move 30px over 0.6s after 0.4s">
                    <div class="features-item">
                        <div class="features-icon">
                            <h2></h2>
                            <img src="assets/images/features-icon-2.png" alt="">
                            <h4>Grafika Komputerowa/Tworzenie stron internetowych</h4>
                            <p>Projektowanie grafiki rastrowej i wektorowej dodatkowo stworzymy strony internetowe i je prowadzimy.</p>
                            <a href="#contact-us" class="main-button">
                                Kontakt
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
                    data-scroll-reveal="enter right move 30px over 0.6s after 0.4s">
                    <div class="features-item">
                        <div class="features-icon">
                            <h2></h2>
                            <img src="assets/images/features-icon-3.png" alt="">
                            <h4>Składanie komputerów</h4>
                            <p>Doradztwo, reinstalacja systemu, skompletowanie i złożenie gotowego zestawu komputerowego wraz z dowiezieniem na teren Limanowej oraz okolic.</p>
                            <a href="#contact-us" class="main-button">
                                Kontakt
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Potrzebuję pomocy, jak to zrobić? Za dobrą pomoc mogę jakoś się odwdzięczyć.

1 odpowiedź

0 głosów
odpowiedź 1 czerwca 2022 przez wizarddos Nałogowiec (27,550 p.)

Do dodawania różnych wersji językowych można użyć np. Plików tłumaczeń w różnych formatach np. JSON lub jako tablicę w JS czy po stronie back-endu

Jeżeli ich używamy to oprócz wpisywania bezpośrednio do znaczników zawartosci w domyślnym języku, dodatkowo jeżeli jest wybrany drugi język, ładujemy po stronie frontendu tłumaczenie do znaczników podmieniając to już się tam znajdujące 

 

Drugą opcją jest napisanie 2 'witryn'. Jednej po polsku, drugiej po angielsku i po zmianie języka przekierowujesz na drugą stronę

To rozwiązanie jest jednak słabe jeżeli chcemy później zmienić coś w kodzie strony. Dodaje nam roboty, bo zamiast zmieniać content na jednej stronie, zmieniamy na dwóch.

(skoro jesteś niżej niż początkujący, może odpuść sobie narazie tłumaczenia. Poznaj jak pisze się witryny i dopiero potem baw się w tłumaczenia) 

komentarz 1 czerwca 2022 przez Krzysiek Górka Nowicjusz (140 p.)
Fakt, ale na tym stopniu nie potrzebuję dużo. Mogę zapytać jak umieścić w kodzie flagę albo napis ENG który będzie przenosił na drugą stronę?
1
komentarz 1 czerwca 2022 przez wizarddos Nałogowiec (27,550 p.)

Co do flagi możesz ją umieścić jako Ikonę albo jako obraz. A napis jako zwykły link.

Przed samodzielnym pisaniem projektów zapoznaj się z podstawami języka. Przerób kurs, z którego korzystasz

Przerób znaczy obejrzyj, napisz kod, zrozum go, poeksperymentuj z nim, rozwiąż napotkane problemy, rozwiąż zadanie domowe (jeżeli istnieje), a nie skopiuj kod i zostaw go bez żadnego własnego wysiłku.

2
komentarz 1 czerwca 2022 przez Krzysiek Górka Nowicjusz (140 p.)
ok, tak zrobię
komentarz 2 czerwca 2022 przez VBService Ekspert (256,600 p.)
edycja 2 czerwca 2022 przez VBService

akt, ale na tym stopniu nie potrzebuję dużo.

Jeżeli, rzeczywiście masz "niewielką" stronę (np. landing page, lub strona główna i kilka podstron) możesz się pokusić o zrobienie dwóch wersji.

 

przykład prostego menu

<!DOCTYPE html>
<html lang="pl-PL"><!-- dla ang. wersji np. lang="en-EN" -->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      html,
      body {
        margin: 0;
      }
      .container {
        width: 100vw;
      }
      nav {
        display: flex;
        background-color: black;
        background-image: linear-gradient(90deg, black, white);
        justify-content: space-between;
      }
      nav ul {
        display: flex;
        list-style-type: none;
        padding: 0.5em;
        margin: 0;
      }
      nav li {
        margin: 0 1em;
      }
      nav ul a {
        text-decoration: none;
        font: 400 1em/1.1 system-ui;
        font-variant: small-caps;
        color: lightblue;
      }
      nav ul a:hover {
        text-decoration: underline;
      }
      nav ul.menu--lang img {
        width: 2em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <nav>
          <ul class="menu--main">
            <li>
              <a href="#welcome">Start</a>              
            </li>
            <li>
              <a href="#about">O Nas</a>              
            </li>
            <li>
              <a href="#promotion1">Social Media</a>
            </li>
            <li>
              <a href="#promotion2">Grafika</a>
            </li>
            <li>
              <a href="#promotion3">Komputery</a>
            </li>
            <li>
              <a href="#contact-us">Kontakt</a>              
            </li>
          </ul>
          <ul class="menu--lang">
            <li>
              <a href="index.html" title="Polska wersja">
                <img src="https://duckduckgo.com/i/7cd61a2c.png">
              </a>
            </li>
            <li>
              <a href="index-en.html" title="English version">
                <img src="https://duckduckgo.com/i/144b3fc4.png">
              </a>
            </li>         
          </ul>
        </nav>
      </header>

      <!--
          Reszta część kodu strony
      -->
    </div>
  </body>
</html>

 

Landing Page Website Inspiration ]

Podobne pytania

0 głosów
3 odpowiedzi 613 wizyt
pytanie zadane 25 kwietnia 2019 w PHP przez daniel1806 Obywatel (1,780 p.)
0 głosów
1 odpowiedź 998 wizyt
+1 głos
2 odpowiedzi 1,163 wizyt
pytanie zadane 15 marca 2021 w JavaScript przez Kubs Mądrala (5,190 p.)

93,324 zapytań

142,323 odpowiedzi

322,389 komentarzy

62,652 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...