• 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

VPS Starter Arubacloud
0 głosów
259 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 (25,130 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 (25,130 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 (251,250 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 482 wizyt
pytanie zadane 25 kwietnia 2019 w PHP przez daniel1806 Obywatel (1,780 p.)
0 głosów
1 odpowiedź 634 wizyt
+1 głos
2 odpowiedzi 595 wizyt
pytanie zadane 15 marca 2021 w JavaScript przez Kubs Mądrala (5,190 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...