Skip to content

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

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 1912 additions and 0 deletions
index.html 0 → 100644
View file @ 72ff1ca9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
<title>THE BASE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<div class="left_side">
<div class="logo_cont">
<img src="./images/default-ui-image.webp" alt="Logo">
<p class="logo">
<span id="logo_the">The </span>
<span id="logo_base">base</span>
<span id="logo_gaming">gaming festival</span>
</p>
</div>
<i class="fa-solid fa-bars list_icon" id="open_list"></i>
<div class="right_side_h hidden">
<a id="ticketing_btn1">ticketing</a>
<a><i class="fa-solid fa-bars"></i></a>
<a class="en_lang1">EN</a>
<a class="ar_lang1">AR</a>
</div>
<p class="date">
<span id="from">from</span>
<span id="date_from">feb 5TH</span>
<span id="to">to</span>
<span id="date_to">feb 7TH 2025</span>
</p>
<p class="place" id="place">
<span>HALL 8 -</span>
<span>KUWAIT INTERNATIONAL</span>
<span> FAIR GROUND</span>
</p>
</div>
<div class="right_side">
<a id="ticketing_btn">ticketing</a>
<a>
<span></span>
<span></span>
<span></span>
</a>
<a class="en_lang">EN</a>
<a class="ar_lang">AR</a>
</div>
</header>
<div class="hero_section rtl_size" id="hero">
<div >
<img src="./images/shape.png">
</div>
<div>
<h3 id="hero_title">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</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 ">
<h1 id="playable_games">PLAYABLE GAMES</h1>
<div class="swiper_parent">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
</div>
<div class="swiper-pagination"> next</div>
</div>
</div>
</div>
<div class="e_sport" id="e_sport">
<h1 id="esports">E-SPORTS TOURNAMENTS</h1>
<div>
<div>
<img src ="images/avatar1.png">
</div>
<div>
<img src ="images/avatar1.png">
</div>
<div>
<img src ="images/avatar1.png">
</div>
</div>
<div class="button_parent">
<a id="e_sport_btn">book now</a>
</div>
</div>
<div class="activate_section ltr_size">
<div>
<h1 id="casual">CASUAL ACTIVITIES</h1>
<p id="casual_text2">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="casual_text3">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="casual_text4">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="casual_text5">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
</div>
<div >
<img src="./images/shape_rev.png">
<a id="pc_btn">PC - PS5 ZONE</a>
</div>
</div>
<div class="VR_section rtl_size">
<div >
<img src="./images/shape.png">
</div>
<div>
<p id="vr_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="vr_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="vr_btn">VR ZONE</a>
</div>
</div>
<div class="CardGame_section rtl_size">
<div >
<img src="./images/shape.png">
<a id="card_games_btn">CARD / BOARD GAMES</a>
</div>
<div>
<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 class="VR_section mobile ltr_size">
<div>
<p id="mob_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="mob_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="mob_btn">MOBILE AREA</a>
</div>
<div >
<img src="./images/shape.png">
</div>
</div>
<div class="activate_section area ltr_size">
<div>
<p id="area_txt1">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt2">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt3">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt4">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
</div>
<div >
<img src="./images/shape_rev.png">
<a id="cosplay_area_btn">COSPLAT AREA</a>
</div>
</div>
<div class="VR_section rtl_size">
<div >
<img src="./images/shape.png">
</div>
<div>
<p id="vr2_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="vr2_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="vr2_btn">VR ZONE</a>
</div>
</div>
<div class="ticketing_section" id="ticketing_section">
<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 hidden">
<h1>احجز تذكرتك</h1>
</div>
<div class="days">
<div>
<h1 id="pass3_title">3 DAY PASS - REGULAR</h1>
<span>$$.$$</span>
</div>
<div class="text">
<div>
<p id="pass3_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass3_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
</div>
<div>
<p id="pass3_p3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass3_p4">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<a id="book_pass3_btn">BOOK YOUR PASS</a>
</div>
</div>
</div>
<div class="days_grid">
<div class="days">
<div>
<h1 id="pass2_title">2 DAY PASS - REGULAR</h1>
<span>$$.$$</span>
</div>
<div class="text">
<div>
<p id="pass2_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass2_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<a id="book_pass2_btn">BOOK YOUR PASS</a>
</div>
</div>
</div>
<div class="days">
<div>
<h1 id="pass1_title">1 DAY PASS - REGULAR</h1>
<span>$$.$$</span>
</div>
<div class="text">
<div>
<p id="pass1_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass1_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<a id="book_pass1_btn">BOOK YOUR PASS</a>
</div>
</div>
</div>
</div>
<div class="days last">
<div>
<h1 id="vip_title">VIP TICKET</h1>
<span>$$.$$</span>
</div>
<div class="text">
<div>
<p id="vip_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="vip_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
</div>
<div>
<p id="vip_p3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="vip_p4">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<a id="book_vip_btn">BOOK YOUR PASS</a>
</div>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="oragnize">
<h1 id="organized">ORGANIZED BY</h1>
<div>
<img src="./images/organizer.png">
<img src="./images/organizer.png">
<img src="./images/organizer.png">
<img src="./images/organizer.png">
</div>
</div>
<div class="letters">
<h1 id="newsletter">NEWS LETTER</h1>
<div>
<div>
<img src="./images/logo.png">
</div>
<div>
<p id="newsletter_text">RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL</p>
<p>
<span id="email_label">EMAIL: </span>
<span id="email_value"></span>
</p>
<p>
<span id="phone_label">PHONE: </span>
<span id="phone_value"></span>
</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="index.js"></script>
</body>
</html>
\ No newline at end of file
index.js 0 → 100644
View file @ 72ff1ca9
const swiper = new Swiper(".mySwiper", {
slidesPerView: 7,
spaceBetween: 20,
loop: false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 10
},
// when window width is >= 480px
480: {
slidesPerView: 2,
spaceBetween: 15
},
// when window width is >= 640px
640: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 4,
spaceBetween: 20
},
1024: {
slidesPerView: 5,
spaceBetween: 20
},
1200: {
slidesPerView: 7,
spaceBetween: 20
}
}
});
// =========================
// Translation
let header_bar=document.getElementById("header")
let hero=document.getElementById("hero")
let ticketing_sec=document.getElementById("ticketing_section")
let ticketing_ar=document.getElementById("ticketing_title_ar")
let ticketing1=document.getElementById("ticketing1")
let newsletter_text=document.getElementById("newsletter_text")
let e_sport=document.getElementById("e_sport")
const translations = {
en: {
logo_the: "The",
logo_base: "base",
logo_gaming: "gaming festival",
from: "from",
date_from: "Feb 5TH",
to: "to",
date_to: "Feb 7TH 2025",
place: "HALL 8 - KUWAIT INTERNATIONAL FAIR GROUND",
ticketing_btn: "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.",
book_now: "Book Now",
playable_games: "PLAYABLE GAMES",
esports: "E-SPORTS TOURNAMENTS",
casual: "CASUAL ACTIVITIES",
ticketing_title: "TICKETING",
organized: "ORGANIZED BY",
newsletter: "NEWS LETTER",
casual_text1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
casual_text2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
casual_text3:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
casual_text4:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
casual_text5:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr_btn:"VR zone",
vr2_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr2_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr2_btn:"VR zone",
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_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
mob_btn:"MOBILE AREA",
area_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
area_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
area_txt3:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
area_txt4:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
newsletter_text: "RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL",
email_label: "EMAIL: ",
phone_label: "PHONE: ",
ticketing1:"ticketing",
ticketing2:"ticketing",
pc_btn:"PC - PS5 ZONE",
card_games_btn: "CARD / BOARD GAMES",
cosplay_area_btn: "COSPLAT AREA",
pass3_title: "3 DAY PASS - REGULAR",
pass3_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass3_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass3_p3: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass3_p4: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_pass3_btn: "BOOK YOUR PASS",
pass2_title: "2 DAY PASS - REGULAR",
pass2_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass2_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_pass2_btn: "BOOK YOUR PASS",
pass1_title: "1 DAY PASS - REGULAR",
pass1_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass1_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_pass1_btn: "BOOK YOUR PASS",
vip_title: "VIP TICKET",
vip_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vip_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vip_p3: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vip_p4: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_vip_btn: "BOOK YOUR PASS",
e_sport_btn: "BOOK Now",
},
ar: {
logo_the: "The",
logo_base: "Base",
logo_gaming: " GAMING FESTIVAL",
from: "من",
date_from: "٥ فبراير",
to: "إلى",
date_to: "٧ فبراير ٢٠٢٥",
place: "القاعة ٨ - أرض المعارض الدولية بالكويت",
ticketing_btn: "حجز التذاكر",
ticketing_btn1: "حجز التذاكر",
hero_title: "مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية.",
hero_desc: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
book_now: "احجز الآن",
playable_games: "الألعاب المتاحة",
esports: "بطولات الرياضات الإلكترونية",
casual: "أنشطة ترفيهية",
ticketing_title: "التذاكر",
organized: "من تنظيم",
newsletter: "النشرة الإخبارية",
casual_text1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text5:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr_btn:"منطقه ال VR",
vr2_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr2_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr2_btn:"منطقه ال VR",
card_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
card_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
card_txt3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
card_txt4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_btn:"منطقه الموبايل",
area_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
area_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
area_txt3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
area_txt4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
ticketing1:"حجز التذاكر",
ticketing2:"حجز التذاكر",
newsletter_text: "احصل على أحدث الأخبار من THE BASE - GAMING FESTIVAL",
email_label: "البريد الإلكتروني: ",
phone_label: "الهاتف: ",
pc_btn:"منطقه الكمبيوتر",
card_games_btn: "ألعاب الطاولة / الكروت",
cosplay_area_btn: "منطقة الكوسبلاي",
pass3_title: "تذكرة ٣ أيام - عادية",
pass3_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass3_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass3_p3: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass3_p4: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
book_pass3_btn: "احجز تذكرتك",
pass2_title: "تذكرة ٢ أيام - عادية",
pass2_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass2_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
book_pass2_btn: "احجز تذكرتك",
pass1_title: "تذكرة ١ يوم - عادية",
pass1_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass1_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
book_pass1_btn: "احجز تذكرتك",
vip_title: "تذكرة VIP",
vip_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vip_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vip_p3: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vip_p4: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
book_vip_btn: "احجز تذكرتك",
e_sport_btn: "احجز الان",
}
};
function changeLanguage(lang) {
console.log("function")
for (let key in translations[lang]) {
const el = document.getElementById(key);
if (el) el.innerText = translations[lang][key];
}
if(lang === 'ar') {
document.body.style.direction = "rtl";
document.body.style.textAlign = "right";
header_bar.classList.add("header_ar")
ticketing_sec.classList.add("ticketing_sec_ar")
hero.classList.add("hero_ar")
ticketing1.classList.add("hidden")
ticketing_ar.classList.remove("hidden")
newsletter_text.classList.add("newsletter_text_ar")
e_sport.classList.add("e_sport_ar")
} else {
document.body.style.direction = "ltr";
document.body.style.textAlign = "left";
header_bar.classList.remove("header_ar")
ticketing_sec.classList.remove("ticketing_sec_ar")
hero.classList.remove("hero_ar")
ticketing1.classList.remove("hidden")
ticketing_ar.classList.add("hidden")
newsletter_text.classList.remove("newsletter_text_ar")
e_sport.classList.remove("e_sport_ar")
}
}
document.querySelector(".en_lang").addEventListener("click", () => changeLanguage("en"));
document.querySelector(".en_lang1").addEventListener("click", () => changeLanguage("en"));
document.querySelector(".ar_lang").addEventListener("click", () => changeLanguage("ar"));
document.querySelector(".ar_lang1").addEventListener("click", () => changeLanguage("ar"));
// =========================
// ==========List Logic===============
let list_btn=document.getElementById("open_list")
let list =document.querySelector(".right_side_h")
let buttons = document.querySelectorAll(".right_side_h button");
buttons.forEach(button => {
button.addEventListener("click", () => {
list.classList.add("hidden")
});
});
list_btn.onclick=function()
{
list.classList.toggle("hidden")
}
\ No newline at end of file
style.css 0 → 100644
View file @ 72ff1ca9
:root
{
--bck_color:#190a38;
--main-font:'Montserrat', 'Poppins', 'Arial', sans-serif;
--purple_col:#801880;
--background_buttons: linear-gradient(to right,var(--bck_color) 20%, #6a1a97,var(--purple_col));
}
body
{
margin: 0;
box-sizing: border-box;
}
/* ====================================== */
/* ===============Header================= */
header
{
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--bck_color);
padding: 0 30px;
}
header .logo_cont
{
display: flex;
align-items: center;
column-gap: 5px;
}
header .left_side
{
color: white;
font-family:var(--main-font);
display: flex;
align-items: center;
}
header .left_side img
{
width: 50px;
height: 50px;
object-fit: contain;
margin-right: 14px;
}
header .left_side .logo
{
text-transform: uppercase;
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: center;
font-family: var(--main-font);
}
header .left_side .logo span:nth-child(1),
header .left_side .logo span:nth-child(2)
{
font-size: 25px;
margin: 0px;
font-weight: 700;
}
header .left_side .logo span:nth-child(3)
{
font-size: 8px;
}
header .left_side .date,
header .left_side .place
{
display: flex;
flex-direction: column;
text-transform: uppercase;
margin-left: 40px;
font-weight: bold;
font-family: var(--main-font);
row-gap: 2px;
}
header .left_side .date span:nth-child(2)
{
color: #2ae42a;
}
header .left_side .date span:nth-child(4)
{
color: #d935d9;
}
header .left_side .date span:nth-child(4) span:nth-child(1)
{
color: white;
}
header .right_side
{
display: flex;
column-gap: 20px;
align-items: center;
}
header .right_side a
{
outline: none;
border: none;
font-family: var(--main-font);
background-color: transparent;
cursor: pointer;
}
header .right_side a:nth-child(1)
{
background-color: #0a0a61;
color: white;
padding: 4px 18px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
border-radius: 8px;
}
header .right_side_h i
{
font-size: 20px;
width: 30px;
background: linear-gradient(90deg,var(--purple_col), #6a1a97,var(--bck_color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 23px;
}
header .right_side a:nth-child(2)
{
display: flex;
flex-direction: column;
align-items: center;
row-gap: 3px;
}
header .right_side span
{
width: 30px;
height: 4px;
background: linear-gradient(90deg,var(--purple_col), #6a1a97,var(--bck_color));
border-radius: 10px;
}
header .right_side a:nth-child(3),
header .right_side a:nth-child(4)
{
background: none;
font-weight: bold;
}
.list_icon
{
display: none;
}
.en_lang
{
color: white;
}
.ar_lang
{
color:#4c10c7;
}
/* ====================================== */
/* ===============Hero================= */
.hero_section,
.VR_section,
.CardGame_section,
.activate_section,
.mobile
{
display: grid;
align-items: start;
padding:10px 50px 0 50px ;
background-color: var(--bck_color);
/* justify-content: space-between; */
/* margin-top: 50px; */
}
.VR_section
{
margin-bottom: 40px;
}
.ltr_size
{
grid-template-columns: 39% 60% !important;
box-sizing: border-box;
column-gap: 10px;
padding-bottom: 40px;
}
.rtl_size
{
grid-template-columns: 60% 39% !important;
box-sizing: border-box;
column-gap: 10px;
align-items: center;
}
.hero_section div:nth-child(2)
{
color: white;
font-family: var(--main-font);
text-transform: uppercase;
margin-top: 30px;
}
.hero_section div:nth-child(2) h3
{
line-height: 53px;
font-weight: 700;
font-size: 35px;
width: 76%;
margin-bottom: 10px;
}
.hero_section div:nth-child(2) p,
.activate_section p
{
margin: 0;
width: 73%;
line-height: 25px;
}
.hero_section div:nth-child(1) img,
.activate_section img,
.CardGame_section img
{
width: 100%;
}
.hero_section a
{
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-radius: 8px;
background: linear-gradient(90deg,var(--purple_col), #6a1a97,var(--bck_color));
padding: 7px 20px;
display: block;
width: 100%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 20px;
box-sizing: border-box;
}
/* ==================================== */
/* ===========Play-Games================ */
.play_games
{
background-color: var(--bck_color);
padding: 25px 0 30px 0;
height: 400px;
}
.swiper_parent
{
background:
linear-gradient(
to left,
#00ff00 0%,
#00ff00 1%,
var(--bck_color) 7%,
var(--bck_color) 9%,
var(--bck_color) 94%,
#00ff00 99%,
#00ff00 100%
);
}
.play_games h1
{
text-align: center;
font-family: var(--main-font);
font-weight: bold;
color: var(--purple_col);
}
.swiper {
width: 85%;
max-width: 100%;
height: 200px;
margin: 50px auto;
margin: 50px 7.5%;
box-sizing: border-box;
}
.swiper-pagination {
position: relative;
bottom: -20px !important;
left: 0;
width: 100%;
text-align: center;
}
.swiper {
padding: 40px 0 40px 0;
}
.swiper-pagination {
bottom: 10px;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
z-index: -3;
}
/* Pagination circles */
.swiper-pagination-bullet {
background-color: white ;
width: 20px;
height: 20px;
opacity: 1;
}
.swiper-pagination-bullet-active {
background-color: #37069c;
}
/* ==================================== */
/* ===========E-sport================ */
.e_sport
{
background-color: var(--bck_color);
padding: 25px 0 40px 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,30%);
align-items: center;
justify-content: space-between;
width: 90%;
margin: 50px 5% 0;
}
.e_sport .button_parent
{
display: flex;
align-items: center;
justify-content: center;
}
.e_sport > div div
{
border-radius: 15px;
background: linear-gradient(to right,var(--purple_col),#6a1a97);
height: 300px;
/* overflow: hidden; */
}
.e_sport > div div img
{
width: 70%;
margin:0 15%;
height: 100%;
transform: translateY(-40px);
object-fit: cover;
object-position: top center;
z-index: 3;
}
.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: 10px 45px;
display: block;
width: fit-content;
/* margin-left: 40%; */
cursor: pointer;
outline: none;
text-align: start;
margin-top: 20px;
transform: translateX(10px);
font-size: 22px;
}
/* ====================================== */
/* ===============Activate================= */
.activate_section
{
padding: 30px;
}
.activate_section div:nth-child(2)
{
position: relative;
}
.activate_section div:nth-child(2) a
{
position: absolute;
bottom: 30px;
right: 30px;
background:var(--background_buttons);
color: white;
font-family: var(--main-font);
padding: 10px 35px;
border-radius: 15px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 22px;
}
.activate_section h1
{
color: var(--purple_col);
width: 80%;
margin-left: 20%;
font-weight: 700;
}
.activate_section p
{
color: white;
font-family: var(--main-font);
margin-top: 10px;
margin-left: 20%;
font-weight: 700;
font-size: 18px;
line-height: 32px;
width: 80%;
}
/* =================================*/
/* =============VR==================*/
.VR_section
{
background-color: white;
align-items: center;
}
.VR_section img
{
width: 100%;
}
.VR_section p
{
color: var(--bck_color);
font-size: 20px;
font-weight: 700;
line-height: 32px;
text-transform: uppercase;
width: 85%;
}
.VR_section a
{
background:var(--background_buttons);
color: white;
font-family: var(--main-font);
padding: 10px 45px;
border-radius: 15px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 22px;
margin-top: 40px;
}
/* =================================*/
/* =============CardGame==================*/
.CardGame_section div:nth-child(1)
{
position: relative;
}
.CardGame_section div:nth-child(1) a
{
position: absolute;
bottom: 30px;
left: 30px;
background:var(--background_buttons);
color: white;
font-family: var(--main-font);
padding: 10px 35px;
border-radius: 15px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 22px;
}
.CardGame_section p
{
color: white;
font-family: var(--main-font);
text-transform: uppercase;
width: 60%;
font-weight: 700;
line-height: 25px;
}
/* ==================================== */
/* ===========ticketing================ */
.ticketing_section
{
background-color: var(--bck_color);
padding-top: 1px;
}
.ticketing_section > .title
{
display: flex;
justify-content: center;
column-gap: 10px;
}
.ticketing_section > .title h1
{
margin: 30px 0 ;
text-align: center;
color: white;
text-transform: uppercase;
position: relative;
font-size: 37px;
font-family: var(--main-font);
}
.ticketing_section > .title:nth-child(1) h1::after
{
content: "T";
color: transparent;
-webkit-text-stroke: 1px #fff;
position: absolute;
left: -3px;
font-size: 50px;
top: -8px;
}
.ticketing_section > .title h1:nth-child(2):after
{
content: "I";
left: -2px;
}
.ticketing_section > .title h1:nth-child(3):after
{
content: "C";
left: 0px;
}
.ticketing_section > .title h1:nth-child(4):after
{
content: "K";
left: -4px;
}
.ticketing_section > .title h1:nth-child(5):after
{
content: "E";
left: -2px;
}
.ticketing_section > .title h1:nth-child(6):after
{
content: "T";
left: -3px;
}
.ticketing_section > .title h1:nth-child(7):after
{
content: "I";
left: -2px;
}
.ticketing_section > .title h1:nth-child(8):after
{
content: "N";
left: -4px;
}
.ticketing_section > .title h1:nth-child(9):after
{
content: "G";
left: -2px;
top: -8px;
z-index: 3;
}
.ticketing_section > .title h1 span:nth-child(1)
{
top: -10px;
}
.ticketing_section .days
{
background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
border-top-right-radius: 80px;
padding: 10 0px;
color: white;
width: 95%;
margin: 0 2.5%;
}
.ticketing_section .days > div
{
display: flex;
align-items: center;
justify-content: space-between;
/* padding: 0 40px; */
}
.ticketing_section .days > div:nth-child(1)
{
width: 90%;
margin: 0 5%;
}
.ticketing_section .days > div:nth-child(1) span
{
font-size: 40px;
font-weight: bold;
}
.ticketing_section .days > div:nth-child(2)
{
margin-left: 40px;
}
.ticketing_section .days > div:nth-child(2) div
{
width: 60%;
text-align: center;
}
.ticketing_section .days > div:nth-child(2) p
{
font-weight: bold;
font-family: var(--main-font);
width: 60%;
line-height: 25px;
margin-left: 10%;
text-align: start;
}
.ticketing_section a
{
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg,var(--purple_col), #6a1a97,var(--bck_color));
padding: 7px 20px;
display: block;
width: 50%;
margin: 30px 0 0 40%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 20px;
transform: translateX(10px);
}
.days_grid
{
display: grid;
grid-template-columns: 55% 45%;
margin-top: 10px;
width: 95%;
margin: 0 2.5%;
background-color: #1b0b3c;
}
.days_grid .days > div:nth-child(2) div
{
width: 100%;
text-align: start;
}
.days_grid .days
{
background: linear-gradient(to right ,#1b0b3c,var(--purple_col));
width: 100% !important;
margin: 10px 0 !important;
padding-bottom: 30px;
}
.days_grid .days .text
{
display: block;
}
.days_grid .days p
{
margin-left: 0 !important;
}
.ticketing_section .days_grid .days span
{
font-size: 30px !important;
}
.last
{
border-top-left-radius: 20px !important;
border-top-right-radius: 20px !important;
margin-top: 0 !important;
transform: translateY(-10px);
background: linear-gradient(to bottom ,var(--purple_col) 0%,var(--bck_color)) !important;
}
.ticketing_section .last > div:nth-child(1)
{
width: 50% !important;
margin: 0 25% !important;
}
.ticketing_section .last > div:nth-child(2) p
{
margin-left: 25% !important;
text-align: start;
}
.map
{
width: 90%;
margin: 0 5%;
}
.map iframe
{
width: 100%;
height: 450px;
border-radius: 20px;
border: none;
}
/* ==================================== */
/* ===========Oragnize================ */
.oragnize
{
background-color: var(--bck_color);
padding-top: 20px;
}
.oragnize h1
{
text-align: center;
font-family: var(--main-font);
font-weight: bold;
color: white;
}
.oragnize div
{
background-color: white;
display: grid;
grid-template-columns: repeat(4,20%);
align-items: center;
justify-content: space-between;
padding: 30px 40px;
}
.oragnize div img
{
width: 100%;
}
/* ==================================== */
/* ===========letters================ */
.letters
{
background-color: var(--bck_color);
padding-top: 20px;
}
.letters h1
{
text-align: center;
font-family: var(--main-font);
font-weight: bold;
color: var(--purple_col);
}
.letters > div
{
display: grid;
grid-template-columns: 40% 50%;
align-items: center;
justify-content: center;
column-gap: 30px;
}
.letters div:nth-child(1)
{
display: flex;
align-items: center;
justify-content: end;
}
.letters div img
{
width: 250px;
height: 250px;
object-fit: contain;
}
.letters div p
{
font-family: var(--main-font);
text-transform: uppercase;
font-weight: bold;
color: white;
display: flex;
align-items: center;
column-gap: 5px;
}
.letters div p:nth-child(1)
{
font-size: 20px;
width: 55%;
line-height: 30px;
}
.letters div p span:nth-child(2)
{
width: 130px;
height: 15px;
padding: 8px 15px;
border-radius: 10px;
background: var(--background_buttons);
display: inline-block;
}
/* ============================ */
/* ============ Hidden Header== */
.right_side_h
{
display: flex;
flex-direction: column;
row-gap: 20px;
justify-content: center;
position: fixed;
background: linear-gradient(to right,var(--purple_col), #6a1a97,var(--bck_color));
width: 100%;
right: 0;
padding-top: 10px;
top: 75px;
transition: .3s;
}
.right_side_h a
{
background-color: transparent;
color:white;
outline: none;
border: none;
text-transform: uppercase;
font-family: var(--main-font);
font-weight: bold;
cursor: pointer;
text-align: center;
}
.hidden
{
display: none !important;
width: 0;
}
/* ========================= */
/* ========Arabic============*/
.header_ar .left_side
{
justify-content: space-between;
width: 40%;
}
.header_ar .place
{
width: 100px;
}
.hero_ar a
{
background: linear-gradient(90deg,var(--bck_color),#6a1a97,var(--purple_col));
}
.ticketing_sec_ar .days > div:nth-child(2)
{
margin: 0 40px 0 0;
}
.ticketing_sec_ar .days > div:nth-child(2) p
{
width: 80%;
margin: 0;
}
.ticketing_sec_ar a
{
margin: 30px 45% 0 0;
background: linear-gradient(90deg,var(--bck_color), #6a1a97,var(--purple_col));
border-radius: 8px;
}
.newsletter_text_ar
{
width: 35% !important;
}
/* ========================== */
/* =====Responsive========== */
@media(max-width:1200px)
{
.hero_section div:nth-child(2) h3
{
width: 95%;
}
.hero_section div:nth-child(2)
{
margin-top: 0;
}
/* =============== */
.activate_section p,
.activate_section h1,
.VR_section p,
.CardGame_section p
{
width: 100%;
margin-left: 0;
}
.header_ar .left_side
{
width: 50%;
}
}
@media(max-width:1000px)
{
.e_sport > div:nth-child(2)
{
grid-template-columns: 45% 45%;
margin-top: 70px;
row-gap: 80px;
}
header
{
flex-direction: column;
justify-content: start;
flex-wrap: wrap;
}
header .left_side
{
justify-content: space-between;
}
header .left_side > div
{
width: 25%;
}
header .left_side > p
{
width: 35%;
}
header .left_side .date, header .left_side .place
{
flex-direction: row;
flex-wrap: wrap;
column-gap: 3px;
margin: 0;
text-align: center;
}
header .right_side
{
justify-content: center;
}
}
@media(max-width:950px)
{
.rtl_size
{
grid-template-columns: 80% !important;
align-items: center;
justify-content: center;
}
.ltr_size
{
display: flex;
flex-direction: column-reverse;
}
.ltr_size > div
{
width: 80%;
}
.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%;
margin-left: 0 !important;
text-align: center;
}
.days_grid
{
grid-template-columns: 70% !important;
}
.days_grid > div:nth-child(2)
{
margin-left: 30% !important;
}
.ticketing_section a
{
width: 40%;
margin-left: 60%;
}
.ticketing_section .last > div:nth-child(1)
{
width: 80% !important;
margin:0 10% !important;
}
.oragnize div
{
grid-template-columns: 30% 30%;
gap: 20px 100px;
align-items: center;
justify-content: center;
}
.letters div p:nth-child(1)
{
width: 80%;
}
.letters div p span:nth-child(2)
{
width: 200px;
}
.newsletter_text_ar
{
width: 100% !important;
}
.days_grid a
{
transform: translateX(70px);
}
.ticketing_sec_ar a
{
transform: translateX(0);
margin: 0 65% 0 0;
}
.header_ar .left_side
{
width: 80%;
}
}
@media(max-width:700px)
{
.rtl_size
{
grid-template-columns: 95% !important;
align-items: center;
justify-content: center;
}
.hero_section div:nth-child(2) h3,
.activate_section h1
{
font-size: 25px;
width: 100%;
margin-left: 0;
}
.hero_section, .VR_section, .CardGame_section, .activate_section, .mobile
{
padding: 10px ;
}
.hero_section div:nth-child(2) p, .activate_section p
{
width: 95%;
margin-left: 0;
}
.ltr_size > div
{
width: 95%;
}
.e_sport > div:nth-child(2)
{
grid-template-columns: 80%;
justify-content: center;
}
.e_sport h1
{
width:100%;
margin-left: 0%;
font-size: 25px;
text-align: center;
}
.activate_section p,
.activate_section h1, .VR_section p
{
font-size: 16px;
}
.ticketing_section .days > div:nth-child(1)
{
flex-direction: column;
}
.ticketing_section .days > div:nth-child(1) h1,
.ticketing_section .days > div:nth-child(1) span
{
font-size: 30px;
}
.ticketing_section .days > div:nth-child(2) > div
{
width: 98%;
margin: 0 1%;
}
.ticketing_section a
{
width: 60%;
margin-left: 20%;
}
.days_grid
{
grid-template-columns: 100% !important;
}
.days_grid > div:nth-child(2)
{
margin-left: 0 !important;
}
.days_grid .days,
.days_grid > div:nth-child(2),
.ticketing_section .days
{
border-radius: 20px;
}
.oragnize div
{
grid-template-columns:60%;
row-gap: 30px;
}
.days_grid a
{
transform: translateX(50px);
}
.letters > div
{
grid-template-columns: 80%;
row-gap: 30px;
}
.letters div:nth-child(1)
{
justify-content: start;
}
.letters div p:nth-child(1)
{
width: 100%;
}
header .left_side > p
{
width: 100%;
margin-left: 0%;
align-items: center;
justify-content: center;
margin-top: 10px !important;
}
header .right_side
{
margin-top: 20px;
display: none;
}
header .left_side
{
flex-wrap: wrap;
}
.header_ar .left_side
{
width: 100%;
}
.right_side_h
{
width: 100% !important;
}
.list_icon
{
display: block;
}
.letters div p:nth-child(2),
.letters div p:nth-child(3)
{
flex-direction: column;
row-gap: 5px;
align-items: start;
}
.ticketing_sec_ar a
{
margin: 20px 25% 0 0;
transform: translateX(0) !important;
}
}
@media(max-width:500px)
{
.play_games h1
{
font-size: 25px;
}
header .left_side .logo span:nth-child(1), header .left_side .logo span:nth-child(2)
{
font-size: 18px;
}
header .left_side .logo span:nth-child(3)
{
font-size: 6px;
}
.activate_section div:nth-child(2) a,
.VR_section a,
.CardGame_section div:nth-child(1) a
{
font-size: 16px;
padding: 8px 28px;
}
.ticketing_section a {
/* transform: translateX(70px); */
}
.header_ar .place
{
width: 100%;
text-align: center;
}
}
@media(max-width:400px)
{
.rtl_size
{
grid-template-columns: 100% !important;
}
.hero_section div:nth-child(2) h3,
.activate_section h1
{
font-size: 20px;
}
.ltr_size > div
{
width: 100%;
}
.e_sport > div:nth-child(2)
{
grid-template-columns: 95%;
justify-content: center;
width: 100%;
margin: 70px 0 0 0 ;
}
.e_sport h1
{
width:100%;
margin-left: 0%;
font-size: 20px;
text-align: center;
}
.activate_section p,
.activate_section h1, .VR_section p
{
font-size: 14px;
}
.ticketing_section .days > div:nth-child(1) h1, .ticketing_section .days > div:nth-child(1) span
{
font-size: 20px !important;
}
.ticketing_section .days > div:nth-child(2) p,
.ticketing_sec_ar .days > div:nth-child(2) p
{
width: 100%;
}
.ticketing_sec_ar .days > div:nth-child(2) p
{
text-align: start;
margin-top: 10px;
}
.ticketing_section > h1
{
font-size: 25px;
}
.days_grid a
{
transform: translateX(25px);
}
.oragnize h1
{
font-size: 30px;
}
.letters > div
{
grid-template-columns: 95%;
}
.letters h1
{
font-size: 25px;
}
.letters div p:nth-child(1)
{
font-size: 18px;
}
header .left_side > div
{
width: 35%;
}
header
{
padding: 0 5px;
}
}
@media(max-width:300px)
{
.hero_section div:nth-child(2) h3
{
font-size: 17px;
}
.hero_section div:nth-child(2) p, .activate_section p
{
width: 100%;
margin-left: 0;
}
.ticketing_section .days > div:nth-child(2) p
{
font-size: 14px;
}
.oragnize div
{
grid-template-columns:80%;
}
}
\ 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