<!-- 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>@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');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-family);
line-height: var(--line-height);
}
.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;
letter-spacing: 2px;
text-transform: uppercase;
}
.btn {
text-decoration: none;
border-radius: 30px;
font-size: 1rem;
text-transform: capitalize;
display: inline-block;
transition: 300ms;
}
.btn--primary:hover,
.btn--tertiary:hover {
background-color: #a19f94;
}
.btn, input, select {
border: none;
box-shadow: none;
}
.sec__header {
text-align: center;
}
.sec__header::after {
content: '';
display: block;
width: 50px;
height: 2px;
margin-inline: auto;
margin-block-start: 20px;
}(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]));
}
})();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.