Skip to content

B
base Project
Commit fcc8163a authored by TokaKaram's avatar TokaKaram
Browse files
Options

big screens

parent a9c345c1
Expand all Show whitespace changes
Inline Side-by-side
Showing with 635 additions and 102 deletions
index.html
View file @ fcc8163a
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
<h1> هُنا يبدأ <span> المرح الحقيقي </span></h1> <h1> هُنا يبدأ <span> المرح الحقيقي </span></h1>
<div class="casual_text"> <div class="casual_text">
<p> استمتع بأجواءِ اللعب الحُرّ على أكثرَ </p> <p> استمتع بأجواءِ اللعب الحُرّ على أكثرَ </p>
<p> من ٢٠ جهازَ كمبيوتر جيمينج و١٠</p> <p> من ٢٠ جهازَ كمبيوتر جيمينج و ١٠ </p>
<p>أجهزة بلايستيشن ٥ متاحة للجميع.</p> <p>أجهزة بلايستيشن ٥ متاحة للجميع.</p>
<p> شارك في بطولات قصيرة تُفجر الحماس،</p> <p> شارك في بطولات قصيرة تُفجر الحماس،</p>
<p> واربح جوائز مميّزة، أو تحد أصدقاءك في</p> <p> واربح جوائز مميّزة، أو تحد أصدقاءك في</p>
......
index.js
View file @ fcc8163a
...@@ -95,7 +95,7 @@ let user_phone=document.getElementById("phone") ...@@ -95,7 +95,7 @@ let user_phone=document.getElementById("phone")
let book_now1=document.getElementById("book_now1") let book_now1=document.getElementById("book_now1")
function changeLanguage(lang) { function changeLanguage(lang) {
console.log("function") // console.log("function")
if(lang === 'ar') { if(lang === 'ar') {
...@@ -188,11 +188,12 @@ document.querySelector(".ar_lang1").addEventListener("click", () => changeLangua ...@@ -188,11 +188,12 @@ document.querySelector(".ar_lang1").addEventListener("click", () => changeLangua
let list_btn=document.getElementById("open_list") let list_btn=document.getElementById("open_list")
let list =document.querySelector(".right_side_h") let list =document.querySelector(".right_side_h")
let buttons = document.querySelectorAll(".right_side_h a"); let buttons = document.querySelectorAll(".right_side_h a");
let opened=false
buttons.forEach(button => { buttons.forEach(button => {
button.addEventListener("click", () => { button.addEventListener("click", () => {
list.classList.add("hidden") list.classList.add("hidden")
header.classList.remove("PB") header.classList.remove("PB")
opened=false
}); });
}); });
list_btn.onclick=function() list_btn.onclick=function()
...@@ -202,10 +203,12 @@ list_btn.onclick=function() ...@@ -202,10 +203,12 @@ list_btn.onclick=function()
if (!list.classList.contains("hidden")) if (!list.classList.contains("hidden"))
{ {
header.classList.add("PB") header.classList.add("PB")
opened=true
} }
else else
{ {
header.classList.remove("PB") header.classList.remove("PB")
opened=false
} }
} }
let lastScrollTop = 0; let lastScrollTop = 0;
...@@ -216,6 +219,7 @@ let lastScrollTop = 0; ...@@ -216,6 +219,7 @@ let lastScrollTop = 0;
if (scrollTop > lastScrollTop) { if (scrollTop > lastScrollTop) {
list.classList.add("hidden") list.classList.add("hidden")
header.classList.remove("PB") header.classList.remove("PB")
opened=false
} }
...@@ -224,8 +228,16 @@ let lastScrollTop = 0; ...@@ -224,8 +228,16 @@ let lastScrollTop = 0;
window.addEventListener("resize", function() { window.addEventListener("resize", function() {
list.classList.add("hidden") list.classList.add("hidden")
opened=false
header.classList.remove("PB")
});
document.addEventListener("click", (e) => {
if (!list.contains(e.target) &&e.target!=list_btn) {
// console.log(opened)
list.classList.add("hidden")
header.classList.remove("PB")
}
}); });
// ======================= Organize Logic // ======================= Organize Logic
function openNewWindow(url,target) { function openNewWindow(url,target) {
// Opens a new tab with example.com, specifying dimensions // Opens a new tab with example.com, specifying dimensions
......
style.css
View file @ fcc8163a
This diff is collapsed.
style2.css
View file @ fcc8163a
...@@ -1116,6 +1116,37 @@ ...@@ -1116,6 +1116,37 @@
} }
/* ========================== */ /* ========================== */
/* =====Responsive========== */ /* =====Responsive========== */
@media(min-width:2257px)
{
.ticketing_section .days_t .text p,
.ticketing_section .days .text p
{
font-size: 30px;
line-height: 3rem;
}
.letters h1
{
font-size: 40px;
line-height: 4.5rem;
}
.letters div p:nth-child(1)
{
font-size: 40px;
line-height: 3.5rem;
}
.ticketing_section .ticket_types
{
width: 100%;
margin-left: 0;
}
.ticketing_section .days,
.map
{
width: 100%;
margin: 0;
}
}
@media(max-width:2200px) @media(max-width:2200px)
{ {
.ticketing_section .title img .ticketing_section .title img
...@@ -2100,7 +2131,7 @@ ...@@ -2100,7 +2131,7 @@
display: flex; display: flex;
align-items: start; align-items: start;
justify-content: center; justify-content: center;
width: 95%; /* width: 95%; */
/* padding: 0 0 70px; */ /* padding: 0 0 70px; */
background: linear-gradient(to right, #0f0d42, #270c54 70%, #3e0b65); background: linear-gradient(to right, #0f0d42, #270c54 70%, #3e0b65);
/* min-height: 500px; */ /* min-height: 500px; */
...@@ -2146,11 +2177,12 @@ ...@@ -2146,11 +2177,12 @@
.vr-title1 { .vr-title1 {
font-family: var(--sora_extrabold); font-family: var(--sora_extrabold);
font-size: 30px; font-size: 30px;
margin-bottom: 15px; margin-bottom: 45px;
line-height: 35px; line-height: 35px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 700; font-weight: 700;
width: 90%; width: 90%;
text-align: start;
} }
.neon { .neon {
...@@ -2179,6 +2211,7 @@ ...@@ -2179,6 +2211,7 @@
color: var(--text_color); color: var(--text_color);
font-family: var(--font_noor_light); font-family: var(--font_noor_light);
font-size: 40px; font-size: 40px;
line-height: 5rem;
} }
.arbt { .arbt {
...@@ -2187,6 +2220,7 @@ ...@@ -2187,6 +2220,7 @@
direction: ltr; direction: ltr;
font-family: var(--font_noor_bold); font-family: var(--font_noor_bold);
font-size: 70px; font-size: 70px;
/* line-height: 5rem; */
} }
/* الزر */ /* الزر */
...@@ -2223,18 +2257,23 @@ ...@@ -2223,18 +2257,23 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@media(min-width:2200px) @media(min-width:2200px)
{ {
.vr-title1 .vr-title1
{ {
/* color: red; */ /* color: red; */
font-size: 60px; font-size: 45px;
line-height: 60px; line-height: 4.5rem;
}
.arbt
{
text-align: end;
} }
.vr-p p .vr-p p
{ {
font-size: 40px; font-size: 30px;
line-height: 45px; line-height: 3rem;
} }
.vr-image .vr-image
{ {
...@@ -2245,6 +2284,10 @@ ...@@ -2245,6 +2284,10 @@
{ {
font-size: 35px; font-size: 35px;
} }
.arb
{
line-height: 4rem;
}
} }
@media(max-width:2200px) { @media(max-width:2200px) {
.arbt { .arbt {
...@@ -2254,6 +2297,7 @@ ...@@ -2254,6 +2297,7 @@
font-size: 36px; font-size: 36px;
width: 90%; width: 90%;
margin-left: 10%; margin-left: 10%;
line-height: 52px;
} }
.vr-btn1 .vr-btn1
{ {
...@@ -2263,14 +2307,20 @@ ...@@ -2263,14 +2307,20 @@
} }
.vr-image .vr-image
{ {
height: 600px; height: 620px;
/* background: red; */ /* background: red; */
} }
.arbt { .arbt {
margin-top: 0px; margin-top: 0px;
text-align: end;
/* color: red; */ /* color: red; */
margin-bottom: 40px; margin-bottom: 60px;
/* margin: 0; */
width: 100%;
/* background-color: black; */
/* padding-left: 30px; */
/* direction: rtl; */
} }
.vr-p p .vr-p p
...@@ -2287,10 +2337,23 @@ ...@@ -2287,10 +2337,23 @@
} }
@media(max-width:2000px) @media(max-width:2000px)
{ {
.vr-section
{
width: 90%;
margin: 0 5%;
}
.vr-title1
{
/* background-color: blue; */
width: 95%;
text-align: start;
}
.arbt { .arbt {
margin-left: 50px; margin-left: 50px;
/* color: red; */ /* color: black; */
margin-top: 0px; margin-top: 0px;
text-align: end;
} }
.vr-btn1 .vr-btn1
{ {
...@@ -2304,12 +2367,13 @@ ...@@ -2304,12 +2367,13 @@
font-size: 50px; font-size: 50px;
margin-left: 120px; margin-left: 120px;
/* color: gray; */ /* color: gray; */
/* color: red; */
} }
.arb { .arb {
font-size: 30px; font-size: 30px;
width: 80%; width: 80%;
margin-left: 20%; margin-left: 20%;
/* color: red; */
} }
.vr-btn1 .vr-btn1
{ {
...@@ -2385,6 +2449,9 @@ ...@@ -2385,6 +2449,9 @@
{ {
font-size: 45px; font-size: 45px;
line-height: 45px; line-height: 45px;
/* color: red; */
/* margin: 0; */
width: 100%;
} }
} }
...@@ -2521,7 +2588,7 @@ ...@@ -2521,7 +2588,7 @@
} }
.vr-title1 .vr-title1
{ {
width: 80%; width: 100%;
} }
} }
@media(max-width:1300px) @media(max-width:1300px)
...@@ -2622,10 +2689,10 @@ ...@@ -2622,10 +2689,10 @@
.vr-title1 { .vr-title1 {
font-size: 25px; font-size: 25px;
text-align: right; text-align: end;
margin-left: 5%; margin-left: 5%;
line-height: 30px; line-height: 30px;
width: 95%; width: 100%;
} }
.title1en { .title1en {
...@@ -2692,15 +2759,15 @@ ...@@ -2692,15 +2759,15 @@
.vr-con .vr-con
{ {
transform: translateX(0); transform: translateX(0);
margin: 30px 0 0; margin: 20px 0 0 0;
padding: 0; padding: 0;
} }
.vr-title1 { .vr-title1 {
font-size: 25px; font-size: 25px;
text-align: end; text-align: end;
margin-left: 0; margin-left: 0;
margin-bottom: 30px; margin-bottom: 20px;
width: 85%; width: 100%;
margin-top: 0; margin-top: 0;
} }
......
style3.css
View file @ fcc8163a
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
overflow: hidden; overflow: hidden;
margin-left: 40px; margin-left: 40px;
width: 100%; width: 100%;
/* height: 100%; */ height: 700px;
} }
.mainiMg1h img { .mainiMg1h img {
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
/* background-color: beige; */ /* background-color: beige; */
} }
.wordh21 { .wordh21 {
transform: translate(100px,0px); transform: translate(120px,0px);
display: flex; display: flex;
font-size: 60px; font-size: 60px;
/* width: 50%; */ /* width: 50%; */
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
.hero-sech21 { .hero-sech21 {
display: flex; display: flex;
transform: translate(20px, 10px); transform: translate(0px, 10px);
font-size: 40px; font-size: 40px;
font-weight: 400; font-weight: 400;
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
.hero-sech22 { .hero-sech22 {
display: flex; display: flex;
transform: translate(20px, -10px); transform: translate(0px, -10px);
right: -20px; right: -20px;
/* top: 148px; */ /* top: 148px; */
font-size: 40px; font-size: 40px;
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
font-weight: 400; font-weight: 400;
/* width: 35% !important; */ /* width: 35% !important; */
font-family: var(--font_noor_light); font-family: var(--font_noor_light);
transform: translate(10px, -30px); transform: translate(-3px, -30px);
} }
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
font-weight: 400; font-weight: 400;
/* width: 35% !important; */ /* width: 35% !important; */
font-family: var(--font_noor_light); font-family: var(--font_noor_light);
transform: translate(1px, -50px); transform: translate(-5px, -50px);
right: -8px; right: -8px;
top: 214px; top: 214px;
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
.hero-sech25 { .hero-sech25 {
display: flex; display: flex;
transform: translate(-5px, -80px); transform: translate(-10px, -80px);
font-size: 40px; font-size: 40px;
font-weight: 400; font-weight: 400;
/* width: 35% !important; */ /* width: 35% !important; */
...@@ -167,6 +167,13 @@ ...@@ -167,6 +167,13 @@
position: relative; position: relative;
transform: translate(0,0); transform: translate(0,0);
} }
@media(min-width:2200px)
{
.hero_sectionh2 a
{
width: 75%;
}
}
@media(max-width:2000px) @media(max-width:2000px)
{ {
.hero_desc_ar .hero_desc_ar
...@@ -304,6 +311,8 @@ ...@@ -304,6 +311,8 @@
} }
.mainiMg1h{
height: 500px;}
} }
@media(max-width:1700px) @media(max-width:1700px)
{ {
...@@ -318,7 +327,6 @@ ...@@ -318,7 +327,6 @@
} }
.wordh22 { .wordh22 {
font-size: 45px; font-size: 45px;
...@@ -380,29 +388,29 @@ ...@@ -380,29 +388,29 @@
} }
.hero-sech21 { .hero-sech21 {
font-size: 30px; font-size: 28px;
} }
.hero-sech22 { .hero-sech22 {
font-size: 30px; font-size: 28px;
} }
.hero-sech23 { .hero-sech23 {
font-size: 30px; font-size: 28px;
} }
.hero-sech24 { .hero-sech24 {
font-size: 30px; font-size: 28px;
} }
.hero-sech25 { .hero-sech25 {
font-size: 30px; font-size: 28px;
} }
...@@ -419,7 +427,7 @@ ...@@ -419,7 +427,7 @@
{ {
.hero_desc_ar .hero_desc_ar
{ {
transform: translateX(-5px); transform: translateX(0px);
/* background-color: gray; */ /* background-color: gray; */
} }
.wordh21 { .wordh21 {
...@@ -470,6 +478,8 @@ ...@@ -470,6 +478,8 @@
} }
.mainiMg1h{
height: 400px;}
} }
@media(max-width:1200px) @media(max-width:1200px)
{ {
...@@ -594,9 +604,19 @@ ...@@ -594,9 +604,19 @@
.hero_desc_ar { .hero_desc_ar {
display: none; display: none;
} }
.mainiMg1h
{
height: 400px;
}
} }
@media(max-width:500px) { @media(max-width:500px) {
.mainiMg1h {
position: relative;
border-top-left-radius: 0% 0%;
border-bottom-left-radius: 0% 0%;
}
.hero_sectionh2 { .hero_sectionh2 {
grid-template-columns: 100%; grid-template-columns: 100%;
padding: 0px 5% 0; padding: 0px 5% 0;
...@@ -640,7 +660,7 @@ ...@@ -640,7 +660,7 @@
border-bottom-right-radius: 10% 0%; border-bottom-right-radius: 10% 0%;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
/* height: 100%; */ height: 700px;
} }
.mainiMg1h_en img { .mainiMg1h_en img {
...@@ -706,6 +726,7 @@ ...@@ -706,6 +726,7 @@
/* flex-direction: row-reverse; */ /* flex-direction: row-reverse; */
} }
.hero_desc_res_en .hero_desc_res_en
{ {
...@@ -729,11 +750,11 @@ ...@@ -729,11 +750,11 @@
{ {
font-family: var(--sora_font); font-family: var(--sora_font);
} }
@media(min-width:2200px) @media(min-width:2257px)
{ {
.wordh21_en .wordh21_en
{ {
font-size: 40px; font-size: 45px;
transform: translateX(-50px); transform: translateX(-50px);
} }
.wordh21_en .the_en .wordh21_en .the_en
...@@ -742,11 +763,11 @@ ...@@ -742,11 +763,11 @@
} }
.hero_desc_en .hero_title2_en .hero_desc_en .hero_title2_en
{ {
font-size: 40px; font-size: 45px;
} }
.hero_desc_en p .hero_desc_en p
{ {
font-size: 25px; font-size: 35px;
} }
.wordh22_en .wordh22_en
{ {
...@@ -788,19 +809,26 @@ ...@@ -788,19 +809,26 @@
} }
.hero_sectionh2_en a .hero_sectionh2_en a
{ {
transform: translate(9%, 30px); transform: translate(8%, 30px);
font-size: 20px; font-size: 30px;
/* padding: 10px; */
width: 75%;
}
.hero_sectionh2_en
{
width: min(80%, 2200px);
margin: 0 auto;
} }
.hero_sectionh2_en .mainiMg1h_en .hero_sectionh2_en .mainiMg1h_en
{ {
height: 500px; height: 700px;
} }
} }
@media(max-width:2200px) @media(max-width:2200px)
{ {
.wordh21_en .wordh21_en
{ {
font-size: 40px; font-size: 45px;
transform: translateX(-50px); transform: translateX(-50px);
} }
.wordh21_en .the_en .wordh21_en .the_en
...@@ -813,11 +841,12 @@ ...@@ -813,11 +841,12 @@
} }
.hero_desc_en p .hero_desc_en p
{ {
font-size: 25px; font-size: 30px;
} }
.wordh22_en .wordh22_en
{ {
transform: translateX(5px); transform: translateX(5px);
font-size: 45px;
} }
.wordh23_en .wordh23_en
{ {
...@@ -860,7 +889,7 @@ ...@@ -860,7 +889,7 @@
} }
.hero_sectionh2_en .mainiMg1h_en .hero_sectionh2_en .mainiMg1h_en
{ {
height: 540px; height: 600px;
} }
} }
@media(max-width:1600px) @media(max-width:1600px)
...@@ -1091,7 +1120,7 @@ ...@@ -1091,7 +1120,7 @@
.wordh22_en, .wordh22_en,
.wordh23_en .wordh23_en
{ {
font-size: 30px; font-size: 35px;
} }
.wordh22_en .wordh22_en
{ {
...@@ -1104,7 +1133,7 @@ ...@@ -1104,7 +1133,7 @@
} }
.hero_desc_en p .hero_desc_en p
{ {
font-size: 20px; font-size: 22px;
margin-top: 2px; margin-top: 2px;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -1135,7 +1164,7 @@ ...@@ -1135,7 +1164,7 @@
} }
.hero_desc_en .hero_desc_en
{ {
transform: translate(-30px,10px); transform: translate(-36px, -31px)
} }
.hero_sectionh2_en a .hero_sectionh2_en a
{ {
...@@ -1146,11 +1175,11 @@ ...@@ -1146,11 +1175,11 @@
} }
.hero_sectionh2_en .mainiMg1h_en .hero_sectionh2_en .mainiMg1h_en
{ {
height: 480px; height: 431px;
} }
.hero_sectionh2_en .hero_sectionh2_en
{ {
grid-template-columns: 63% 37%; grid-template-columns: 60% 40%;
} }
} }
......
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