jquery-i18next
Version:
jQuery-i18next is a jQuery based Javascript internationalization library on top of i18next. It helps you to easily internationalize your web applications.
242 lines (238 loc) • 11.4 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The description of this awesome landing page.">
<title>My Awesome Landing-Page</title>
<!-- Bootstrap Core CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="loader"></div>
<div id="content" style="display: none;">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#home" data-i18n="menu.home">My Awesome Landing-Page</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about" data-i18n="menu.about">About</a>
</li>
<li>
<a class="page-scroll" href="#services" data-i18n="menu.services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact" data-i18n="menu.contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section id="home">
<!-- Header -->
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1 data-i18n="intro.title">Landing Page</h1>
<h3 data-i18n="intro.subTitle">Some subtitle</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/locize" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">twitter</span></a>
</li>
<li>
<a href="https://github.com/i18next/jquery-i18next" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">github</span></a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCPYQjBbbXojUcB8qjeIB3uA" class="btn btn-default btn-lg"><i class="fa fa-youtube fa-fw"></i> <span class="network-name">YouTube</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
</section>
<!-- About Section -->
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<br/><br/>
<h2 data-i18n="about.title">About my awesome Landing-Page</h2>
<br/>
<p data-i18n="about.description">This is a fantastic website presenting...</p>
<br/>
</div>
</div>
</section>
<section id="services">
<!-- Page Content -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading" data-i18n="[html]section.one.title">Feature:<br>One</h2>
<div class="lead">
<p data-i18n="section.one.description">This awesome feature will...</p>
</div>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/pad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading" data-i18n="[html]section.two.title">Best service<br>ever</h2>
<div class="lead">
<p data-i18n="section.two.description">Turn on that setting to unleash the full power of...</p>
</div>
</div>
<div class="col-lg-5 col-sm-pull-6 col-sm-6">
<img class="img-responsive" src="img/dog.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading" data-i18n="[html]section.three.title">Last<br>but not least</h2>
<div class="lead">
<p data-i18n="section.three.description">The best customer support you can ever have.</p>
</div>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/phones.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
</section>
<section id="contact">
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2 data-i18n="contact">Keep in Touch:</h2>
</div>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/locize" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">twitter</span></a>
</li>
<li>
<a href="https://github.com/i18next/jquery-i18next" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">github</span></a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCPYQjBbbXojUcB8qjeIB3uA" class="btn btn-default btn-lg"><i class="fa fa-youtube fa-fw"></i> <span class="network-name">YouTube</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
</div>
</section>
<!-- /.banner -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-8">
<ul class="list-inline">
<li>
<a href="#home" data-i18n="menu.homeInFooter">Home</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#about" data-i18n="menu.about">About</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#services" data-i18n="menu.services">Services</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#contact" data-i18n="menu.contact">Contact</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<select name="language" id="languageSwitcher"></select>
</li>
<li id="languageChangedNotification" style="display: none;">
<i data-i18n="footer.counter" data-i18n-options='{ "count": 0 }'></i>
</li>
</ul>
<p id="footerMessage" class="text-muted small" data-i18n="footer.date"></p>
<p class="copyright text-muted small" data-i18n="[html]footer.copyright">Copyright © My Awesome Landing-Page All Rights Reserved</p>
</div>
</div>
</div>
</footer>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/landing-page.js"></script>
<!-- i18next stuff -->
<script src="https://cdn.jsdelivr.net/npm/i18next@21.6.10/i18next.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-i18next@1.2.1/jquery-i18next.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/i18next-browser-languagedetector@6.1.3/i18nextBrowserLanguageDetector.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/i18next-locize-backend@4.2.8/i18nextLocizeBackend.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locize-lastused@3.0.13/locizeLastUsed.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locize@2.2.4/locize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment-with-locales.min.js"></script>
<script src="js/i18n.js"></script>
</body>
</html>