452 lines
16 KiB
PHP
452 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
<title>Global Jain</title>
|
|
<style type="text/css">
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-Bold.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-Bold.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-Bold.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-Bold.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-Bold.svg#Gilroy-Bold') format('svg');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-SemiBold.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-SemiBold.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-SemiBold.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-SemiBold.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-SemiBold.svg#Gilroy-SemiBold') format('svg');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-ExtraBold.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-ExtraBold.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-ExtraBold.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-ExtraBold.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-ExtraBold.svg#Gilroy-ExtraBold') format('svg');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-Black.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-Black.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-Black.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-Black.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-Black.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-Black.svg#Gilroy-Black') format('svg');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-Light.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-Light.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-Light.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-Light.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-Light.svg#Gilroy-Light') format('svg');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-Heavy.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-Heavy.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-Heavy.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-Heavy.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-Heavy.svg#Gilroy-Heavy') format('svg');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-Regular.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-Regular.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-Regular.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-Regular.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-Regular.svg#Gilroy-Regular') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-Medium.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-Medium.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-Medium.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-Medium.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-Medium.svg#Gilroy-Medium') format('svg');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-Thin.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-Thin.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-Thin.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-Thin.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-Thin.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-Thin.svg#Gilroy-Thin') format('svg');
|
|
font-weight: 100;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Gilroy';
|
|
src: url('public/fonts/Gilroy/Gilroy-UltraLight.eot');
|
|
src: url('public/fonts/Gilroy/Gilroy-UltraLight.eot?#iefix') format('embedded-opentype'),
|
|
url('public/fonts/Gilroy/Gilroy-UltraLight.woff2') format('woff2'),
|
|
url('public/fonts/Gilroy/Gilroy-UltraLight.woff') format('woff'),
|
|
url('public/fonts/Gilroy/Gilroy-UltraLight.ttf') format('truetype'),
|
|
url('public/fonts/Gilroy/Gilroy-UltraLight.svg#Gilroy-UltraLight') format('svg');
|
|
font-weight: 200;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
body {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
font-family: 'Gilroy';
|
|
font-size: 16px;
|
|
}
|
|
|
|
.container {
|
|
width: 1366px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
background: #E7F7FE;
|
|
}
|
|
|
|
.top-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 26px 0;
|
|
}
|
|
|
|
.top-header .top-header-right{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-header img {
|
|
height: 40px;
|
|
display: block;
|
|
}
|
|
|
|
.top-header .contact-btn {
|
|
background: #2482A7;
|
|
height: 40px;
|
|
padding: 0 15px;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
display: flex;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.top-header .contribute-btn {
|
|
background: #2482A7;
|
|
height: 40px;
|
|
padding: 0 15px;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
display: flex;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.top-header .contribute-btn span,.top-header .contact-btn span{
|
|
display: block;
|
|
}
|
|
|
|
.top-header .contribute-btn img,.top-header .contact-btn img{
|
|
display: none;
|
|
}
|
|
|
|
.contain-box {
|
|
background: #2482A7;
|
|
height: calc(100vh - 92px);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.contain-box .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.contain-box .left-side,
|
|
.contain-box .right-side {
|
|
width: 50%;
|
|
}
|
|
|
|
.contain-box .right-side img {
|
|
display: block;
|
|
}
|
|
|
|
.contain-box .left-side .contain p {
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.contain-box .left-side .contain p.title {
|
|
font-size: 38px;
|
|
color: #C5EDFF;
|
|
}
|
|
|
|
.contain-box .left-side .contain p.title span {
|
|
font-size: 42px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.contain-box .left-side .contain .line {
|
|
width: 103px;
|
|
height: 3px;
|
|
background: #C5EDFF;
|
|
margin: 35px 0;
|
|
}
|
|
|
|
.contain-box .left-side .contain .bottom-btn p {
|
|
margin: 0;
|
|
color: #C5EDFF;
|
|
}
|
|
|
|
.contain-box .left-side .contain .mobile-img {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (max-width:1600px) {
|
|
.contain-box .right-side img {
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width:1366px) {
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
.top-header {
|
|
padding: 26px;
|
|
}
|
|
|
|
.contain-box {
|
|
padding: 0 26px;
|
|
}
|
|
|
|
.contain-box .right-side img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width:767px) {
|
|
.top-header {
|
|
padding: 15px;
|
|
}
|
|
|
|
.top-header .contribute-btn{
|
|
border-radius: 50%;
|
|
padding: 0 10px;
|
|
}
|
|
.top-header .contact-btn{
|
|
padding: 0 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.top-header .contribute-btn span,.top-header .contact-btn span{
|
|
display: none;
|
|
}
|
|
|
|
.top-header .contribute-btn img,.top-header .contact-btn img{
|
|
display: block;
|
|
}
|
|
|
|
.contain-box {
|
|
padding: 0 15px;
|
|
height: calc(100vh - 70px);
|
|
text-align: center;
|
|
overflow: auto;
|
|
}
|
|
|
|
.contain-box .container {
|
|
display: block;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.contain-box .right-side {
|
|
display: none;
|
|
}
|
|
|
|
.contain-box .left-side {
|
|
width: 100%;
|
|
}
|
|
|
|
.contain-box .left-side .contain p {
|
|
font-size: 20px;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.contain-box .left-side .contain p.title {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.contain-box .left-side .contain p.title span {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.contain-box .left-side .contain .line {
|
|
display: none;
|
|
}
|
|
|
|
.contain-box .left-side .contain .bottom-btn p {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.contain-box .left-side .contain .bottom-btn img {
|
|
width: 45%;
|
|
}
|
|
|
|
.contain-box .left-side .contain .mobile-img {
|
|
display: block;
|
|
}
|
|
|
|
.contain-box .left-side .contain .mobile-img img {
|
|
width: 73%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="main">
|
|
<header>
|
|
<div class="container">
|
|
<div class="top-header">
|
|
<a href="#" title="Global jain"><img src="{{asset('public/images/web/global-jain-logo.svg')}}" alt="Logo" /></a>
|
|
<div class="top-header-right">
|
|
<a href="{{ route('contribution') }}" title="contribute" class="contribute-btn" target="_blank">
|
|
<span>Contribute</span>
|
|
<img src="{{asset('public/images/web/contribute.svg')}}" alt="contribute" width="20" />
|
|
</a>
|
|
<a href="mailto:connect@globaljain.net" title="Contact" class="contact-btn">
|
|
<span>Contact</span>
|
|
<img src="{{asset('public/images/web/contact.svg')}}" alt="contact" width="20" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="contain-box">
|
|
<div class="container">
|
|
<div class="left-side">
|
|
<div class="contain">
|
|
<p class="title"><span>WORLD'S FIRST</span> and <span>LARGEST</span> Religious Social Networking
|
|
Platform</p>
|
|
<p class="title"><span>FOR JAINS</span></p>
|
|
<div class="line"> </div>
|
|
<div class="mobile-img"><img class="landing-image" src="{{asset('public/images/web/shravak-banner.png')}}" alt="Shravak Banner" /></div>
|
|
<p class="subtitle">Connect with Shravaks you know</p>
|
|
<div class="bottom-btn">
|
|
<p id="btn-text">Available on</p>
|
|
<a href="https://play.google.com/store/apps/details?id=com.globaljain.android" title="Playstore" target="_blank"><img src="{{asset('public/images/web/playstore.svg')}}" alt="Playstore" /></a>
|
|
<a href="https://apps.apple.com/us/app/global-jain/id1625670036" title="Appsotre" target="_blank"><img src="{{asset('public/images/web/appstore.svg')}}" alt="Appstore" /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-side"><img class="landing-image" src="{{asset('public/images/web/shravak-banner.png')}}"
|
|
alt="Shravak Banner" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const header = document.getElementsByTagName("header")?.[0];
|
|
const button = document.getElementsByClassName("contact-btn")?.[0];
|
|
const contribute = document.getElementsByClassName("contribute-btn")?.[0];
|
|
const hero = document.getElementsByClassName("contain-box")?.[0];
|
|
const titles = document.getElementsByClassName("title")
|
|
const subtitle = document.getElementsByClassName("subtitle")?.[0];
|
|
const btnText = document.getElementById("btn-text");
|
|
const landingImgs = document.getElementsByClassName("landing-image")
|
|
|
|
const lightColors = ["#DFEAE2", "#F3E1FC", "#E7F7FE"];
|
|
const darkColors = ["#4E9C81", "#A665CC", "#2482A7"];
|
|
const subtitleContent = ["Search Sants and follow", "Find the Sangh and be Member", "Connect with Shravaks you know"];
|
|
const imgSrc = ["public/images/web/sant-banner.png", "public/images/web/sangh-banner.png", "public/images/web/shravak-banner.png"]
|
|
|
|
const totalSlides = 3;
|
|
var count = 0;
|
|
const interval = setInterval(() => {
|
|
const index = count % totalSlides;
|
|
|
|
header.style.backgroundColor = lightColors[index];
|
|
button.style.backgroundColor = darkColors[index];
|
|
contribute.style.backgroundColor = darkColors[index];
|
|
hero.style.backgroundColor = darkColors[index];
|
|
subtitle.innerHTML = subtitleContent[index];
|
|
btnText.style.color = lightColors[index];
|
|
|
|
for (let title of titles) {
|
|
title.style.color = lightColors[index];
|
|
}
|
|
|
|
for (let img of landingImgs) {
|
|
img.src = imgSrc[index];
|
|
}
|
|
|
|
count++;
|
|
if (count === totalSlides) {
|
|
count = 0;
|
|
}
|
|
}, 5000);
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |