Skip to content

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

Responsive editing

parent abf3a2c8
Expand all 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
This diff is collapsed.
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