Skip to content

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

add colors

parent 565fed3f
Show whitespace changes
Inline Side-by-side
Showing with 8755 additions and 1907 deletions
.vscode/settings.json 0 → 100644
View file @ 94d727c1
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
Fonts/Sora/OFL.txt 0 → 100644
View file @ 94d727c1
Copyright 2019 The Sora Project Authors (https://github.com/sora-xor/sora-font)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Fonts/Sora/README.txt 0 → 100644
View file @ 94d727c1
Sora Variable Font
==================
This download contains Sora as both a variable font and static fonts.
Sora is a variable font with this axis:
wght
This means all the styles are contained in a single file:
Sora-VariableFont_wght.ttf
If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for Sora:
static/Sora-Thin.ttf
static/Sora-ExtraLight.ttf
static/Sora-Light.ttf
static/Sora-Regular.ttf
static/Sora-Medium.ttf
static/Sora-SemiBold.ttf
static/Sora-Bold.ttf
static/Sora-ExtraBold.ttf
Get started
-----------
1. Install the font files you want to use
2. Use your app's font picker to view the font family and all the
available styles
Learn more about variable fonts
-------------------------------
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts
In desktop apps
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
Online
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Installing fonts
MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
Android Apps
https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.
You can use them in your products & projects – print or digital,
commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.
Fonts/futura/sharefonts.net.txt 0 → 100644
View file @ 94d727c1
Free download fonts at http://sharefonts.net
\ No newline at end of file
index.html
View file @ 94d727c1
...@@ -14,9 +14,12 @@ ...@@ -14,9 +14,12 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">
<title>THE BASE</title> <title>THE BASE</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
</head> </head>
<body> <body>
<header id="header"> <header id="header">
...@@ -31,11 +34,11 @@ ...@@ -31,11 +34,11 @@
</div> </div>
<i class="fa-solid fa-bars list_icon" id="open_list"></i> <i class="fa-solid fa-bars list_icon" id="open_list"></i>
<div class="right_side_h hidden "> <div class="right_side_h hidden ">
<a id="ticketing_btn1">ticketing</a> <a id="ticketing_btn1">حجز التذاكر</a>
<a><i class="fa-solid fa-bars"></i></a> <a><i class="fa-solid fa-bars"></i></a>
<a class="en_lang1">EN</a> <a class="en_lang1">EN</a>
<a class="ar_lang1">AR</a> <a class="ar_lang1 colored">AR</a>
</div> </div>
<p class="date"> <p class="date">
<span id="from">from</span> <span id="from">from</span>
...@@ -48,52 +51,113 @@ ...@@ -48,52 +51,113 @@
<span>KUWAIT INTERNATIONAL</span> <span>KUWAIT INTERNATIONAL</span>
<span> FAIR GROUND</span> <span> FAIR GROUND</span>
</p> </p>
<p class="place hidden1" id="place_ar">
<span>القاعة ٨ - </span>
<span>أرض المعارض</span>
<span> الدولية بالكويت</span>
</p>
</div> </div>
<div class="right_side"> <div class="right_side">
<a id="ticketing_btn">ticketing</a> <a id="ticketing_bnt_en" class="ticketing_bnt_en hidden1">ticketing</a>
<a> <a id="ticketing_ar" class=" ticketing_ar" >حجز التذاكر</a>
<a class="lines">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</a> </a>
<a class="en_lang">EN</a> <a class="en_lang">EN</a>
<a class="ar_lang">AR</a> <a class="ar_lang colored">AR</a>
</div> </div>
</header> </header>
<!-- ============Hero_AR -->
<div class="hero_section2 rtl_size" id="hero_ar">
<div class="mainiMg1">
<img src="./images/main.jpg">
</div>
<div class="hero_desc_ar">
<h3 id="hero_title" class="hero_title2">
<div class="word21">
<span>مرحبا بكم في</span>
<span class="the">THE BASE</span>
</div>
<div class="word22">
<span>حيث تنبض الألعاب بالحياة</span>
</div>
</h3>
<p id="hero_desc" class="hero-sec21">مهرجان ضخم لعشاق الجيمينج، وصناع</p>
<p id="hero_desc" class="hero-sec22">المحتوى، والجماهير اللي بتعيش على</p>
<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>
</div>
<div class="hero_desc_res_ar">
<h3 id="hero_title" class="hero_title2">
مرحبا بكم في
<span class="the">THE BASE</span>
<div class="hero_section rtl_size" id="hero">
<div > حيث تنبض الألعاب بالحياة
<img src="./images/shape.png">
</h3>
<p>
مهرجان ضخم لعشاق الجيمينج، وصناع
المحتوى، والجماهير اللي بتعيش على
الحماس والإثارة
ثلاثة أيام من الطاقة الخالصة، والمنافسة،
وروح المجتمع
</p>
<a id="book_now" class="bookA1">احجز الان</a>
</div> </div>
<div> </div>
<!-- ==================== Hero_EN -->
<div class="hero_section rtl_size hidden1" id="hero_en">
<div class="mainiMg">
<img src="./images/main1.jpg">
</div>
<div class="hero_desc">
<h3 id="hero_title" class="hero_title"> <h3 id="hero_title" class="hero_title">
<span> <div class="word1">
LOREM IPSUM <span>WELCOME TO</span>
</span> <span class="the">THE</span>
<span> DOLOR SIT AMET,</span> </div>
<span>CONSECTETUER</span> <div class="word2">
<span>ADIPISCING ELIT,</span> <span class="base">BASE</span>
<span> <span> — WHERE THE</span>
SED DIAM . </div>
</span> <span class="word4">GAME COMES</span>
<span class="word3">ALIVE!</span>
</h3> </h3>
<h3 class="hero_title_res " id="hero_title_res">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</h3> <p id="hero_desc" class="hero-sec">A FESTIVAL BUILT FOR GAMERS, </p>
<h3 class="hidden1 hero_title_ar" id="hero_title_ar"> <p id="hero_desc" class="hero-sec2">CREATORS, AND FANS WHO LIVE</p>
مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية. <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>
</div>
<div class="hero_desc_res">
<h3 id="hero_title" class="hero_title">
WELCOME TO
<span class="the">THE BASE</span>
— WHERE THE
GAME COMES
ALIVE!
</h3> </h3>
<p id="hero_desc">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <p>
<a id="book_now">book now</a> A FESTIVAL BUILT FOR GAMERS,
CREATORS, AND FANS WHO LIVE
FOR THE ACTION.
THREE DAYS OF PURE ENERGY,
COMPETITION, AND COMMUNITY.</p>
<a id="book_now" class="bookA">book now</a>
</div> </div>
</div> </div>
<div class="play_games " id="play_games"> <div class="play_games " id="play_games">
<h1 id="playable_games">PLAYABLE GAMES</h1> <h1 id="playable_games_title">الألعاب المتاحة</h1>
<div class="swiper_parent"> <div class="swiper_parent">
<div class="swiper mySwiper"> <div class="swiper mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
...@@ -110,10 +174,9 @@ ...@@ -110,10 +174,9 @@
<div class="swiper-pagination"> next</div> <div class="swiper-pagination"> next</div>
</div> </div>
</div> </div>
</div> </div>
<div class="e_sport" id="e_sport"> <div class="e_sport" id="e_sport">
<h1 id="esports">E-SPORTS TOURNAMENTS</h1> <h1 id="esports_title">بطولات الرياضات الالكترونية</h1>
<div> <div>
<div> <div>
<img class="abs_img" src="/images/game2.webp"> <img class="abs_img" src="/images/game2.webp">
...@@ -126,253 +189,533 @@ ...@@ -126,253 +189,533 @@
<div> <div>
<img class="abs_img2" src="/images/fifaCard_.png"> <img class="abs_img2" src="/images/fifaCard_.png">
<img src ="images/Lamin.png" class="lamin_img"> <img src ="images/Jude_Hero_laLig.png" class="bellingham_img">
</div> </div>
</div> </div>
<div class="button_parent"> <div class="button_parent">
<a id="e_sport_btn">book now</a> <a id="e_sport_btn">احجز الان</a>
</div> </div>
</div> </div>
<div class="activate_section ltr_size" id="activate_section"> <!-- =============== casual -->
<div id="arear1">
<h1 id="casual">CASUAL ACTIVITIES</h1>
<p id="casual_text2">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="casual_text3">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="casual_text4">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="casual_text5">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<div class="casual_av" id="casual_av_ar">
<div class="casual_av_cont">
<div class="main_img">
<div class="img_parent">
<img src="./images/pc - ps5 area1.jpg"/>
</div> </div>
<div > <a>PC - PS5 ZONE</a>
<img src="./images/shape_rev.png">
<a id="pc_btn">PC - PS5 ZONE</a>
</div> </div>
<div class="text">
<h1>CASUAL ACTIVITIES</h1>
<h1> هنا يبدأ <span>المرح الحقيقى </span></h1>
<p>متاحة للجميع: أجهزة بلايستيشن 10
وجهاز كمبيوتر جيمينج .20 استمتع
ّ بألعاب اللعب الحر أكثر من مرة
ادخل تحديات سريعة، أو خض منافسات
ّ ية، أو جرب ألعابك المفضلة بدون قيود
ود
ّ
منطقة تجمع الحماس والراحة، حيث اللعب
متعة خالصة</p>
</div> </div>
</div>
</div>
<div class="casual_ar hidden1" id="casual_en">
<div class="casual_av_cont">
<div class="text">
<h1>CASUAL ACTIVITIES</h1>
<h1> THIS IS WHERE <span>THE REAL
FUN BEGINS! </span> </h1>
<p>ENJOY THE FREE-PLAY VIBES WITH OVER 20 GAMING PCS AND 10 PLAYSTATION 5 CONSOLES OPEN FOR EVERYONE.</p>
<p>JUMP INTO QUICK CHALLENGES, FRIENDLY MATCHES WITH YOUR FRIENDS, OR TRY YOUR FAVORITE GAMES WITHOUT LIMITS.</p>
<p>A ZONE THAT BLENDS EXCITEMENT AND COMFORT — WHERE GAMING IS PURE JOY.</p>
<div class="VR_section rtl_size">
<div >
<img src="./images/shape.png">
</div> </div>
<div> <div class="main_img">
<div class="img_parent">
<img src="./images/pc - ps5 area.jpg"/></div>
<a>PC - PS5 ZONE</a>
<p id="vr_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="vr_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="vr_btn">VR ZONE</a>
</div> </div>
</div> </div>
</div>
<div class="Vr_zone" id="Vr_zone_AR">
<div class="Vr_zone_cont">
<div class="text">
<h1> ادخل إلى
<span> ٍ عالم جديد لا يشبه
أي شيء آخر</span>
</h1>
<p>تجربة تجمع بين الواقع الافتراضي وألعاب
الآركيد الكلاسيكية لتمنحك مزيجا من الحنين
ً
<div class="CardGame_section rtl_size" id="card_games"> والمستقبل
<div > ّ متطورة، استعد لمغامرات VR مع 6 محطات
<img src="./images/shape.png"> ستعيشها بكل حواسك — تجربة تنقلك من
<a id="card_games_btn">CARD / BOARD GAMES</a> المشاهدة إلى قلب الحدث</p>
</div>
<div class="main_img">
<img src="./images/vr1.png">
<a>VR ZONE</a>
</div>
</div> </div>
<div id="card_info" class="card_info"> </div>
<p id="card_txt1"><span>LOREM IPSUM DOLOR SIT AMET,</span> <!-- ========VR_EN -->
<span>CONSECTETUER ADIPISCING ELIT , SED</span> <div class="Vr_zone_ar hidden1" id="Vr_zone_en">
<span>DIAM .</span></p> <div class="Vr_zone_ar_cont">
<p id="card_txt2"><span>LOREM IPSUM DOLOR SIT AMET,</span> <div class="main_img">
<span>CONSECTETUER ADIPISCING ELIT , SED</span> <img src="./images/vr.png">
<span>DIAM .</span></p> <a>VR ZONE</a>
<p id="card_txt3"><span>LOREM IPSUM DOLOR SIT AMET ,</span> </div>
<span>CONSECTETUER ADIPISCING ELIT ,</span> <div class="text">
<span> SED DIAM .</span></p> <h1> STEP INTO A WHOLE NEW
<p id="card_txt4"><span>LOREM IPSUM DOLOR SIT AMET ,</span> WORLD — <span>UNLIKE ANYTHING
<span>CONSECTETUER ADIPISCING ELIT , </span> YOU’VE EXPERIENCED BEFORE.</span></h1>
<span>SED DIAM .</span></p> <p>A FUSION OF VIRTUAL REALITY AND CLASSIC
ARCADE GAMES, BLENDING NOSTALGIA WITH
THE THRILL OF THE FUTURE.
WITH 6 ADVANCED VR STATIONS, GET READY
FOR ADVENTURES THAT ENGAGE ALL YOUR
SENSES — AN EXPERIENCE
THAT PULLS YOU STRAIGHT INTO THE HEART
OF THE ACTION.</p>
</div> </div>
<div id="card_info_res" class="card_info_res">
<p id="card_txt1">LOREM IPSUM DOLOR SIT AMET,
CONSECTETUER ADIPISCING ELIT , SED
DIAM .</p>
<p id="card_txt2">LOREM IPSUM DOLOR SIT AMET,
CONSECTETUER ADIPISCING ELIT , SED
DIAM .</p>
<p id="card_txt3">LOREM IPSUM DOLOR SIT AMET ,
CONSECTETUER ADIPISCING ELIT ,
SED DIAM .</p>
<p id="card_txt4">LOREM IPSUM DOLOR SIT AMET ,
CONSECTETUER ADIPISCING ELIT ,
SED DIAM .</p>
</div> </div>
<div id="card_info_ar" class="hidden1">
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
</div> </div>
<!-- ===========gaming -->
<div class="card_game " id="card_game_Ar">
<div class="card_game_cont">
<div class="main_img">
<div class="img_parent">
<img src="./images/card-boardgames.jpeg"/></div>
<a >CARD / BOARD GAMES</a>
</div> </div>
<div class="text">
<h1><span>لعبة</span> العقل، الصبر، والاستراتيجية</h1>
<p>استمتع بمجموعة متنوعة من ألعاب
الطاولة الكلاسيكية وبطولات ألعاب
البطاقات التي تجمع بين التحدي والمرح
ً أو مبتدئا، هذه
سواء كنت محترفا
ً
<div class="VR_section mobile ltr_size"> المنطقة هي مكانك للتفاعل والتسلية
وجها لوجه مع الآخرين</p>
</div>
</div>
</div>
<div class="card_game_ar hidden1" id="card_game_en">
<div class="card_game_cont">
<div class="main_img">
<div class="img_parent">
<img src="./images/card-boardgames.jpeg"/></div>
<a >CARD / BOARD GAMES</a>
</div>
<div class="text">
<div> <div>
<h1><span>A PLACE FOR</span>THE MIND,</h1>
<h1> PATIENCE, AND STRATEGY.</h1>
</div>
<p>ENJOY A VARIETY OF CLASSIC BOARD</p>
<p>GAMES AND CARD TOURNAMENTS</p>
<p>THAT COMBINE CHALLENGE AND FUN.</p>
<p>WHETHER YOU’RE A PRO OR JUST</p>
<p>STARTING OUT, THIS ZONE IS YOUR</p>
<p>SPACE TO PLAY, CONNECT, AND</p>
<p>ENJOY FACE-TO</p>
<p>FACE GAMING WITH OTHERS.</p>
</div>
</div>
</div>
<!-- ==================== -->
<!-- ========mobile -->
<div class="mobile" id="mobile_Ar">
<div class="mobile_cont">
<div class="text">
<h1>لأن الجيمينغ <span>لا يتوقف عند
الشاشات الكبيرة</span></h1>
<p>اليومية، MOBILE PUBG انضم إلى بطولات
سواء كنت تلعب بمفردك أو مع فريقك
المنافسة هنا سريعة، مليئة بالإثارة، والمركز
الأول ينتظر الأفضل فقط</p>
<div class="a_parent">
<a>MOBILE AREA</a>
</div>
</div>
<div class="main_img">
<img src="./images/mobile .jpg">
</div>
</div>
</div>
<div class="mobile_ar hidden1" id="mobile_en">
<div class="mobile_cont">
<div class="text">
<h1>BECAUSE GAMING <span> DOESN’T
STOP AT BIG SCREENS! </span></h1>
<p>JOIN THE DAILY PUBG MOBILE TOURNAMENTS,
WHETHER YOU’RE PLAYING SOLO OR WITH
YOUR SQUAD.
THE COMPETITION HERE IS FAST, THRILLING,
AND ONLY THE BEST REACH THE TOP.</p>
<div class="a_parent">
<a>MOBILE AREA</a>
</div>
</div>
<div class="main_img">
<img src="./images/mobile .jpg">
</div>
</div>
</div>
<!-- ========casual========== -->
<!-- cosplay -->
<div class="cosplay" id="cosplay_Ar">
<div class="cosplay_cont">
<div class="text">
<h1>عش شخصيتك المفضلة <span>وكن
<p id="mob_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> جزءا من عالمها</span></h1>
<p id="mob_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <p>ّ في منطقة الكوسبلاي، يتحول الإبداع
<a id="mob_btn">MOBILE AREA</a> ّ إلى عرض حي من الأزياء، الألوان، والخيال
شارك، التقط الصور، وكن أنت البطل
الذي يعشقه الجميع</p>
</div> </div>
<div > <div class="main_img">
<img src="./images/shape.png"> <div class="img_parent">
<img src="./images/cosplay .jpg"/>
</div> </div>
<a>COSPLAY AREA</a>
</div>
</div>
</div>
<!-- ========= -->
<div class="cosplay_ar hidden1" id="cosplay_en">
<div class="cosplay_cont">
<div class="text">
<h1> <span> LIVE YOUR FAVORITE
CHARACTER </span> AND BECOME
PART OF THEIR WORLD!</h1>
<p>IN THE COSPLAY ZONE, CREATIVITY COMES
TO LIFE THROUGH COSTUMES, COLORS,
AND IMAGINATION.
JOIN IN, TAKE PHOTOS, AND BE THE HERO
EVERYONE LOVES.</p>
</div>
<div class="main_img">
<div class="img_parent">
<img src="./images/cosplay .jpg"/>
</div> </div>
<div class="activate_section area ltr_size" id="area" > <a>COSPLAY AREA</a>
<div id="arear12">
<p id="area_txt1">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt2">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt3">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt4">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
</div> </div>
<div >
<img src="./images/shape_rev.png">
<a id="cosplay_area_btn">COSPLAT AREA</a>
</div> </div>
</div>
<div class="vr_parent"id="vr_section_p">
<div class="vr-section vr-section_ar" >
<div class="vr-image">
<img src="images/car simulator .png" alt="description" />
<div class="overlay-vr"></div>
</div> </div>
<div class="VR_section rtl_size">
<div > <div class="vr-con">
<img src="./images/shape.png"> <h2 class="vr-title1 arbt">
تجربة جديدة <span class="neon">في كل زاوية</span>
</h2>
<div class="vr-p arb">
من سباقات السيارات إلى المغامرات الغامرة, ستجد هنا ألعاب الواقع الافتراضي التي تختبر مهارتك وتلهب حماسك كل لحظة في هذه المنطقة مغامرة تستحق أن تعيشها
</div> </div>
<div>
<p id="vr2_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <button class="vr-btn1">CAR simulator</button>
<p id="vr2_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> </div>
<a id="vr2_btn">VR ZONE</a>
</div> </div>
</div> </div>
<div class="ticketing_section" id="ticketing_section"> <!-- ///////////////////english ////////////////////////////////////////////-->
<div class="vr_parent hidden1" id="vr_section_en_p">
<div class="vr-section vr-section-en ">
<div class="vr-image imageen">
<img src="images/car simulator .png" alt="description" />
<div class="overlay-vr"></div>
</div>
<div class="vr-con conen">
<h2 class="vr-title1 title1en">
A NEW ADVENTURE <span class="neon">AROUND EVERY CORNER</span>
</h2>
<div class="vr-p p-en">
FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADRENALINE.EVERY MOMENT HERE IS AN EXPERIENCE WORTH LIVING.
</div>
<button class="vr-btn1 btnen">CAR simulator</button>
</div>
</div></div>
<div class="ticketing_section hidden1" id="ticketing_section">
<div class="title" id="ticketing1"> <div class="title" id="ticketing1">
<h1> <img src="./images/ticketing.png" />
<span id="">T</span>
</h1>
<h1>
<span id="">I</span>
</h1>
<h1>
<span id="">C</span>
</h1>
<h1>
<span id="">K</span>
</h1>
<h1>
<span id="">E</span>
</h1>
<h1>
<span id="">T</span>
</h1>
<h1>
<span id="">I</span>
</h1>
<h1>
<span id="">N</span>
</h1>
<h1>
<span id="">G</span>
</h1>
</div>
<div id="ticketing_title_ar" class=" title hidden1">
<h1>احجز تذكرتك</h1>
</div> </div>
<!-- <div class="days_grid">
<div class="days"> <div class="days">
<div> <div>
<h1 id="pass3_title">3 DAY PASS - REGULAR</h1> <h1 id="pass1_title">1 DAY PASS _ REGULAR</h1>
<span>$$.$$</span> <span>$$.$$</span>
</div> </div>
<div class="text"> <div class="text">
<div> <div>
<p id="pass3_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> <p class="pass1_p1 perfect">PERFECT FOR GAMERS WHO
<p id="pass3_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> WANT TO EXPERIENCE THE
EVENT IN ONE HIT!
SPEND A FULL DAY EXPLORING
EVERY PART OF THE BASE:
TOURNAMENTS,VR,Card
ZONES,COSPLAY SHOWS,
AND MORE- ALL IN ONE PASS
.</p>
<a id="book_pass1_btn">BOOK YOUR PASS</a>
</div> </div>
<div>
<p id="pass3_p3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass3_p4">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<a id="book_pass3_btn">BOOK YOUR PASS</a>
</div> </div>
</div> </div>
</div> -->
<div class="ticket_types">
<div class="days_t">
<div class="ticket_type">
<h1 id="pass3_title">3 DAY PASS - REGULAR</h1>
<span>15 KD</span>
</div>
<div class="text">
<p class="first-p">GET FULL ACCESS TO BASE ACROSS ALL THREE DAYS_TOURNAMENTS,
STAGES,COSPLAY SHOWS ,VR,ARCADE,
AND EVERY GAMING ZONE.ENJOY UNLIMITED ENTRY TO ALL CASUAL AND COMPETITIVE AREAS ,MAIN STAGES
ACTIVITIES,AND EXCLUSIVE COMMUNITY THROUGHOUT THE FESTIVAL.
</p>
</div>
<button class="btn2_type">BOOK YOUR PASS</button>
</div>
<div class="days_t">
<div class="ticket_type">
<h1 id="pass3_title" class="day_ticket">1 DAY PASS - REGULAR</h1>
<span>10 KD</span>
</div>
<div class="text">
<p class="first-p">GET FULL ACCESS TO BASE ACROSS ALL THREE DAYS_TOURNAMENTS,
STAGES,COSPLAY SHOWS ,VR,ARCADE,
AND EVERY GAMING ZONE.ENJOY UNLIMITED ENTRY TO ALL CASUAL AND COMPETITIVE AREAS ,MAIN STAGES
ACTIVITIES,AND EXCLUSIVE COMMUNITY THROUGHOUT THE FESTIVAL.
</p>
</div>
<button class="btn2_type_s">BOOK YOUR PASS</button>
</div>
</div> </div>
<div class="days">
<div class="ticket_type">
<h1 id="pass3_title">VIP TICKET</h1>
<span>50 KD</span>
</div>
<div class="text">
<p class="first-p">FOR THOOSE WHO WANT THE FULL EXPERIENCE - AND MORE. ENJOY EXCLUSIVE VIP
ACCESS WITH PRIORITY ENTRY,
RESERVED MAIN STAGE SEATING,BACKSTAGE MEET & GREETS, AND A PREMIUM MERCH
PACK.THREE DAYS OF
GAMING ,LUXORY,AND NEXT-LEVEL ACCESS TO THE BASE.
</p>
<div class="days_grid">
<div class="days"> </div>
<button class="btnn2">BOOK YOUR PASS</button>
</div>
<!-- <div class="days last">
<div> <div>
<h1 id="pass2_title">2 DAY PASS - REGULAR</h1> <h1 id="vip_title">VIP TICKET</h1>
<span>$$.$$</span> <h1>$$.$$</h1>
</div> </div>
<div class="text"> <div class="text">
<div> <div>
<p id="pass2_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> <p class="vip_p1 vipp">FOR THOOSE WHO WANT THE FULL EXPERIENCE - AND MORE. ENJOY EXCLUSIVE VIP
<p id="pass2_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> ACCESS WITH PRIORITY ENTRY,
<p id="pass2_p3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> RESERVED MAIN STAGE SEATING,BACKSTAGE MEET & GREETS, AND A PREMIUM MERCH
<a id="book_pass2_btn">BOOK YOUR PASS</a> PACK.THREE DAYS OF
GAMING ,LUXORY,AND NEXT-LEVEL ACCESS TO THE BASE.
</p>
</div> </div>
<div>
<a id="book_vip_btn">BOOK YOUR PASS</a>
</div> </div>
</div> </div>
</div> -->
</div>
<div class="days"> <div class="ticketing_section ticketing_section_ar " id="ticketing_section_ar">
<div>
<h1 id="pass1_title">1 DAY PASS - REGULAR</h1> <div class="title" id="ticketing1">
<span>$$.$$</span> <img src="./images/ticketing.png" />
</div>
<div class="ticket_types">
<div class="days_t">
<div class="ticket_type">
<h1 id="pass3_title">3 DAY PASS - REGULAR</h1>
<span>15 KD</span>
</div> </div>
<div class="text"> <div class="text">
<div> <p class="first-p">على مدار الأيام الثلاثة — البطولات، BASE THE احصل على دخول كامل إلى
<p id="pass1_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> والعروض، والكوسبلاي، ومنطقة الواقع الافتراضي، والآركيد، وجميع مناطق
<p id="pass1_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> الألعاب. استمتع بدخول غير محدود إلى جميع المناطق الترفيهية والتنافسية
<a id="book_pass1_btn">BOOK YOUR PASS</a> وأنشطة المسرح الرئيسي وفعاليات المجتمع طوال المهرجان
</p>
</div> </div>
<button class="btn2_type">احجز الان</button>
</div>
<div class="days_t">
<div class="ticket_type">
<h1 id="pass3_title" class="day_ticket">1 DAY PASS - REGULAR</h1>
<span>10 KD</span>
</div> </div>
<div class="text">
<p class="first-p">مثالي لعشاق الألعاب الذين يرغبون
في خوض التجربة بيوم واحد مكثف.
ّ
يوما ً كاملا تستكشف فيه جميع
ً
ِ اقض
البطولات، والواقع :BASE THE أركان
الافتراضي، وألعاب الطاولة، وعروض
الكوسبلاي، والمزيد — كل ذلك
بتذكرة واحدة
</p>
</div> </div>
<button class="btn2_type_s">احجز الان</button>
</div>
</div> </div>
<div class="days">
<div class="ticket_type">
<h1 id="pass3_title">VIP TICKET</h1>
<span>50 DK</span>
</div>
<div class="text">
<p class="arab-p">
.على مدار الأيام الثلاثة - البطولات THE BASE احصل على دخول كامل إلى العروض، والكوسبلاي، ومنطقة الواقع الافتراضي، والأركيد، وجميع مناطق الألعاب. استمتع بدخول غير محدود إلى جميع المناطق الترفيهية والتنافسية وأنشطة المسرح الرئيسي وفعاليات المجتمع طوال المهرجان
</p>
<div class="days last">
<div> </div>
<button class="btnn2">احجز الآن</button>
</div>
<!-- <div class="days last">
<div class="vi">
<h1 id="vip_title">VIP TICKET</h1> <h1 id="vip_title">VIP TICKET</h1>
<h1>$$.$$</h1> <h1>$$.$$</h1>
</div> </div>
<div class="text"> <div class="text">
<div> <div>
<p id="vip_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> <p class="vip_p1 vipar">
<p id="vip_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
حصري يتضمن اولوية مثالية لمن يبحث عن تجربة لمن يبحث عن تجربة استثنائية و شامله استمتع ب بدخول الدخول، ومقاعد محجوزة في المسرح الرئيسي، وفرص لقاء خلف الكواليس، وباقة منتجات مميزة. ثلاثة أيام من الألعاب، والرفاهية، والوصول إلى أعلى مستويات التجربة في the base.
</p>
</div> </div>
<div> <div>
<p id="vip_p3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="vip_p4">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> <a id="book_vip_btn">احجز الآن</a>
<a id="book_vip_btn">BOOK YOUR PASS</a>
</div> </div>
</div> </div>
</div> </div> -->
<div class="map"> <div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div> </div>
</div> </div>
<div class="oragnize" id="organize"> <div class="oragnize" id="organize">
<h1 id="organized">ORGANIZED BY</h1> <h1 id="organized">ORGANIZED BY</h1>
<div> <div>
<img src="./images/logo4.png"> <img src="./images/website landing page-08.png">
<img src="./images/logo1.jpg"> <img src="./images/website landing page-07.png">
<img src="./images/logo2.jpg"> <img src="./images/website landing page-06.png">
<img src="./images/logo3.jpg"> <img src="./images/website landing page-05.png">
</div> </div>
</div> </div>
<div class="letters"> <div class="letters">
<h1 id="newsletter">NEWS LETTER</h1> <h1 id="newsletter">NEWS LETTER</h1>
<div> <div>
<div> <div class="image">
<img src="./images/logo.png"> <img src="./images/logo.png">
</div> </div>
<div> <div class="info">
<p id="newsletter_text">RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL</p> <p id="newsletter_text">RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL</p>
<p> <form>
<span id="email_label">EMAIL: </span> <div>
<span id="email_value"></span> <label for="email">Email:</label>
</p> <input type="text" id="email" name="email"/>
<p> </div>
<span id="phone_label">PHONE: </span> <div>
<span id="phone_value"></span> <label for="phone">Phone:</label>
</p> <input type="text" id="phone" name="phone"/>
</div>
<button type="submit">send message</button>
</form>
</div> </div>
</div> </div>
......
index.js
View file @ 94d727c1
...@@ -40,231 +40,94 @@ ...@@ -40,231 +40,94 @@
// ========================= // =========================
// Translation // Translation
let header_bar=document.getElementById("header") let card_game_Ar=document.getElementById("card_game_Ar")
let hero=document.getElementById("hero") let card_game_en=document.getElementById("card_game_en")
let ticketing_sec=document.getElementById("ticketing_section") let mobile_Ar=document.getElementById("mobile_Ar")
let ticketing_ar=document.getElementById("ticketing_title_ar") let mobile_en=document.getElementById("mobile_en")
let ticketing1=document.getElementById("ticketing1") let cosplay_Ar=document.getElementById("cosplay_Ar")
let newsletter_text=document.getElementById("newsletter_text") let cosplay_en=document.getElementById("cosplay_en")
let e_sport=document.getElementById("e_sport") let ticketing_btn_en=document.getElementById("ticketing_bnt_en")
let activate_section=document.getElementById("activate_section") let ticketing_ar=document.getElementById("ticketing_ar")
let card_games=document.getElementById("card_games") let ticketing_btn1=document.getElementById("ticketing_btn1")
let area=document.getElementById("area") let ticketing_section_ar=document.getElementById("ticketing_section_ar")
let organize=document.getElementById("organize") let ticketing_section=document.getElementById("ticketing_section")
let hero_title=document.getElementById("hero_title") let vr_section=document.getElementById("vr_section_p")
let hero_title_ar=document.getElementById("hero_title_ar") let vr_section_en=document.getElementById("vr_section_en_p")
let place_ar=document.getElementById("place_ar") let casual_av_ar=document.getElementById("casual_av_ar")
let place=document.getElementById("place") let casual_en=document.getElementById("casual_en")
let card_info=document.getElementById("card_info") let hero_en=document.getElementById("hero_en")
let card_info_ar=document.getElementById("card_info_ar") let hero_ar=document.getElementById("hero_ar")
let card_info_res=document.getElementById("card_info_res") let Vr_zone_en=document.getElementById("Vr_zone_en")
let hero_title_res=document.getElementById("hero_title_res") let Vr_zone_AR=document.getElementById("Vr_zone_AR")
const translations = { let playable_games_title=document.getElementById("playable_games_title")
en: { let esports_title=document.getElementById("esports_title")
logo_the: "The", let e_sport_btn=document.getElementById("e_sport_btn")
logo_base: "base",
logo_gaming: "gaming festival",
from: "from",
date_from: "Feb 5TH",
to: "to",
date_to: "Feb 7TH 2025",
ticketing_btn: "Ticketing",
ticketing_btn1:"Ticketing",
hero_desc: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.",
book_now: "Book Now",
playable_games: "PLAYABLE GAMES",
esports: "E-SPORTS TOURNAMENTS",
casual: "CASUAL ACTIVITIES",
ticketing_title: "TICKETING",
organized: "ORGANIZED BY",
newsletter: "NEWS LETTER",
casual_text1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
casual_text2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
casual_text3:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
casual_text4:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
casual_text5:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr_btn:"VR zone",
vr2_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr2_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr2_btn:"VR zone",
mob_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
mob_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
mob_btn:"MOBILE AREA",
area_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
area_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
area_txt3:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
area_txt4:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
newsletter_text: "RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL",
email_label: "EMAIL: ",
phone_label: "PHONE: ",
ticketing2:"ticketing",
pc_btn:"PC - PS5 ZONE",
card_games_btn: "CARD / BOARD GAMES",
cosplay_area_btn: "COSPLAT AREA",
pass3_title: "3 DAY PASS - REGULAR",
pass3_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass3_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass3_p3: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass3_p4: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_pass3_btn: "BOOK YOUR PASS",
pass2_title: "2 DAY PASS - REGULAR",
pass2_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass2_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass2_p3: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_pass2_btn: "BOOK YOUR PASS",
pass1_title: "1 DAY PASS - REGULAR",
pass1_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass1_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_pass1_btn: "BOOK YOUR PASS",
vip_title: "VIP TICKET",
vip_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vip_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vip_p3: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vip_p4: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_vip_btn: "BOOK YOUR PASS",
e_sport_btn: "BOOK Now",
},
ar: {
logo_the: "The",
logo_base: "Base",
logo_gaming: " GAMING FESTIVAL",
from: "من",
date_from: "٥ فبراير",
to: "إلى",
date_to: "٧ فبراير ٢٠٢٥",
ticketing_btn: "حجز التذاكر",
ticketing_btn1: "حجز التذاكر",
hero_desc: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_now: "احجز الآن",
playable_games: "الألعاب المتاحة",
esports: "بطولات الرياضات الإلكترونية",
casual: "أنشطة ترفيهية",
ticketing_title: "التذاكر",
organized: "من تنظيم",
newsletter: "النشرة الإخبارية",
casual_text1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text5:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_btn:"منطقه ال VR",
vr2_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr2_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr2_btn:"منطقه ال VR",
mob_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
mob_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
mob_btn:"منطقه الموبايل",
area_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
ticketing2:"حجز التذاكر",
newsletter_text: "احصل على أحدث الأخبار من THE BASE - GAMING FESTIVAL",
email_label: "البريد الإلكتروني: ",
phone_label: "الهاتف: ",
pc_btn:"منطقه الكمبيوتر",
card_games_btn: "ألعاب الطاولة / الكروت",
cosplay_area_btn: "منطقة الكوسبلاي",
pass3_title: "تذكرة ٣ أيام - عادية",
pass3_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p4: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass3_btn: "احجز تذكرتك",
pass2_title: "تذكرة ٢ أيام - عادية",
pass2_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass2_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass2_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass2_btn: "احجز تذكرتك",
pass1_title: "تذكرة ١ يوم - عادية",
pass1_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass1_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass1_btn: "احجز تذكرتك",
vip_title: "تذكرة VIP",
vip_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p4: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_vip_btn: "احجز تذكرتك",
e_sport_btn: "احجز الان",
}
};
function changeLanguage(lang) { function changeLanguage(lang) {
console.log("function") console.log("function")
for (let key in translations[lang]) {
const el = document.getElementById(key);
if (el) el.innerText = translations[lang][key];
}
if(lang === 'ar') {
document.body.style.direction = "rtl";
document.body.style.textAlign = "right"; if(lang === 'ar') {
document.getElementById("play_games").classList.add("play_games_ar") card_game_en.classList.add("hidden1")
header_bar.classList.add("header_ar") card_game_Ar.classList.remove("hidden1")
ticketing_sec.classList.add("ticketing_sec_ar") mobile_en.classList.add("hidden1")
hero.classList.add("hero_ar") mobile_Ar.classList.remove("hidden1")
ticketing1.classList.add("hidden1") cosplay_en.classList.add("hidden1")
cosplay_Ar.classList.remove("hidden1")
ticketing_btn_en.classList.add("hidden1")
ticketing_ar.classList.remove("hidden1") ticketing_ar.classList.remove("hidden1")
newsletter_text.classList.add("newsletter_text_ar") ticketing_section_ar.classList.remove("hidden1")
e_sport.classList.add("e_sport_ar") ticketing_section.classList.add("hidden1")
organize.classList.add("e_sport_ar") vr_section_en.classList.add("hidden1")
activate_section.classList.add("padd") vr_section.classList.remove("hidden1")
card_games.classList.add("card_ar") casual_av_ar.classList.remove("hidden1")
area.classList.add("padd") casual_en.classList.add("hidden1")
document.getElementById("arear1").classList.add("no_margin") hero_ar.classList.remove("hidden1")
document.getElementById("arear12").classList.add("no_margin") hero_en.classList.add("hidden1")
console.log(hero_title_ar) Vr_zone_AR.classList.remove("hidden1")
hero_title_ar.classList.remove("hidden1") Vr_zone_en.classList.add("hidden1")
hero_title.classList.add("hidden1") ticketing_btn1.innerHTML=" ticketing"
hero_title_res.classList.add("hidden1") playable_games_title.innerHTML="الألعاب المتاحه"
card_info_ar.classList.remove("hidden1") esports_title.innerHTML=" بطولات الرياضات الالكترونية"
card_info.classList.add("hidden1") e_sport_btn.innerHTML="احجز الان"
card_info_res.classList.add("hidden1") document.querySelector(".en_lang").classList.remove("colored")
document.querySelector(".en_lang1").classList.remove("colored")
place_ar.classList.remove("hidden1") document.querySelector(".ar_lang").classList.add("colored")
place.classList.add("hidden1") document.querySelector(".ar_lang1").classList.add("colored")
} else { } else {
document.body.style.direction = "ltr"; card_game_en.classList.remove("hidden1")
document.getElementById("play_games").direction = "ltr"; card_game_Ar.classList.add("hidden1")
document.body.style.textAlign = "left"; mobile_en.classList.remove("hidden1")
header_bar.classList.remove("header_ar") mobile_Ar.classList.add("hidden1")
ticketing_sec.classList.remove("ticketing_sec_ar") cosplay_en.classList.remove("hidden1")
hero.classList.remove("hero_ar") cosplay_Ar.classList.add("hidden1")
ticketing1.classList.remove("hidden1") ticketing_btn_en.classList.remove("hidden1")
ticketing_ar.classList.add("hidden1") ticketing_ar.classList.add("hidden1")
newsletter_text.classList.remove("newsletter_text_ar") ticketing_section_ar.classList.add("hidden1")
e_sport.classList.remove("e_sport_ar") ticketing_section.classList.remove("hidden1")
organize.classList.remove("e_sport_ar") vr_section_en.classList.remove("hidden1")
activate_section.classList.remove("padd") vr_section.classList.add("hidden1")
card_games.classList.remove("card_ar") casual_av_ar.classList.add("hidden1")
area.classList.remove("padd") casual_en.classList.remove("hidden1")
hero_ar.classList.add("hidden1")
hero_en.classList.remove("hidden1")
hero_title.classList.remove("hidden1") Vr_zone_AR.classList.add("hidden1")
hero_title_res.classList.remove("hidden1") Vr_zone_en.classList.remove("hidden1")
place_ar.classList.add("hidden1") playable_games_title.classList.add("En_font")
place.classList.remove("hidden1") esports_title.classList.add("En_font")
card_info_ar.classList.add("hidden1") e_sport_btn.classList.add("En_font")
card_info.classList.remove("hidden1") ticketing_btn1.innerHTML="حجز التذاكر"
card_info_res.classList.remove("hidden1")
hero_title_ar.classList.add("hidden1") playable_games_title.innerHTML=" PLAYABLE GAMES"
document.getElementById("arear1").classList.remove("no_margin") esports_title.innerHTML=" E-SPORTS TOURNAMENTS"
document.getElementById("arear12").classList.remove("no_margin") 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")
document.querySelector(".ar_lang1").classList.remove("colored")
} }
} }
......
style.css
View file @ 94d727c1
This source diff could not be displayed because it is too large. You can view the blob instead.
style2.css 0 → 100644
View file @ 94d727c1
/* ====================================== */
/* ===============Hero================= */
.mainiMg {
width: 60%;
position: relative;
height: 90vh;
/* background: url('your-image.jpg') center/cover no-repeat; */
clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
border-top-right-radius: 20% 100%;
border-bottom-right-radius: 10% 0%;
overflow: hidden;
margin-left: 40px;
transform: translateY(-40px);
object-position: 40% 70%;
display: flex !important;
flex-direction: row-reverse;
}
.mainiMg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mainiMg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(128, 0, 128, 0.5), rgba(11, 11, 58, 0.9));
}
.hero_section,
.activate_section,
.VR_section {
display: grid;
align-items: start;
padding: 10px 50px 0 50px;
background-color: #0d0d41;
}
.ltr_size {
grid-template-columns: 48% 50%;
box-sizing: border-box;
column-gap: 10px;
padding: 80px 30px 40px;
justify-content: center;
align-items: center;
}
.ltr_size img {
width: 100%;
}
.ltr_size div:nth-child(1) {
margin-top: 100px;
}
.rtl_size {
grid-template-columns: 53% 45%;
box-sizing: border-box;
column-gap: 10px;
align-items: center;
padding: 80px 0px 0px;
}
#vr2_btn {
padding: 10px 40px;
}
.hero_section {
color: white;
font-family: var(--main-font);
text-transform: uppercase;
display: flex;
direction: ltr !important;
}
.hero_title .span {
width: 100%;
height: 100%;
position: relative;
font-family: "Archivo Black", sans-serif;
}
.word1 {
font-family: var(--sora_font);
display: flex;
position: absolute;
font-size: 40px;
width: 40%;
top: 24%;
right: 6%;
margin-left: 30px;
}
.word1 .the {
color: #aa09b4;
margin-left: 10px;
font-family: var(--sora_font);
}
.word2 {
font-family: "Archivo Black", sans-serif;
display: flex;
position: absolute;
font-size: 40px;
width: 40%;
top: 32%;
right: 4.5%;
margin-left: 40px;
font-family: var(--sora_font);
}
.word2 .base {
color: #aa09b4;
margin-right: 10px;
font-family: var(--sora_font);
}
.word4 {
font-family: "Archivo Black", sans-serif;
display: flex;
position: absolute;
font-size: 40px;
width: 35%;
top: 41%;
right: 8%;
font-family: var(--sora_font);
}
.word3 {
display: flex;
position: absolute;
font-family: "Archivo Black", sans-serif;
font-size: 40px;
width: 30%;
right: 11%;
top: 50%;
font-family: var(--sora_font);
}
.hero-sec {
display: flex;
position: absolute;
left: 60%;
top: 60%;
font-size: 22px;
width: 30% !important;
}
.hero-sec2 {
display: flex;
position: absolute;
left: 60.5%;
top: 65%;
font-size: 22px;
width: 30% !important;
font-family: var(--sora_font);
}
.hero-sec3 {
display: flex;
position: absolute;
left: 62%;
top: 70%;
font-size: 22px;
width: 30% !important;
font-family: var(--sora_font);
}
.hero-sec4 {
display: flex;
position: absolute;
left: 63%;
top: 75%;
font-size: 22px;
width: 30% !important;
font-family: var(--sora_font);
}
.hero-sec5 {
display: flex;
position: absolute;
left: 64% ;
top: 80%;
font-size: 22px;
width: 30% !important;
font-family: var(--sora_font);
}
.hero_section a {
font-family: "Archivo Black", sans-serif;
position: absolute;
top: 650px;
right: 5px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-radius: 50px 0 0 50px;
background: linear-gradient(90deg, #aa09b4, #620b80, #270c54);
padding: 15px 20px;
display: block;
width: 30%;
height: 8%;
cursor: pointer;
outline: none;
text-align: start;
box-sizing: border-box;
font-size: 15px;
font-family: var(--sora_font);
}
.hero_desc_res
{
display: none;
}
.hero_desc_res h3
{
font-size: 30px;
}
.hero_desc_res h3 span
{
color: #be2fbe;
}
.hero_desc_res p
{
font-size: 20px;
line-height: 32px;
}
@media(max-width:1800px)
{
.word1 {
top: 28%;
left: 51%;
}
.word2 {
top: 35%;
left: 52%;
}
.word4 {
top: 41%;
left: 56%;
}
.word3 {
top: 48%;
left: 57%;
}
.hero-sec {
position: absolute;
left: 58%;
top: 58%;
}
.hero-sec2 {
top: 63%;
left: 59%;
}
.hero-sec3 {
left: 60%;
top: 68%;
}
.hero-sec4 {
left: 61%;
top: 73%;
}
.hero-sec5 {
left: 62% ;
top: 78%;
}
.hero_section a {
top: 650px;
width: 37%;
}
}
@media(max-width:1500px)
{
.word1 {
top: 31%;
}
.word2 {
top: 37%;
}
.word4 {
top: 46%;
/* left: 50%; */
}
.word3 {
top: 55%;
left: 58%;
}
.hero-sec {
position: absolute;
left: 58%;
top: 65%;
}
.hero-sec2 {
top: 70%;
left: 59%;
}
.hero-sec3 {
left: 60%;
top: 75%;
}
.hero-sec4 {
left: 61%;
top: 80%;
}
.hero-sec5 {
left: 62% ;
top: 85%;
}
.hero_section a {
top: 750px;
}
}
@media(max-width:1450px)
{
.word3 {
top: 55%;
left: 58%;
}
.hero-sec {
position: absolute;
left: 59%;
top: 65%;
}
.hero-sec2 {
top: 70%;
left: 60%;
}
.hero-sec3 {
left: 61%;
top: 75%;
}
.hero-sec4 {
left: 62%;
top: 80%;
}
.hero-sec5 {
left: 63% ;
top: 85%;
}
.hero_section a {
top: 500px;
/* background: green !important; */
}
}
@media(max-width:1440px)
{
.hero_section a {
top: 700px;
/* background: bisque !important; */
width: 34%;
}
}
@media(max-width:1430px)
{
.hero_section a {
/* backgrou nd: red; */
top: 620px;
/* background: bisque !important; */
width: 37%;
}
.word2 {
top: 39%;
font-size: 35px;
}
}
@media(max-width:1300px)
{
.hero_section a {
top: 600px;
}
}
@media(max-width:1030px)
{
.word1 {
top: 30%;
}
.word2 {
top: 37%;
font-size: 35px;
}
.word4 {
top: 46%;
}
.word3 {
top: 55%;
}
.hero-sec {
position: absolute;
left: 60%;
top: 65%;
font-size: 18px;
}
.hero-sec2 {
top: 70%;
font-size: 18px;
left: 61%;
}
.hero-sec3 {
left: 62%;
top: 75%;
font-size: 18px;
}
.hero-sec4 {
left: 63%;
top: 80%;
font-size: 18px;
}
.hero-sec5 {
left: 64% ;
top: 85%;
font-size: 18px;
line-height: 24px;
}
.hero_section a {
top: 650px;
width: 33%;
right: 0%;
}
}
@media(max-width:800px)
{
.word1 {
position: relative;
top: unset;
left: unset;
}
.word2 {
position: relative;
top: unset;
left: unset;
}
.word4 {
position: relative;
top: unset;
left: unset;
}
.word3 {
position: relative;
top: unset;
left: unset;
}
.hero-sec {
position: relative;
top: unset;
left: unset;
}
.hero-sec2 {
position: relative;
top: unset;
left: unset;
}
.hero-sec3 {
position: relative;
top: unset;
left: unset;
}
.hero-sec4 {
position: relative;
top: unset;
left: unset;
}
.hero-sec5 {
position: relative;
top: unset;
left: unset;
}
.hero_section a {
position: relative;
top: unset;
left: unset;
width: 100%;
transform: translateX(76px);
}
.hero_desc
{
display:none ;
}
.hero_section
{
display: grid;
grid-template-columns: 80% !important;
justify-content: center;
}
.mainiMg
{
width: 100%;
height: auto;
}
.hero_desc_res
{
display: block;
}
}
@media(max-width:500px)
{
.hero_section
{
grid-template-columns: 100% !important;
padding: 0 3% !important;
}
.mainiMg
{
margin: 0 !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
border-top-right-radius: 0% 0%;
border-bottom-right-radius: 0% 0%;
}
.hero_desc_res h3
{
font-size: 18px;
}
.hero_desc_res p
{
font-size: 14px;
}
.hero_section a {
transform: translateX(13px);
}
}
@media(max-width:400px)
{
.hero_section a {
transform: translateX(10px);
}
}
@media(max-width:350px)
{
.hero_section a {
transform: translateX(7px);
}
}
/* ==================================== */
/* ===========ticketing================ */
.ticketing_section
{
background-color: var(--bck_color);
padding-top: 10px;
}
.ticketing_section > .title
{
display: flex;
justify-content: center;
column-gap: 10px;
padding-bottom: 10px;
}
.ticketing_section > .title h1
{
margin: 30px 0 ;
text-align: center;
color: white;
text-transform: uppercase;
position: relative;
font-size: 37px;
font-family: var(--main-font);
}
.ticketing_section .title img
{
width: 400px;
}
.ticketing_section > .title
{
margin-bottom: 60px;
}
.ticketing_section .days
{
background: linear-gradient(to bottom ,#920aa2 10%,#660b82 ,#2c0c57 70%);
border-top-right-radius: 80px;
padding-bottom: 40px;
color: white;
width: 95%;
margin: 0 2.5%;
}
.ticketing_section .days > div,
.ticketing_section .days_2 > div
{
font-family: var(--main-font);
}
.ticketing_section .ticket_type
{
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
margin: 0 5%;
font-family: var(--sora_font);
}
.ticketing_section .ticket_type span
{
font-size: 40px;
font-weight: bold;
}
.ticketing_section .days > div:nth-child(2)
{
margin-left: 40px;
align-items: start;
}
.ticketing_section .ticket_types
{
display: grid;
grid-template-columns: 56% 44%;
width: 95%;
margin: 0px 2.5%;
background: linear-gradient(to right ,#2c0c57,#2c0c57 50%,var(--bck_color) 98% );
}
.ticketing_section .ticket_types .days_t
{
background: linear-gradient(to right ,#2c0c57,#660b82 50%,#920aa2 80% );
color: white;
border-top-right-radius: 80px;
position: relative;
padding-bottom: 80px;
}
.ticketing_section .days_t .day_ticket
{
width: 50%;
}
.ticketing_section .days_t .text p
{
font-weight: 400;
font-family: var(--sora_font);
color: white;
font-size: 25px;
width: 90%;
margin: 20px 5%;
line-height: 32px;
}
.ticketing_section_ar .days_t .text p,
.ticketing_section_ar .days .text p
{
direction: rtl;
font-family: var(--noor_font);
}
.ticketing_section .days .text p
{
font-weight: 400;
font-family: var(--sora_font);
color: white;
font-size: 25px;
}
.ticketing_section .days a
{
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg,var(--purple_col), #6a1a97,var(--bck_color));
padding: 7px 20px;
display: block;
width: 50%;
margin: 0px 0 0 40%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 110px;
transform: translateX(23px);
}
.ticketing_section .days_t a
{
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg,var(--purple_col), #6a1a97,var(--bck_color));
padding: 7px 20px;
display: block;
width: 50%;
margin: 0px 0 0 40%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 110px;
transform: translateX(23px);
}
.ticketing_section .days:nth-child(3)
{
padding-bottom: 50px;
}
.map
{
width: 95%;
margin: 0 2.5%;
}
.map iframe
{
width: 100%;
height: 450px;
border-radius: 20px;
border: none;
}
/* ============================ */
/* ============ Hidden Header== */
.right_side_h
{
display: flex;
flex-direction: column;
row-gap: 20px;
justify-content: center;
position: fixed;
background:var(--bck_color);
width: 100%;
right: 0;
padding: 20px 10px;
top: 75px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.right_side_h a
{
background-color: transparent;
color:white;
outline: none;
border: none;
text-transform: uppercase;
font-family: var(--main-font);
font-weight: bold;
cursor: pointer;
text-align: center;
}
.hidden
{
transform: translateX(250%);
width: 0;
}
.hidden1
{
display: none !important;
}
/* ========================= */
/* ========Arabic============*/
.ticketing_sec_ar .days .text
{
margin: 0 40px 0 0;
}
.ticketing_sec_ar .days > .text p
{
width: 80%;
margin: 0;
}
.ticketing_sec_ar a
{
margin: 60px 46.5% 0 0;
background: linear-gradient(90deg,var(--bck_color), #6a1a97,var(--purple_col));
border-radius: 8px;
}
.card_ar
{
column-gap: 40px;
}
/* .days_grid .days:nth-child(2) a
{
margin-top: 40px;
} */
.arab-b{
direction: rtl;
}
.arab-p{
direction: rtl;
text-align: right;
width: 90%;
line-height: 1.3;
font-size: 30px;
width: 83%;
margin-left: 10% !important;
}
/* .days_grid .pass1{
direction: rtl !important;
} */
.passp12{
direction: rtl !important;
width: 95%;
font-size: 30px;
}
.first-p{
width: 90%;
font-size: 30px;
line-height: 1.2;
}
.gg{
font-size: 30px;
width: 75%;
line-height: 1.2;
margin-top: 10%;
}
.perfect{
font-size: 30px;
width: 80%;
}
.vipp{
font-size: 30px;
width: 120%;
}
.pass1{
direction: rtl;
width: 90%;
font-size: 33px;
margin-top: 10% !important;
margin-left: 40% !important;
}
.vipar{
direction: rtl;
font-size: 33px;
width: 180%;
}
.vipp{
width: 180%;
}
.btnn2{
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg,#aa09b4, #5f0b7d,#490b6d);
padding: 7px 20px;
display: block;
width: 35%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 50px;
margin-left: 65%;
font-size: 18px;
font-family: var(--noor_font);
}
.ticketing_sec_ar .btnn2
{
width: 30%;
margin-left: 70%;
}
.btn2_type{
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg,#aa09b4, #5f0b7d,#490b6d);
padding: 7px 20px;
display: block;
width: 35%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 50px;
margin-left: 65%;
font-size: 18px;
position: absolute;
bottom: 20px;
font-family: var(--noor_font);
}
.btn2_type_s{
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg,#aa09b4, #5f0b7d,#490b6d);
padding: 7px 20px;
display: block;
width: 45%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 50px;
margin-left: 55%;
font-size: 18px;
position: absolute;
bottom: 20px;
font-family: var(--noor_font);
}
.ticketing_section_ar .days_grid .days:nth-child(1) a
{
margin-top: 35px ;
}
/* ========================== */
/* =====Responsive========== */
@media(max-width:1880px)
{
/* .days_grid .days:nth-child(2) a
{
margin-top: 110px;
}
.ticketing_sec_ar .days_grid .days:nth-child(2) a
{
margin-top: 100px !important;
}
*/
.ticketing_section a
{
margin: 0px 0 0 44%;
margin-left: 44%;
}
/* .ticketing_section .days_grid .days:nth-child(1) a
{
margin-top: 80px;
} */
.ticketing_sec_ar a
{
margin: 60px 46.5% 0 0 !important;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
/* .ticketing_section_ar .days_grid .days:nth-child(1) a
{
margin-top: 50px;
} */
.ticketing_section a
{
width: 37%;
margin: 40px 0 0 60%;
}
.ticketing_section_ar a
{
width: 37%;
margin: 20px 0 0 60%;
}
}
@media(max-width:1500px)
{
/* .ticketing_sec_ar .days_grid .days:nth-child(2) a
{
margin-top: 60px !important;
}
.ticketing_section .days_grid .days:nth-child(1) a
{
margin-top: 80px ;
} */
.ticketing_sec_ar a
{
margin: 60px 46.5% 0 0;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
/*
.days_grid .days:nth-child(2) a
{
margin-top: 80px;
} */
.ticketing_section .days > div:nth-child(1)
{
width: 90%;
margin-left: 5%;
}
.ticketing_section a
{
margin: 20px 0 0 60%;
width: 37%;
}
/* .ticketing_section_ar .days_grid .days:nth-child(1) a
{
margin-top: 80px;
} */
.ticketing_section_ar a
{
margin: 30px 0 0 60%;
}
}
/* @media(max-width:1300px)
{
.days_grid .days:nth-child(2) a
{
margin-top: 70px;
}
.ticketing_section_ar .days_grid .days:nth-child(1) a
{
margin-top: 100px;
}
} */
@media(max-width:1200px)
{
/* .ticketing_section .days_grid .days:nth-child(1) a
{
margin-top: 0px;
}
.ticketing_section_ar .days_grid .days:nth-child(1) a
{
margin-top: 10px;
} */
.ticketing_section a
{
margin: 40px 0 0 38%;
}
/* .ticketing_section .last a
{
margin-top: 20px;
margin-left: 57%;
} */
.ticketing_sec_ar a
{
margin: 60px 46.5% 0 0;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
.ticketing_section .days_t .text p
{
font-size: 20px;
}
}
@media(max-width:1030px)
{
.ticketing_section .days .text p
{
line-height: 32px;
}
.ticketing_section .days_t .text p
{
font-size: 18px;
}
.btn2_type
{
width: 45%;
margin-left: 55%;
}
.btn2_type_s
{
width: 55%;
margin-left: 45%;
}
.ticketing_section .ticket_types .days_t
{
padding-bottom: 60px;
}
.ticketing_section > .title
{
margin-bottom: 30px;
}
}
@media(max-width:950px)
{
.pass1
{
margin-top: 0% !important;
}
.ticketing_section .days:nth-child(3) a
{
margin-left: 52% !important;
}
.ticketing_sec_ar .days:nth-child(3) a,
.ticketing_sec_ar a
{
margin:60px 52% 0 0 !important;
}
.last div:nth-child(1) h1
{
font-size: 25px;
}
.card_ar div:nth-child(1) a
{
left: 165px;
}
.ticketing_section .days > div:nth-child(2)
{
flex-direction: column;
margin-left: 0;
}
.ticketing_section .days .text p
{
width: 95%;
margin-left: 2% !important;
/* text-align: center; */
font-size: 18px;
font-weight: normal;
margin-top: 30px;
/* margin-left: 3% !important; */
}
/* .ticketing_section .days_grid .days p
{
font-size: 18px !important;
} */
.btnn2{
font-size: 18px !important;
width: 45% !important;
margin-left: 55%;
}
/* .days_grid
{
grid-template-columns: 100% !important;
} */
.ticketing_section a
{
width: 40%;
margin-left: 45%;
}
.ticketing_section .last > div:nth-child(1)
{
width: 80% !important;
margin:0 10% !important;
}
/* .days_grid a
{
transform: translateX(70px);
} */
.ticketing_sec_ar a
{
transform: translateX(0);
margin: 0 55% 0 0;
}
.ticketing_sec_ar .days_grid .days:nth-child(2) a,
.ticketing_sec_ar a
/* .ticketing_sec_ar .days_grid .days:nth-child(1) a,
.ticketing_section .days_grid .days:nth-child(1) a */
{
margin-top: 30px !important;
}
.ticketing_section .days > div:nth-child(2) div
{
width: 100%;
}
.btnn2
{
margin-top: 20px;
}
.ticketing_section .last a
{
margin-top: 20px;
}
.ticketing_section .ticket_types
{
grid-template-columns: 100%;
row-gap: 0px;
}
.ticketing_section .ticket_types .days_t
{
background: linear-gradient(to bottom ,#920aa2 10%,#660b82 ,#2c0c57 70%);
}
.ticketing_section .ticket_types .days_t:nth-child(2)
{
border-radius: 0;
}
.ticketing_section .ticket_types .days_t:nth-child(1)
{
padding-bottom: 60px;
}
.btn2_type_s
{
width: 45%;
margin-left: 55%;
}
.ticketing_section .days_t .day_ticket
{
width: unset;
}
.map
{
width: 95%;
margin: 0 2.5;
}
.ticketing_section .days
{
border-radius: 0;
}
}
@media(max-width:700px)
{
.ticketing_sec_ar a
{
margin: 120px 25% 0 0;
transform: translateX(0) !important;
}
.ticketing_sec_ar .days_grid .days:nth-child(2) a,
.ticketing_sec_ar a,
.ticketing_sec_ar .days_grid .days:nth-child(1) a
{
margin-top: 30px !important;
}
.ticketing_section .days:nth-child(3) a
{
margin: 20px 0% 0 6% !important;
}
.ticketing_section .last a
{
width: 60%;
margin: 20px 0% 0 25% !important;
}
.ticketing_sec_ar .last a,
.ticketing_sec_ar .days:nth-child(3) a
{
margin: 60px 31% 0 0% !important;
}
.ticketing_section .days > div:nth-child(1)
{
flex-direction: column;
width: 100%;
margin: 0;
}
.ticketing_section .days > div:nth-child(1) h1,
.ticketing_section .days > div:nth-child(1) span
{
font-size: 30px;
text-align: center;
}
.ticketing_section .days > div:nth-child(2) > div
{
width: 100%;
margin: 0 0%;
}
.ticketing_section a
{
width: 60%;
margin-left: 20%;
}
.days_grid
{
grid-template-columns: 100% !important;
margin-top: 40px;
/* column-gap: 30px; */
}
.days_grid > div:nth-child(2)
{
margin-left: 0 !important;
}
.last
{
margin-top: 20px !important;
}
.days_grid a
{
transform: translateX(50px);
}
.right_side_h
{
width: 40% !important;
}
.list_icon
{
display: block;
}
.last div:nth-child(1) h1
{
width: 60%;
text-align: center;
}
.ticketing_section .days .text p
{
font-size: 14px;
line-height: 28px;
}
.ticketing_section .days_grid .days p
{
font-size: 14px !important;
}
.btnn2
{
margin-top: 20px;
}
.ticketing_section .ticket_type
{
flex-direction: column;
justify-content: center;
}
.ticketing_section .ticket_type h1,
.ticketing_section .ticket_type span
{
font-size: 30px;
text-align: center;
margin-bottom: 0;
}
.ticketing_section .days_t .text p
{
font-size: 14px;
line-height: 28px;
width: 95%;
margin-left: 2%;
font-weight: normal;
}
.btn2_type,
.btn2_type_s
{
width: 60%;
margin-left: 40%;
}
.ticketing_section .title img
{
width: 300px;
}
.ticketing_section > .title
{
margin-bottom: 30px;
}
.ticketing_section .days
{
border-radius: 0;
}
.ticketing_section .ticket_types .days_t,
.ticketing_section .ticket_types .days_t:nth-child(2)
{
border-top-left-radius:20px ;
border-top-right-radius:20px ;
}
}
@media(max-width:500px)
{
.ticketing_sec_ar a
{
margin: 120px 32% 0 0 !important;
}
.play_games h1
{
font-size: 25px;
}
.ticketing_sec_ar .days > div:nth-child(2)
{
margin: 0;
}
.ticketing_sec_ar .btnn2
{
width: 65%;
margin-left: 35%;
}
.btnn2
{
width: 60% !important;
margin-left: 40%;
}
.ticketing_section .days > div:nth-child(1) h1
{
margin-bottom: 0;
}
.ticketing_section .days .text p
{
margin-left: 2% !important;
}
.ticketing_section .ticket_type h1, .ticketing_section .ticket_type span
{
font-size: 30px;
}
.ticketing_section .ticket_types .days_t
{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
@media(max-width:400px)
{
.vipp{
width: 100% !important;
}
.ticketing_section .ticket_type h1, .ticketing_section .ticket_type span
{
font-size: 18px;
}
.ticketing_section_ar .btnn2
{
width: 65% !important;
margin-left: 35% !important;
}
.ticketing_section .days > div:nth-child(1) h1
{
margin-bottom: 5px;
}
.ticketing_section .days > div:nth-child(1) h1, .ticketing_section .days > div:nth-child(1) span
{
font-size: 18px !important;
}
.ticketing_section .days .text p,
.ticketing_sec_ar .days .text p
{
/* font-size: 12px; */
margin-left: 0 !important;
}
.ticketing_section .text p
{
margin-top: 30px !important;
}
.btnn2{
/* width: 38% !important; */
font-size: 14px !important;
/* margin-left: 63%; */
}
.btn2_type, .btn2_type_s
{
font-size: 14px;
}
.ticketing_sec_ar .days .text p
{
/* text-align: center; */
margin-top: 10px;
}
.ticketing_section > h1
{
font-size: 25px;
}
.days_grid a
{
transform: translateX(25px);
}
.ticketing_section .days:nth-child(3) a{
margin: 60px 0% 0 23% !important;
}
.ticketing_section .last a
{
margin: 20px 0% 0 23% !important;
}
.ticketing_sec_ar .days:nth-child(3) a, .ticketing_sec_ar .last a {
margin: 60px 30% 0 0% !important;
}
.ticketing_section a
{
margin:60px 0 0 24% !important;
}
.ticketing_sec_ar a
{
margin:60px 29% 0 0% !important;
}
.ticketing_section .days .text p
{
margin-left: 2% !important;
}
}
@media(max-width:322px)
{
/* .ticketing_section .days > div:nth-child(2) p
{
margin-left: 2% !important;
} */
.ticketing_section .days:nth-child(3) a,
.ticketing_section .last a
{
margin-left: 20%;
}
.ticketing_section .last a {
margin: 20px 0% 0 20% !important;
}
.ticketing_section .days > .text p
{
/* font-size: 11px; */
margin-right: 2% !important;
}
.arab-b{
font-size: 13px !important;
}
.days_grid .pass1{
/* font-size: 13px !important; */
}
.ticketing_section a
{
margin:60px 0 0 20% !important;
}
.ticketing_section .days:nth-child(3) a
{
margin:60px 0% 0 20% !important;
}
.ticketing_sec_ar .days:nth-child(3) a, .ticketing_sec_ar .last a
{
margin:60px 28% 0% 0 !important;
}
.ticketing_sec_ar a
{
margin: 120px 28% 0 0 !important;
}
.btnn2{
width: 65% !important;
margin-left: 35% !important;
font-size: 13px !important;
}
.ticketing_section_ar .btnn2 {
width: 70% !important;
margin-left: 30% !important;
}
}
/* /////////////////////// */
.vr_parent
{
margin: 0;
padding: 0;
font-family: var(--main-font);
background-color: var(--bck_color);
color: #fff;
overflow-x: hidden;
padding: 0 0 70px 0;
}
.vr-section {
display: flex;
align-items: center;
justify-content: center;
width: 95%;
margin: 40px auto 0 ;
background-color: var(--bck_color);
min-height: 500px;
gap: 40px;
flex-wrap: wrap;
}
.vr-image {
position: relative;
width: 45%;
overflow: hidden;
height: 500px;
}
.vr-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.overlay-vr {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,var(--title_color) 0% , #0d0d41b8 75%);
opacity: 0.4;
}
.vr-con {
width: 45%;
background: var(--gradient);
padding: 40px;
height: 500px;
box-sizing: border-box;
}
/* العنوان */
.vr-title1 {
font-family: var(--sora_font);
font-size: 30px;
margin-bottom: 15px;
line-height: 1.2;
word-wrap: break-word;
font-weight: 700;
}
.neon {
color: var(--neon);
}
/* الفقرة */
.vr-p {
font-size: 25px;
line-height: 1.4;
margin-bottom: 25px;
font-family: var(--sora_font);
}
/* النص العربي */
.arb {
direction: rtl;
text-align: right;
width: 100%;
color: var(--text_color);
font-family: var(--noor_font);
}
.arbt {
margin-left: 20%;
width: 100%;
font-family: var(--noor_font);
}
/* الزر */
.vr-btn1 {
background: var(--background_buttons) ;
outline: none;
border: none;
border-radius: 30px;
text-align: center;
font-size: 20px;
font-family: var(--sora_font);
font-weight: bold;
padding: 10px 30px;
margin-top: 50px;
text-transform: uppercase;
color: white;
}
/* .vr-btn1:hover {
transform: scale(1.05);
} */
.btnen {
margin-left: 10%;
}
/* ===== النسخة الإنجليزية ===== */
.vr-en {
flex-direction: row-reverse;
}
@media(max-width:1800px)
{
.arbt
{
margin-left: 0;
text-align: end;
}
}
/* ===== التابلت (1024px) ===== */
@media (max-width: 1024px) {
.vr-section {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
text-align: left;
gap: 25px;
}
.vr-image,
.vr-con {
width: 48%;
height: auto;
/* min-height: 350px; */
}
.vr-con {
padding: 30px;
}
.vr-title1 {
font-size: 30px;
text-align: right;
margin-left: 5%;
}
.title1en{
text-align: left;
}
.vr-p {
font-size: 18px;
line-height: 1.4;
text-align: start;
margin-left: 5%;
margin-right: 5%;
}
/* العربي يبدأ من نفس المسافة */
.arb {
direction: rtl;
text-align: right;
margin-right: 5%;
margin-left: 5%;
}
.vr-btn1 {
font-size: 16px;
padding: 10px 22px;
width: 200px;
margin: 20px auto 0;
display: block;
}
}
/* ===== التابلت الصغير (768px) ===== */
@media (max-width: 768px) {
.vr-image img
{
height: 300px;
}
.vr-section {
flex-direction: column;
gap: 25px;
}
.vr-image,
.vr-con {
width: 90%;
height: auto;
}
.vr-title1 {
font-size: 30px;
text-align: end;
margin-left: 0;
}
.vr-p {
font-size: 18px;
text-align: end;
margin: 0 auto;
}
.vr-section-en .vr-title1,
.vr-section-en .vr-p
{
text-align: start;
}
.arb {
text-align: right;
margin: 0;
padding-right: 10%;
font-size: 25px;
}
.vr-btn1 {
width: 40%;
margin: 50px 0 0 0;
display: block;
}
.vr-section
{
width: 90%;
margin: 0 5%;
align-items: center;
}
.vr-section > div
{
width: 80%;
}
.vr-con
{
padding: 0;
margin: 20px 0 0 0;
}
}
/* ===== الموبايل (600px) ===== */
@media (max-width: 600px) {
.vr-section {
width: 90%;
margin: 0 5%;
flex-direction: column;
gap: 20px;
}
.vr-image,
.vr-con {
width: 100%;
/* height: auto; */
}
.vr-con {
padding: 0px;
}
.vr-title1 {
font-size: 25px;
}
.vr-section-en .vr-title1
{
font-size: 18px;
}
.vr-p {
font-size: 18px;
}
.vr-section-en .vr-p
{
font-size: 14px;
line-height: 32px;
}
.arb {
text-align: right;
margin: 0;
padding-right: 10%;
}
.vr-btn1 {
width: 70%;
padding: 12px 0;
/* margin: 0 auto; */
display: block;
}
.vr-section
{
width: 94%;
margin: 0 3%;
}
.vr-section > div
{
width: 100%;
}
}
@media(max-width:500px)
{
.vr-btn1
{
width: 50%;
}
}
@media(max-width:400px)
{
.vr-title1
{
font-size: 20px;
}
.arb
{
font-size: 16px;
}
.vr-btn1
{
margin-top: 20px;
width: 60%;
font-size: 16px;
font-weight: normal;
}
}
/* ===================== */
/* ===================== */
/* ===================== */
/* ===================== */
/* ===================== */
/* ====================================== */
/* ===============Activate================= */
.bookN {
background: linear-gradient(to right, var(--purple_col) 20%, #6e2698, var(--bck_color));
color: white;
font-family: var(--title_font);
padding: 8px 30px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 18px;
margin-top: 100px;
margin-left: 10%;
display: inline-block;
position: absolute;
width: 10%;
height: 4%;
left: 35%;
top: 100%;
}
.imagg {
width: 100%;
position: relative;
height: 75vh;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
border-top-left-radius: 0 100%;
border-bottom-left-radius: 100% 200%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
/* direction: ltr; */
top: 15% !important;
}
.imagg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 70%;
}
.imagg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(11, 11, 58, 0.6), rgba(129, 33, 132, 0.5));
}
.casualt2 {
display: flex;
font-family: "Archivo Black", sans-serif;
}
.casual_text2 {
position: absolute;
top: 135%;
left: 7%;
font-weight: 400;
font-size: 30px;
color: white;
}
.casual_text3 {
position: absolute;
top: 135%;
left: 28%;
color: #00ff00;
font-weight: 400;
font-size: 30px;
}
.casual_text4 {
font-family: "Archivo Black", sans-serif;
position: absolute;
color: #00ff00;
font-weight: 400;
font-size: 30px;
top: 142%;
left: 7%;
}
.casual_text5 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 22px;
color: white;
top: 153%;
left: 7%;
width: 37%;
}
.casual_text6 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 22px;
color: white;
top: 170%;
left: 7%;
width: 40%;
}
.casual_text7 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 22px;
color: white;
top: 188%;
left: 7%;
width: 40%;
}
.activate_section {
padding: 200px 0px 30px 0;
}
.activate_section div:nth-child(2) a {
position: absolute;
bottom: 30px;
z-index: 1;
right: 30px;
background: var(--background_buttons);
color: white;
font-family: var(--main-font);
padding: 10px 35px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 22px;
}
.activate_section h1 {
color: var(--title_color);
width: 80%;
margin-left: 4%;
font-weight: 800;
font-family: var(--title_font);
font-size: 40px;
margin-top: 0px !important;
position: absolute;
top: 128%;
}
/* =================================*/
/* =============VR==================*/
.VR_section {
width: 100%;
height: 130vh;
}
.iGv {
width: 65%;
position: absolute;
top: 220%;
left: 2%;
background-color: none;
border: 20px bold black;
border-right: 20px;
}
.imagVr {
width: 100%;
height: 80vh;
overflow: hidden;
}
.imagVr::after {
content: "";
position: absolute;
top: 220%;
left: 0;
width: 98%;
height: 90vh;
background: linear-gradient(to right, var(--bck_color) 20%, #6a1a97);
z-index: 1;
opacity: 0.7;
}
.VR_section span {
font-family: "Archivo Black", sans-serif;
z-index: 1;
}
.vr_txt1 {
position: absolute;
font-size: 32px;
font-weight: 600;
color: white;
top: 237%;
right: 11.5%;
}
.vr_txt2 {
position: absolute;
font-size: 32px;
font-weight: 600;
color: white;
top: 243%;
right: 34.5%;
}
.vr_last {
display: flex;
direction: ltr;
}
.vr_txt3 {
position: absolute;
font-size: 32px;
font-weight: 600;
color: #00ff00;
top: 243%;
right: 2%;
width: 32%;
}
.vr_txt4 {
position: absolute;
font-size: 32px;
font-weight: 600;
color: #00ff00;
top: 250%;
right: 3%;
width: 45%;
}
.VR_section p {
color: white;
font-size: 25px;
font-weight: 500;
line-height: 30px;
text-transform: uppercase;
margin-left: 0%;
font-family: var(--main-font);
z-index: 1;
/* margin-bottom: 40px; */
}
.vr_txt5 {
position: absolute;
top: 260%;
right: 3%;
width: 45%;
}
.vr_txt6 {
position: absolute;
top: 275%;
right: 3%;
width: 45%;
}
.vr_txt7 {
position: absolute;
top: 290%;
right: 3%;
width: 45%;
}
.VR_section a {
background: var(--background_buttons);
color: white;
font-family: var(--title_font);
padding: 8px 70px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 20px;
margin-top: 100px;
margin-left: 10%;
display: inline-block;
position: absolute;
/* width: 8%; */
height: 5%;
left: -5%;
top: 277%;
z-index: 1;
}
/* =============Responsive==================*/
/* @media (max-width: 320px) {
.hero_section {
padding: 0px;
position: relative;
display: block;
}
.hero_section a {
position: absolute;
top: 730%;
right: 0%;
width: 40%;
padding: 10px 20px 30px;
font-size: 16px;
}
.hero-sec {
top: 545%;
left: 4.5% !important;
width: 86% !important;
font-size: 20px;
}
.hero-sec2 {
top: 572%;
left: 4.5% !important;
width: 86% !important;
font-size: 20px;
}
.hero-sec3 {
top: 600%;
left:4.5% !important;
width: 50% !important;
font-size: 20px;
}
.hero-sec4 {
top: 628%;
left: 4.5% !important;
width: 84% !important;
font-size: 20px;
}
.hero-sec5 {
top: 656%;
left: 4.5% !important;
width: 90% !important;
font-size: 20px;
}
.mainiMg {
position: absolute !important;
top: 180% !important;
right: 5% !important;
width: 90%;
height: 50vh;
clip-path: none !important;
border-top-right-radius: 0 0 !important;
}
.word1 {
display: flex;
font-size: 24px;
top: 478%;
right: 0%;
width: 90%;
}
.word2 {
display: flex;
font-size: 24px;
top: 505%;
right: 2%;
width: 93%;
}
.word3 {
display: flex;
font-size: 24px;
top: 535%;
right: 4%;
width: 30%;
}
.word4 {
display: flex;
font-size: 24px;
top: 535%;
right: 15%;
width: 80%;
}
.activate_section .imagg {
position: absolute !important;
top: 149% !important;
left: 50% !important;
width: 90% !important;
height: 40vh !important;
transform: translate(-50%, -50%) !important;
}
.bookN{
left: 20% !important;
top: 100% !important;
padding: 10px 0px 8px 20px !important;
display: flex !important;
width: 40% !important;
align-items: center !important;
font-size: 16px !important;
}
.activate_section h1 {
font-family: "Archivo Black", sans-serif;
font-size: 24px;
top: 171.5%;
right: 5%;
width: 90% !important;
font-weight: 700;
}
.casual_text2 {
font-size: 20px;
top: 174%;
left: 4%;
width: 70%;
}
.casual_text3 {
font-size: 20px;
top: 174%;
left: 60%;
width: 35%;
}
.casual_text4 {
font-size: 20px;
top: 179% !important;
left: 4.5%;
width: 85%;
}
.casual_text5 {
font-size: 18px;
top: 185% !important;
left: 4.5%;
width: 85%;
}
.casual_text6 {
font-size: 18px;
top: 205% !important;
width: 80%;
left: 4.5%;
}
.casual_text7 {
font-size: 18px;
top: 225% !important;
width: 90%;
left: 4.5%;
}
.activate_section div:nth-child(2) a {
width: 40%;
padding: 8px 15px 8px 16px;
font-size: 18px !important;
}
.VR_section {
padding-bottom: 500% !important;
}
.iGv {
top: 246% !important;
height: 40%;
}
.imagVr::after {
top: 246%;
width: 98%;
height: 40%;
}
.VR_section .vr_last {
display: flex;
}
.vr_txt1 {
font-size: 18px;
top: 289%;
right: 2%;
width: 95%;
}
.vr_txt2 {
font-size: 18px;
top: 294%;
left: 3%;
width: 60%;
}
.vr_txt3 {
font-size: 18px;
top: 294%;
left: 35%;
width: 64%;
}
.vr_txt4 {
font-size: 18px;
top: 298%;
left: 3%;
width: 80%;
}
.vr_txt5 {
font-size: 18px !important;
top: 303%;
left: 5.5%;
width: 85%;
}
.vr_txt6 {
font-size: 18px !important;
top: 324%;
left: 5%;
width: 85%;
}
.vr_txt7 {
font-size: 18px !important;
top: 345%;
left: 5%;
width: 85%;
}
.VR_section a {
top: 258%;
padding: 8px 20px 1px 20px !important;
font-size: 12px;
width: 20%;
left: -5% !important;
}
} */
/* @media (max-width: 768px) {
.hero_section {
padding: 40px;
position: relative;
display: block;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero_section h3 {
font-size: 26px;
text-align: center;
}
.hero_section a {
position: absolute;
top:270%;
right: 0%;
width: 28%;
padding: 5px 20px 25px;
font-size: 18px;
}
.hero-sec {
top: 152%;
left: 59.5%;
width: 40% !important;
font-size:16px;
}
.hero-sec2 {
top: 170%;
left: 60% ;
width: 38% !important;
font-size:16px;
}
.hero-sec3 {
top: 188%;
left: 61% ;
width: 30% !important;
font-size:16px;
}
.hero-sec4 {
top: 205%;
left: 61.5% ;
width: 37% !important;
font-size:16px;
}
.hero-sec5 {
top: 222%;
left: 62% ;
width: 38% !important;
font-size:16px;
}
.mainiMg {
position: absolute;
top: 70%;
left: -1.5%;
width: 60%;
height: 60vh;
}
.word1 {
position: absolute;
display: flex;
font-size: 28px;
top: 52%;
right: 5%;
}
.word2 {
display: flex;
font-size: 28px;
top: 82%;
right: 1%;
width: 43%;
}
.word3 {
display: flex;
font-size: 28px;
top: 134%;
right: 11%;
}
.word4 {
display: flex;
font-size: 28px;
top: 108%;
right: 8%;
}
.activate_section .imagg {
position: absolute;
top: 90% !important;
width: 50%;
right: 2%;
height: 56%;
}
.bookN {
position: relative;
left: -30%;
top: -10%;
padding: 15px 15px;
display: flex;
width: 35%;
align-items: center;
}
.activate_section h1 {
font-size: 30px;
top: 90%;
left: -2%;
font-weight: 600;
}
.casual_text2 {
font-size: 22px;
top: 95%;
left: 4%;
}
.casual_text3 {
font-size: 22px;
top: 95%;
left: 29%;
}
.casual_text4 {
font-size: 22px;
top: 100%;
left: 4%;
}
.casual_text5 {
font-size: 16px;
top: 109.5%;
width: 44%;
left: 4%;
}
.casual_text6 {
font-size: 16px;
top: 121%;
width: 44%;
left: 4%;
}
.casual_text7 {
font-size: 16px;
top: 136%;
width: 50%;
left: 4%;
}
.activate_section div:nth-child(2) a {
width: 55%;
padding: 8px 5px 8px 13px;
font-size: 20px;
}
.VR_section {
padding-bottom: 100% !important;
top: 1500%;
}
.iGv {
top: 170%;
}
.imagVr::after {
top: 170%;
width: 98%;
height: 63.6%;
}
.vr_txt1 {
font-size: 20px;
top: 180%;
right: 15%;
}
.vr_txt2 {
font-size: 20px;
top: 185%;
right: 38%;
}
.vr_txt3 {
font-size: 20px;
top: 185%;
right: 1%;
width: 35%;
}
.vr_txt4 {
font-size: 20px;
top: 190%;
right: 4%;
width: 48%;
}
.vr_txt5 {
font-size: 14px !important;
top: 193%;
right: 6.5%;
width: 45%;
line-height: 20px !important;
}
.vr_txt6 {
font-size: 14px !important;
top: 204%;
right: 6.5%;
line-height: 20px !important;
}
.vr_txt7 {
font-size: 14px !important;
top: 215%;
right: 2%;
width: 50%;
line-height: 20px !important;
}
.VR_section a {
top: 200%;
padding: 5px 5px 6px 20px;
width: 15%;
font-size: 18px;
}
} */
/* @media (max-width: 1024px) {
.hero_section {
padding: 80px;
position: relative;
display: block;
}
.hero_section a {
position: absolute;
top: 600%;
right: 0%;
width: 30%;
padding: 10px 40px 30px;
font-size: 18px;
}
.hero-sec {
top: 380% !important;
left: 59% !important;
width: 40% !important;
font-size: 28px;
}
.hero-sec2 {
top: 410%;
left: 59.5% !important;
width: 38% !important;
font-size: 28px;
}
.hero-sec3 {
top: 440%;
left: 60% !important;
width: 30% !important;
font-size: 28px;
}
.hero-sec4 {
top: 470%;
left: 60.5% !important;
width: 35% !important;
font-size: 28px;
}
.hero-sec5 {
top: 500%;
left: 61% !important;
width: 39% !important;
font-size: 28px;
}
.mainiMg {
position: absolute;
top: 240% !important;
left: -1%;
width: 60%;
height: 45vh;
}
.word1 {
display: flex;
font-size: 32px;
top: 230%;
right: 4.5%;
}
.word2 {
display: flex;
font-size: 32px;
top: 270%;
right: 4%;
}
.word3 {
display: flex;
font-size: 32px;
top: 350%;
right: 11%;
}
.word4 {
display: flex;
font-size: 32px;
top: 310%;
right: 8%;
}
.activate_section .imagg {
position: absolute;
top: 86% !important;
width: 50%;
right: 2%;
height: 56%;
}
.bookN {
position: relative;
left: -30%;
top: 240%;
padding: 18px 30px;
display: flex;
width: 25%;
align-items: center;
}
.activate_section h1 {
font-family: "Archivo Black", sans-serif;
font-size: 40px;
top: 85%;
left: -2%;
font-weight: 700;
}
.casual_text2 {
font-size: 28px;
top: 90%;
left: 4%;
}
.casual_text3 {
font-size: 28px;
top: 90%;
left: 28%;
}
.casual_text4 {
font-size: 28px;
top: 95%;
left: 4%;
}
.casual_text5 {
font-size: 22px;
top: 102%;
width: 40%;
left: 4%;
}
.casual_text6 {
font-size: 22px;
top: 115%;
width: 40%;
left: 4%;
}
.casual_text7 {
font-size: 22px;
top: 128%;
width: 50%;
left: 4%;
}
.VR_section {
padding-bottom: 300% !important;
}
.iGv {
top: 150%;
}
.imagVr::after {
top: 150%;
width: 98%;
height: 48%;
}
.VR_section .vr_last {
font-size: 28px;
display: flex;
}
.vr_txt1 {
font-size: 28px;
top: 157%;
right: 12%;
}
.vr_txt2 {
font-size: 28px;
top: 161%;
right: 36%;
}
.vr_txt3 {
font-size: 28px;
top: 161%;
right: 3%;
}
.vr_txt4 {
font-size: 28px;
top: 165%;
right: 1%;
width: 50%;
}
.vr_txt5 {
font-size: 22px !important;
top: 168%;
right: 5.5%;
}
.vr_txt6 {
font-size: 22px !important;
top: 178%;
right: 5.5%;
}
.vr_txt7 {
font-size: 22px !important;
top: 188%;
right: 0%;
width: 50%;
}
.VR_section a {
top: 175%;
padding: 5px 40px !important;
width: 10%;
}
} */
/* @media (max-width: 1440px) {
.hero_section a {
position: absolute;
top: 80%;
right: 0%;
width: 30%;
padding: 20px 40px 30px 30px;
font-size: 24px;
}
.hero-sec {
top: 44%;
left: 58% !important;
width: 40% !important;
font-size: 30px;
}
.hero-sec2 {
top: 50%;
left: 59.3% !important;
width: 38% !important;
font-size: 30px;
width: 40% !important;
}
.hero-sec3 {
top: 56%;
left: 60.5% !important;
width: 30% !important;
font-size: 30px;
}
.hero-sec4 {
top: 62%;
left: 61.5% !important;
width: 38% !important;
font-size: 30px;
}
.hero-sec5 {
top: 68%;
left: 62.5% !important;
width: 37% !important;
font-size: 30px;
}
.word1 {
display: flex;
font-size: 55px;
top: 12%;
right: 6.5%
}
.word2 {
display: flex;
font-size: 55px;
top: 20%;
right: 2.5%;
width: 43%;
}
.word3 {
display: flex;
font-size: 55px;
top: 36%;
right: 13%;
}
.word4 {
display: flex;
font-size: 55px;
top: 28%;
right: 9%;
}
.activate_section{
padding: 40px;
}
.activate_section .imagg {
top: 30%;
width: 110%;
height: 70vh;
right: 10%;
}
.bookN {
position: relative;
left: 60%;
top: -410%;
padding: 25px 30px;
display: flex;
width: 25%;
align-items: center;
font-size: 22px;
}
.activate_section h1 {
font-family: "Archivo Black", sans-serif;
font-size: 50px;
top: 120%;
left: -2%;
font-weight: 700;
}
.casual_text2 {
font-size: 34px;
top: 125%;
left: 4%;
}
.casual_text3 {
font-size: 34px;
top: 125%;
left: 25%;
}
.casual_text4 {
font-size: 34px;
top: 130%;
left: 4%;
}
.casual_text5 {
font-size: 28px;
top: 138%;
width: 38%;
left: 4%;
}
.casual_text6 {
font-size:28px;
top: 155%;
width: 40%;
left: 4%;
}
.casual_text7 {
font-size:28px;
top: 172%;
width: 40%;
left: 4%;
}
.activate_section div:nth-child(2) a {
width: 33%;
padding: 15px 5px 15px 30px;
font-size: 30px;
}
.VR_section {
padding: 20px;
}
.iGv {
top: 220%;
height: 78%;
}
.imagVr::after {
top: 220%;
width: 99%;
height: 78%;
}
.VR_section .vr_last {
font-size: 28px;
display: flex;
}
.vr_txt1 {
font-size: 36px;
top: 240%;
right: 14.2%;
}
.vr_txt2 {
font-size: 36px;
top: 245%;
right: 37%;
}
.vr_txt3 {
font-size: 36px;
top: 245%;
right: 4%;
}
.vr_txt4 {
font-size: 36px;
top: 250%;
right: 0%;
width: 50%;
}
.vr_txt5 {
font-size: 28px !important;
top: 255%;
right: 5%;
}
.vr_txt6 {
font-size: 28px !important;
top: 267%;
right: 5%;
}
.vr_txt7 {
font-size: 28px !important;
top: 280%;
right: 0%;
width: 50%;
}
.VR_section a {
top: 270%;
padding: 15px 10px 10px 40px;
width: 15%;
font-size: 28px;
}
} */
/* Arabic RTL */
:root {
--bck_color: #0d0d41;
--main-font: "Lalezar", sans-serif;
--title_font: "Archivo Black", "sans-serif";
--purple_col: #801880;
--background_buttons: linear-gradient(to right, var(--bck_color) 20%, #6a1a97, var(--purple_col));
--title_color: #be2fbe;
}
body {
margin: 0;
box-sizing: border-box;
width: 100%;
height: auto;
}
.ltr,
.rtl,
.activate_section2 {
box-sizing: border-box;
}
/* ====================================== */
/* ===============Hero================= */
.mainiMg1 {
width: 60%;
position: relative;
height: 90vh;
background: url('your-image.jpg') center/cover no-repeat;
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
/* clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%); */
border-top-right-radius: 20% 0%;
border-bottom-right-radius: 10% 0%;
overflow: hidden;
margin-left: 40px;
right: -35.5% !important;
object-position: 40% 70%;
}
.mainiMg1 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mainiMg1::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(128, 0, 128, 0.5), rgba(11, 11, 58, 0.9));
}
.hero_section2,
.activate_section2,
.VR_section2 {
display: grid;
align-items: start;
padding: 10px 50px 0 50px;
background-color: #0d0d41;
font-family: "Lalezar", sans-serif;
direction: rtl;
}
.ltr_size {
grid-template-columns: 48% 50%;
box-sizing: border-box;
column-gap: 10px;
padding: 80px 30px 40px;
justify-content: center;
align-items: center;
}
.ltr_size img {
width: 100%;
}
.ltr_size div:nth-child(1) {
margin-top: 100px;
}
.rtl_size {
grid-template-columns: 53% 45%;
box-sizing: border-box;
column-gap: 10px;
align-items: center;
padding: 80px 0px 0px;
}
#vr_btn {
padding: 10px 40px;
}
.hero_section2 {
color: white;
font-family: var(--noor_font);
text-transform: uppercase;
display: flex;
flex-direction: row-reverse;
}
.word21 {
display: flex;
position: absolute;
font-size: 50px;
width: 50%;
top: 14%;
left: 6%;
font-weight: 600;
/* margin-left: 30px; */
font-family: var(--noor_font);
}
.word21 .the {
color: #aa09b4;
margin-right: 15px;
font-family: var(--sora_font);
}
.word22 {
display: flex;
position: absolute;
font-size: 45px;
width: 40%;
top: 26%;
left: 3.5%;
font-weight: 600;
margin-left: 40px;
font-family: var(--noor_font);
}
.hero-sec21 {
display: flex;
position: absolute;
left: 9.5%;
top: 38%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--noor_font);
}
.hero-sec22 {
display: flex;
position: absolute;
left: 8.5%;
top: 44%;
font-size: 30px;
font-weight: 400;
font-family: var(--noor_font);
width: 35% !important;
}
.hero-sec23 {
display: flex;
position: absolute;
left: 7.8%;
top: 49.5%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--noor_font);
}
.hero-sec24 {
display: flex;
position: absolute;
left: 6.5%;
top: 57%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--noor_font);
}
.hero-sec25 {
display: flex;
position: absolute;
left: 5.5%;
top: 62%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--noor_font);
}
.hero_section2 a {
position: absolute;
top: 480px;
left: 0px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-radius: 0 50px 50px 0;
background: linear-gradient(90deg, #2f0c5a, #690b84, #a709b2);
padding: 15px 20px;
display: flex;
width: 30%;
height: 8%;
cursor: pointer;
outline: none;
text-align: start;
box-sizing: border-box;
font-size: 15px;
font-family: var(--noor_font);
flex-direction: row-reverse;
direction: ltr;
}
.hero_desc_res_ar
{
display: none;
}
.hero_desc_res_ar h3
{
font-size: 30px;
font-weight: 700;
font-family: var(--main-font);
width: 100%;
/* line-height: 32px; */
}
.hero_desc_res_ar p
{
font-size: 25px;
font-weight: 700;
font-family: var(--main-font);
width: 100%;
line-height: 32px;
}
.hero_desc_res_ar h3 span
{
color: #be2fbe;
}
@media(max-width:1800px)
{
.word21 {
top: 30%;
left: -2%;
}
.mainiMg1 {
height: 500px;
}
.word22 {
top: 40%;
left: 4%;
}
.hero-sec21 {
top: 47%;
left: 9%;
}
.hero-sec22 {
top: 52%;
left: 9%;
}
.hero-sec23 {
top: 57%;
left: 8.5%;
}
.hero-sec24 {
top: 62%;
left: 7.5%;
}
.hero-sec25 {
top: 67%;
left: 6.5%;
}
.hero_section2 a {
top: 580px;
width: 32%;
}
}
@media(max-width:1500px)
{
.word21 {
top: 38%;
left: 5%;
}
.word22 {
top: 50%;
left: 3%;
}
.hero-sec21 {
top: 58%;
left: 8%;
}
.hero-sec22 {
top: 63%;
left: 8%;
}
.hero-sec23 {
top: 68%;
left: 7.5%;
}
.hero-sec24 {
top: 73%;
left: 7%;
}
.hero-sec25 {
top: 78%;
left: 6%;
}
.hero_section2 a {
top: 500px;
}
}
@media(max-width:1450px)
{
.hero_section2 a
{
top: 580px;
}
.mainiMg1
{
height: auto;
}
.word21 {
top: 30%;
left: -2%;
}
.word22 {
top: 39%;
left: 3%;
}
.hero-sec21 {
top: 47%;
left: 8%;
}
.hero-sec22 {
top: 52%;
left: 8%;
}
.hero-sec23 {
top: 57%;
left: 7%;
}
.hero-sec24 {
top: 62%;
left: 6%;
}
.hero-sec25 {
top: 72%;
left: 5%;
}
.hero_section2 a {
top: 590px;
width: 32%;
}
}
@media(max-width:1430px)
{
/* .hero_section2
{
background: red;
} */
.hero_section2 a
{
top: 580px;
}
.mainiMg1
{
height: auto;
}
.word21 {
top: 35%;
left: -2%;
}
.word22 {
top: 45%;
left: 3%;
}
.hero-sec21 {
top: 53%;
left: 8%;
font-size: 28px;
}
.hero-sec22 {
top: 60%;
left: 8%;
width: 100%;
font-size: 28px;
}
.hero-sec23 {
top: 66%;
left: 7%;
width: 100%;
font-size: 28px;
}
.hero-sec24 {
top: 72%;
left: 6%;
font-size: 28px;
}
.hero-sec25 {
top: 79%;
font-size: 28px;
left: 5%;
}
.hero_section2 a {
top: 590px;
width: 32%;
/* font-size: 28px; */
}
}
@media(max-width:1300px)
{
.word21 {
top: 35%;
left: -2%;
font-size: 45px;
}
.word22 {
top: 45%;
left: 3%;
font-size: 40px;
}
.hero-sec21 {
top: 54%;
font-size: 26px;
}
.hero-sec22 {
top: 60%;
font-size: 26px;
}
.hero-sec23 {
top: 66%;
font-size: 26px;
}
.hero-sec24 {
top: 72%;
font-size: 25px;
}
.hero-sec25 {
font-size: 25px;
top: 78%;
}
.hero_section2 a {
top: 550px;
}
}
@media(max-width:1030px)
{
.mainiMg1
{
height: 450px;
}
.word21 {
top: 34%;
left: -2%;
width: 50%;
font-size: 35px;
}
.word22 {
top: 43%;
left: 2%;
font-size: 30px;
}
.hero-sec21 {
top: 51%;
width: 40% !important;
left: 5%;
font-size: 21px;
}
.hero-sec22 {
top: 58%;
left: 9%;
font-size: 21px;
}
.hero-sec23 {
top: 65%;
font-size: 21px;
left: 8%;
}
.hero-sec24 {
top: 72%;
width: 40% !important;
left: 2%;
font-size: 21px;
}
.hero-sec25 {
top: 77%;
left: 5%;
font-size: 21px;
}
.hero_section2 a {
top: 587px;
width: 38%;
}
}
@media(max-width:800px)
{
.mainiMg1 img
{
height: 300px;
}
.hero_section2 a
{
top: unset;
width: 100%;
position: relative;
font-size: 20px;
}
.hero_desc_ar{
display: none;
}
.hero_desc_res_ar
{
display: block;
}
.mainiMg1
{
right: unset !important;
margin: 0;
width: 100%;
height: 300px;
}
.hero_section2
{
display: grid;
grid-template-columns: 80%;
justify-content: center;
}
}
@media(max-width:500px)
{
.hero_section2
{
grid-template-columns: 100%;
padding: 50px 5% 0;
}
.hero_desc_res_ar h3
{
font-size: 25px;
/* line-height: 32px; */
}
.hero_section2 a
{
padding: 10px;
}
.hero_desc_res_ar p
{
font-size: 18px;
font-weight: normal;
}
.mainiMg1
{
clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%);
border-top-right-radius: 0% 0%;
border-bottom-right-radius: 0% 0%;
}
}
@media(max-width:400px)
{
.hero_desc_res_ar h3
{
font-size: 20px;
line-height: 32px;
/* line-height: 32px; */
}
.hero_desc_res_ar p
{
font-size: 16px;
}
.hero_section2
{
grid-template-columns: 100%;
padding: 50px 3% 0;
}
}
/* ====================================== */
/* ===============Activate================= */
.bookN2 {
background: linear-gradient(to right, var(--purple_col) 20%, #6e2698, var(--bck_color)) !important;
color: white;
font-family: var(--title_font) !important;
padding: 8px 5px 8px 60px !important;
border-radius: 25px !important;
outline: none !important;
border: none !important;
cursor: pointer !important;
font-weight: 700 !important;
font-size: 18px !important;
margin-top: 100px !important;
margin-left: 10% !important;
display: inline-block !important;
position: absolute !important;
width: 10% !important;
height: 4% !important;
left: 35% !important;
top: 100% !important;
direction: ltr !important;
}
.imagg1 {
width: 100%;
position: relative;
height: 75vh;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
border-top-right-radius: 0 100%;
border-bottom-right-radius: 100% 200%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transform: translate(-600px, -550px) !important;
}
.imagg1 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 70%;
}
.imagg1::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(11, 11, 58, 0.6), rgba(129, 33, 132, 0.5));
}
.casualt22 {
display: flex;
font-family: "Lalezar", sans-serif;
}
.casual_text22 {
position: absolute;
top: 143%;
left: 73%;
font-weight: 400;
font-size: 45px;
color: white;
}
.casual_text23 {
position: absolute;
top: 143%;
left: 54%;
color: #00ff00;
font-weight: 400;
font-size: 45px;
}
.casual_text24 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 160% !important;
left: 45%;
width: 37%;
}
.casual_text25 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 166% !important;
left: 41%;
width: 40%;
}
.casual_text26 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 172%;
left: 38%;
width: 37%;
}
.casual_text27 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 177.5%;
left: 41%;
width: 40%;
}
.casual_text28 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 183%;
left: 42.5%;
width: 37%;
}
.casual_text29 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 189%;
left: 40%;
width: 40%;
}
.casual_text31 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 194%;
left: 15%;
width: 40%;
}
.activate_section2 {
padding: 200px 0px 30px 0;
}
.activate_section2 div:nth-child(1) a {
position: absolute;
bottom: 30px;
z-index: 1;
left: 10%;
background: var(--background_buttons);
color: white;
font-family: var(--main-font);
padding: 10px 35px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 21px;
}
.activate_section2 h1 {
color: var(--title_color);
width: 80%;
margin-left: 4%;
font-weight: 800;
font-family: var(--title_font);
font-size: 45px;
margin-top: 0px !important;
position: absolute;
top: 135%;
right: 6%;
}
/* =================================*/
/* =============VR==================*/
.VR_section2 {
padding: 400px;
direction: rtl;
}
.iGv2 {
width: 70% !important;
height: 90%;
position: absolute;
top: 220%;
left: 28%;
background-color: none;
border: 20px bold black;
border-right: 20px;
}
.imagVr2 {
width: 100%;
height: 80vh;
overflow: hidden;
}
.imagVr2::after {
content: "";
position: absolute;
top: 220%;
left: 0;
width: 98%;
height: 90%;
background: linear-gradient(to right, var(--bck_color) 20%, #6a1a97);
z-index: 1;
opacity: 0.7;
}
.vr_txt12 {
position: absolute;
font-size: 42px;
font-weight: 600;
color: white;
top: 237%;
left: 35%;
z-index: 1;
}
.vr_last2 {
display: flex;
}
.vr_txt23 {
position: absolute;
font-size: 42px;
font-weight: 600;
color: #00ff00;
top: 237%;
left: 2%;
width: 32%;
z-index: 1;
}
.vr_txt24 {
position: absolute;
font-size: 42px;
font-weight: 600;
color: #00ff00;
top: 245%;
left: 0%;
width: 45%;
z-index: 1;
}
.vr_txt25 {
position: absolute;
top: 260%;
left: 7%;
width: 38%;
color: white;
font-size: 30px;
font-weight: 500;
line-height: 30px;
text-transform: uppercase;
font-family: var(--main-font);
z-index: 1;
}
.vr_txt26 {
position: absolute;
top: 275%;
left: 7%;
width: 38%;
color: white;
font-size: 30px;
font-weight: 500;
line-height: 30px;
text-transform: uppercase;
font-family: var(--main-font);
z-index: 1;
}
.VR_section2 a {
background: var(--background_buttons);
color: white;
font-family: var(--title_font);
padding: 8px 70px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 20px;
margin-top: 100px;
margin-left: 10%;
display: inline-block;
position: absolute;
/* width: 8%; */
height: 5%;
left: 70% !important;
top: 277%;
z-index: 1;
}
/* @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