edit english version No Curved

573b19a0 · TokaKaram · 20bc8b5b · 573b19a0 · 573b19a0 · 573b19a0
Commit 573b19a0 authored Oct 27, 2025 by TokaKaram
5 changed files
--- a/thebase/thebase/the/index.html
+++ b/thebase/thebase/the/index.html
@@ -15,6 +15,7 @@
  <title>THE BASE</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="style2.css">
+  <link rel="stylesheet" href="style3.css">
 </head>

 <body>
@@ -65,25 +66,25 @@

  </header>
  <!-- ============Hero_AR -->
-  <div class="hero_section2 rtl_size" id="hero_ar">
-    <div class="mainiMg1">
+  <div class="hero_sectionh2 " id="hero_ar">
+    <div class="mainiMg1h">
      <img src="./images/main.jpg">
    </div>
    <div class="hero_desc_ar">
      <h3 id="hero_title" class="hero_title2">
-        <div class="word21">
+        <div class="wordh21">
          <span>مرحبا بكم في</span>
          <span class="the">THE BASE</span>
        </div>
-        <div class="word22">
+        <div class="wordh22">
          <span>حيث تنبض الألعاب بالحياة</span>
        </div>
      </h3>
-      <p id="hero_desc" class="hero-sec21">مهرجان ضخم لعشاق الجيمينج، وصناع</p>
-      <p id="hero_desc" class="hero-sec22">المحتوى، والجماهير اللي بتعيش على</p>
-      <p id="hero_desc" class="hero-sec23">الحماس والإثارة </p>
-      <p id="hero_desc" class="hero-sec24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p>
-      <p id="hero_desc" class="hero-sec25">وروح المجتمع</p>
+      <p id="hero_desc" class="hero-sech21">مهرجان ضخم لعشاق الجيمينج، وصناع</p>
+      <p id="hero_desc" class="hero-sech22">المحتوى، والجماهير اللي بتعيش على</p>
+      <p id="hero_desc" class="hero-sech23">الحماس والإثارة </p>
+      <p id="hero_desc" class="hero-sech24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p>
+      <p id="hero_desc" class="hero-sech25">وروح المجتمع</p>
      <a id="book_now" class="bookA1" href="#ticketing_section_ar">احجز الان</a>
    </div>
    <div class="hero_desc_res_ar">
@@ -268,10 +269,10 @@ COMFORT — WHERE GAMING IS PURE JOY!</p>
        <p>تجربة تجمع بين الواقع الافتراضي وألعاب
          الآركيد الكلاسيكية لتمنحك مزيجا من الحنين

-          ً
+         

          والمستقبل
-          <p> ّ متطورة، استعد لمغامرات VR مع 6 محطات ستعيشها بكل حواسك — تجربة تنقلك من المشاهدة إلى قلب الحدث</p>
+          <p> متطورة، استعد لمغامرات VR مع 6 محطات ستعيشها بكل حواسك — تجربة تنقلك من المشاهدة إلى قلب الحدث</p>
        </p>

      </div>
@@ -370,7 +371,8 @@ COMFORT — WHERE GAMING IS PURE JOY!</p>
        </div>
      </div>
      <div class="main_img">
-        <img src="./images/mobile .jpg">
+        <img src="./images/mobile ar.png">
+        <div class="overlay-vr_m"></div>
      </div>
    </div>
  </div>
@@ -389,7 +391,7 @@ AND ONLY THE BEST REACH THE TOP.</p>
        </div>
      </div>
      <div class="main_img">
-        <img src="./images/mobile .jpg">
+        <img src="./images/mobile ar.png">
      </div>
    </div>
  </div>

--- a/thebase/thebase/the/index.js
+++ b/thebase/thebase/the/index.js
@@ -158,8 +158,12 @@ function changeLanguage(lang) {
  }
 }
 
-// document.querySelector(".en_lang").addEventListener("click", () => changeLanguage("en"));
-// document.querySelector(".en_lang1").addEventListener("click", () => changeLanguage("en"));
+window.onload=function()
+{
+  changeLanguage("en")
+}
+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"));
 // =========================

--- a/thebase/thebase/the/style.css
+++ b/thebase/thebase/the/style.css
--- a/thebase/thebase/the/style2.css
+++ b/thebase/thebase/the/style2.css
@@ -2033,6 +2033,7 @@
    opacity: 0.4;
 }

+
 .vr-con {
    width: 45%;
    background: var(--gradient);
@@ -2280,7 +2281,7 @@
    }
    .vr-btn1
    {
-        font-size: 18px;
+        font-size: 20px;
         margin-top: 10px;
    }
    .vr-image
@@ -2312,6 +2313,12 @@
 }
 @media(max-width:1300px)
 {
+        .vr-btn1 
+        {
+            font-size: 18px;
+        }
+    
+
     .vr-image
    {
        height: 380px;
@@ -2526,6 +2533,7 @@
    .vr-btn1 {
        width: 50%;
        transform: translateX(0);
+        font-size: 16px;
    }
 }

@@ -3811,20 +3819,14 @@ body {
 /* ====================================== */
 /* ===============Hero================= */

-.mainiMg1 {
+.mainiMg1h {
    width: 60%;
    position: relative;
-    height: 90vh;
-    background: url('your-image.jpg') center/cover no-repeat;
-    /* clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
-    clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%); */
-    /* border-top-right-radius: 20% 0%;
-    border-bottom-right-radius: 10% 0%; */
+    
    border-top-left-radius: 100% 300%;
    border-bottom-left-radius: 10% 0%;
    overflow: hidden;
    margin-left: 40px;
-    right: -35.5% !important;
    object-position: 40% 70%;
 }

@@ -3840,8 +3842,6 @@ body {
    inset: 0;
    background: linear-gradient(to right, rgba(128, 0, 128, 0.5), rgba(11, 11, 58, 0.9));
 }
-
-.hero_section2,
 .activate_section2,
 .VR_section2 {
    display: grid;
@@ -3852,6 +3852,8 @@ body {
    direction: rtl;
 }

+
+
 .ltr_size {
    grid-template-columns: 48% 50%;
    box-sizing: border-box;
@@ -3977,7 +3979,7 @@ body {

 .hero_section2 a {
    position: absolute;
-    top: 480px;
+    bottom: 480px;
    left: 0px;
    color: #ffffff;
    text-transform: uppercase;
@@ -4879,7 +4881,7 @@ body {
        height: 300px;
    }

-    .hero_section2 {
+    .hero_sectionh2 {
        display: grid;
        grid-template-columns: 80%;
        justify-content: center;
@@ -4887,7 +4889,7 @@ body {
 }

 @media(max-width:500px) {
-    .hero_section2 {
+    .hero_sectionh2 {
        grid-template-columns: 100%;
        padding: 0px 5% 0;
    }
@@ -4898,7 +4900,7 @@ body {
        /* line-height: 32px; */
    }

-    .hero_section2 a {
+    .hero_sectionh2 a {
        padding: 10px;
    }

@@ -4928,7 +4930,7 @@ body {

    }

-    .hero_section2 {
+    .hero_sectionh2 {
        grid-template-columns: 100%;
        padding: 0px 3% 0;
    }

--- a/thebase/thebase/the/style3.css
+++ b/thebase/thebase/the/style3.css
+.mainiMg1h {
+    position: relative;
+    
+    border-top-left-radius: 100% 300%;
+    border-bottom-left-radius: 10% 0%;
+    overflow: hidden;
+    margin-left: 40px;
+    width: 100%;
+    /* height: 100%; */
+}
+
+.mainiMg1h img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.mainiMg1h::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, rgba(128, 0, 128, 0.5), rgba(11, 11, 58, 0.9));
+}
+.hero_sectionh2 {
+    display: grid;
+    align-items: start;
+    padding: 10px 50px 0 50px;
+    background-color: #0d0d41;
+    font-family: "Lalezar", sans-serif;
+    direction: rtl;
+     grid-template-columns: 60% 40%;
+     z-index: -1;
+}
+
+
+#vr_btn {
+    padding: 10px 40px;
+}
+
+.hero_sectionh2 {
+    color: white;
+    font-family: var(--noor_font);
+    text-transform: uppercase;
+    display: grid;
+    /* grid-template-columns: 50% 50%; */
+    position: relative;
+}
+.hero_desc_ar
+{
+    position: relative;
+    /* background-color: beige; */
+}
+.wordh21 {
+     transform: translate(100px,0px);
+    display: flex;
+    font-size: 60px;
+    /* width: 50%; */
+   
+    font-weight: 600;
+
+    font-family: var(--noor_font);
+}
+
+.wordh21 .the {
+    color: #aa09b4;
+    margin-right: 15px;
+    font-family: var(--sora_extrabold);
+}
+
+.wordh22 {
+    display: flex;
+ 
+    font-size: 55px;
+    /* width: 40%; */
+   transform: translate(56px,0px);
+    
+    font-weight: 600;
+    margin-left: 40px;
+    font-family: var(--noor_font);
+}
+
+.hero-sech21 {
+    display: flex;
+ transform: translate(20px, 10px);
+   
+    font-size: 40px;
+    font-weight: 400;
+    /* width: 35% !important; */
+    font-family: var(--font_noor_light);
+}
+
+.hero-sech22 {
+    display: flex;
+ transform: translate(20px, -10px);
+    right: -20px;
+    /* top: 148px; */
+    font-size: 40px;
+    font-weight: 400;
+    font-family: var(--font_noor_light);
+    /* width: 35% !important; */
+}
+
+.hero-sech23 {
+    display: flex;
+  
+    font-size: 40px;
+    font-weight: 400;
+    /* width: 35% !important; */
+    font-family: var(--font_noor_light);
+    transform: translate(10px, -30px);
+
+  
+}
+
+.hero-sech24 {
+    display: flex;
+ 
+    font-size: 40px;
+    font-weight: 400;
+    /* width: 35% !important; */
+    font-family: var(--font_noor_light);
+    transform: translate(1px, -50px);
+
+    right: -8px;
+    top: 214px;
+}
+
+.hero-sech25 {
+    display: flex;
+    transform: translate(-5px, -80px);
+    font-size: 40px;
+    font-weight: 400;
+    /* width: 35% !important; */
+    font-family: var(--font_noor_light);
+   
+   
+}
+
+.hero_sectionh2 a {
+   
+    color: #ffffff;
+    text-transform: uppercase;
+    font-weight: bold;
+    text-decoration: none;
+    border: none;
+    border-radius: 0 50px 50px 0;
+    background: linear-gradient(90deg, #2f0c5a, #690b84, #a709b2);
+    padding: 15px 20px;
+    display: flex;
+    width: 100%;
+    height: 8%;
+    cursor: pointer;
+    outline: none;
+    text-align: start;
+    box-sizing: border-box;
+    font-size: 20px;
+    font-family: var(--font_noor_bold);
+    /* flex-direction: row-reverse; */
+       transform: translate(-20%, -80px);
+
+}
+.hero_sectionh2 .hero_desc_res_ar a
+{
+    position: relative;
+    transform: translate(0,0);
+}
+@media(max-width:2000px)
+{
+    .hero_desc_ar
+    {
+        transform: translateX(5px);
+    }
+    .wordh21 {
+       font-size: 50px;
+
+}
+
+
+
+.wordh22 {
+       font-size: 50px;
+
+}
+
+.hero-sech21 {
+       font-size: 40px;
+
+}
+
+.hero-sech22 {
+      font-size: 40px;
+
+}
+
+.hero-sech23 {
+        font-size: 40px;
+
+
+  
+}
+
+.hero-sech24 {
+       font-size: 40px;
+
+}
+
+.hero-sech25 {
+       font-size: 40px;
+
+   
+}
+
+.hero_sectionh2 a {
+   
+    
+    font-size: 20px;
+  
+
+}
+}
+@media(max-width:1920px)
+{
+    .hero_desc_ar {
+        transform: translate(-10px, 26px);
+    }
+    .wordh21 {
+    transform: translate(137px,0)
+    }
+    .wordh22
+    {
+        transform: translate(80px, 0px);
+    }
+}
+@media(max-width:1800px)
+{
+ .wordh21 {
+     transform: translate(100px,0px);
+   
+}
+
+.wordh22 {
+   
+   transform: translate(56px,0px);
+    
+ 
+}
+
+}
+@media(max-width:1750px)
+{
+    .hero_desc_ar
+    {
+        transform: translateX(5px);
+        /* background-color: black; */
+    }
+    .wordh21 {
+       font-size: 50px;
+
+}
+
+
+
+.wordh22 {
+       font-size: 50px;
+
+}
+
+.hero-sech21 {
+       font-size: 30px;
+
+}
+
+.hero-sech22 {
+      font-size: 30px;
+
+}
+
+.hero-sech23 {
+        font-size: 30px;
+
+
+  
+}
+
+.hero-sech24 {
+       font-size: 30px;
+
+}
+
+.hero-sech25 {
+       font-size: 30px;
+
+   
+}
+
+.hero_sectionh2 a {
+   
+    
+    font-size: 20px;
+    
+  
+
+}
+}
+@media(max-width:1700px)
+{
+    .hero_desc_ar
+    {
+        transform: translateX(-5px);
+        /* background-color: red; */
+    }
+    .wordh21 {
+       font-size: 45px;
+
+}
+
+
+
+    .wordh22 {
+        font-size: 45px;
+
+    }
+
+    .hero-sech21 {
+        font-size: 30px;
+
+    }
+
+    .hero-sech22 {
+        font-size: 30px;
+
+    }
+
+    .hero-sech23 {
+            font-size: 30px;
+
+
+    
+    }
+
+    .hero-sech24 {
+        font-size: 30px;
+
+    }
+
+    .hero-sech25 {
+        font-size: 30px;
+
+    
+    }
+
+    .hero_sectionh2 a {
+    
+        
+        font-size: 20px;
+    
+
+    }
+}
+@media(max-width:1500px)
+{
+    .hero_desc_ar
+    {
+        transform: translateX(-5px);
+        /* background-color: gray; */
+    }
+    .wordh21 {
+       font-size: 40px;
+
+}
+
+
+
+.wordh22 {
+       font-size: 40px;
+
+}
+
+.hero-sech21 {
+       font-size: 30px;
+
+}
+
+.hero-sech22 {
+      font-size: 30px;
+
+}
+
+.hero-sech23 {
+        font-size: 30px;
+
+
+  
+}
+
+.hero-sech24 {
+       font-size: 30px;
+
+}
+
+.hero-sech25 {
+       font-size: 30px;
+
+   
+}
+
+.hero_sectionh2 a {
+   
+    
+    font-size: 20px;
+  
+
+}
+}
+@media(max-width:1300px)
+{
+    .hero_desc_ar
+    {
+        transform: translateX(-5px);
+        /* background-color: gray; */
+    }
+    .wordh21 {
+       font-size: 35px;
+
+}
+
+
+
+.wordh22 {
+       font-size: 35px;
+
+}
+
+.hero-sech21 {
+       font-size: 25px;
+
+}
+
+.hero-sech22 {
+      font-size: 25px;
+
+}
+
+.hero-sech23 {
+        font-size: 25px;
+
+
+  
+}
+
+.hero-sech24 {
+       font-size: 25px;
+
+}
+
+.hero-sech25 {
+       font-size: 25px;
+
+   
+}
+
+.hero_sectionh2 a {
+   
+    
+    font-size: 20px;
+  
+
+}
+}
+@media(max-width:1200px)
+{
+    .hero_desc_ar
+    {
+        transform: translateX(-5px);
+        /* background-color: gray; */
+    }
+    .wordh21 {
+       font-size: 30px;
+
+}
+
+
+
+.wordh22 {
+       font-size: 30px;
+
+}
+
+.hero-sech21 {
+       font-size: 20px;
+
+}
+
+.hero-sech22 {
+      font-size: 20px;
+
+}
+
+.hero-sech23 {
+        font-size: 20px;
+
+
+  
+}
+
+.hero-sech24 {
+       font-size: 20px;
+
+}
+
+.hero-sech25 {
+       font-size: 20px;
+
+   
+}
+
+.hero_sectionh2 a {
+   
+    
+    font-size: 20px;
+  
+
+}
+}
+@media(max-width:1030px)
+{
+    .hero_desc_ar
+    {
+        transform: translateX(-15px);
+        /* background-color: gray; */
+    }
+    .wordh21 {
+       font-size: 25px;
+
+}
+
+
+
+.wordh22 {
+       font-size: 25px;
+
+}
+
+.hero-sech21 {
+       font-size: 20px;
+
+}
+
+.hero-sech22 {
+      font-size: 20px;
+
+}
+
+.hero-sech23 {
+        font-size: 20px;
+
+
+  
+}
+
+.hero-sech24 {
+       font-size: 20px;
+
+}
+
+.hero-sech25 {
+       font-size: 20px;
+       transform: translate(-5px , -70px);
+
+   
+}
+
+.hero_sectionh2 a {
+   
+    
+    font-size: 20px;
+  
+
+}
+}
+@media(max-width:950px) {
+  .hero_sectionh2 {
+        display: grid;
+        grid-template-columns: 80%;
+        justify-content: center;
+    }
+      .hero_desc_res_ar {
+        display: block;
+    }
+     .hero_desc_ar {
+        display: none;
+    }
+}
+
+@media(max-width:500px) {
+    .hero_sectionh2 {
+        grid-template-columns: 100%;
+        padding: 0px 5% 0;
+    }
+
+    
+
+    .hero_sectionh2 a {
+        padding: 10px;
+    }
+
+    
+}
+
+@media(max-width:400px) {
+    
+
+    .hero_sectionh2 {
+        grid-template-columns: 100%;
+        padding: 0px 3% 0;
+    }
+
+}