Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- hero section starts here -->
<header class="hero relative">
  <div class="hero__content">
    <nav class="hero__navbar d-flex align-items-center justify-content-between relative">
      <span class="logo bolder">logo</span>
      <div class="hero__navbar_switchers d-flex align-items-center justify-content-between">
        <button id="dark-mode" class="mode__switcher dark"></button>
        <select id="lang-switch" class="bolder">
          <option value="en">En</option>
          <option value="ar">Ar</option>
          <option value="jp">Jp</option>
        </select>
      </div>
    </nav>
    <div class="d-lg-flex align-items-center">
      <div class="hero__text d-xl-flex align-items-center">
        <div>
          <h1 class="hero__title" data-i18n="hero_title"></h1>
          <p class="para hero__para" data-i18n="hero_text">
          </p>
          <a class="btn btn--primary" href="#" data-i18n="hero_btn"></a>
        </div>
      </div>
      <figure class="hero__img relative">
        <img src="https://e.top4top.io/p_2127u52n91.png" data-attr="alt" data-i18n_attr="image_alt" class="w-100">
      </figure>
    </div>
  </div>
  <div class="hero__social absolute">
    <div class="d-flex flex-col">
      <a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
      <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
      <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
    </div>
  </div>
</header>

<main>
  <!-- about section starts here -->
  <section class="about">
    <div class="sec__header about__header">
      <h2 class="sec__title about__title" data-i18n="about_title"></h2>
      <p class="para" data-i18n="about_text"></p>
    </div>
    <div class="about__content d-xl-flex align-items-center justify-content-between">
      <figure class="about__img relative">
        <img src="https://f.top4top.io/p_2127ml8j82.jpg" data-attr="alt" data-i18n_attr="image_alt" class="w-100">
      </figure>
      <div class="about__text">
        <h3 class="about__subtitle" data-i18n="about_subTitle1"></h3>
        <p class="para" data-i18n="about_para1"></p>
        <h3 class="about__subtitle" data-i18n="about_subTitle2"></h3>
        <p class="para" data-i18n="about_para2"></p>
      </div>
    </div>
  </section>

  <!-- cta section starts here -->
  <section class="cta d-xl-flex align-items-center">
    <div class="cta__text w-100">
      <p class="para" data-i18n="cta_text"></p>
      <a href="#" class="btn btn--secondary cta__btn" data-i18n="cta_btn"></a>
    </div>
    <figure class="cta__img d-none d-xl-block">
      <img src="https://h.top4top.io/p_2127idjcw4.png" data-attr="alt" data-i18n_attr="image_alt" class="w-100">
    </figure>
  </section>

  <!-- offers section starts here -->
  <section class="offers">
    <div class="sec__header offers__header">
      <h2 class="sec__title offers_title" data-i18n="offers_title"></h2>
      <p class="para" data-i18n="offers_text"></p>
    </div>
    <div class="offers__content offers__content--has-margin d-grid">
      <div class="offers__item relative" data-attr="data-offer" data-i18n_attr="special_offer">
        <figure class="offers__item_img">
          <img src="https://i.top4top.io/p_21279v8r35.png" data-attr="alt" data-i18n_attr="image_alt" class="w-100">
        </figure>
        <div class="offer-content_item-text">
          <p class="para" data-i18n="offer_item_text"></p>
          <span class="price bolder" data-i18n="offer_item_price"></span>
        </div>
      </div>
      <div class="offers__item relative" data-attr="data-offer" data-i18n_attr="best_offer">
        <figure class="offers__item_img">
          <img src="https://j.top4top.io/p_2127b39xj6.png" data-attr="alt" data-i18n_attr="image_alt" class="w-100">
        </figure>
        <div class="offer-content_item-text">
          <p class="para" data-i18n="offer_item_text"></p>
          <span class="price bolder" data-i18n="offer_item_price"></span>
        </div>
      </div>
      <div class="offers__item relative" data-attr="data-offer" data-i18n_attr="best_offer">
        <figure class="offers__item_img">
          <img src="https://k.top4top.io/p_2127wmdno7.png" data-attr="alt" data-i18n_attr="image_alt" class="w-100">
        </figure>
        <div class="offer-content_item-text">
          <p class="para" data-i18n="offer_item_text"></p>
          <span class="price bolder" data-i18n="offer_item_price"></span>
        </div>
      </div>
    </div>
    <button class="btn btn--primary" data-i18n="offer_seeAll"></button>
  </section>
</main>

<!-- footer section starts here -->
<footer class="footer d-xl-flex justify-content-between">
  <div class="footer__about">
    <span class="logo footer__logo bolder">logo</span>
    <p class="para" data-i18n="footer_about"></p>
  </div>
  <nav class="footer__navbar">
    <h2 class="footer__navbar_head" data-i18n="footer_quickLinks"></h2>
    <ul class="footer__navbar_list">
      <li class="footer__navbar_item">
        <a href="#" class="footer__navbar_link" data-i18n="footer_link1"></a>
      </li>
      <li class="footer__navbar_item">
        <a href="#" class="footer__navbar_link" data-i18n="footer_link2"></a>
      </li>
      <li class="footer__navbar_item">
        <a href="#" class="footer__navbar_link" data-i18n="footer_link3"></a>
      </li>
      <li class="footer__navbar_item">
        <a href="#" class="footer__navbar_link" data-i18n="footer_link4"></a>
      </li>
    </ul>
  </nav>
  <div class="footer__newsletter">
    <h2 class="footer__newsletter_head" data-i18n="footer_newsletter"></h2>
    <p class="para" data-i18n="footer_newsletter_text"></p>
    <form id="newsletter-form" class="relative">
      <input type="email" data-attr="placeholder" data-i18n_attr="footer_input_placeholder" class="w-100">
      <button class="btn btn--tertiary footer__newsletter_btn bolder absolute" data-i18n="footer_newsLetter_btn"></button>
    </form>
  </div>
</footer>
              
            
!

CSS

              
                /* ------------------------- */
/* File No. 1: CSS variables */
/* ------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200,400,600&&family=Noto+Sans+JP:wght@100;400;700&family=Roboto:wght@100,400,600&family=Tajawal:wght@200,400,600&display=swap");

html {
  --font-family: "Roboto", sans-serif;
  --line-height: 32px;
  /* colors */
  --primary-color: #febe00;
  --secondary-color: #00b68f;
  --dark-color: #161616;
  --light-color: #eee;
  --primary-text-color: var(--dark-color);
  --primary-bg-color: #fff;
  --shadow-color: var(--light-color);
  --hero-bg-gradient: linear-gradient(90deg, #30333f, #161616, #161616);
  /* font sizes */
  --logo-font-size: 2rem;
  --lang-switcher-font-size: 1.02em;
  --main-title-font-size: 2rem;
  --para-font-size: 1rem;
  --sec-header-font-size: 1.5rem;
  --third-title-font-size: 1.15rem;
  --offers-item-after-font-size: 0.9rem;
  --price-font-size: 2.5rem;
  /* margin & padding */
  --btn-padding: 7px;
  --sec-padding-block: 70px;
  --hero-padding-block: 50px;
  --sec-padding-inline: calc(60px + 3%);
  --sec-heading-mbe: 40px;
  --hero-navbar-padding-block-end: 30px;
  --hero-text-mbe: 40px;
  --about-img-mbe: 40px;
  --cta-text-mie: 16%;
  --item-mbe: 30px;
  /* height */
  --hero-height: 400px;
  /* transform */
  --about-img-background-move: -20%;
  /* grid */
  --offers-content-column: repeat(1, 1fr);
  --offers-content-gap: 5vw;
}

html:lang(ar) {
  --font-family: "Tajawal", sans-serif;
}

html[dir="rtl"] {
  --about-img-background-move: 20%;
}

html:lang(jp) {
  --font-family: "Noto Sans JP", sans-serif;
}

@media (min-width: 768px) {
  html {
    --offers-item-after-font-size: 1.5rem;
    --offers-content-column: repeat(2, 1fr);
  }

  html:lang(ar),
  html:lang(jp) {
    --offers-item-after-font-size: 1.2rem;
  }
}

@media (min-width: 900px) {
  html {
    --main-title-font-size: 2.5rem;
    --para-font-size: 1.15rem;
    --sec-header-font-size: 1.75rem;
    --third-title-font-size: 1.35rem;
    --sec-padding-block: 120px;
    --hero-text-mbe: 0;
    --about-img-mbe: 120px;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 1vw;
    --sec-heading-mbe: 90px;
    --about-img-mbe: 0;
    --item-mbe: 0;
    --hero-height: 500px;
    --cta-img-width: 53%;
    --sec-padding-inline: 8%;
    --offers-content-column: repeat(3, 1fr);
  }
}

@media (min-width: 1400px) {
  html {
    --cta-text-mie: 12%;
  }
}

@media (min-width: 1600px) {
  html {
    --cta-text-mie: 19%;
    --cta-img-width: 45.75%;
  }
}

@media (min-width: 1900px) {
  html {
    --line-height: 2vw;
    --cta-img-width: 43%;
  }
}

/* ------------------------- */
/* File No. 2: global style */
/* ------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
  line-height: var(--line-height);
}

body {
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
  transition: all 150ms;
}

body.dark {
  --primary-text-color: var(--light-color);
  --primary-bg-color: #0f0f0f;
  --shadow-color: #13151a;
  --hero-bg-gradient: linear-gradient(90deg, #191b20, #131313, #131313);
}

.bolder {
  font-weight: bolder;
}

.w-100 {
  width: 100%;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.d-none {
  display: none;
}

.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

@media (min-width: 900px) {
  .d-lg-flex {
    display: flex;
  }
}

@media (min-width: 1200px) {
  .d-xl-flex {
    display: flex;
  }

  .d-xl-block {
    display: block !important;
  }
}

.logo {
  font-family: "Cairo", sans-serif;
  font-size: var(--logo-font-size);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.para {
  font-size: var(--para-font-size);
}

.btn {
  text-decoration: none;
  border-radius: 30px;
  font-size: 1rem;
  text-transform: capitalize;
  display: inline-block;
  padding-block: var(--btn-padding);
  padding-inline: calc(var(--btn-padding) * 2);
  transition: 300ms;
}

.btn--primary {
  background-color: var(--primary-color);
  color: var(--dark-color);
}

.btn--secondary {
  color: var(--dark-color);
  background-color: var(--light-color);
}

.btn--tertiary {
  background-color: var(--secondary-color);
  color: var(--light-color);
}

.btn--primary:hover,
.btn--tertiary:hover {
  background-color: #a19f94;
}

.btn--secondary:hover {
  background-color: var(--primary-color);
}

.btn,
input,
select {
  border: none;
  box-shadow: none;
}

.about,
.offers,
.footer {
  padding-block-start: var(--sec-padding-block);
  padding-inline: var(--sec-padding-inline);
}

.offers,
.footer {
  padding-block-end: var(--sec-padding-block);
}

.sec__header {
  margin-block-end: var(--sec-heading-mbe);
  text-align: center;
}

.sec__header::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  margin-inline: auto;
  margin-block-start: 20px;
  background-color: var(--primary-color);
}

.sec__title {
  font-size: var(--sec-header-font-size);
}

/* ------------------------- */
/* File No.3: Mobile style */
/* ------------------------- */

/* hero section */

.hero {
  min-height: var(--hero-height);
  padding-block: var(--hero-padding-block);
  padding-inline: var(--sec-padding-inline);
  background-image: var(--hero-bg-gradient);
  color: var(--light-color);
}

.hero__navbar {
  z-index: 1;
}

/* directions */

html[dir="rtl"] .hero,
html[dir="rtl"] .hero__content,
html[dir="rtl"] .hero__img img,
html[dir="rtl"] .hero__social > div {
  transform: rotateY(180deg);
}

.hero__navbar {
  margin-block-end: var(--hero-navbar-padding-block-end);
}

.hero__navbar_switchers {
  color: var(--light-color);
}

.mode__switcher {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: none;
  text-shadow: none;
  margin-inline-end: 8px;
  position: relative;
  color: inherit;
  cursor: pointer;
}

.mode__switcher::after {
  content: "\263C";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: inherit;
  font-size: 1.5em;
}

.mode__switcher.dark::after {
  content: "\263E";
}

#lang-switch {
  font-family: "Cairo", sans-serif;
  background-color: transparent;
  font-size: var(--lang-switcher-font-size);
  color: inherit;
}

.hero__text {
  margin-block-end: var(--hero-text-mbe);
}

.hero__title {
  font-size: var(--main-title-font-size);
  line-height: 44px;
}

.hero__title,
.hero__para {
  margin-block-end: 20px;
}

.hero__social {
  background-color: var(--primary-color);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-block: 50px;
  padding-inline: 20px;
}

.hero__social a {
  color: var(--dark-color);
  margin-block-end: 10px;
}

/* about section */

.about__img {
  margin-block-end: var(--about-img-mbe);
}

.about__img img {
  border-radius: 5px;
}

.about__subtitle {
  font-size: var(--third-title-font-size);
  margin-block: 30px;
}

.about__subtitle:first-of-type {
  margin-block-start: 0;
}

/* cta section */

.cta__text {
  padding: 8%;
  background-color: var(--secondary-color);
  color: var(--light-color);
}

.cta__btn {
  margin-block-start: 1.5625rem;
}

/* offers section */

.offers__content {
  grid-template-columns: var(--offers-content-column);
  gap: var(--offers-content-gap);
}

.offers__content--has-margin {
  margin-block-end: 60px;
}

.offers__item {
  padding: 20px;
  box-shadow: 0 1px 30px 5px var(--shadow-color);
  border-radius: 10px;
}

.offers__item .para {
  margin-block-end: 30px;
}

.offers__item::after {
  content: attr(data-offer);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 2%;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--light-color);
  font-weight: bolder;
  font-size: var(--offers-item-after-font-size);
  text-align: center;
  position: absolute;
  top: 20px;
}

.offers__item_img {
  width: 60%;
  margin-inline: auto;
  margin-block-end: 20px;
}

.price {
  font-size: var(--price-font-size);
}

.offers .btn {
  display: block;
  width: max-content;
  margin-inline: auto;
}

/* footer section */

.footer {
  border-start-end-radius: 120px;
  background-color: var(--dark-color);
  color: var(--light-color);
}

.footer__about,
.footer__newsletter,
.footer__navbar {
  margin-block-end: var(--item-mbe);
}

.footer__logo {
  display: block;
  margin-block-end: 40px;
}

.footer__navbar_head,
.footer__newsletter_head {
  margin-block-end: 50px;
}

.footer__navbar_item {
  list-style: none;
  margin-block: 10px;
}

.footer__navbar_link {
  color: inherit;
  text-decoration: none;
  transition: 300ms;
}

.footer__navbar_link:hover {
  color: var(--primary-color);
}

.footer__newsletter .para {
  margin-block-end: 20px;
}

.footer__newsletter input {
  border-radius: 30px;
  padding-block: var(--btn-padding);
  padding-inline-start: calc(var(--btn-padding) * 2);
  padding-inline-end: calc(110px + (var(--btn-padding) * 2));
  font-size: 1rem;
}

html[dir="ltr"] .footer__newsletter_btn {
  right: 0;
}

html[dir="rtl"] .footer__newsletter_btn {
  left: 0;
}

/* media queries */

@media (max-width: 899px) {
  .cta {
    background-color: var(--secondary-color);
    padding-inline: 2.8%;
    margin-block-start: var(--sec-padding-block);
  }
}

/* ------------------------- */
/* File No.4: Tablet style */
/* ------------------------- */

@media (min-width: 768px) {
  .offers__item::after {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 900px) {
  .hero__text {
    min-height: calc(
      var(--hero-height) - (var(--sec-padding-block) * 2) -
        var(--hero-navbar-padding-block-end) - 30px
    );
    width: 56.5%;
    padding-inline-end: 2.75%;
  }

  .hero__img {
    width: 33.33%;
  }

  .cta {
    padding-block-start: var(--sec-padding-block);
    padding-inline: var(--sec-padding-inline);
  }

  .cta__text {
    padding-block: 6.875rem 2.1875rem;
    padding-inline: 6.25rem var(--cta-text-mie);
    border-start-start-radius: 50%;
    border-end-start-radius: 50px;
  }
}

/* ------------------------- */
/* File No.5: Desktop style */
/* ------------------------- */

@media (min-width: 1200px) {
  .hero::before {
    content: "";
    display: block;
    height: 100%;
    width: 33.33%;
    background-color: var(--primary-color);
    clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
    position: absolute;
    top: 0;
    right: 0;
  }

  .hero__navbar_switchers {
    color: var(--dark-color);
  }

  .about__img {
    width: 37%;
    margin-inline-start: 5%;
  }

  .about__img::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("https://g.top4top.io/p_21279ajjz3.png");
    background-size: cover;
    position: absolute;
    z-index: -1;
    transform: translateY(-75%) translateX(var(--about-img-background-move));
  }

  .about__text {
    width: 53%;
  }

  html:lang(jp) .about__text {
    writing-mode: vertical-rl;
    height: 400px;
    width: max-content;
    margin-block-end: auto;
  }

  .cta {
    margin-inline-start: 3.8%;
  }

  .cta__text {
    margin-inline-start: calc(-1 * var(--sec-padding-inline) + 3%);
  }

  .cta__img {
    width: var(--cta-img-width);
    margin-inline-start: calc(-1 * var(--cta-text-mie));
    padding: 10px;
    border-radius: 50%;
    border: 1px dashed var(--secondary-color);
    border-inline-start-color: var(--light-color);
  }

  html[dir="rtl"] .cta__img img {
    transform: rotateY(180deg);
  }

  .footer__about,
  .footer__newsletter {
    width: 30%;
  }

  .footer__navbar {
    width: 20%;
  }
}

@media (min-width: 1900px) {
  .offers__item::after {
    width: 6.5rem;
    height: 6.5rem;
  }
}

              
            
!

JS

              
                (function () {
  // the content of the page in 3 languages
  const content = {
    en: {
      hero_title: "Lorem ipsum dolor sit amet.",
      hero_text:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto tenetur, tempore veniam obcaecati numquam vero vel excepturi pariatur odio eos.",
      hero_btn: "See more",

      about_title: "Lorem ipsum dolor sit.",
      about_text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
      about_subTitle1: "Lorem ipsum dolor sit amet.",
      about_para1:
        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nobis nihil ut aliquam quas exercitationem eos dolor excepturi accusamus quis, optio suscipit iusto neque voluptatum tempora possimus tempore doloremque deserunt.",
      about_subTitle2: "Lorem ipsum dolor sit amet.",
      about_para2:
        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nobis nihil ut aliquam quas exercitationem eos dolor excepturi accusamus quis, optio suscipit iusto neque voluptatum tempora possimus tempore doloremque deserunt.",

      cta_text:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nemo nesciunt porro nisi reiciendis laudantium nostrum sed magni consequuntur modi similique, est iusto, iste voluptas voluptate expedita, dolores quis suscipit asperiores excepturi molestiae rem molestias vel commodi? Dolorem saepe nisi placeat libero, rem reiciendis.",
      cta_btn: "Book Now",

      offers_title: "Lorem ipsum dolor sit.",
      offers_text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
      offer_item_text:
        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi beatae dolores, sint officia culpa architecto.",
      offer_item_price: (25).toLocaleString("en-US", {
        style: "currency",
        currency: "USD"
      }),
      offer_seeAll: "See All",

      footer_about:
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, optio fuga ea atque architecto quasi molestias excepturi voluptatem sapiente facilis tempora ab a distinctio, quis nobis harum sint magnam ex et, saepe exercitationem recusandae aut.",
      footer_quickLinks: "Quick Links",
      footer_link1: "About",
      footer_link2: "FAQ",
      footer_link3: "Offers",
      footer_link4: "Contact",
      footer_newsletter: "Subscribe to our Newsletter",
      footer_newsletter_text:
        "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum eos culpa deserunt!",
      footer_newsLetter_btn: "Subscribe"
    },

    ar: {
      hero_title: "تمتع بمذاق القهوة العربية",
      hero_text:
        "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى.",
      hero_btn: "المزيد",

      about_title: "تمتع بمذاق القهوة العربية",
      about_text: "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة.",
      about_subTitle1: "تمتع بمذاق القهوة العربية لدينا",
      about_para1:
        "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى.",
      about_subTitle2: "تمتع بمذاق القهوة العربية لدينا",
      about_para2:
        "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى.",

      cta_text:
        "إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً.",
      cta_btn: "احجز الآن",

      offers_title: "تمتع بالكثير من العروض",
      offers_text: "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة.",
      offer_item_text:
        "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى.",
      offer_item_price: (25).toLocaleString("ar-EG", {
        style: "currency",
        currency: "EGP"
      }),
      offer_seeAll: "المزيد",

      footer_about:
        "إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص.",
      footer_quickLinks: "روابط الموقع",
      footer_link1: "من نحن",
      footer_link2: "الأسئلة الشائعة",
      footer_link3: "العروض",
      footer_link4: "تواصل معنا",
      footer_newsletter: "اشترك في نشرتنا الاخبارية",
      footer_newsletter_text:
        "ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً.",
      footer_newsLetter_btn: "اشتراك"
    },

    jp: {
      hero_title: "アラビアコーヒーの味をお楽しみください",
      hero_text:
        "男ムホヲ就97不ぽるッで鮮色種製ひが自2提ネホキツ味明イ星全テタラヤ歌情ぴせ訳改ヲケキ山期久に高32流むくぼ成医りくだも題性ヤヱクナ字器ユノエマ徴候俺僅劉か。",
      hero_btn: "続きを見る",

      about_title: "アラビアコーヒーの味をお楽しみください",
      about_text:
        "男ムホヲ就97不ぽるッで鮮色種製ひが自2提ネホキツ味明イ星全テタ",
      about_subTitle1: "アラビアコーヒーの味をお楽しみください",
      about_para1:
        "必ヱキユオ経定複拝ヒフト俳写れふつ遠芯倒やゅな庶他ょでらし氷6張ト円96扱ムモシ作治ツシ表頭朝ンゆたク載段ょてきぶ企混遠ぶ。竹ネヘマラ力導スセハ職辞めり独割ろ東最ノツメ期聞大ユオ",
      about_subTitle2: "アラビアコーヒーの味をお楽しみください",
      about_para2:
        "必ヱキユオ経定複拝ヒフト俳写れふつ遠芯倒やゅな庶他ょでらし氷6張ト円96扱ムモシ作治ツシ表頭朝ンゆたク載段ょてきぶ企混遠ぶ。竹ネヘマラ力導スセハ職辞めり独割ろ東最ノツメ期聞大ユオ",

      cta_text:
        "男ムホヲ就97不ぽるッで鮮色種製ひが自2提ネホキツ味明イ星全テタラヤ歌情ぴせ訳改ヲケキ山期久に高32流むくぼ成医りくだも題性ヤヱクナ字器ユノエマ徴候俺僅劉か。転消キ販爆やの願団あめょ命動ソホ調避ぎげ素術ばだスを化多ウチワヒ柳態際ヌカユル一許せれづン相周のづゆ逃氏ざぴい内位様ヱカニ米情ト会安悲毒けま。",
      cta_btn: "今予約する",

      offers_title: "たくさんのオファーをお楽しみください",
      offers_text:
        "男ムホヲ就97不ぽるッで鮮色種製ひが自2提ネホキツ味明イ星全テタ",
      offer_item_text:
        "必ヱキユオ経定複拝ヒフト俳写れふつ遠芯倒やゅな庶他ょでらし氷6張ト円96扱ムモシ作治ツシ表頭朝ンゆたク載段ょてきぶ企混遠ぶ。竹ネヘマラ力導スセハ職辞めり独割ろ東最",
      offer_item_price: (25).toLocaleString("ja-JP", {
        style: "currency",
        currency: "JPY"
      }),
      offer_seeAll: "すべてを見る",

      footer_about:
        "男ムホヲ就97不ぽるッで鮮色種製ひが自2提ネホキツ味明イ星全テタラヤ歌情ぴせ訳改ヲケキ山期久に高32流むくぼ成医りくだも題性ヤヱクナ字器ユノエマ徴候俺僅劉か。転消キ販爆やの願団あめょ命動ソホ調避ぎげ素術ばだスを化多ウチワヒ柳態際ヌカユル一許せれづン相周のづゆ逃氏ざぴ",
      footer_quickLinks: "クイックリンク",
      footer_link1: "だいたい ",
      footer_link2: "よくある質問 ",
      footer_link3: "オファー ",
      footer_link4: "お問い合わせ",
      footer_newsletter: "ニュースレターを購読する",
      footer_newsletter_text:
        "男ムホヲ就97不ぽるッで鮮色種製ひが自2提ネホキツ味明イ星全テタラヤ歌情ぴせ訳改ヲケキ山期久に高32流むくぼ成医りくだも題性ヤヱクナ字器",
      footer_newsLetter_btn: "申し込む"
    }
  };

  // the content of the elements' attributes in 3 languages
  const attributes = {
    en: {
      special_offer: "Special Offer",
      best_offer: "Best offer",
      footer_input_placeholder: "Enter your email",
      image_alt: "image"
    },

    ar: {
      special_offer: "عرض خاص",
      best_offer: "أفضل العروض",
      footer_input_placeholder: "أضف بريدك الإلكتروني",
      image_alt: "صورة"
    },

    jp: {
      special_offer: "特別なオファー",
      best_offer: "最高の提案",
      footer_input_placeholder: "メールアドレスを入力",
      image_alt: "画像"
    }
  };

  // change language functionality
  const langSwitcher = document.getElementById("lang-switch");
  const rtlLang = new Set(["ar"]);
  changeLang(langSwitcher.value);
  changeContent(langSwitcher.value);

  langSwitcher.addEventListener("change", function () {
    changeLang(this.value);
    changeContent(this.value);
  });

  /*
    1- change html lang attribute
    2- change html direction
    -- rtlLang is a set that contains all right to left languages that are supported by this page -- 
    */

  function changeLang(lang) {
    const html = document.documentElement;
    html.lang = lang;
    html.dir = rtlLang.has(lang) ? "rtl" : "ltr";
  }

  /*
    1- select the current content according to the current language
    - Get all elements that have changeable content then change their content

    2- select the current attributes' content according to the current language
    - Get all elements that have a changeable attribute
    - Find what attribute should be changed (the content of the data-attr attribute)
    - Set target attribute on the element and add its value (the content of the i18n_attr attribute)

    ex: image has the following (data-attr="alt" data-i18n_attr="image_alt")
    a. set "alt" attribute on it
    b. get from attributes object the value of the "image_alt" proprty
    c. add this value on the "alt attribute"
    */

  function changeContent(lang) {
    const currContent = content[lang];
    const currAttributes = attributes[lang];

    const translatedElements = document.querySelectorAll("[data-i18n]");
    translatedElements.forEach(
      (el) => (el.innerHTML = currContent[el.dataset.i18n])
    );

    const translatedAttributes = document.querySelectorAll("[data-attr]");
    translatedAttributes.forEach((el) =>
      el.setAttribute(el.dataset.attr, currAttributes[el.dataset.i18n_attr])
    );
  }
})();

/* 
offers section ==> "see all" btn functionality
It duplicates the current content and removes the button from the DOM
*/

(function () {
  document.querySelector(".offers .btn").addEventListener("click", function () {
    const offersContent = document.querySelector(".offers__content");
    offersContent.innerHTML += offersContent.innerHTML;
    offersContent.classList.remove("offers__content--has-margin"); // for UI
    this.remove();
  });
})();

// function for dark/light modes

(function () {
  document.getElementById("dark-mode").addEventListener("click", function () {
    document.body.classList.toggle("dark");
    this.classList.toggle("dark");
  });
})();

              
            
!
999px

Console