Skip to content

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

edit imgs

parent cbe40d75
Hide whitespace changes
Inline Side-by-side
Showing with 603 additions and 163 deletions
index.html
View file @ abf3a2c8
...@@ -11,12 +11,15 @@ ...@@ -11,12 +11,15 @@
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/> />
<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">
<title>THE BASE</title> <title>THE BASE</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header id="header"> <header id="header">
<div class="left_side"> <div class="left_side">
<div class="logo_cont"> <div class="logo_cont">
<img src="./images/logo.png" alt="Logo"> <img src="./images/logo.png" alt="Logo">
...@@ -27,7 +30,7 @@ ...@@ -27,7 +30,7 @@
</p> </p>
</div> </div>
<i class="fa-solid fa-bars list_icon" id="open_list"></i> <i class="fa-solid fa-bars list_icon" id="open_list"></i>
<div class="right_side_h hidden"> <div class="right_side_h hidden hidden1">
<a id="ticketing_btn1">ticketing</a> <a id="ticketing_btn1">ticketing</a>
<a><i class="fa-solid fa-bars"></i></a> <a><i class="fa-solid fa-bars"></i></a>
...@@ -45,6 +48,11 @@ ...@@ -45,6 +48,11 @@
<span>KUWAIT INTERNATIONAL</span> <span>KUWAIT INTERNATIONAL</span>
<span> FAIR GROUND</span> <span> FAIR GROUND</span>
</p> </p>
<p class="place hidden1" id="place_ar">
<span>القاعة ٨ - </span>
<span>أرض المعارض</span>
<span> الدولية بالكويت</span>
</p>
</div> </div>
<div class="right_side"> <div class="right_side">
<a id="ticketing_btn">ticketing</a> <a id="ticketing_btn">ticketing</a>
...@@ -65,7 +73,20 @@ ...@@ -65,7 +73,20 @@
<img src="./images/shape.png"> <img src="./images/shape.png">
</div> </div>
<div> <div>
<h3 id="hero_title">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</h3> <h3 id="hero_title">
<span>
LOREM IPSUM
</span>
<span> DOLOR SIT AMET,</span>
<span>CONSECTETUER</span>
<span>ADIPISCING ELIT,</span>
<span>
SED DIAM .
</span>
</h3>
<h3 class="hidden1" id="hero_title_ar">
مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية.
</h3>
<p id="hero_desc">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <p id="hero_desc">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="book_now">book now</a> <a id="book_now">book now</a>
</div> </div>
...@@ -75,14 +96,14 @@ ...@@ -75,14 +96,14 @@
<div class="swiper_parent"> <div class="swiper_parent">
<div class="swiper mySwiper"> <div class="swiper mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div> <div class="swiper-slide"><img src="/images/game1.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div> <div class="swiper-slide"><img src="/images/game2.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div> <div class="swiper-slide"><img src="/images/game3.png" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div> <div class="swiper-slide"><img src="/images/game3.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div> <div class="swiper-slide"><img src="/images/game4.png" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div> <div class="swiper-slide"><img src="/images/game5.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div> <div class="swiper-slide"><img src="/images/game6.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div> <div class="swiper-slide"><img src="/images/game6.webp" alt=""></div>
</div> </div>
<div class="swiper-pagination"> next</div> <div class="swiper-pagination"> next</div>
...@@ -94,21 +115,25 @@ ...@@ -94,21 +115,25 @@
<h1 id="esports">E-SPORTS TOURNAMENTS</h1> <h1 id="esports">E-SPORTS TOURNAMENTS</h1>
<div> <div>
<div> <div>
<img src ="images/avatar1.png"> <img class="abs_img" src="/images/game2.webp">
<img src ="images/valorant2 (1).webp">
</div> </div>
<div> <div>
<img src ="images/avatar1.png"> <img class="abs_img1" src="/images/game3.png">
<img src ="images/league2_edit.webp">
</div> </div>
<div> <div>
<img src ="images/avatar1.png"> <img class="abs_img2" src="/images/fifaCard_.png">
<img src ="images/Lamin.png" class="lamin_img">
</div> </div>
</div> </div>
<div class="button_parent"> <div class="button_parent">
<a id="e_sport_btn">book now</a> <a id="e_sport_btn">book now</a>
</div> </div>
</div> </div>
<div class="activate_section ltr_size"> <div class="activate_section ltr_size" id="activate_section">
<div> <div id="arear1">
<h1 id="casual">CASUAL ACTIVITIES</h1> <h1 id="casual">CASUAL ACTIVITIES</h1>
<p id="casual_text2">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <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_text3">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
...@@ -122,6 +147,8 @@ ...@@ -122,6 +147,8 @@
</div> </div>
</div> </div>
<div class="VR_section rtl_size"> <div class="VR_section rtl_size">
<div > <div >
<img src="./images/shape.png"> <img src="./images/shape.png">
...@@ -133,19 +160,35 @@ ...@@ -133,19 +160,35 @@
<a id="vr_btn">VR ZONE</a> <a id="vr_btn">VR ZONE</a>
</div> </div>
</div> </div>
<div class="CardGame_section rtl_size">
<div class="CardGame_section rtl_size" id="card_games">
<div > <div >
<img src="./images/shape.png"> <img src="./images/shape.png">
<a id="card_games_btn">CARD / BOARD GAMES</a> <a id="card_games_btn">CARD / BOARD GAMES</a>
</div> </div>
<div> <div id="card_info">
<p id="card_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <p id="card_txt1"><span>LOREM IPSUM DOLOR SIT AMET,</span>
<p id="card_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <span>CONSECTETUER ADIPISCING ELIT , SED</span>
<p id="card_txt3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <span>DIAM .</span></p>
<p id="card_txt4">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</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>
<div id="card_info_ar" class="hidden1">
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
</div> </div>
</div> </div>
<div class="VR_section mobile ltr_size"> <div class="VR_section mobile ltr_size">
<div> <div>
...@@ -158,12 +201,13 @@ ...@@ -158,12 +201,13 @@
</div> </div>
</div> </div>
<div class="activate_section area ltr_size">
<div> <div class="activate_section area ltr_size" id="area" >
<p id="area_txt1">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <div id="arear12">
<p id="area_txt2">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p> <p id="area_txt1">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_txt2">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> <p id="area_txt3">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt4">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
</div> </div>
<div > <div >
...@@ -172,7 +216,7 @@ ...@@ -172,7 +216,7 @@
</div> </div>
</div> </div>
<div class="VR_section rtl_size"> <div class="VR_section rtl_size">
<div > <div >
<img src="./images/shape.png"> <img src="./images/shape.png">
</div> </div>
...@@ -183,7 +227,7 @@ ...@@ -183,7 +227,7 @@
<a id="vr2_btn">VR ZONE</a> <a id="vr2_btn">VR ZONE</a>
</div> </div>
</div> </div>
<div class="ticketing_section" id="ticketing_section"> <div class="ticketing_section" id="ticketing_section">
<div class="title" id="ticketing1"> <div class="title" id="ticketing1">
<h1> <h1>
<span id="">T</span> <span id="">T</span>
...@@ -222,7 +266,7 @@ ...@@ -222,7 +266,7 @@
<!-- <span id="ticketing2">G</span> --> <!-- <span id="ticketing2">G</span> -->
</h1> </h1>
</div> </div>
<div id="ticketing_title_ar" class=" title hidden"> <div id="ticketing_title_ar" class=" title hidden1">
<h1>احجز تذكرتك</h1> <h1>احجز تذكرتك</h1>
</div> </div>
<div class="days"> <div class="days">
...@@ -253,6 +297,7 @@ ...@@ -253,6 +297,7 @@
<div> <div>
<p id="pass2_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p> <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_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> <a id="book_pass2_btn">BOOK YOUR PASS</a>
</div> </div>
</div> </div>
...@@ -276,7 +321,7 @@ ...@@ -276,7 +321,7 @@
<div class="days last"> <div class="days last">
<div> <div>
<h1 id="vip_title">VIP TICKET</h1> <h1 id="vip_title">VIP TICKET</h1>
<span>$$.$$</span> <h1>$$.$$</h1>
</div> </div>
<div class="text"> <div class="text">
<div> <div>
...@@ -294,15 +339,17 @@ ...@@ -294,15 +339,17 @@
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div> </div>
</div> </div>
<div class="oragnize"> <div class="oragnize" id="organize">
<h1 id="organized">ORGANIZED BY</h1> <h1 id="organized">ORGANIZED BY</h1>
<div> <div>
<img src="./images/organizer.png"> <img src="./images/logo4.png">
<img src="./images/organizer.png"> <img src="./images/logo1.jpg">
<img src="./images/organizer.png"> <img src="./images/logo2.jpg">
<img src="./images/organizer.png"> <img src="./images/logo3.jpg">
</div> </div>
</div> </div>
<div class="letters"> <div class="letters">
<h1 id="newsletter">NEWS LETTER</h1> <h1 id="newsletter">NEWS LETTER</h1>
<div> <div>
...@@ -323,7 +370,7 @@ ...@@ -323,7 +370,7 @@
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
......
index.js
View file @ abf3a2c8
const swiper = new Swiper(".mySwiper", { const swiper = new Swiper(".mySwiper", {
slidesPerView: 7, slidesPerView: 7,
spaceBetween: 20, spaceBetween: 30,
loop: false, loop: false,
pagination: { pagination: {
el: ".swiper-pagination", el: ".swiper-pagination",
...@@ -47,6 +47,16 @@ ...@@ -47,6 +47,16 @@
let ticketing1=document.getElementById("ticketing1") let ticketing1=document.getElementById("ticketing1")
let newsletter_text=document.getElementById("newsletter_text") let newsletter_text=document.getElementById("newsletter_text")
let e_sport=document.getElementById("e_sport") 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")
const translations = { const translations = {
en: { en: {
logo_the: "The", logo_the: "The",
...@@ -56,10 +66,8 @@ ...@@ -56,10 +66,8 @@
date_from: "Feb 5TH", date_from: "Feb 5TH",
to: "to", to: "to",
date_to: "Feb 7TH 2025", date_to: "Feb 7TH 2025",
place: "HALL 8 - KUWAIT INTERNATIONAL FAIR GROUND",
ticketing_btn: "Ticketing", ticketing_btn: "Ticketing",
ticketing_btn1:"Ticketing", ticketing_btn1:"Ticketing",
hero_title: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.",
hero_desc: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.", hero_desc: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.",
book_now: "Book Now", book_now: "Book Now",
playable_games: "PLAYABLE GAMES", playable_games: "PLAYABLE GAMES",
...@@ -79,10 +87,7 @@ ...@@ -79,10 +87,7 @@
vr2_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .", 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_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr2_btn:"VR zone", vr2_btn:"VR zone",
card_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
card_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
card_txt3:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
card_txt4:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
mob_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .", 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_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
mob_btn:"MOBILE AREA", mob_btn:"MOBILE AREA",
...@@ -107,6 +112,7 @@ ...@@ -107,6 +112,7 @@
pass2_title: "2 DAY PASS - REGULAR", pass2_title: "2 DAY PASS - REGULAR",
pass2_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .", 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_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", book_pass2_btn: "BOOK YOUR PASS",
pass1_title: "1 DAY PASS - REGULAR", pass1_title: "1 DAY PASS - REGULAR",
pass1_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .", pass1_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
...@@ -130,11 +136,10 @@ ...@@ -130,11 +136,10 @@
date_from: "٥ فبراير", date_from: "٥ فبراير",
to: "إلى", to: "إلى",
date_to: "٧ فبراير ٢٠٢٥", date_to: "٧ فبراير ٢٠٢٥",
place: "القاعة ٨ - أرض المعارض الدولية بالكويت",
ticketing_btn: "حجز التذاكر", ticketing_btn: "حجز التذاكر",
ticketing_btn1: "حجز التذاكر", ticketing_btn1: "حجز التذاكر",
hero_title: "مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية.",
hero_desc: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", hero_desc: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_now: "احجز الآن", book_now: "احجز الآن",
playable_games: "الألعاب المتاحة", playable_games: "الألعاب المتاحة",
esports: "بطولات الرياضات الإلكترونية", esports: "بطولات الرياضات الإلكترونية",
...@@ -142,29 +147,26 @@ ...@@ -142,29 +147,26 @@
ticketing_title: "التذاكر", ticketing_title: "التذاكر",
organized: "من تنظيم", organized: "من تنظيم",
newsletter: "النشرة الإخبارية", newsletter: "النشرة الإخبارية",
casual_text1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", casual_text1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", casual_text2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", casual_text3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", casual_text4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text5:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", casual_text5:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", vr_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", vr_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_btn:"منطقه ال VR", vr_btn:"منطقه ال VR",
vr2_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", vr2_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr2_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", vr2_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr2_btn:"منطقه ال VR", vr2_btn:"منطقه ال VR",
card_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
card_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", mob_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
card_txt3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", mob_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
card_txt4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_btn:"منطقه الموبايل", mob_btn:"منطقه الموبايل",
area_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", area_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", area_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", area_txt3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.", area_txt4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
ticketing1:"حجز التذاكر", ticketing1:"حجز التذاكر",
ticketing2:"حجز التذاكر", ticketing2:"حجز التذاكر",
newsletter_text: "احصل على أحدث الأخبار من THE BASE - GAMING FESTIVAL", newsletter_text: "احصل على أحدث الأخبار من THE BASE - GAMING FESTIVAL",
...@@ -175,24 +177,25 @@ ...@@ -175,24 +177,25 @@
cosplay_area_btn: "منطقة الكوسبلاي", cosplay_area_btn: "منطقة الكوسبلاي",
pass3_title: "تذكرة ٣ أيام - عادية", pass3_title: "تذكرة ٣ أيام - عادية",
pass3_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", pass3_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", pass3_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p3: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", pass3_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p4: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", pass3_p4: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass3_btn: "احجز تذكرتك", book_pass3_btn: "احجز تذكرتك",
pass2_title: "تذكرة ٢ أيام - عادية", pass2_title: "تذكرة ٢ أيام - عادية",
pass2_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", pass2_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass2_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", pass2_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass2_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass2_btn: "احجز تذكرتك", book_pass2_btn: "احجز تذكرتك",
pass1_title: "تذكرة ١ يوم - عادية", pass1_title: "تذكرة ١ يوم - عادية",
pass1_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", pass1_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass1_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", pass1_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass1_btn: "احجز تذكرتك", book_pass1_btn: "احجز تذكرتك",
vip_title: "تذكرة VIP", vip_title: "تذكرة VIP",
vip_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", vip_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", vip_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p3: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", vip_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p4: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.", vip_p4: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_vip_btn: "احجز تذكرتك", book_vip_btn: "احجز تذكرتك",
e_sport_btn: "احجز الان", e_sport_btn: "احجز الان",
} }
...@@ -211,10 +214,24 @@ function changeLanguage(lang) { ...@@ -211,10 +214,24 @@ function changeLanguage(lang) {
header_bar.classList.add("header_ar") header_bar.classList.add("header_ar")
ticketing_sec.classList.add("ticketing_sec_ar") ticketing_sec.classList.add("ticketing_sec_ar")
hero.classList.add("hero_ar") hero.classList.add("hero_ar")
ticketing1.classList.add("hidden") ticketing1.classList.add("hidden1")
ticketing_ar.classList.remove("hidden") ticketing_ar.classList.remove("hidden1")
newsletter_text.classList.add("newsletter_text_ar") newsletter_text.classList.add("newsletter_text_ar")
e_sport.classList.add("e_sport_ar") e_sport.classList.add("e_sport_ar")
organize.classList.add("e_sport_ar")
activate_section.classList.add("padd")
card_games.classList.add("col_gap")
area.classList.add("padd")
document.getElementById("arear1").classList.add("no_margin")
document.getElementById("arear12").classList.add("no_margin")
hero_title_ar.classList.remove("hidden1")
hero_title.classList.add("hidden1")
card_info_ar.classList.remove("hidden1")
card_info.classList.add("hidden1")
place_ar.classList.remove("hidden1")
place.classList.add("hidden1")
} else { } else {
document.body.style.direction = "ltr"; document.body.style.direction = "ltr";
...@@ -222,10 +239,23 @@ function changeLanguage(lang) { ...@@ -222,10 +239,23 @@ function changeLanguage(lang) {
header_bar.classList.remove("header_ar") header_bar.classList.remove("header_ar")
ticketing_sec.classList.remove("ticketing_sec_ar") ticketing_sec.classList.remove("ticketing_sec_ar")
hero.classList.remove("hero_ar") hero.classList.remove("hero_ar")
ticketing1.classList.remove("hidden") ticketing1.classList.remove("hidden1")
ticketing_ar.classList.add("hidden") ticketing_ar.classList.add("hidden1")
newsletter_text.classList.remove("newsletter_text_ar") newsletter_text.classList.remove("newsletter_text_ar")
e_sport.classList.remove("e_sport_ar") e_sport.classList.remove("e_sport_ar")
organize.classList.remove("e_sport_ar")
activate_section.classList.remove("padd")
card_games.classList.remove("col_gap")
area.classList.remove("padd")
hero_title.classList.remove("hidden1")
place_ar.classList.add("hidden1")
place.classList.remove("hidden1")
card_info_ar.classList.add("hidden1")
card_info.classList.remove("hidden1")
hero_title_ar.classList.add("hidden1")
document.getElementById("arear1").classList.remove("no_margin")
document.getElementById("arear12").classList.remove("no_margin")
} }
} }
......
style.css
View file @ abf3a2c8
:root :root
{ {
--bck_color:#190a38; --bck_color:#0d0d41;
--main-font:'Montserrat', 'Poppins', 'Arial', sans-serif; --main-font:'Montserrat', 'Poppins', 'Arial', sans-serif;
--title_font:"Archivo Black", "sans-serif";
--purple_col:#801880; --purple_col:#801880;
--background_buttons: linear-gradient(to right,var(--bck_color) 20%, #6a1a97,var(--purple_col)); --background_buttons: linear-gradient(to right,var(--bck_color) 20%, #6a1a97,var(--purple_col));
--title_color:#be2fbe;
} }
...@@ -25,7 +27,7 @@ header ...@@ -25,7 +27,7 @@ header
header .logo_cont header .logo_cont
{ {
display: flex; display: flex;
align-items: center; align-items: start;
column-gap: 5px; column-gap: 5px;
} }
header .left_side header .left_side
...@@ -175,21 +177,31 @@ header .right_side a:nth-child(4) ...@@ -175,21 +177,31 @@ header .right_side a:nth-child(4)
} }
.ltr_size .ltr_size
{ {
grid-template-columns: 39% 60% !important; grid-template-columns: 48% 50% !important;
box-sizing: border-box; box-sizing: border-box;
column-gap: 10px; column-gap: 10px;
padding: 50px 30px 40px; padding: 50px 30px 40px;
justify-content: center;
align-items: center;
}
.ltr_size div:nth-child(1)
{
margin-top: 100px;
} }
.rtl_size .rtl_size
{ {
grid-template-columns: 60% 39% !important; grid-template-columns: 53% 45% !important;
box-sizing: border-box; box-sizing: border-box;
column-gap: 10px; column-gap: 10px;
align-items: center; align-items: center;
padding: 50px 30px 40px; padding: 50px 0px 0px;
}
#vr2_btn
{
padding: 10px 40px;
} }
.hero_section div:nth-child(2) .hero_section div:nth-child(2)
...@@ -198,6 +210,7 @@ header .right_side a:nth-child(4) ...@@ -198,6 +210,7 @@ header .right_side a:nth-child(4)
font-family: var(--main-font); font-family: var(--main-font);
text-transform: uppercase; text-transform: uppercase;
margin-top: 30px; margin-top: 30px;
position: relative;
} }
.hero_section div:nth-child(2) h3 .hero_section div:nth-child(2) h3
{ {
...@@ -206,14 +219,61 @@ header .right_side a:nth-child(4) ...@@ -206,14 +219,61 @@ header .right_side a:nth-child(4)
font-size: 35px; font-size: 35px;
width: 76%; width: 76%;
margin-bottom: 10px; margin-bottom: 10px;
/* position: relative; */
} }
.hero_section div:nth-child(2) p, .hero_section div:nth-child(2) h3 span
.activate_section p {
position: absolute;
font-family: "Archivo Black", sans-serif;
font-size: 50px;
}
.hero_section div:nth-child(2) h3 span:nth-child(1)
{
left: -127px;
top: -207px;
}
.hero_section div:nth-child(2) h3 span:nth-child(2)
{
left: -100px;
top: -150px;
}
.hero_section div:nth-child(2) h3 span:nth-child(3)
{
left: -80px;
top: -100px;
}
.hero_section div:nth-child(2) h3 span:nth-child(4)
{
left: -55px;
top: -50px;
}
.hero_section div:nth-child(2) h3 span:nth-child(5)
{
left: -40px;
top: 0px;
}
.hero_section div:nth-child(2) p
{
position: absolute;
/* top: ; */
left:-25px;
top: 80px;
font-size: 16px;
width: 75% !important;
font-weight: bold;
}
.hero_section div:nth-child(2) p
{ {
margin: 0; margin: 0;
width: 73%; width: 78% !important;
line-height: 25px; line-height: 25px;
} }
.activate_section p:nth-child(4)
{
margin-top: 20px;
}
/* # */
.hero_section div:nth-child(1) img, .hero_section div:nth-child(1) img,
.activate_section img, .activate_section img,
.CardGame_section img .CardGame_section img
...@@ -222,6 +282,9 @@ header .right_side a:nth-child(4) ...@@ -222,6 +282,9 @@ header .right_side a:nth-child(4)
} }
.hero_section a .hero_section a
{ {
position: absolute;
top: 160px;
left: -10px;
color: #ffffff; color: #ffffff;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
...@@ -229,7 +292,7 @@ header .right_side a:nth-child(4) ...@@ -229,7 +292,7 @@ header .right_side a:nth-child(4)
border: none; border: none;
border-radius: 15px; border-radius: 15px;
background: linear-gradient(90deg, #6a1a97,var(--purple_col),var(--bck_color)); background: linear-gradient(90deg, #6a1a97,var(--purple_col),var(--bck_color));
padding: 10px 20px; padding: 5px 20px;
display: block; display: block;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
...@@ -237,7 +300,7 @@ header .right_side a:nth-child(4) ...@@ -237,7 +300,7 @@ header .right_side a:nth-child(4)
text-align: start; text-align: start;
margin-top: 20px; margin-top: 20px;
box-sizing: border-box; box-sizing: border-box;
font-size: 25px; font-size: 20px;
font-family: var(--main-font); font-family: var(--main-font);
} }
...@@ -247,7 +310,7 @@ header .right_side a:nth-child(4) ...@@ -247,7 +310,7 @@ header .right_side a:nth-child(4)
{ {
background-color: var(--bck_color); background-color: var(--bck_color);
padding: 25px 0 30px 0; padding: 25px 0 30px 0;
height: 400px; height: 300px;
} }
.swiper_parent .swiper_parent
...@@ -260,7 +323,7 @@ header .right_side a:nth-child(4) ...@@ -260,7 +323,7 @@ header .right_side a:nth-child(4)
var(--bck_color) 7%, var(--bck_color) 7%,
var(--bck_color) 9%, var(--bck_color) 9%,
var(--bck_color) 94%, var(--bck_color) 94%,
#00ff00 99%, #00ff00 98%,
#00ff00 100% #00ff00 100%
); );
...@@ -268,17 +331,19 @@ header .right_side a:nth-child(4) ...@@ -268,17 +331,19 @@ header .right_side a:nth-child(4)
.play_games h1 .play_games h1
{ {
text-align: center; text-align: center;
font-family: var(--main-font); font-family: var(--title_font);
font-weight: bold; font-weight: bold;
color: var(--purple_col); color: var(--title_color);
} }
.swiper { .swiper {
width: 85%; width: 93%;
max-width: 100%; max-width: 100%;
height: 200px; height: 200px;
margin: 50px auto; margin: 50px auto;
margin: 50px 7.5%; margin: 0px 3.5%;
box-sizing: border-box; box-sizing: border-box;
padding: 40px 0 50px 0;
/* z-index: -3; */
} }
...@@ -290,21 +355,20 @@ header .right_side a:nth-child(4) ...@@ -290,21 +355,20 @@ header .right_side a:nth-child(4)
text-align: center; text-align: center;
} }
.swiper {
padding: 40px 0 40px 0;
}
.swiper-pagination { .swiper-pagination {
bottom: 10px; bottom: 10px;
} }
.swiper-slide img { .swiper-slide img {
width: 100%; width: 80%;
margin-left: 10%;
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
border-radius: 10px; border-radius: 10px;
z-index: -3; z-index: -3;
opacity: .8;
} }
/* Pagination circles */ /* Pagination circles */
...@@ -334,16 +398,18 @@ header .right_side a:nth-child(4) ...@@ -334,16 +398,18 @@ header .right_side a:nth-child(4)
font-weight: bold; font-weight: bold;
color: white; color: white;
text-align: center; text-align: center;
z-index: -2; /* z-index: -2; */
font-size: 50px;
} }
.e_sport > div:nth-child(2) .e_sport > div:nth-child(2)
{ {
display: grid; display: grid;
grid-template-columns: repeat(3,30%); grid-template-columns: repeat(3,31%);
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
width: 90%; column-gap: 20px;
margin: 50px 5% 0; width: 95%;
margin: 50px 2.5% 0;
} }
.e_sport .button_parent .e_sport .button_parent
...@@ -354,21 +420,59 @@ header .right_side a:nth-child(4) ...@@ -354,21 +420,59 @@ header .right_side a:nth-child(4)
} }
.e_sport > div div .e_sport > div div
{ {
border-radius: 15px; border-radius: 50px;
background: linear-gradient(to right,var(--purple_col),#6a1a97); background: linear-gradient(to right,var(--purple_col),#6a1a97);
height: 300px; height: 450px;
/* overflow: hidden; */ /* overflow: hidden; */
position: relative;
} }
.e_sport > div div img .e_sport > div div img
{ {
width: 70%; width: 100%;
margin:0 15%; /* margin: 10% 15% 0; */
height: 100%; height: 115%;
transform: translateY(-40px); transform: translate(0px,0px);
transform: translateY(-70px);
object-fit: cover; object-fit: cover;
object-position: top center; /* object-position: top top; */
z-index: 3; }
.lamin_img
{
height: 145% !important;
transform: translateY(-30%) !important;
} }
.no_margin
{
margin-top: 0 !important;
}
/* .e_sport > div div:nth-child(2) img
{
object-position: -100px 0;
} */
.e_sport > div div .abs_img,
.e_sport > div div .abs_img1,
.e_sport > div div .abs_img2
{
position: absolute;
width: 35px ;
height: 35px ;
left: 30px;
top: 110px;
}
.e_sport > div div .abs_img1
{
bottom: -50px;
top: unset;
}
.e_sport > div div .abs_img2
{
width: 60px;
object-fit: contain;
left: 20px;
}
.e_sport a .e_sport a
{ {
color: #ffffff; color: #ffffff;
...@@ -385,7 +489,7 @@ header .right_side a:nth-child(4) ...@@ -385,7 +489,7 @@ header .right_side a:nth-child(4)
cursor: pointer; cursor: pointer;
outline: none; outline: none;
text-align: start; text-align: start;
margin-top: 20px; margin-top: 40px;
transform: translateX(10px); transform: translateX(10px);
font-size: 25px; font-size: 25px;
font-family: var(--main-font); font-family: var(--main-font);
...@@ -394,7 +498,7 @@ header .right_side a:nth-child(4) ...@@ -394,7 +498,7 @@ header .right_side a:nth-child(4)
/* ===============Activate================= */ /* ===============Activate================= */
.activate_section .activate_section
{ {
padding:50px 30px 30px; padding:50px 0px 30px 0;
} }
.activate_section div:nth-child(2) .activate_section div:nth-child(2)
{ {
...@@ -420,22 +524,27 @@ header .right_side a:nth-child(4) ...@@ -420,22 +524,27 @@ header .right_side a:nth-child(4)
} }
.activate_section h1 .activate_section h1
{ {
color: var(--purple_col); color: var(--title_color);
width: 80%; width: 100%;
margin-left: 10%; margin-left: 4%;
font-weight: 700; font-weight: 800;
font-family: var(--main-font); font-family: var(--title_font);
font-size: 40px;
margin-top: 0px !important;
}
.activate_section div:nth-child(1)
{
margin-top: 0 !important;
} }
.activate_section p .activate_section p
{ {
color: white; color: white;
font-family: var(--main-font); font-family: var(--main-font);
margin-top: 10px; margin: 0px 0 0 10%;
margin-left: 10%; font-weight: 400;
font-weight: 700; font-size: 20px;
font-size: 18px; line-height: 25px;
line-height: 32px; width: 78% !important;
width: 80%;
} }
/* =================================*/ /* =================================*/
/* =============VR==================*/ /* =============VR==================*/
...@@ -444,10 +553,10 @@ header .right_side a:nth-child(4) ...@@ -444,10 +553,10 @@ header .right_side a:nth-child(4)
background-color: white; background-color: white;
align-items: center; align-items: center;
} }
.VR_section img /* .VR_section img
{ {
width: 100%; width: 100%;
} } */
.VR_section p .VR_section p
{ {
color: var(--bck_color); color: var(--bck_color);
...@@ -455,24 +564,25 @@ header .right_side a:nth-child(4) ...@@ -455,24 +564,25 @@ header .right_side a:nth-child(4)
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
text-transform: uppercase; text-transform: uppercase;
width: 80%; width: 100%;
margin-left: 10%; margin-left: 0%;
font-family: var(--main-font); font-family: var(--main-font);
} }
.VR_section a .VR_section a
{ {
background:var(--background_buttons); background:var(--background_buttons);
color: white; color: white;
font-family: var(--main-font); font-family: var(--title_font);
padding: 10px 45px; padding: 8px 30px;
border-radius: 25px; border-radius: 25px;
outline: none; outline: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
font-size: 25px; font-size: 20px;
margin-top: 40px; margin-top: 100px;
margin-left: 10%; /* margin-left: 10%; */
display: inline-block;
} }
/* =================================*/ /* =================================*/
/* =============CardGame==================*/ /* =============CardGame==================*/
...@@ -480,6 +590,12 @@ header .right_side a:nth-child(4) ...@@ -480,6 +590,12 @@ header .right_side a:nth-child(4)
{ {
position: relative; position: relative;
} }
.CardGame_section
{
grid-template-columns: 50% 39% !important;
padding: 0 40px;
/* justify-content: center; */
}
.CardGame_section div:nth-child(1) a .CardGame_section div:nth-child(1) a
{ {
position: absolute; position: absolute;
...@@ -501,9 +617,99 @@ header .right_side a:nth-child(4) ...@@ -501,9 +617,99 @@ header .right_side a:nth-child(4)
color: white; color: white;
font-family: var(--main-font); font-family: var(--main-font);
text-transform: uppercase; text-transform: uppercase;
width: 60%; width: 100%;
font-weight: 700; font-weight: 700;
line-height: 25px; line-height: 25px;
position: relative;
}
.CardGame_section p span
{
position: absolute;
font-size: 25px;
}
.CardGame_section p:nth-child(1) span:nth-child(1)
{
top: -200px;
left: -120px;
}
.CardGame_section p:nth-child(1) span:nth-child(2)
{
top: -170px;
left: -100px;
}
.CardGame_section p:nth-child(1) span:nth-child(3)
{
top: -140px;
left: -80px;
}
/* ============================== */
.CardGame_section p:nth-child(2) span:nth-child(1)
{
top: -110px;
left: -65px;
}
.CardGame_section p:nth-child(2) span:nth-child(2)
{
top: -80px;
left: -50px;
}
.CardGame_section p:nth-child(2) span:nth-child(3)
{
top: -50px;
left: -35px;
}
/* ============================== */
.CardGame_section p:nth-child(3) span:nth-child(1)
{
top: 0px;
left: -20px;
}
.CardGame_section p:nth-child(3) span:nth-child(2)
{
top: 28px;
left: -10px;
}
.CardGame_section p:nth-child(3) span:nth-child(3)
{
top: 56px;
left: 0px;
}
/* ============================== */
.CardGame_section p:nth-child(4) span:nth-child(1)
{
top: 85px;
left: 10px;
}
.CardGame_section p:nth-child(4) span:nth-child(2)
{
top: 115px;
left: 20px;
}
.CardGame_section p:nth-child(4) span:nth-child(3)
{
top: 145px;
left: 30px;
}
.mobile p
{
margin-left: 5% !important;
width: 80%;
}
.mobile a
{
margin-left: 5%;
}
.area
{
grid-template-columns: 40% 57% !important;
}
.area p:nth-child(3)
{
margin-top: 20px;
}
.area p:nth-child(4)
{
margin-top: 0px;
} }
/* ==================================== */ /* ==================================== */
...@@ -620,11 +826,12 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -620,11 +826,12 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.ticketing_section .days > div:nth-child(2) .ticketing_section .days > div:nth-child(2)
{ {
margin-left: 40px; margin-left: 40px;
align-items: start;
} }
.ticketing_section .days > div:nth-child(2) div .ticketing_section .days > div:nth-child(2) div
{ {
width: 60%; width: 60%;
text-align: center; /* text-align: center; */
} }
.ticketing_section .days > div:nth-child(2) p .ticketing_section .days > div:nth-child(2) p
{ {
...@@ -634,6 +841,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -634,6 +841,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
line-height: 25px; line-height: 25px;
margin-left: 10%; margin-left: 10%;
text-align: start; text-align: start;
font-size: 19px;
} }
.ticketing_section a .ticketing_section a
{ {
...@@ -652,7 +860,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -652,7 +860,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
cursor: pointer; cursor: pointer;
outline: none; outline: none;
text-align: start; text-align: start;
margin-top: 20px; margin-top: 50px;
transform: translateX(23px); transform: translateX(23px);
} }
.days_grid .days_grid
...@@ -665,6 +873,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -665,6 +873,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
background-color: #1b0b3c; background-color: #1b0b3c;
} }
.days_grid .days:nth-child(2) a
{
/* margin-top: 140px !important; */
}
.ticketing_sec_ar a
{
margin-top: 60px !important;
}
.days_grid .days > div:nth-child(2) div .days_grid .days > div:nth-child(2) div
{ {
width: 100%; width: 100%;
...@@ -700,16 +916,25 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -700,16 +916,25 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
padding-bottom: 60px; padding-bottom: 60px;
} }
.last div:nth-child(1) h1
{
width: 40%;
}
.ticketing_section .last > div:nth-child(1) .ticketing_section .last > div:nth-child(1)
{ {
width: 50% !important; width: 70% !important;
margin: 0 25% !important; margin: 0 15% !important;
} }
.ticketing_section .last > div:nth-child(2) p .ticketing_section .last > div:nth-child(2) p
{ {
margin-left: 25% !important; margin-left: 10% !important;
text-align: start; text-align: start;
} }
.last div:nth-child(1)
{
justify-content: center !important;
column-gap: 40%;
}
.map .map
{ {
width: 90%; width: 90%;
...@@ -751,25 +976,28 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -751,25 +976,28 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{ {
width: 100%; width: 100%;
} }
/* ==================================== */ /* ==================================== */
/* ===========letters================ */ /* ===========letters================ */
.letters .letters
{ {
background-color: var(--bck_color); background-color: var(--bck_color);
padding-top: 20px; padding: 20px 0;
} }
.letters h1 .letters h1
{ {
text-align: center; text-align: center;
font-family: var(--main-font); font-family: var(--title_font);
font-weight: bold; font-weight: bold;
color: var(--purple_col); color: var(--title_color);
margin-bottom: 50px;
} }
.letters > div .letters > div
{ {
display: grid; display: grid;
grid-template-columns: 40% 50%; grid-template-columns: 40% 50%;
align-items: center; align-items: start;
justify-content: center; justify-content: center;
column-gap: 30px; column-gap: 30px;
} }
...@@ -779,10 +1007,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -779,10 +1007,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
align-items: center; align-items: center;
justify-content: end; justify-content: end;
} }
.letters>div div:nth-child(2)
{
margin-top: 60px;
}
.letters div img .letters div img
{ {
width: 250px; width: 60%;
height: 250px; height: 60%;
object-fit: contain; object-fit: contain;
} }
.letters div p .letters div p
...@@ -797,9 +1029,11 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -797,9 +1029,11 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
} }
.letters div p:nth-child(1) .letters div p:nth-child(1)
{ {
font-size: 20px; font-size: 22px;
width: 55%; width: 55%;
line-height: 30px; line-height: 30px;
font-family: var(--title_font);
margin-bottom: 50px;
} }
.letters div p span:nth-child(2) .letters div p span:nth-child(2)
{ {
...@@ -846,6 +1080,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -846,6 +1080,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
transform: translateX(100%); transform: translateX(100%);
width: 0; width: 0;
} }
.hidden1
{
display: none !important;
}
/* ========================= */ /* ========================= */
/* ========Arabic============*/ /* ========Arabic============*/
...@@ -866,6 +1104,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -866,6 +1104,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{ {
background: linear-gradient(90deg,var(--bck_color),#6a1a97,var(--purple_col)); background: linear-gradient(90deg,var(--bck_color),#6a1a97,var(--purple_col));
} }
.hero_ar div:nth-child(2) p,
.hero_ar div:nth-child(2) h3,
.hero_ar a
{
position: relative;
top: 0;
}
.ticketing_sec_ar .days > div:nth-child(2) .ticketing_sec_ar .days > div:nth-child(2)
{ {
margin: 0 40px 0 0; margin: 0 40px 0 0;
...@@ -886,7 +1132,18 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -886,7 +1132,18 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{ {
width: 35% !important; width: 35% !important;
} }
.e_sport_ar
{
direction: ltr !important;
}
.padd
{
padding: 50px 30px 30px;
}
.col_gap
{
column-gap: 40px;
}
/* ========================== */ /* ========================== */
/* =====Responsive========== */ /* =====Responsive========== */
@media(max-width:1200px) @media(max-width:1200px)
...@@ -906,7 +1163,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -906,7 +1163,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.CardGame_section p .CardGame_section p
{ {
width: 100%; width: 100%;
margin-left: 0; width: 90%;
margin-left: 7%;
font-size: 14px;
font-weight: normal;
} }
.header_ar .left_side .header_ar .left_side
{ {
...@@ -914,7 +1174,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -914,7 +1174,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
} }
.VR_section a .VR_section a
{ {
margin-left: 0; margin-left: 20px;
} }
} }
...@@ -971,11 +1231,25 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -971,11 +1231,25 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{ {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center;
} }
.ltr_size > div .ltr_size > div
{ {
width: 80%; width: 80%;
} }
.activate_section div:nth-child(2) a
{
right: 90px !important;
}
.hero_section div:nth-child(1) img, .activate_section img, .CardGame_section img
{
width: 80%;
margin-left: 10%;
}
.CardGame_section div:nth-child(1) a
{
left: 90px;
}
.ticketing_section .days > div:nth-child(2) .ticketing_section .days > div:nth-child(2)
{ {
flex-direction: column; flex-direction: column;
...@@ -990,6 +1264,9 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -990,6 +1264,9 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
width: 95%; width: 95%;
margin-left: 0 !important; margin-left: 0 !important;
text-align: center; text-align: center;
font-size: 14px;
font-weight: normal;
margin-top: 30px;
} }
.days_grid .days_grid
{ {
...@@ -1042,6 +1319,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1042,6 +1319,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{ {
width: 80%; width: 80%;
} }
} }
...@@ -1059,16 +1338,16 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1059,16 +1338,16 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{ {
font-size: 25px; font-size: 25px;
width: 100%; width: 100%;
margin-left: 0; /* margin-left: 0; */
} }
.hero_section, .VR_section, .CardGame_section, .activate_section, .mobile .hero_section, .VR_section, .CardGame_section, .activate_section, .mobile
{ {
padding: 10px ; padding: 20px 10px 10px 20px ;
} }
.hero_section div:nth-child(2) p, .activate_section p .hero_section div:nth-child(2) p, .activate_section p
{ {
width: 95%; width: 95%;
margin-left: 0; /* margin-left: 0; */
} }
.ltr_size > div .ltr_size > div
{ {
...@@ -1090,7 +1369,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1090,7 +1369,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.activate_section p, .activate_section p,
.activate_section h1, .VR_section p .activate_section h1, .VR_section p
{ {
font-size: 16px; font-size: 14px;
font-weight: normal;
} }
.ticketing_section .days > div:nth-child(1) .ticketing_section .days > div:nth-child(1)
{ {
...@@ -1114,6 +1394,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1114,6 +1394,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.days_grid .days_grid
{ {
grid-template-columns: 100% !important; grid-template-columns: 100% !important;
margin-top: 40px;
/* column-gap: 30px; */
} }
.days_grid > div:nth-child(2) .days_grid > div:nth-child(2)
{ {
...@@ -1125,6 +1407,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1125,6 +1407,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.ticketing_section .days .ticketing_section .days
{ {
border-radius: 20px; border-radius: 20px;
margin-bottom: 30px !important;
} }
.oragnize div .oragnize div
{ {
...@@ -1132,6 +1415,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1132,6 +1415,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
row-gap: 30px; row-gap: 30px;
}
.last
{
margin-top: 20px !important;
} }
.days_grid a .days_grid a
{ {
...@@ -1149,6 +1436,9 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1149,6 +1436,9 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.letters div p:nth-child(1) .letters div p:nth-child(1)
{ {
width: 100%; width: 100%;
font-size: 14px;
font-weight: normal;
margin-bottom: 20px;
} }
header .left_side > p header .left_side > p
...@@ -1175,7 +1465,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1175,7 +1465,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
} }
.right_side_h .right_side_h
{ {
width: 100% !important; width: 40% !important;
} }
.list_icon .list_icon
{ {
...@@ -1187,14 +1477,16 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color)); ...@@ -1187,14 +1477,16 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
flex-direction: column; flex-direction: column;
row-gap: 5px; row-gap: 5px;
align-items: start; align-items: start;
margin-top: 10px;
} }
.ticketing_sec_ar a .ticketing_sec_ar a
{ {
margin: 20px 25% 0 0; margin: 120px 25% 0 0;
transform: translateX(0) !important; transform: translateX(0) !important;
} }
} }
@media(max-width:500px) @media(max-width:500px)
{ {
.play_games h1 .play_games h1
......
txt.txt 0 → 100644
View file @ abf3a2c8
.e_sport
{
background-color: var(--bck_color);
padding: 25px 0 25px 0;
}
.e_sport h1
{
/* text-align: start; */
font-family: var(--main-font);
font-weight: bold;
color: white;
text-align: center;
z-index: -2;
}
.e_sport > div:nth-child(2)
{
display: grid;
grid-template-columns: repeat(3,31%);
align-items: center;
justify-content: center;
column-gap: 20px;
width: 95%;
margin: 50px 2.5% 0;
}
.e_sport .button_parent
{
display: flex;
align-items: center;
justify-content: center;
}
.e_sport > div div
{
border-radius: 50px;
background: linear-gradient(to right,var(--purple_col),#6a1a97);
height: 450px;
/* overflow: hidden; */
}
.e_sport > div div img
{
width: 100%;
/* margin: 10% 15% 0; */
height: 100%;
transform: translateY(-40px);
object-fit: cover;
object-position: top top;
}
.e_sport a
{
color: #ffffff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
border: none;
border-radius: 18px;
background: linear-gradient(90deg,var(--purple_col), #6a1a97,var(--bck_color));
padding: 7px 45px;
display: block;
width: fit-content;
/* margin-left: 40%; */
cursor: pointer;
outline: none;
text-align: start;
margin-top: 40px;
transform: translateX(10px);
font-size: 25px;
font-family: var(--main-font);
}
\ 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