Skip to content

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

Responsive editing

parent abf3a2c8
Expand all Show whitespace changes
Inline Side-by-side
Showing with 619 additions and 178 deletions
index.html
View file @ 039aea8b
......@@ -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>
......@@ -73,7 +73,7 @@
<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">
......@@ -166,7 +167,7 @@
<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">
......
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
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