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