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 @@
<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=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>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header id="header">
......@@ -31,11 +34,11 @@
</div>
<i class="fa-solid fa-bars list_icon" id="open_list"></i>
<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 class="en_lang1">EN</a>
<a class="ar_lang1">AR</a>
<a class="ar_lang1 colored">AR</a>
</div>
<p class="date">
<span id="from">from</span>
......@@ -48,52 +51,113 @@
<span>KUWAIT INTERNATIONAL</span>
<span> FAIR GROUND</span>
</p>
<p class="place hidden1" id="place_ar">
<span>القاعة ٨ - </span>
<span>أرض المعارض</span>
<span> الدولية بالكويت</span>
</p>
</div>
<div class="right_side">
<a id="ticketing_btn">ticketing</a>
<a>
<a id="ticketing_bnt_en" class="ticketing_bnt_en hidden1">ticketing</a>
<a id="ticketing_ar" class=" ticketing_ar" >حجز التذاكر</a>
<a class="lines">
<span></span>
<span></span>
<span></span>
</a>
<a class="en_lang">EN</a>
<a class="ar_lang">AR</a>
<a class="ar_lang colored">AR</a>
</div>
</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>
<!-- ==================== 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">
<span>
LOREM IPSUM
</span>
<span> DOLOR SIT AMET,</span>
<span>CONSECTETUER</span>
<span>ADIPISCING ELIT,</span>
<span>
SED DIAM .
</span>
<div class="word1">
<span>WELCOME TO</span>
<span class="the">THE</span>
</div>
<div class="word2">
<span class="base">BASE</span>
<span> — WHERE THE</span>
</div>
<span class="word4">GAME COMES</span>
<span class="word3">ALIVE!</span>
</h3>
<h3 class="hero_title_res " id="hero_title_res">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</h3>
<h3 class="hidden1 hero_title_ar" id="hero_title_ar">
مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية.
<p id="hero_desc" class="hero-sec">A FESTIVAL BUILT FOR GAMERS, </p>
<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>
<p id="hero_desc">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="book_now">book now</a>
<p>
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 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 mySwiper">
<div class="swiper-wrapper">
......@@ -110,10 +174,9 @@
<div class="swiper-pagination"> next</div>
</div>
</div>
</div>
<div class="e_sport" id="e_sport">
<h1 id="esports">E-SPORTS TOURNAMENTS</h1>
<h1 id="esports_title">بطولات الرياضات الالكترونية</h1>
<div>
<div>
<img class="abs_img" src="/images/game2.webp">
......@@ -126,253 +189,533 @@
<div>
<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 class="button_parent">
<a id="e_sport_btn">book now</a>
<a id="e_sport_btn">احجز الان</a>
</div>
</div>
<div class="activate_section ltr_size" id="activate_section">
<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>
<!-- =============== casual -->
<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 >
<img src="./images/shape_rev.png">
<a id="pc_btn">PC - PS5 ZONE</a>
<a>PC - PS5 ZONE</a>
</div>
<div class="text">
<h1>CASUAL ACTIVITIES</h1>
<h1> هنا يبدأ <span>المرح الحقيقى </span></h1>
<p>متاحة للجميع: أجهزة بلايستيشن 10
وجهاز كمبيوتر جيمينج .20 استمتع
ّ بألعاب اللعب الحر أكثر من مرة
ادخل تحديات سريعة، أو خض منافسات
ّ ية، أو جرب ألعابك المفضلة بدون قيود
ود
ّ
منطقة تجمع الحماس والراحة، حيث اللعب
متعة خالصة</p>
</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 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 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 >
<img src="./images/shape.png">
<a id="card_games_btn">CARD / BOARD GAMES</a>
والمستقبل
ّ متطورة، استعد لمغامرات VR مع 6 محطات
ستعيشها بكل حواسك — تجربة تنقلك من
المشاهدة إلى قلب الحدث</p>
</div>
<div class="main_img">
<img src="./images/vr1.png">
<a>VR ZONE</a>
</div>
</div>
<div id="card_info" class="card_info">
<p id="card_txt1"><span>LOREM IPSUM DOLOR SIT AMET,</span>
<span>CONSECTETUER ADIPISCING ELIT , SED</span>
<span>DIAM .</span></p>
<p id="card_txt2"><span>LOREM IPSUM DOLOR SIT AMET,</span>
<span>CONSECTETUER ADIPISCING ELIT , SED</span>
<span>DIAM .</span></p>
<p id="card_txt3"><span>LOREM IPSUM DOLOR SIT AMET ,</span>
<span>CONSECTETUER ADIPISCING ELIT ,</span>
<span> SED DIAM .</span></p>
<p id="card_txt4"><span>LOREM IPSUM DOLOR SIT AMET ,</span>
<span>CONSECTETUER ADIPISCING ELIT , </span>
<span>SED DIAM .</span></p>
</div>
<!-- ========VR_EN -->
<div class="Vr_zone_ar hidden1" id="Vr_zone_en">
<div class="Vr_zone_ar_cont">
<div class="main_img">
<img src="./images/vr.png">
<a>VR ZONE</a>
</div>
<div class="text">
<h1> STEP INTO A WHOLE NEW
WORLD — <span>UNLIKE ANYTHING
YOU’VE EXPERIENCED BEFORE.</span></h1>
<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 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 id="card_info_ar" class="hidden1">
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
</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 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>
<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>
<p id="mob_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="mob_btn">MOBILE AREA</a>
جزءا من عالمها</span></h1>
<p>ّ في منطقة الكوسبلاي، يتحول الإبداع
ّ إلى عرض حي من الأزياء، الألوان، والخيال
شارك، التقط الصور، وكن أنت البطل
الذي يعشقه الجميع</p>
</div>
<div >
<img src="./images/shape.png">
<div class="main_img">
<div class="img_parent">
<img src="./images/cosplay .jpg"/>
</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 class="activate_section area ltr_size" id="area" >
<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>
<a>COSPLAY AREA</a>
</div>
<div >
<img src="./images/shape_rev.png">
<a id="cosplay_area_btn">COSPLAT AREA</a>
</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 class="VR_section rtl_size">
<div >
<img src="./images/shape.png">
<div class="vr-con">
<h2 class="vr-title1 arbt">
تجربة جديدة <span class="neon">في كل زاوية</span>
</h2>
<div class="vr-p arb">
من سباقات السيارات إلى المغامرات الغامرة, ستجد هنا ألعاب الواقع الافتراضي التي تختبر مهارتك وتلهب حماسك كل لحظة في هذه المنطقة مغامرة تستحق أن تعيشها
</div>
<div>
<p id="vr2_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="vr2_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="vr2_btn">VR ZONE</a>
<button class="vr-btn1">CAR simulator</button>
</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">
<h1>
<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>
<img src="./images/ticketing.png" />
</div>
<!-- <div class="days_grid">
<div class="days">
<div>
<h1 id="pass3_title">3 DAY PASS - REGULAR</h1>
<h1 id="pass1_title">1 DAY PASS _ REGULAR</h1>
<span>$$.$$</span>
</div>
<div class="text">
<div>
<p id="pass3_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass3_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p class="pass1_p1 perfect">PERFECT FOR GAMERS WHO
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>
<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 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 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>
<h1 id="pass2_title">2 DAY PASS - REGULAR</h1>
<span>$$.$$</span>
<h1 id="vip_title">VIP TICKET</h1>
<h1>$$.$$</h1>
</div>
<div class="text">
<div>
<p id="pass2_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass2_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass2_p3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<a id="book_pass2_btn">BOOK YOUR PASS</a>
<p class="vip_p1 vipp">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>
<div>
<a id="book_vip_btn">BOOK YOUR PASS</a>
</div>
</div>
</div> -->
</div>
<div class="days">
<div>
<h1 id="pass1_title">1 DAY PASS - REGULAR</h1>
<span>$$.$$</span>
<div class="ticketing_section ticketing_section_ar " id="ticketing_section_ar">
<div class="title" id="ticketing1">
<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 class="text">
<div>
<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 class="first-p">على مدار الأيام الثلاثة — البطولات، BASE THE احصل على دخول كامل إلى
والعروض، والكوسبلاي، ومنطقة الواقع الافتراضي، والآركيد، وجميع مناطق
الألعاب. استمتع بدخول غير محدود إلى جميع المناطق الترفيهية والتنافسية
وأنشطة المسرح الرئيسي وفعاليات المجتمع طوال المهرجان
</p>
</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 class="text">
<p class="first-p">مثالي لعشاق الألعاب الذين يرغبون
في خوض التجربة بيوم واحد مكثف.
ّ
يوما ً كاملا تستكشف فيه جميع
ً
ِ اقض
البطولات، والواقع :BASE THE أركان
الافتراضي، وألعاب الطاولة، وعروض
الكوسبلاي، والمزيد — كل ذلك
بتذكرة واحدة
</p>
</div>
<button class="btn2_type_s">احجز الان</button>
</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>$$.$$</h1>
</div>
<div class="text">
<div>
<p id="vip_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="vip_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p class="vip_p1 vipar">
حصري يتضمن اولوية مثالية لمن يبحث عن تجربة لمن يبحث عن تجربة استثنائية و شامله استمتع ب بدخول الدخول، ومقاعد محجوزة في المسرح الرئيسي، وفرص لقاء خلف الكواليس، وباقة منتجات مميزة. ثلاثة أيام من الألعاب، والرفاهية، والوصول إلى أعلى مستويات التجربة في the base.
</p>
</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">BOOK YOUR PASS</a>
<a id="book_vip_btn">احجز الآن</a>
</div>
</div>
</div>
</div> -->
<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>
</div>
</div>
<div class="oragnize" id="organize">
<h1 id="organized">ORGANIZED BY</h1>
<div>
<img src="./images/logo4.png">
<img src="./images/logo1.jpg">
<img src="./images/logo2.jpg">
<img src="./images/logo3.jpg">
<img src="./images/website landing page-08.png">
<img src="./images/website landing page-07.png">
<img src="./images/website landing page-06.png">
<img src="./images/website landing page-05.png">
</div>
</div>
<div class="letters">
<h1 id="newsletter">NEWS LETTER</h1>
<div>
<div>
<div class="image">
<img src="./images/logo.png">
</div>
<div>
<div class="info">
<p id="newsletter_text">RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL</p>
<p>
<span id="email_label">EMAIL: </span>
<span id="email_value"></span>
</p>
<p>
<span id="phone_label">PHONE: </span>
<span id="phone_value"></span>
</p>
<form>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email"/>
</div>
<div>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"/>
</div>
<button type="submit">send message</button>
</form>
</div>
</div>
......
index.js
View file @ 94d727c1
......@@ -40,231 +40,94 @@
// =========================
// Translation
let header_bar=document.getElementById("header")
let hero=document.getElementById("hero")
let ticketing_sec=document.getElementById("ticketing_section")
let ticketing_ar=document.getElementById("ticketing_title_ar")
let ticketing1=document.getElementById("ticketing1")
let newsletter_text=document.getElementById("newsletter_text")
let e_sport=document.getElementById("e_sport")
let activate_section=document.getElementById("activate_section")
let card_games=document.getElementById("card_games")
let area=document.getElementById("area")
let organize=document.getElementById("organize")
let hero_title=document.getElementById("hero_title")
let hero_title_ar=document.getElementById("hero_title_ar")
let place_ar=document.getElementById("place_ar")
let place=document.getElementById("place")
let card_info=document.getElementById("card_info")
let card_info_ar=document.getElementById("card_info_ar")
let card_info_res=document.getElementById("card_info_res")
let hero_title_res=document.getElementById("hero_title_res")
const translations = {
en: {
logo_the: "The",
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",
let card_game_Ar=document.getElementById("card_game_Ar")
let card_game_en=document.getElementById("card_game_en")
let mobile_Ar=document.getElementById("mobile_Ar")
let mobile_en=document.getElementById("mobile_en")
let cosplay_Ar=document.getElementById("cosplay_Ar")
let cosplay_en=document.getElementById("cosplay_en")
let ticketing_btn_en=document.getElementById("ticketing_bnt_en")
let ticketing_ar=document.getElementById("ticketing_ar")
let ticketing_btn1=document.getElementById("ticketing_btn1")
let ticketing_section_ar=document.getElementById("ticketing_section_ar")
let ticketing_section=document.getElementById("ticketing_section")
let vr_section=document.getElementById("vr_section_p")
let vr_section_en=document.getElementById("vr_section_en_p")
let casual_av_ar=document.getElementById("casual_av_ar")
let casual_en=document.getElementById("casual_en")
let hero_en=document.getElementById("hero_en")
let hero_ar=document.getElementById("hero_ar")
let Vr_zone_en=document.getElementById("Vr_zone_en")
let Vr_zone_AR=document.getElementById("Vr_zone_AR")
let playable_games_title=document.getElementById("playable_games_title")
let esports_title=document.getElementById("esports_title")
let e_sport_btn=document.getElementById("e_sport_btn")
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) {
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";
document.getElementById("play_games").classList.add("play_games_ar")
header_bar.classList.add("header_ar")
ticketing_sec.classList.add("ticketing_sec_ar")
hero.classList.add("hero_ar")
ticketing1.classList.add("hidden1")
if(lang === 'ar') {
card_game_en.classList.add("hidden1")
card_game_Ar.classList.remove("hidden1")
mobile_en.classList.add("hidden1")
mobile_Ar.classList.remove("hidden1")
cosplay_en.classList.add("hidden1")
cosplay_Ar.classList.remove("hidden1")
ticketing_btn_en.classList.add("hidden1")
ticketing_ar.classList.remove("hidden1")
newsletter_text.classList.add("newsletter_text_ar")
e_sport.classList.add("e_sport_ar")
organize.classList.add("e_sport_ar")
activate_section.classList.add("padd")
card_games.classList.add("card_ar")
area.classList.add("padd")
document.getElementById("arear1").classList.add("no_margin")
document.getElementById("arear12").classList.add("no_margin")
console.log(hero_title_ar)
hero_title_ar.classList.remove("hidden1")
hero_title.classList.add("hidden1")
hero_title_res.classList.add("hidden1")
card_info_ar.classList.remove("hidden1")
card_info.classList.add("hidden1")
card_info_res.classList.add("hidden1")
place_ar.classList.remove("hidden1")
place.classList.add("hidden1")
ticketing_section_ar.classList.remove("hidden1")
ticketing_section.classList.add("hidden1")
vr_section_en.classList.add("hidden1")
vr_section.classList.remove("hidden1")
casual_av_ar.classList.remove("hidden1")
casual_en.classList.add("hidden1")
hero_ar.classList.remove("hidden1")
hero_en.classList.add("hidden1")
Vr_zone_AR.classList.remove("hidden1")
Vr_zone_en.classList.add("hidden1")
ticketing_btn1.innerHTML=" ticketing"
playable_games_title.innerHTML="الألعاب المتاحه"
esports_title.innerHTML=" بطولات الرياضات الالكترونية"
e_sport_btn.innerHTML="احجز الان"
document.querySelector(".en_lang").classList.remove("colored")
document.querySelector(".en_lang1").classList.remove("colored")
document.querySelector(".ar_lang").classList.add("colored")
document.querySelector(".ar_lang1").classList.add("colored")
} else {
document.body.style.direction = "ltr";
document.getElementById("play_games").direction = "ltr";
document.body.style.textAlign = "left";
header_bar.classList.remove("header_ar")
ticketing_sec.classList.remove("ticketing_sec_ar")
hero.classList.remove("hero_ar")
ticketing1.classList.remove("hidden1")
card_game_en.classList.remove("hidden1")
card_game_Ar.classList.add("hidden1")
mobile_en.classList.remove("hidden1")
mobile_Ar.classList.add("hidden1")
cosplay_en.classList.remove("hidden1")
cosplay_Ar.classList.add("hidden1")
ticketing_btn_en.classList.remove("hidden1")
ticketing_ar.classList.add("hidden1")
newsletter_text.classList.remove("newsletter_text_ar")
e_sport.classList.remove("e_sport_ar")
organize.classList.remove("e_sport_ar")
activate_section.classList.remove("padd")
card_games.classList.remove("card_ar")
area.classList.remove("padd")
hero_title.classList.remove("hidden1")
hero_title_res.classList.remove("hidden1")
place_ar.classList.add("hidden1")
place.classList.remove("hidden1")
card_info_ar.classList.add("hidden1")
card_info.classList.remove("hidden1")
card_info_res.classList.remove("hidden1")
hero_title_ar.classList.add("hidden1")
document.getElementById("arear1").classList.remove("no_margin")
document.getElementById("arear12").classList.remove("no_margin")
ticketing_section_ar.classList.add("hidden1")
ticketing_section.classList.remove("hidden1")
vr_section_en.classList.remove("hidden1")
vr_section.classList.add("hidden1")
casual_av_ar.classList.add("hidden1")
casual_en.classList.remove("hidden1")
hero_ar.classList.add("hidden1")
hero_en.classList.remove("hidden1")
Vr_zone_AR.classList.add("hidden1")
Vr_zone_en.classList.remove("hidden1")
playable_games_title.classList.add("En_font")
esports_title.classList.add("En_font")
e_sport_btn.classList.add("En_font")
ticketing_btn1.innerHTML="حجز التذاكر"
playable_games_title.innerHTML=" PLAYABLE GAMES"
esports_title.innerHTML=" E-SPORTS TOURNAMENTS"
e_sport_btn.innerHTML="BOOK NOW"
document.querySelector(".en_lang").classList.add("colored")
document.querySelector(".en_lang1").classList.add("colored")
document.querySelector(".ar_lang").classList.remove("colored")
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