Skip to content

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

Responsive editing

parent abf3a2c8
Hide whitespace changes
Inline Side-by-side
Showing with 619 additions and 178 deletions
index.html
View file @ 039aea8b
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<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">
...@@ -30,7 +30,7 @@ ...@@ -30,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 hidden1"> <div class="right_side_h hidden ">
<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>
...@@ -68,12 +68,12 @@ ...@@ -68,12 +68,12 @@
</header> </header>
<div class="hero_section rtl_size" id="hero"> <div class="hero_section rtl_size" id="hero">
<div > <div >
<img src="./images/shape.png"> <img src="./images/shape.png">
</div> </div>
<div> <div>
<h3 id="hero_title"> <h3 id="hero_title" class="hero_title">
<span> <span>
LOREM IPSUM LOREM IPSUM
</span> </span>
...@@ -84,14 +84,15 @@ ...@@ -84,14 +84,15 @@
SED DIAM . SED DIAM .
</span> </span>
</h3> </h3>
<h3 class="hidden1" id="hero_title_ar"> <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">
مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية. مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية.
</h3> </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>
</div> </div>
<div class="play_games "> <div class="play_games " id="play_games">
<h1 id="playable_games">PLAYABLE GAMES</h1> <h1 id="playable_games">PLAYABLE GAMES</h1>
<div class="swiper_parent"> <div class="swiper_parent">
<div class="swiper mySwiper"> <div class="swiper mySwiper">
...@@ -159,14 +160,14 @@ ...@@ -159,14 +160,14 @@
<p id="vr_txt2">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> <a id="vr_btn">VR ZONE</a>
</div> </div>
</div> </div>
<div class="CardGame_section rtl_size" id="card_games"> <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 id="card_info"> <div id="card_info" class="card_info">
<p id="card_txt1"><span>LOREM IPSUM DOLOR SIT AMET,</span> <p id="card_txt1"><span>LOREM IPSUM DOLOR SIT AMET,</span>
<span>CONSECTETUER ADIPISCING ELIT , SED</span> <span>CONSECTETUER ADIPISCING ELIT , SED</span>
<span>DIAM .</span></p> <span>DIAM .</span></p>
...@@ -180,6 +181,21 @@ ...@@ -180,6 +181,21 @@
<span>CONSECTETUER ADIPISCING ELIT , </span> <span>CONSECTETUER ADIPISCING ELIT , </span>
<span>SED DIAM .</span></p> <span>SED DIAM .</span></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>
<div id="card_info_ar" class="hidden1"> <div id="card_info_ar" class="hidden1">
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p> <p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
...@@ -231,39 +247,30 @@ ...@@ -231,39 +247,30 @@
<div class="title" id="ticketing1"> <div class="title" id="ticketing1">
<h1> <h1>
<span id="">T</span> <span id="">T</span>
<!-- <span id="ticketing2">T</span> -->
</h1> </h1>
<h1> <h1>
<span id="">I</span> <span id="">I</span>
<!-- <span id="ticketing2">I</span> -->
</h1> </h1>
<h1> <h1>
<span id="">C</span> <span id="">C</span>
<!-- <span id="ticketing2">C</span> -->
</h1> </h1>
<h1> <h1>
<span id="">K</span> <span id="">K</span>
<!-- <span id="ticketing2">K</span> -->
</h1> </h1>
<h1> <h1>
<span id="">E</span> <span id="">E</span>
<!-- <span id="ticketing2">E</span> -->
</h1> </h1>
<h1> <h1>
<span id="">T</span> <span id="">T</span>
<!-- <span id="ticketing2">T</span> -->
</h1> </h1>
<h1> <h1>
<span id="">I</span> <span id="">I</span>
<!-- <span id="ticketing2">I</span> -->
</h1> </h1>
<h1> <h1>
<span id="">N</span> <span id="">N</span>
<!-- <span id="ticketing2">N</span> -->
</h1> </h1>
<h1> <h1>
<span id="">G</span> <span id="">G</span>
<!-- <span id="ticketing2">G</span> -->
</h1> </h1>
</div> </div>
<div id="ticketing_title_ar" class=" title hidden1"> <div id="ticketing_title_ar" class=" title hidden1">
...@@ -338,7 +345,7 @@ ...@@ -338,7 +345,7 @@
<div class="map"> <div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div> </div>
</div> </div>
<div class="oragnize" id="organize"> <div class="oragnize" id="organize">
<h1 id="organized">ORGANIZED BY</h1> <h1 id="organized">ORGANIZED BY</h1>
<div> <div>
...@@ -369,7 +376,7 @@ ...@@ -369,7 +376,7 @@
</div> </div>
</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 @ 039aea8b
...@@ -57,6 +57,8 @@ ...@@ -57,6 +57,8 @@
let place=document.getElementById("place") let place=document.getElementById("place")
let card_info=document.getElementById("card_info") let card_info=document.getElementById("card_info")
let card_info_ar=document.getElementById("card_info_ar") 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 = { const translations = {
en: { en: {
logo_the: "The", logo_the: "The",
...@@ -98,7 +100,6 @@ ...@@ -98,7 +100,6 @@
newsletter_text: "RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL", newsletter_text: "RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL",
email_label: "EMAIL: ", email_label: "EMAIL: ",
phone_label: "PHONE: ", phone_label: "PHONE: ",
ticketing1:"ticketing",
ticketing2:"ticketing", ticketing2:"ticketing",
pc_btn:"PC - PS5 ZONE", pc_btn:"PC - PS5 ZONE",
card_games_btn: "CARD / BOARD GAMES", card_games_btn: "CARD / BOARD GAMES",
...@@ -167,7 +168,6 @@ ...@@ -167,7 +168,6 @@
area_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.", area_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.", area_txt3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.", area_txt4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
ticketing1:"حجز التذاكر",
ticketing2:"حجز التذاكر", ticketing2:"حجز التذاكر",
newsletter_text: "احصل على أحدث الأخبار من THE BASE - GAMING FESTIVAL", newsletter_text: "احصل على أحدث الأخبار من THE BASE - GAMING FESTIVAL",
email_label: "البريد الإلكتروني: ", email_label: "البريد الإلكتروني: ",
...@@ -210,7 +210,9 @@ function changeLanguage(lang) { ...@@ -210,7 +210,9 @@ function changeLanguage(lang) {
if(lang === 'ar') { if(lang === 'ar') {
document.body.style.direction = "rtl"; document.body.style.direction = "rtl";
document.body.style.textAlign = "right"; document.body.style.textAlign = "right";
document.getElementById("play_games").classList.add("play_games_ar")
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")
...@@ -220,21 +222,25 @@ function changeLanguage(lang) { ...@@ -220,21 +222,25 @@ function changeLanguage(lang) {
e_sport.classList.add("e_sport_ar") e_sport.classList.add("e_sport_ar")
organize.classList.add("e_sport_ar") organize.classList.add("e_sport_ar")
activate_section.classList.add("padd") activate_section.classList.add("padd")
card_games.classList.add("col_gap") card_games.classList.add("card_ar")
area.classList.add("padd") area.classList.add("padd")
document.getElementById("arear1").classList.add("no_margin") document.getElementById("arear1").classList.add("no_margin")
document.getElementById("arear12").classList.add("no_margin") document.getElementById("arear12").classList.add("no_margin")
hero_title_ar.classList.remove("hidden1") console.log(hero_title_ar)
hero_title.classList.add("hidden1") hero_title_ar.classList.remove("hidden1")
card_info_ar.classList.remove("hidden1") hero_title.classList.add("hidden1")
card_info.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_ar.classList.remove("hidden1")
place.classList.add("hidden1") place.classList.add("hidden1")
} else { } else {
document.body.style.direction = "ltr"; document.body.style.direction = "ltr";
document.getElementById("play_games").direction = "ltr";
document.body.style.textAlign = "left"; document.body.style.textAlign = "left";
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")
...@@ -245,14 +251,17 @@ place.classList.add("hidden1") ...@@ -245,14 +251,17 @@ place.classList.add("hidden1")
e_sport.classList.remove("e_sport_ar") e_sport.classList.remove("e_sport_ar")
organize.classList.remove("e_sport_ar") organize.classList.remove("e_sport_ar")
activate_section.classList.remove("padd") activate_section.classList.remove("padd")
card_games.classList.remove("col_gap") card_games.classList.remove("card_ar")
area.classList.remove("padd") area.classList.remove("padd")
hero_title.classList.remove("hidden1") hero_title.classList.remove("hidden1")
hero_title_res.classList.remove("hidden1")
place_ar.classList.add("hidden1") place_ar.classList.add("hidden1")
place.classList.remove("hidden1") place.classList.remove("hidden1")
card_info_ar.classList.add("hidden1") card_info_ar.classList.add("hidden1")
card_info.classList.remove("hidden1") card_info.classList.remove("hidden1")
card_info_res.classList.remove("hidden1")
hero_title_ar.classList.add("hidden1") hero_title_ar.classList.add("hidden1")
document.getElementById("arear1").classList.remove("no_margin") document.getElementById("arear1").classList.remove("no_margin")
document.getElementById("arear12").classList.remove("no_margin") document.getElementById("arear12").classList.remove("no_margin")
......
style.css
View file @ 039aea8b
...@@ -39,7 +39,7 @@ header .left_side ...@@ -39,7 +39,7 @@ header .left_side
} }
header .left_side img header .left_side img
{ {
width: 100px; width: 65px;
height: 100px; height: 100px;
object-fit: contain; object-fit: contain;
/* margin-right: 14px; */ /* margin-right: 14px; */
...@@ -167,8 +167,7 @@ header .right_side a:nth-child(4) ...@@ -167,8 +167,7 @@ header .right_side a:nth-child(4)
align-items: start; align-items: start;
padding:10px 50px 0 50px ; padding:10px 50px 0 50px ;
background-color: var(--bck_color); background-color: var(--bck_color);
/* justify-content: space-between; */
/* margin-top: 50px; */
} }
.VR_section .VR_section
{ {
...@@ -177,27 +176,31 @@ header .right_side a:nth-child(4) ...@@ -177,27 +176,31 @@ header .right_side a:nth-child(4)
} }
.ltr_size .ltr_size
{ {
grid-template-columns: 48% 50% !important; grid-template-columns: 48% 50% ;
box-sizing: border-box; box-sizing: border-box;
column-gap: 10px; column-gap: 10px;
padding: 50px 30px 40px; padding: 80px 30px 40px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.ltr_size img
{
width: 100%;
}
.ltr_size div:nth-child(1) .ltr_size div:nth-child(1)
{ {
margin-top: 100px; margin-top: 100px;
} }
.rtl_size .rtl_size
{ {
grid-template-columns: 53% 45% !important; grid-template-columns: 53% 45%;
box-sizing: border-box; box-sizing: border-box;
column-gap: 10px; column-gap: 10px;
align-items: center; align-items: center;
padding: 50px 0px 0px; padding: 80px 0px 0px;
} }
#vr2_btn #vr2_btn
{ {
...@@ -335,6 +338,10 @@ header .right_side a:nth-child(4) ...@@ -335,6 +338,10 @@ header .right_side a:nth-child(4)
font-weight: bold; font-weight: bold;
color: var(--title_color); color: var(--title_color);
} }
.play_games_ar
{
direction: ltr;
}
.swiper { .swiper {
width: 93%; width: 93%;
max-width: 100%; max-width: 100%;
...@@ -422,9 +429,12 @@ header .right_side a:nth-child(4) ...@@ -422,9 +429,12 @@ header .right_side a:nth-child(4)
{ {
border-radius: 50px; border-radius: 50px;
background: linear-gradient(to right,var(--purple_col),#6a1a97); background: linear-gradient(to right,var(--purple_col),#6a1a97);
height: 450px; height: 385px;
/* overflow: hidden; */ /* overflow: hidden; */
position: relative; position: relative;
clip-path: inset(-100px 0 20px 0); /* قص 20px من تحت بس */
/* -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%); */
} }
.e_sport > div div img .e_sport > div div img
{ {
...@@ -435,12 +445,13 @@ header .right_side a:nth-child(4) ...@@ -435,12 +445,13 @@ header .right_side a:nth-child(4)
transform: translateY(-70px); transform: translateY(-70px);
object-fit: cover; object-fit: cover;
/* object-position: top top; */ /* object-position: top top; */
height: auto;
} }
.lamin_img .e_sport > div div .lamin_img
{ {
height: 145% !important; height: 145% ;
transform: translateY(-30%) !important; transform: translateY(-30%) ;
} }
...@@ -448,10 +459,7 @@ header .right_side a:nth-child(4) ...@@ -448,10 +459,7 @@ header .right_side a:nth-child(4)
{ {
margin-top: 0 !important; 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_img,
.e_sport > div div .abs_img1, .e_sport > div div .abs_img1,
.e_sport > div div .abs_img2 .e_sport > div div .abs_img2
...@@ -464,7 +472,7 @@ header .right_side a:nth-child(4) ...@@ -464,7 +472,7 @@ header .right_side a:nth-child(4)
} }
.e_sport > div div .abs_img1 .e_sport > div div .abs_img1
{ {
bottom: -50px; bottom: -42px;
top: unset; top: unset;
} }
.e_sport > div div .abs_img2 .e_sport > div div .abs_img2
...@@ -534,7 +542,7 @@ header .right_side a:nth-child(4) ...@@ -534,7 +542,7 @@ header .right_side a:nth-child(4)
} }
.activate_section div:nth-child(1) .activate_section div:nth-child(1)
{ {
margin-top: 0 !important; margin-top: 0 ;
} }
.activate_section p .activate_section p
{ {
...@@ -592,8 +600,8 @@ header .right_side a:nth-child(4) ...@@ -592,8 +600,8 @@ header .right_side a:nth-child(4)
} }
.CardGame_section .CardGame_section
{ {
grid-template-columns: 50% 39% !important; grid-template-columns: 55% 39%;
padding: 0 40px; padding: 80px 40px 0;
/* justify-content: center; */ /* justify-content: center; */
} }
.CardGame_section div:nth-child(1) a .CardGame_section div:nth-child(1) a
...@@ -630,65 +638,65 @@ header .right_side a:nth-child(4) ...@@ -630,65 +638,65 @@ header .right_side a:nth-child(4)
.CardGame_section p:nth-child(1) span:nth-child(1) .CardGame_section p:nth-child(1) span:nth-child(1)
{ {
top: -200px; top: -200px;
left: -120px; left: -140px;
} }
.CardGame_section p:nth-child(1) span:nth-child(2) .CardGame_section p:nth-child(1) span:nth-child(2)
{ {
top: -170px; top: -170px;
left: -100px; left: -125px;
} }
.CardGame_section p:nth-child(1) span:nth-child(3) .CardGame_section p:nth-child(1) span:nth-child(3)
{ {
top: -140px; top: -140px;
left: -80px; left: -105px;
} }
/* ============================== */ /* ============================== */
.CardGame_section p:nth-child(2) span:nth-child(1) .CardGame_section p:nth-child(2) span:nth-child(1)
{ {
top: -110px; top: -110px;
left: -65px; left: -90px;
} }
.CardGame_section p:nth-child(2) span:nth-child(2) .CardGame_section p:nth-child(2) span:nth-child(2)
{ {
top: -80px; top: -80px;
left: -50px; left: -75px;
} }
.CardGame_section p:nth-child(2) span:nth-child(3) .CardGame_section p:nth-child(2) span:nth-child(3)
{ {
top: -50px; top: -50px;
left: -35px; left: -55px;
} }
/* ============================== */ /* ============================== */
.CardGame_section p:nth-child(3) span:nth-child(1) .CardGame_section p:nth-child(3) span:nth-child(1)
{ {
top: 0px; top: 0px;
left: -20px; left: -30px;
} }
.CardGame_section p:nth-child(3) span:nth-child(2) .CardGame_section p:nth-child(3) span:nth-child(2)
{ {
top: 28px; top: 28px;
left: -10px; left: -25px;
} }
.CardGame_section p:nth-child(3) span:nth-child(3) .CardGame_section p:nth-child(3) span:nth-child(3)
{ {
top: 56px; top: 56px;
left: 0px; left: -20px;
} }
/* ============================== */ /* ============================== */
.CardGame_section p:nth-child(4) span:nth-child(1) .CardGame_section p:nth-child(4) span:nth-child(1)
{ {
top: 85px; top: 85px;
left: 10px; left: -13px;
} }
.CardGame_section p:nth-child(4) span:nth-child(2) .CardGame_section p:nth-child(4) span:nth-child(2)
{ {
top: 115px; top: 115px;
left: 20px; left: -11px;
} }
.CardGame_section p:nth-child(4) span:nth-child(3) .CardGame_section p:nth-child(4) span:nth-child(3)
{ {
top: 145px; top: 145px;
left: 30px; left: -9px;
} }
.mobile p .mobile p
{ {
...@@ -701,7 +709,7 @@ header .right_side a:nth-child(4) ...@@ -701,7 +709,7 @@ header .right_side a:nth-child(4)
} }
.area .area
{ {
grid-template-columns: 40% 57% !important; grid-template-columns: 40% 57% ;
} }
.area p:nth-child(3) .area p:nth-child(3)
{ {
...@@ -711,6 +719,9 @@ header .right_side a:nth-child(4) ...@@ -711,6 +719,9 @@ header .right_side a:nth-child(4)
{ {
margin-top: 0px; margin-top: 0px;
} }
.card_info_res{
display: none;
}
/* ==================================== */ /* ==================================== */
/* ===========ticketing================ */ /* ===========ticketing================ */
...@@ -856,7 +867,7 @@ align-items: start; ...@@ -856,7 +867,7 @@ align-items: start;
padding: 7px 20px; padding: 7px 20px;
display: block; display: block;
width: 50%; width: 50%;
margin: 30px 0 0 40%; margin: 0px 0 0 40%;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
text-align: start; text-align: start;
...@@ -871,16 +882,14 @@ align-items: start; ...@@ -871,16 +882,14 @@ align-items: start;
width: 95%; width: 95%;
margin: 0 2.5%; margin: 0 2.5%;
background-color: #1b0b3c; background-color: #1b0b3c;
} }
.days_grid .days:nth-child(2) a .ticketing_section .days:nth-child(3)
{
/* margin-top: 140px !important; */
}
.ticketing_sec_ar a
{ {
margin-top: 60px !important; padding-bottom: 50px;
} }
.days_grid .days > div:nth-child(2) div .days_grid .days > div:nth-child(2) div
{ {
width: 100%; width: 100%;
...@@ -889,7 +898,7 @@ align-items: start; ...@@ -889,7 +898,7 @@ align-items: start;
.days_grid .days .days_grid .days
{ {
background: linear-gradient(to right ,#1b0b3c,var(--purple_col)); background: linear-gradient(to right ,#1b0b3c,var(--purple_col));
width: 100% !important; width: 100% ;
margin: 10px 0 !important; margin: 10px 0 !important;
padding-bottom: 30px; padding-bottom: 30px;
...@@ -935,6 +944,18 @@ align-items: start; ...@@ -935,6 +944,18 @@ align-items: start;
justify-content: center !important; justify-content: center !important;
column-gap: 40%; column-gap: 40%;
} }
.days_grid .days:nth-child(2) > div:nth-child(2) div
{
margin-top: 40px;
}
.ticketing_sec_ar .days_grid .days:nth-child(1) a
{
margin-top: 60px ;
}
.ticketing_sec_ar .days_grid .days:nth-child(2) > div:nth-child(2) div
{
margin-top: 0;
}
.map .map
{ {
width: 90%; width: 90%;
...@@ -1077,7 +1098,7 @@ align-items: start; ...@@ -1077,7 +1098,7 @@ align-items: start;
.hidden .hidden
{ {
transform: translateX(100%); transform: translateX(250%);
width: 0; width: 0;
} }
.hidden1 .hidden1
...@@ -1121,9 +1142,9 @@ align-items: start; ...@@ -1121,9 +1142,9 @@ align-items: start;
width: 80%; width: 80%;
margin: 0; margin: 0;
} }
.ticketing_sec_ar a .ticketing_sec_ar a
{ {
margin: 30px 45% 0 0; margin: 60px 46.5% 0 0;
background: linear-gradient(90deg,var(--bck_color), #6a1a97,var(--purple_col)); background: linear-gradient(90deg,var(--bck_color), #6a1a97,var(--purple_col));
border-radius: 8px; border-radius: 8px;
...@@ -1140,14 +1161,39 @@ align-items: start; ...@@ -1140,14 +1161,39 @@ align-items: start;
{ {
padding: 50px 30px 30px; padding: 50px 30px 30px;
} }
.col_gap .card_ar
{ {
column-gap: 40px; column-gap: 40px;
} }
.hero_title_res
{
display: none;
}
.days_grid .days:nth-child(2) a
{
margin-top: 80px;
}
/* ========================== */ /* ========================== */
/* =====Responsive========== */ /* =====Responsive========== */
@media(max-width:1500px)
{
.ticketing_section .days > div:nth-child(1)
{
width: 70%;
}
.ticketing_section a
{
margin: 0 0 0 42%;
}
}
@media(max-width:1200px) @media(max-width:1200px)
{ {
.ticketing_section a
{
margin: 0 0 0 38%;
}
.hero_section div:nth-child(2) h3 .hero_section div:nth-child(2) h3
{ {
width: 95%; width: 95%;
...@@ -1156,17 +1202,29 @@ align-items: start; ...@@ -1156,17 +1202,29 @@ align-items: start;
{ {
margin-top: 0; margin-top: 0;
} }
.days_grid .days:nth-child(1) a
{
margin-top: 77px;
}
/* =============== */ /* =============== */
.activate_section p, .activate_section p,
.activate_section h1,
.VR_section p, .VR_section p,
.activate_section h1,
.CardGame_section p .CardGame_section p
{ {
width: 100%; /* width: 100%; */
width: 90%; width: 95%;
margin-left: 7%; margin-left: 0%;
font-size: 14px; font-size: 16px;
font-weight: normal; font-weight: normal;
/* text-align: center; */
/* text-align: center; */
}
.activate_section h1
{
text-align: center;
font-size: 30px;
} }
.header_ar .left_side .header_ar .left_side
{ {
...@@ -1176,8 +1234,145 @@ align-items: start; ...@@ -1176,8 +1234,145 @@ align-items: start;
{ {
margin-left: 20px; margin-left: 20px;
} }
.hero_section div:nth-child(2) h3 span
{
font-size: 40px;
}
.hero_section div:nth-child(2) h3 span:nth-child(1)
{
left: -127px;
top: -180px;
}
.hero_section div:nth-child(2) h3 span:nth-child(2)
{
left: -100px;
top: -140px;
}
.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: -60px;
}
.hero_section div:nth-child(2) h3 span:nth-child(5)
{
left: -40px;
top: -20px;
}
.hero_section div:nth-child(2) p
{
left:-25px;
top: 50px;
}
.hero_section a
{
top: 120px;
}
.hero_ar div:nth-child(2) p
{
top: 10px;
}
.hero_ar a
{
top: 22px;
}
.CardGame_section p span
{
font-size: 20px;
}
.CardGame_section p:nth-child(1) span:nth-child(1)
{
top: -190px;
left: -128px;
}
.CardGame_section p:nth-child(1) span:nth-child(2)
{
top: -166px;
left: -117px;
}
.CardGame_section p:nth-child(1) span:nth-child(3)
{
top: -143px;
left: -103px;
}
/* ============================== */
.CardGame_section p:nth-child(2) span:nth-child(1)
{
top: -119px;
left: -89px;
}
.CardGame_section p:nth-child(2) span:nth-child(2)
{
left: -79px;
top: -96px;
}
.CardGame_section p:nth-child(2) span:nth-child(3)
{
top: -74px;
left: -65px;
}
.days_grid .days:nth-child(2) a
{
margin-top: 47px;
}
/* ============================== */
.CardGame_section p:nth-child(3) span:nth-child(1)
{
top: -37px;
left: -49px;
}
.CardGame_section p:nth-child(3) span:nth-child(2)
{top: -14px;
left: -44px;
}
.CardGame_section p:nth-child(3) span:nth-child(3)
{
top: 8px;
left: -38px;
}
/* ======================= */
.CardGame_section p:nth-child(4) span:nth-child(1)
{
top: 31px;
left: -30px;
}
.CardGame_section p:nth-child(4) span:nth-child(2)
{
top: 53px;
left: -27px;
}
.CardGame_section p:nth-child(4) span:nth-child(3)
{
top: 77px;
left: -21px;
}
.activate_section div:nth-child(1)
{
display: flex;
flex-direction: column;
align-items: center;
}
.CardGame_section
{
grid-template-columns: 60% 39%;
}
.ticketing_sec_ar .days_grid .days:nth-child(2) a
{
margin-top: 130px;
}
} }
@media(max-width:1000px) @media(max-width:1000px)
{ {
.e_sport > div:nth-child(2) .e_sport > div:nth-child(2)
...@@ -1192,6 +1387,10 @@ align-items: start; ...@@ -1192,6 +1387,10 @@ align-items: start;
justify-content: start; justify-content: start;
flex-wrap: wrap; flex-wrap: wrap;
} }
header .logo_cont
{
column-gap: 0;
}
header .left_side header .left_side
{ {
...@@ -1212,19 +1411,54 @@ align-items: start; ...@@ -1212,19 +1411,54 @@ align-items: start;
column-gap: 3px; column-gap: 3px;
margin: 0; margin: 0;
text-align: center; text-align: center;
justify-content: center;
} }
header .right_side header .right_side
{ {
justify-content: center; justify-content: center;
} }
.hero_section div:nth-child(2) .hero_title
{
display: none;
}
.hero_title_res
{
display: block;
}
.hero_section div:nth-child(2) p,
.hero_section a
{
position: relative;
top:unset;
left: unset;
}
.CardGame_section .card_info
{
display: none !important;
}
.CardGame_section .card_info_res
{
display: block;
}
} }
@media(max-width:950px) @media(max-width:950px)
{ {
.ticketing_section .days:nth-child(3) a
{
margin-left: 52%;
}
.last div:nth-child(1) h1
{
font-size: 25px;
}
.rtl_size .rtl_size
{ {
grid-template-columns: 80% !important; grid-template-columns: 100% !important;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 50px 40px 30px;
} }
.ltr_size .ltr_size
...@@ -1235,7 +1469,7 @@ align-items: start; ...@@ -1235,7 +1469,7 @@ align-items: start;
} }
.ltr_size > div .ltr_size > div
{ {
width: 80%; width: 100%;
} }
.activate_section div:nth-child(2) a .activate_section div:nth-child(2) a
{ {
...@@ -1243,22 +1477,23 @@ align-items: start; ...@@ -1243,22 +1477,23 @@ align-items: start;
} }
.hero_section div:nth-child(1) img, .activate_section img, .CardGame_section img .hero_section div:nth-child(1) img, .activate_section img, .CardGame_section img
{ {
width: 80%; width: 80% !important ;
margin-left: 10%; margin-left: 10%;
} }
.CardGame_section div:nth-child(1) a .CardGame_section div:nth-child(1) a
{ {
left: 90px; left: 90px;
} }
.card_ar div:nth-child(1) a
{
left: 165px;
}
.ticketing_section .days > div:nth-child(2) .ticketing_section .days > div:nth-child(2)
{ {
flex-direction: column; flex-direction: column;
margin-left: 0; margin-left: 0;
} }
.ticketing_section .days > div:nth-child(2) > div
{
width: 80%;
}
.ticketing_section .days > div:nth-child(2) p .ticketing_section .days > div:nth-child(2) p
{ {
width: 95%; width: 95%;
...@@ -1270,16 +1505,13 @@ align-items: start; ...@@ -1270,16 +1505,13 @@ align-items: start;
} }
.days_grid .days_grid
{ {
grid-template-columns: 70% !important; grid-template-columns: 100% !important;
}
.days_grid > div:nth-child(2)
{
margin-left: 30% !important;
} }
.ticketing_section a .ticketing_section a
{ {
width: 40%; width: 40%;
margin-left: 60%; margin-left: 45%;
} }
.ticketing_section .last > div:nth-child(1) .ticketing_section .last > div:nth-child(1)
{ {
...@@ -1313,19 +1545,88 @@ align-items: start; ...@@ -1313,19 +1545,88 @@ align-items: start;
.ticketing_sec_ar a .ticketing_sec_ar a
{ {
transform: translateX(0); transform: translateX(0);
margin: 0 65% 0 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
{
margin-top: 30px;
} }
.header_ar .left_side .header_ar .left_side
{ {
width: 80%; width: 80%;
} }
.activate_section div:nth-child(1)
{
margin-top: 20px !important;
}
.activate_section h1
{
font-size: 20px;
}
.activate_section div:nth-child(2) a
{
right: 108px !important;
}
.VR_section img
{
width: 80% ;
margin-left: 10%;
}
.VR_section a
{
margin-top: 30px;
padding: 8px 58px;
}
.activate_section
{
padding: 50px 40px 30px;
}
.letters>div div:nth-child(2)
{
margin-top: 0;
}
.activate_section div:nth-child(1)
{
align-items: start;
}
.activate_section h1
{
text-align: start;
}
.ticketing_section .last a
{
margin-left: 52%;
}
.ticketing_section .days > div:nth-child(2) div
{
width: 100%;
/* text-align: center; */
}
} }
@media(max-width:700px) @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;
}
.ticketing_section .days:nth-child(3) a,
.ticketing_section .last a
{
margin-left: 25%;
}
.rtl_size .rtl_size
{ {
grid-template-columns: 95% !important; grid-template-columns: 95% !important;
...@@ -1352,6 +1653,7 @@ align-items: start; ...@@ -1352,6 +1653,7 @@ align-items: start;
.ltr_size > div .ltr_size > div
{ {
width: 95%; width: 95%;
text-align: center;
} }
.e_sport > div:nth-child(2) .e_sport > div:nth-child(2)
{ {
...@@ -1367,7 +1669,8 @@ align-items: start; ...@@ -1367,7 +1669,8 @@ align-items: start;
} }
.activate_section p, .activate_section p,
.activate_section h1, .VR_section p .VR_section p,
.CardGame_section p span
{ {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
...@@ -1375,11 +1678,16 @@ align-items: start; ...@@ -1375,11 +1678,16 @@ align-items: start;
.ticketing_section .days > div:nth-child(1) .ticketing_section .days > div:nth-child(1)
{ {
flex-direction: column; flex-direction: column;
width: 100%;
margin: 0;
} }
.ticketing_section .days > div:nth-child(1) h1, .ticketing_section .days > div:nth-child(1) h1,
.ticketing_section .days > div:nth-child(1) span .ticketing_section .days > div:nth-child(1) span
{ {
font-size: 30px; font-size: 30px;
text-align: center;
} }
.ticketing_section .days > div:nth-child(2) > div .ticketing_section .days > div:nth-child(2) > div
{ {
...@@ -1428,6 +1736,8 @@ align-items: start; ...@@ -1428,6 +1736,8 @@ align-items: start;
{ {
grid-template-columns: 80%; grid-template-columns: 80%;
row-gap: 30px; row-gap: 30px;
align-items:center;
justify-content: center;
} }
.letters div:nth-child(1) .letters div:nth-child(1)
{ {
...@@ -1479,16 +1789,77 @@ align-items: start; ...@@ -1479,16 +1789,77 @@ align-items: start;
align-items: start; align-items: start;
margin-top: 10px; margin-top: 10px;
} }
.ticketing_sec_ar a
.hero_title_res
{
line-height: 32px !important;
font-size: 22px !important;
}
.hero_section div:nth-child(1) img, .activate_section img, .CardGame_section img
{ {
margin: 120px 25% 0 0; width: 100% !important;
transform: translateX(0) !important; margin-left: 0;
} }
.hero_section div:nth-child(2) p, .activate_section p
{
font-size: 15px;
font-weight: normal;
width: 100% !important;
}
.hero_section, .VR_section, .CardGame_section, .activate_section, .mobile
{
padding: 50px 0 0 0 !important;
}
.activate_section div:nth-child(1)
{
text-align: center;
}
.hero_section div:nth-child(2) p, .activate_section p
{
width: 95% !important;
margin: 15px 0 0 0 !important ;
}
.activate_section h1
{
margin: 0 !important;
}
.activate_section div:nth-child(2) a
{
right: 28px !important;
}
.VR_section img
{
width: 90%;
margin-left: 5%;
}
.VR_section a
{
margin-top: 15px;
}
.VR_section div:nth-child(2)
{
text-align: center;
}
.last div:nth-child(1) h1
{
width: 60%;
text-align: center;
}
.VR_section p,
.activate_section h1,
.CardGame_section p
{
text-align: center;
}
} }
@media(max-width:500px) @media(max-width:500px)
{ {
.ticketing_sec_ar a
{
margin: 120px 32% 0 0;
}
.play_games h1 .play_games h1
{ {
font-size: 25px; font-size: 25px;
...@@ -1508,6 +1879,14 @@ align-items: start; ...@@ -1508,6 +1879,14 @@ align-items: start;
{ {
font-size: 16px; font-size: 16px;
padding: 8px 28px; padding: 8px 28px;
}
.CardGame_section div:nth-child(1) a{
left: 30px;
}
.VR_section a
{
padding: 8px 58px;
} }
.ticketing_section a { .ticketing_section a {
/* transform: translateX(70px); */ /* transform: translateX(70px); */
...@@ -1517,10 +1896,61 @@ align-items: start; ...@@ -1517,10 +1896,61 @@ align-items: start;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.hero_title_res
{
font-size: 18px !important;
}
.hero_section div:nth-child(2) p, .activate_section p,
.VR_section p,
.CardGame_section p
{
font-size: 12px;
}
.hero_section div:nth-child(2) h3
{
width: 95%;
margin-left: 2.5%;
margin-right: 2.5%;
}
.hero_section div:nth-child(2) p
{
margin-left: 2.5% !important;
margin-right: 2.5% !important;
}
.hero_section a,
.hero_ar a
{
width: 90%;
margin-left: 2.5%;
margin-right: 2.5%;
}
.letters div:nth-child(1)
{
justify-content: center;
}
.letters div p:nth-child(1)
{
text-align: center;
}
.ticketing_sec_ar .days > div:nth-child(2)
{
margin: 0;
}
header .left_side img
{
width: 60px;
height: 100px;
}
header .logo_cont
{
align-items: center;
}
} }
@media(max-width:400px) @media(max-width:400px)
{ {
.rtl_size .rtl_size
{ {
grid-template-columns: 100% !important; grid-template-columns: 100% !important;
...@@ -1540,8 +1970,8 @@ align-items: start; ...@@ -1540,8 +1970,8 @@ align-items: start;
{ {
grid-template-columns: 95%; grid-template-columns: 95%;
justify-content: center; justify-content: center;
width: 100%; width: 90%;
margin: 70px 0 0 0 ; margin: 70px 5% 0 ;
} }
.e_sport h1 .e_sport h1
{ {
...@@ -1567,7 +1997,7 @@ align-items: start; ...@@ -1567,7 +1997,7 @@ align-items: start;
} }
.ticketing_sec_ar .days > div:nth-child(2) p .ticketing_sec_ar .days > div:nth-child(2) p
{ {
text-align: start; /* text-align: center; */
margin-top: 10px; margin-top: 10px;
} }
.ticketing_section > h1 .ticketing_section > h1
...@@ -1600,6 +2030,11 @@ align-items: start; ...@@ -1600,6 +2030,11 @@ align-items: start;
{ {
width: 35%; width: 35%;
} }
.swiper-slide img
{
width: 90%;
margin-left: 5%;
}
...@@ -1607,10 +2042,63 @@ align-items: start; ...@@ -1607,10 +2042,63 @@ align-items: start;
{ {
padding: 0 5px; padding: 0 5px;
} }
.activate_section p, .VR_section p,
.CardGame_section p
{
font-size: 12px;
width: 95% ;
margin-left: 2.5% !important;
margin-right: 2.5% !important;
}
.CardGame_section p
{
margin-left: 2.5% !important;
margin-right: 2.5% !important;
}
.activate_section h1
{
font-size: 22px ;
}
.VR_section img
{
width: 100%;
margin-left: 0;
}
.ticketing_section a
{
margin-left: 23%;
}
.letters div p:nth-child(1)
{
text-align: center;
font-size: 15px;
}
.letters div p:nth-child(2), .letters div p:nth-child(3)
{
margin-bottom: 30px;
}
.e_sport > div div .abs_img
{
left: 23px;
top: 84px;
}
.e_sport > div div .abs_img1 {
bottom: -37px;
}
} }
@media(max-width:300px)
@media(max-width:322px)
{ {
.ticketing_section .days:nth-child(3) a,
.ticketing_section .last a
{
margin-left: 20%;
}
.hero_section div:nth-child(2) h3 .hero_section div:nth-child(2) h3
{ {
...@@ -1632,4 +2120,12 @@ align-items: start; ...@@ -1632,4 +2120,12 @@ align-items: start;
} }
.ticketing_section a
{
margin-left: 20%;
}
.ticketing_sec_ar a
{
margin: 120px 28% 0 0;
}
} }
\ No newline at end of file
txt.txt deleted 100644 → 0
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