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 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<header id="header">
<div class="left_side">
<div class="logo_cont">
<img src="./images/logo.png" alt="Logo">
......@@ -30,7 +30,7 @@
</p>
</div>
<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><i class="fa-solid fa-bars"></i></a>
......@@ -68,12 +68,12 @@
</header>
<div class="hero_section rtl_size" id="hero">
<div class="hero_section rtl_size" id="hero">
<div >
<img src="./images/shape.png">
</div>
<div>
<h3 id="hero_title">
<h3 id="hero_title" class="hero_title">
<span>
LOREM IPSUM
</span>
......@@ -84,14 +84,15 @@
SED DIAM .
</span>
</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>
<p id="hero_desc">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="book_now">book now</a>
</div>
</div>
<div class="play_games ">
<div class="play_games " id="play_games">
<h1 id="playable_games">PLAYABLE GAMES</h1>
<div class="swiper_parent">
<div class="swiper mySwiper">
......@@ -159,14 +160,14 @@
<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="CardGame_section rtl_size" id="card_games">
<div class="CardGame_section rtl_size" id="card_games">
<div >
<img src="./images/shape.png">
<a id="card_games_btn">CARD / BOARD GAMES</a>
</div>
<div id="card_info">
<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>
......@@ -180,6 +181,21 @@
<span>CONSECTETUER ADIPISCING ELIT , </span>
<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 id="card_info_ar" class="hidden1">
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
......@@ -231,39 +247,30 @@
<div class="title" id="ticketing1">
<h1>
<span id="">T</span>
<!-- <span id="ticketing2">T</span> -->
</h1>
<h1>
<span id="">I</span>
<!-- <span id="ticketing2">I</span> -->
</h1>
<h1>
<span id="">C</span>
<!-- <span id="ticketing2">C</span> -->
</h1>
<h1>
<span id="">K</span>
<!-- <span id="ticketing2">K</span> -->
</h1>
<h1>
<span id="">E</span>
<!-- <span id="ticketing2">E</span> -->
</h1>
<h1>
<span id="">T</span>
<!-- <span id="ticketing2">T</span> -->
</h1>
<h1>
<span id="">I</span>
<!-- <span id="ticketing2">I</span> -->
</h1>
<h1>
<span id="">N</span>
<!-- <span id="ticketing2">N</span> -->
</h1>
<h1>
<span id="">G</span>
<!-- <span id="ticketing2">G</span> -->
</h1>
</div>
<div id="ticketing_title_ar" class=" title hidden1">
......@@ -338,7 +345,7 @@
<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>
<div class="oragnize" id="organize">
<h1 id="organized">ORGANIZED BY</h1>
<div>
......@@ -369,7 +376,7 @@
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="index.js"></script>
......
index.js
View file @ 039aea8b
......@@ -57,6 +57,8 @@
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",
......@@ -98,7 +100,6 @@
newsletter_text: "RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL",
email_label: "EMAIL: ",
phone_label: "PHONE: ",
ticketing1:"ticketing",
ticketing2:"ticketing",
pc_btn:"PC - PS5 ZONE",
card_games_btn: "CARD / BOARD GAMES",
......@@ -167,7 +168,6 @@
area_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
ticketing1:"حجز التذاكر",
ticketing2:"حجز التذاكر",
newsletter_text: "احصل على أحدث الأخبار من THE BASE - GAMING FESTIVAL",
email_label: "البريد الإلكتروني: ",
......@@ -210,7 +210,9 @@ function changeLanguage(lang) {
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")
......@@ -220,21 +222,25 @@ function changeLanguage(lang) {
e_sport.classList.add("e_sport_ar")
organize.classList.add("e_sport_ar")
activate_section.classList.add("padd")
card_games.classList.add("col_gap")
card_games.classList.add("card_ar")
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")
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")
place_ar.classList.remove("hidden1")
place.classList.add("hidden1")
} 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")
......@@ -245,14 +251,17 @@ place.classList.add("hidden1")
e_sport.classList.remove("e_sport_ar")
organize.classList.remove("e_sport_ar")
activate_section.classList.remove("padd")
card_games.classList.remove("col_gap")
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")
......
style.css
View file @ 039aea8b
......@@ -39,7 +39,7 @@ header .left_side
}
header .left_side img
{
width: 100px;
width: 65px;
height: 100px;
object-fit: contain;
/* margin-right: 14px; */
......@@ -167,8 +167,7 @@ header .right_side a:nth-child(4)
align-items: start;
padding:10px 50px 0 50px ;
background-color: var(--bck_color);
/* justify-content: space-between; */
/* margin-top: 50px; */
}
.VR_section
{
......@@ -177,27 +176,31 @@ header .right_side a:nth-child(4)
}
.ltr_size
{
grid-template-columns: 48% 50% !important;
grid-template-columns: 48% 50% ;
box-sizing: border-box;
column-gap: 10px;
padding: 50px 30px 40px;
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% !important;
grid-template-columns: 53% 45%;
box-sizing: border-box;
column-gap: 10px;
align-items: center;
padding: 50px 0px 0px;
padding: 80px 0px 0px;
}
#vr2_btn
{
......@@ -335,6 +338,10 @@ header .right_side a:nth-child(4)
font-weight: bold;
color: var(--title_color);
}
.play_games_ar
{
direction: ltr;
}
.swiper {
width: 93%;
max-width: 100%;
......@@ -422,9 +429,12 @@ header .right_side a:nth-child(4)
{
border-radius: 50px;
background: linear-gradient(to right,var(--purple_col),#6a1a97);
height: 450px;
height: 385px;
/* overflow: hidden; */
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
{
......@@ -435,12 +445,13 @@ header .right_side a:nth-child(4)
transform: translateY(-70px);
object-fit: cover;
/* 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)
{
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
......@@ -464,7 +472,7 @@ header .right_side a:nth-child(4)
}
.e_sport > div div .abs_img1
{
bottom: -50px;
bottom: -42px;
top: unset;
}
.e_sport > div div .abs_img2
......@@ -534,7 +542,7 @@ header .right_side a:nth-child(4)
}
.activate_section div:nth-child(1)
{
margin-top: 0 !important;
margin-top: 0 ;
}
.activate_section p
{
......@@ -592,8 +600,8 @@ header .right_side a:nth-child(4)
}
.CardGame_section
{
grid-template-columns: 50% 39% !important;
padding: 0 40px;
grid-template-columns: 55% 39%;
padding: 80px 40px 0;
/* justify-content: center; */
}
.CardGame_section div:nth-child(1) a
......@@ -630,65 +638,65 @@ header .right_side a:nth-child(4)
.CardGame_section p:nth-child(1) span:nth-child(1)
{
top: -200px;
left: -120px;
left: -140px;
}
.CardGame_section p:nth-child(1) span:nth-child(2)
{
top: -170px;
left: -100px;
left: -125px;
}
.CardGame_section p:nth-child(1) span:nth-child(3)
{
top: -140px;
left: -80px;
left: -105px;
}
/* ============================== */
.CardGame_section p:nth-child(2) span:nth-child(1)
{
top: -110px;
left: -65px;
left: -90px;
}
.CardGame_section p:nth-child(2) span:nth-child(2)
{
top: -80px;
left: -50px;
left: -75px;
}
.CardGame_section p:nth-child(2) span:nth-child(3)
{
top: -50px;
left: -35px;
left: -55px;
}
/* ============================== */
.CardGame_section p:nth-child(3) span:nth-child(1)
{
top: 0px;
left: -20px;
left: -30px;
}
.CardGame_section p:nth-child(3) span:nth-child(2)
{
top: 28px;
left: -10px;
left: -25px;
}
.CardGame_section p:nth-child(3) span:nth-child(3)
{
top: 56px;
left: 0px;
left: -20px;
}
/* ============================== */
.CardGame_section p:nth-child(4) span:nth-child(1)
{
top: 85px;
left: 10px;
left: -13px;
}
.CardGame_section p:nth-child(4) span:nth-child(2)
{
top: 115px;
left: 20px;
left: -11px;
}
.CardGame_section p:nth-child(4) span:nth-child(3)
{
top: 145px;
left: 30px;
left: -9px;
}
.mobile p
{
......@@ -701,7 +709,7 @@ header .right_side a:nth-child(4)
}
.area
{
grid-template-columns: 40% 57% !important;
grid-template-columns: 40% 57% ;
}
.area p:nth-child(3)
{
......@@ -711,6 +719,9 @@ header .right_side a:nth-child(4)
{
margin-top: 0px;
}
.card_info_res{
display: none;
}
/* ==================================== */
/* ===========ticketing================ */
......@@ -856,7 +867,7 @@ align-items: start;
padding: 7px 20px;
display: block;
width: 50%;
margin: 30px 0 0 40%;
margin: 0px 0 0 40%;
cursor: pointer;
outline: none;
text-align: start;
......@@ -871,16 +882,14 @@ align-items: start;
width: 95%;
margin: 0 2.5%;
background-color: #1b0b3c;
}
.days_grid .days:nth-child(2) a
{
/* margin-top: 140px !important; */
}
.ticketing_sec_ar a
.ticketing_section .days:nth-child(3)
{
margin-top: 60px !important;
padding-bottom: 50px;
}
.days_grid .days > div:nth-child(2) div
{
width: 100%;
......@@ -889,7 +898,7 @@ align-items: start;
.days_grid .days
{
background: linear-gradient(to right ,#1b0b3c,var(--purple_col));
width: 100% !important;
width: 100% ;
margin: 10px 0 !important;
padding-bottom: 30px;
......@@ -935,6 +944,18 @@ align-items: start;
justify-content: center !important;
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
{
width: 90%;
......@@ -1077,7 +1098,7 @@ align-items: start;
.hidden
{
transform: translateX(100%);
transform: translateX(250%);
width: 0;
}
.hidden1
......@@ -1121,9 +1142,9 @@ align-items: start;
width: 80%;
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));
border-radius: 8px;
......@@ -1140,14 +1161,39 @@ align-items: start;
{
padding: 50px 30px 30px;
}
.col_gap
.card_ar
{
column-gap: 40px;
}
.hero_title_res
{
display: none;
}
.days_grid .days:nth-child(2) a
{
margin-top: 80px;
}
/* ========================== */
/* =====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)
{
.ticketing_section a
{
margin: 0 0 0 38%;
}
.hero_section div:nth-child(2) h3
{
width: 95%;
......@@ -1156,17 +1202,29 @@ align-items: start;
{
margin-top: 0;
}
.days_grid .days:nth-child(1) a
{
margin-top: 77px;
}
/* =============== */
.activate_section p,
.activate_section h1,
.VR_section p,
.activate_section h1,
.CardGame_section p
{
width: 100%;
width: 90%;
margin-left: 7%;
font-size: 14px;
/* width: 100%; */
width: 95%;
margin-left: 0%;
font-size: 16px;
font-weight: normal;
/* text-align: center; */
/* text-align: center; */
}
.activate_section h1
{
text-align: center;
font-size: 30px;
}
.header_ar .left_side
{
......@@ -1176,8 +1234,145 @@ align-items: start;
{
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)
{
.e_sport > div:nth-child(2)
......@@ -1192,6 +1387,10 @@ align-items: start;
justify-content: start;
flex-wrap: wrap;
}
header .logo_cont
{
column-gap: 0;
}
header .left_side
{
......@@ -1212,19 +1411,54 @@ align-items: start;
column-gap: 3px;
margin: 0;
text-align: center;
justify-content: center;
}
header .right_side
{
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)
{
.ticketing_section .days:nth-child(3) a
{
margin-left: 52%;
}
.last div:nth-child(1) h1
{
font-size: 25px;
}
.rtl_size
{
grid-template-columns: 80% !important;
grid-template-columns: 100% !important;
align-items: center;
justify-content: center;
padding: 50px 40px 30px;
}
.ltr_size
......@@ -1235,7 +1469,7 @@ align-items: start;
}
.ltr_size > div
{
width: 80%;
width: 100%;
}
.activate_section div:nth-child(2) a
{
......@@ -1243,22 +1477,23 @@ align-items: start;
}
.hero_section div:nth-child(1) img, .activate_section img, .CardGame_section img
{
width: 80%;
width: 80% !important ;
margin-left: 10%;
}
.CardGame_section div:nth-child(1) a
{
left: 90px;
}
.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 > div:nth-child(2) > div
{
width: 80%;
}
.ticketing_section .days > div:nth-child(2) p
{
width: 95%;
......@@ -1270,16 +1505,13 @@ align-items: start;
}
.days_grid
{
grid-template-columns: 70% !important;
}
.days_grid > div:nth-child(2)
{
margin-left: 30% !important;
grid-template-columns: 100% !important;
}
.ticketing_section a
{
width: 40%;
margin-left: 60%;
margin-left: 45%;
}
.ticketing_section .last > div:nth-child(1)
{
......@@ -1313,19 +1545,88 @@ align-items: start;
.ticketing_sec_ar a
{
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
{
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)
{
.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
{
grid-template-columns: 95% !important;
......@@ -1352,6 +1653,7 @@ align-items: start;
.ltr_size > div
{
width: 95%;
text-align: center;
}
.e_sport > div:nth-child(2)
{
......@@ -1367,7 +1669,8 @@ align-items: start;
}
.activate_section p,
.activate_section h1, .VR_section p
.VR_section p,
.CardGame_section p span
{
font-size: 14px;
font-weight: normal;
......@@ -1375,11 +1678,16 @@ align-items: start;
.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
{
......@@ -1428,6 +1736,8 @@ align-items: start;
{
grid-template-columns: 80%;
row-gap: 30px;
align-items:center;
justify-content: center;
}
.letters div:nth-child(1)
{
......@@ -1479,16 +1789,77 @@ align-items: start;
align-items: start;
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;
transform: translateX(0) !important;
width: 100% !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)
{
.ticketing_sec_ar a
{
margin: 120px 32% 0 0;
}
.play_games h1
{
font-size: 25px;
......@@ -1508,6 +1879,14 @@ align-items: start;
{
font-size: 16px;
padding: 8px 28px;
}
.CardGame_section div:nth-child(1) a{
left: 30px;
}
.VR_section a
{
padding: 8px 58px;
}
.ticketing_section a {
/* transform: translateX(70px); */
......@@ -1517,10 +1896,61 @@ align-items: start;
width: 100%;
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)
{
.rtl_size
{
grid-template-columns: 100% !important;
......@@ -1540,8 +1970,8 @@ align-items: start;
{
grid-template-columns: 95%;
justify-content: center;
width: 100%;
margin: 70px 0 0 0 ;
width: 90%;
margin: 70px 5% 0 ;
}
.e_sport h1
{
......@@ -1567,7 +1997,7 @@ align-items: start;
}
.ticketing_sec_ar .days > div:nth-child(2) p
{
text-align: start;
/* text-align: center; */
margin-top: 10px;
}
.ticketing_section > h1
......@@ -1600,6 +2030,11 @@ align-items: start;
{
width: 35%;
}
.swiper-slide img
{
width: 90%;
margin-left: 5%;
}
......@@ -1607,10 +2042,63 @@ align-items: start;
{
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
{
......@@ -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