Skip to content

T
THE BASE
Commit dcb39c34 authored by TokaKaram's avatar TokaKaram
Browse files
Options

buttons link

parent 6e9fe59f
Show whitespace changes
Inline Side-by-side
Showing with 203 additions and 492 deletions
images/1.png
View replaced file @ 6e9fe59f View file @ dcb39c34
images/1.png

206 KB | W: | H:

images/1.png

203 KB | W: | H:

images/1.png
images/1.png
images/1.png
images/1.png
  • 2-up
  • Swipe
  • Onion skin
index.html
View file @ dcb39c34
......@@ -54,8 +54,8 @@
</div>
<div class="right_side">
<a id="ticketing_bnt_en" class="ticketing_bnt_en hidden1">ticketing</a>
<a id="ticketing_ar" class=" ticketing_ar" >حجز التذاكر</a>
<a id="ticketing_bnt_en" href="#ticketing_section" class="ticketing_bnt_en hidden1">ticketing</a>
<a id="ticketing_ar" href="#ticketing_section_ar" class=" ticketing_ar" >حجز التذاكر</a>
<a class="lines">
<span></span>
<span></span>
......@@ -87,7 +87,7 @@
<p id="hero_desc" class="hero-sec23">الحماس والإثارة </p>
<p id="hero_desc" class="hero-sec24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p>
<p id="hero_desc" class="hero-sec25">وروح المجتمع</p>
<a id="book_now" class="bookA1">احجز الان</a>
<a id="book_now" class="bookA1" href="#ticketing_section_ar">احجز الان</a>
</div>
<div class="hero_desc_res_ar">
<h3 id="hero_title" class="hero_title2">
......@@ -106,7 +106,7 @@
ثلاثة أيام من الطاقة الخالصة، والمنافسة،
وروح المجتمع
</p>
<a id="book_now" class="bookA1">احجز الان</a>
<a id="book_now" class="bookA1" href="#ticketing_section_ar">احجز الان</a>
</div>
</div>
<!-- ==================== Hero_EN -->
......@@ -132,7 +132,7 @@
<p id="hero_desc" class="hero-sec3">FOR THE ACTION.</p>
<p id="hero_desc" class="hero-sec4">THREE DAYS OF PURE ENERGY, </p>
<p id="hero_desc" class="hero-sec5">COMPETITION, AND COMMUNITY.</p>
<a id="book_now" class="bookA">book now</a>
<a id="book_now" class="bookA" href="#ticketing_section">book now</a>
</div>
<div class="hero_desc_res">
<h3 id="hero_title" class="hero_title">
......@@ -151,7 +151,7 @@
FOR THE ACTION.
THREE DAYS OF PURE ENERGY,
COMPETITION, AND COMMUNITY.</p>
<a id="book_now" class="bookA">book now</a>
<a id="book_now" class="bookA" href="#ticketing_section">book now</a>
</div>
</div>
......@@ -180,11 +180,11 @@
<div>
<div>
<img class="abs_img" src="/images/game2.webp">
<img src ="/images/3.png">
<img src ="/images/valorant2 (1).webp" class="valorant_img">
</div>
<div>
<img class="abs_img1" src="/images/game3.png">
<img src ="images/22.png">
<img src ="images/FIFA_VALORANT_LOL_pack/2.png" class="yasou_img">
</div>
<div>
<img class="abs_img2" src="/images/fifaCard_.png">
......@@ -522,7 +522,8 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
</div>
<button class="btn2_type">BOOK YOUR PASS</button>
<button class="btn2_type" onclick= "openNewWindow( 'https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625862'
)">BOOK YOUR PASS</button>
</div>
......@@ -541,7 +542,7 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
</div>
<button class="btn2_type_s">BOOK YOUR PASS</button>
<button class="btn2_type_s" onclick="openNewWindow('https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625963')">BOOK YOUR PASS</button>
</div>
......@@ -562,7 +563,7 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
</div>
<button class="btnn2">BOOK YOUR PASS</button>
<button class="btnn2" onclick="openNewWindow('https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482626062')">BOOK YOUR PASS</button>
</div>
......@@ -613,7 +614,8 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
</div>
<button class="btn2_type">احجز الان</button>
<button class="btn2_type" onclick= "openNewWindow( 'https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625862'
)">احجز الان</button>
</div>
......@@ -641,7 +643,7 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
</div>
<button class="btn2_type_s">احجز الان</button>
<button class="btn2_type_s" onclick="openNewWindow('https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625963')">احجز الان</button>
</div>
......@@ -659,7 +661,7 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
</div>
<button class="btnn2">احجز الآن</button>
<button class="btnn2" onclick="openNewWindow('https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482626062')">احجز الآن</button>
</div>
......@@ -691,6 +693,7 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
<div class="oragnize" id="organize">
<h1 id="organized">ORGANIZED BY</h1>
<div>
<img src="./images/website landing page-08.png">
<img src="./images/website landing page-07.png">
......@@ -698,6 +701,25 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
<img src="./images/website landing page-05.png">
</div>
</div>
<div class="oragnize_slider" id="organize">
<h1 id="organized">ORGANIZED BY</h1>
<div class="swiper organize_slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/website landing page-08.png" alt=""></div>
<div class="swiper-slide"><img src="./images/website landing page-07.png" alt=""></div>
<div class="swiper-slide"><img src="./images/website landing page-06.png" alt=""></div>
<div class="swiper-slide"><img src="./images/website landing page-05.png" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="letters">
<h1 id="newsletter">NEWS LETTER</h1>
<div>
......@@ -723,6 +745,7 @@ FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADREN
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="index.js"></script>
......
index.js
View file @ dcb39c34
......@@ -36,6 +36,20 @@
spaceBetween: 20
}
}
});
const swiper_organize = new Swiper(".organize_slider", {
slidesPerView: 1,
// spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
// =========================
......@@ -62,13 +76,14 @@ let Vr_zone_AR=document.getElementById("Vr_zone_AR")
let playable_games_title=document.getElementById("playable_games_title")
let esports_title=document.getElementById("esports_title")
let e_sport_btn=document.getElementById("e_sport_btn")
let Ar_flag=true
function changeLanguage(lang) {
console.log("function")
if(lang === 'ar') {
Ar_flag=true
card_game_en.classList.add("hidden1")
card_game_Ar.classList.remove("hidden1")
mobile_en.classList.add("hidden1")
......@@ -93,6 +108,10 @@ function changeLanguage(lang) {
playable_games_title.innerHTML="الألعاب المتاحه"
esports_title.innerHTML=" بطولات الرياضات الالكترونية"
e_sport_btn.innerHTML="احجز الان"
e_sport_btn.onclick=function()
{
location.href = "#ticketing_section_ar"
}
document.querySelector(".en_lang").classList.remove("colored")
document.querySelector(".en_lang1").classList.remove("colored")
document.querySelector(".ar_lang").classList.add("colored")
......@@ -101,6 +120,7 @@ function changeLanguage(lang) {
} else {
Ar_flag=false
card_game_en.classList.remove("hidden1")
card_game_Ar.classList.add("hidden1")
mobile_en.classList.remove("hidden1")
......@@ -126,8 +146,9 @@ function changeLanguage(lang) {
ticketing_btn1.innerHTML="حجز التذاكر"
playable_games_title.innerHTML=" PLAYABLE GAMES"
esports_title.innerHTML=" E-SPORTS TOURNAMENTS"
esports_title.innerHTML="E-SPORTS TOURNAMENTS"
e_sport_btn.innerHTML="BOOK NOW"
document.querySelector(".en_lang").classList.add("colored")
document.querySelector(".en_lang1").classList.add("colored")
document.querySelector(".ar_lang").classList.remove("colored")
......@@ -168,3 +189,15 @@ let lastScrollTop = 0;
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
});
// ======================= Organize Logic
function openNewWindow(url) {
// Opens a new tab with example.com, specifying dimensions
window.open(url, "_blank");
}
e_sport_btn.onclick= function ()
{
if(Ar_flag)
location.href = "#ticketing_section_ar"
else
location.href = "#ticketing_section"
}
\ No newline at end of file
style.css
View file @ dcb39c34
......@@ -13,6 +13,13 @@
--futura-font:"Futura-Bold"
}
html {
scroll-behavior: smooth;
}
a
{
text-decoration: none;
}
@font-face {
font-family: "Sora";
......@@ -327,11 +334,15 @@ header .right_side a:nth-child(4)
{
width: 100%;
/* margin: 10% 15% 0; */
height: 115% !important;
height: 125% ;
transform: translate(0px,0px);
transform: translateY(-70px);
object-fit: cover;
/* object-position: top top; */
/* height: auto; */
}
.e_sport > div div .valorant_img
{
height: auto;
}
.e_sport > div div .bellingham_img
......@@ -343,6 +354,12 @@ header .right_side a:nth-child(4)
/* transform: translateX(10px); */
}
.e_sport > div div .yasou_img
{
transform: translateY(-90px);
height: 140%;
/* height: auto; */
}
.no_margin
{
......@@ -365,7 +382,7 @@ header .right_side a:nth-child(4)
.e_sport > div div .abs_img1
{
bottom: -42px;
top: unset;
/* top: unset; */
}
.e_sport > div div .abs_img2
......@@ -398,7 +415,12 @@ header .right_side a:nth-child(4)
}
/* ==================================== */
/* ===========Oragnize================ */
.oragnize
.oragnize_slider
{
display: none;
}
.oragnize,
.oragnize_slider
{
background-color: var(--bck_color);
padding-top: 20px;
......@@ -411,6 +433,15 @@ header .right_side a:nth-child(4)
color: white;
font-size: 60px;
}
.oragnize_slider h1
{
text-align: center;
font-family: var(--sora_font);
font-weight: 700;
color: white;
font-size: 60px;
}
.oragnize div
{
......@@ -636,13 +667,17 @@ header .right_side a:nth-child(4)
}
.e_sport > div div
{
height: 600px;
height: 500px;
}
.e_sport > div div .abs_img2 {
left: 4px;
top: 220px;
top: 120px;
}
.e_sport > div div .abs_img2
{
left: 20px;
}
}
@media(max-width:1500px)
......@@ -663,9 +698,23 @@ header .right_side a:nth-child(4)
}
.e_sport > div div
{
height: 550px;
height: 500px;
}
.e_sport > div div .abs_img2 {
left: 4px;
top: 120px;
}
}
@media(max-width:1480px)
{
.e_sport > div div .abs_img2
{
left: 20px;
}
}
@media(max-width:1300px)
{
......@@ -673,6 +722,8 @@ header .right_side a:nth-child(4)
{
height: 400px;
}
}
@media(max-width:1200px)
{
......@@ -680,7 +731,9 @@ header .right_side a:nth-child(4)
{
margin-top: 20px;
}
.oragnize h1
.oragnize h1,
.oragnize_slider h1
{
font-size: 45px;
}
......@@ -689,16 +742,23 @@ header .right_side a:nth-child(4)
height: 420px;
}
}
@media(max-width:1030px)
{
.e_sport > div:nth-child(2)
{
grid-template-columns: 40% 40%;
justify-content: space-around;
row-gap: 90px;
}
.e_sport > div div .abs_img
{
top: 97px;
left: 10px;
left: 23px;
}
.letters div p:nth-child(1)
{
......@@ -711,9 +771,13 @@ header .right_side a:nth-child(4)
}
.e_sport > div div .abs_img2 {
left: 4px;
top: 226px;
left: 16px;
top: 106px;
}
.e_sport > div div .valorant_img {
height: 137%;
transform: translateY(-51px);
}
}
@media(max-width:1000px)
......@@ -827,6 +891,19 @@ header .right_side a:nth-child(4)
{
justify-content: start;
}
.e_sport > div div .abs_img
{
top: 103px;
}
.e_sport > div div .abs_img2 {
left: 9px;
top: 114px;
}
.e_sport > div div img,
.e_sport > div div .valorant_img
{
height: 114%;
}
}
@media(max-width:700px)
......@@ -846,7 +923,10 @@ header .right_side a:nth-child(4)
text-align: center;
}
.oragnize
{
display: none;
}
.oragnize div
{
grid-template-columns:60%;
......@@ -854,6 +934,10 @@ header .right_side a:nth-child(4)
}
.oragnize_slider
{
display: block;
}
.letters > div
{
......@@ -979,11 +1063,12 @@ header .right_side a:nth-child(4)
{
width:100%;
margin-left: 0%;
font-size: 24px;
font-size: 22px;
text-align: center;
}
.oragnize h1
.oragnize h1,
.oragnize_slider h1
{
font-size: 30px;
}
......@@ -1040,6 +1125,15 @@ header .right_side a:nth-child(4)
.e_sport > div div .abs_img1 {
bottom: -37px;
}
.e_sport > div div .valorant_img
{
height: 117%;
}
.e_sport > div div .abs_img {
left: 20px;
top: 95px;
}
}
......@@ -1057,8 +1151,9 @@ header .right_side a:nth-child(4)
.e_sport > div div .abs_img2 {
left: 4px;
top: 200px;
top: 107px;
}
}
/* ====================card game ============= */
......@@ -1532,8 +1627,9 @@ header .right_side a:nth-child(4)
.card_game .card_game_cont a
{
font-size: 16px;
padding: 10px;
padding: 6px 25px;
left: 10px;
bottom: 25px;
}
.card_game .card_game_cont .img_parent
{
......@@ -3901,3 +3997,20 @@ header .right_side a:nth-child(4)
{
font-family: var(--sora_font) !important;
}
/* =========== */
/* ====== organizers Section */
.swiper-button-next, .swiper-button-prev
{
color: #37069c !important;
}
.organize_slider
{
background-color: white;
width: 100%;
margin: 0;
}
.organize_slider .swiper-slide img
{
width: 100%;
margin-left: 0;
}
\ No newline at end of file
style2.css
View file @ dcb39c34
......@@ -4373,461 +4373,3 @@ body {
/* @media (max-width: 320px) {
.hero_section2 {
padding: 20px;
position: relative;
display: block;
}
.hero_section2 a {
position: absolute;
top: 780%;
right: 70%;
width: 40%;
padding: 10px 20px 30px;
font-size: 16px;
}
.hero-sec21 {
top: 545%;
right: 10% !important;
width: 89% !important;
font-size: 20px;
}
.hero-sec22 {
top: 585%;
right: 10% !important;
width: 86% !important;
font-size: 20px;
}
.hero-sec23 {
top: 625%;
right: 10% !important;
width: 50% !important;
font-size: 20px;
}
.hero-sec24 {
top: 665%;
right: 10% !important;
width: 87% !important;
font-size: 20px;
}
.hero-sec25 {
top: 705%;
right: 10% !important;
width: 30% !important;
font-size: 20px;
}
.mainiMg1 {
position: absolute !important;
top: 50% !important;
right: -5% !important;
margin: 20px 30px 30px 0px;
width: 90%;
height: 50vh;
clip-path: none;
}
.word21 {
display: flex;
font-size: 26px;
top: 470%;
right: 11%;
width: 87%;
}
.hero_section2 .the {
font-size: 30px;
}
.word22 {
display: flex;
font-size: 26px;
top: 520%;
right: 13%;
width: 80%;
}
.activate_section2 .imagg1 {
position: absolute !important;
top: 135% !important;
left: 50% !important;
width: 90% !important;
height: 45vh !important;
transform: translate(-50%, -50%) !important;
}
.bookN2 {
left: 20% !important;
top: 82% !important;
padding: 10px 20px 8px 30px !important;
display: flex !important;
width: 25% !important;
align-items: center !important;
font-size: 18px !important;
}
.activate_section2 h1 {
font-family: "Archivo Black", sans-serif;
font-size: 24px;
top: 160%;
right: 5%;
width: 90% !important;
font-weight: 700;
}
.casual_text22 {
font-size: 28px;
top: 160%;
left: 65%;
width: 30%;
}
.casual_text23 {
font-size: 28px;
top: 160%;
left: 20%;
width: 50%;
}
.casual_text24 {
font-size: 22px;
top: 167% !important;
left: 10%;
width: 85%;
}
.casual_text25 {
font-size: 22px;
top: 172% !important;
left: 10%;
width: 85%;
}
.casual_text26 {
font-size: 22px;
top: 177% !important;
width: 70%;
left: 25%;
}
.casual_text27 {
font-size: 22px;
top: 182% !important;
width: 90%;
left: 4.5%;
}
.casual_text28 {
font-size: 22px;
top: 188%;
width: 90%;
left: 4%;
line-height: 25px;
}
.casual_text29 {
font-size: 22px;
top: 198.5%;
width: 90%;
left: 4%;
line-height: 25px;
}
.casual_text31 {
font-size: 22px;
top: 202.5%;
left: 39%;
}
.activate_section2 div:nth-child(1) a {
width: 40%;
padding: 10px 20px 10px 12px;
font-size: 18px !important;
}
.VR_section2 {
padding-bottom: 300%;
}
.iGv2 {
top: 220% !important;
height: 40%;
}
.imagVr2::after {
top: 220%;
width: 98%;
height: 40%;
}
.VR_section2 .vr_last2 {
display: flex;
}
.vr_txt12 {
font-size: 26px;
top: 263%;
right: 10%;
}
.vr_txt23 {
font-size: 26px;
top: 263%;
left: 1%;
width: 60%;
}
.vr_txt24 {
font-size: 26px;
top: 269%;
left: 45%;
}
.vr_txt25 {
font-size: 20px;
top: 274%;
left: 5%;
width: 85%;
}
.vr_txt26 {
font-size: 20px !important;
top: 290%;
left: 5%;
width: 85%;
}
.VR_section2 a {
top: 232%;
padding: 8px 20px 1px 20px !important;
font-size: 12px;
width: 20%;
left: 50% !important;
}
} */
/* 1024px - iPad / small laptop */
/* @media (max-width: 1024px) {
.hero_section2 {
padding: 60px;
position: relative;
display: block;
}
.hero_section2 a {
position: absolute;
top: 260%;
right: 70%;
width: 30%;
padding: 10px 40px 28px;
font-size: 18px;
}
.hero-sec21 {
top: 108%;
right: 57% !important;
width: 38% !important;
font-size: 25px;
}
.hero-sec22 {
top: 128%;
right: 57.5% !important;
width: 34% !important;
font-size: 25px;
}
.hero-sec23 {
top: 145%;
right: 58% !important;
width: 35% !important;
font-size: 25px;
}
.hero-sec24{
top: 163%;
right: 58.5% !important;
width: 40% !important;
font-size: 25px;
}
.hero-sec25{
top: 180%;
right: 59% !important;
width: 35% !important;
font-size: 25px;
}
.mainiMg1 {
position: absolute !important;
top: 40% !important;
right: -1% !important;
margin: 20px 30px 30px 0px;
width: 60%;
height: 85vh;
}
.word21 {
display: flex;
font-size: 40px;
top: 38%;
right: 53%;
}
.word22 {
display: flex;
font-size: 32px;
top: 80%;
right: 54%;
}
.activate_section2 .imagg1 {
position: absolute;
top: 230%;
width: 55% ;
right: -17%;
height: 74%;
}
.bookN2 {
position: relative;
left: 40% !important;
top:92% !important;
padding: 18px 30px;
display: flex;
width: 25%;
align-items: center;
}
.activate_section2 h1 {
font-family: "Archivo Black", sans-serif;
font-size: 32px;
top: 127%;
left: 11%;
font-weight: 700;
}
.casual_text22 {
font-size: 30px;
top: 135%;
left: 73%;
width: 10%;
}
.casual_text23 {
font-size: 30px;
top: 135%;
right: 26%;
}
.casual_text24 {
font-size: 24px;
top: 150% !important;
left: 52%;
}
.casual_text25 {
font-size: 24px;
top: 156% !important;
left: 48%;
}
.casual_text26 {
font-size: 24px;
top: 161% !important;
width: 40%;
left: 42.5%;
}
.casual_text27 {
font-size: 24px;
top: 166% !important;
width: 40%;
left: 49.5%;
}
.casual_text28 {
font-size: 24px;
top: 171%;
width: 50%;
left: 39.5%;
}
.casual_text29 {
font-size: 24px;
top: 176%;
width: 50%;
left: 40%;
}
.casual_text31 {
font-size: 24px;
top: 181%;
left: 25%;
}
.VR_section2 {
padding-bottom: 90%;
}
.iGv2 {
top: 220%;
}
.imagVr2::after {
top: 220%;
width: 98%;
height: 90%;
}
.VR_section2 .vr_last2 {
display: flex;
}
.vr_txt12 {
font-size: 36px;
top: 230%;
left: 35%;
}
.vr_txt23 {
font-size: 36px;
top: 230%;
left: 2%;
}
.vr_txt24 {
font-size: 36px;
top: 240%;
left : 1%;
}
.vr_txt25 {
font-size: 28px;
top: 250%;
left: 3%;
width: 43%;
}
.vr_txt26 {
font-size: 28px !important;
top: 270%;
left: 8%;
}
.VR_section2 a {
top: 270% ;
padding: 10px 45px !important;
font-size: 16px;
}
} */
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment