Skip to content

T
THE BASE
Commit 573b19a0 authored by TokaKaram's avatar TokaKaram
Browse files
Options

edit english version No Curved

parent 20bc8b5b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1142 additions and 192 deletions
thebase/thebase/the/index.html
View file @ 573b19a0
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<title>THE BASE</title> <title>THE BASE</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css"> <link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
</head> </head>
<body> <body>
...@@ -65,25 +66,25 @@ ...@@ -65,25 +66,25 @@
</header> </header>
<!-- ============Hero_AR --> <!-- ============Hero_AR -->
<div class="hero_section2 rtl_size" id="hero_ar"> <div class="hero_sectionh2 " id="hero_ar">
<div class="mainiMg1"> <div class="mainiMg1h">
<img src="./images/main.jpg"> <img src="./images/main.jpg">
</div> </div>
<div class="hero_desc_ar"> <div class="hero_desc_ar">
<h3 id="hero_title" class="hero_title2"> <h3 id="hero_title" class="hero_title2">
<div class="word21"> <div class="wordh21">
<span>مرحبا بكم في</span> <span>مرحبا بكم في</span>
<span class="the">THE BASE</span> <span class="the">THE BASE</span>
</div> </div>
<div class="word22"> <div class="wordh22">
<span>حيث تنبض الألعاب بالحياة</span> <span>حيث تنبض الألعاب بالحياة</span>
</div> </div>
</h3> </h3>
<p id="hero_desc" class="hero-sec21">مهرجان ضخم لعشاق الجيمينج، وصناع</p> <p id="hero_desc" class="hero-sech21">مهرجان ضخم لعشاق الجيمينج، وصناع</p>
<p id="hero_desc" class="hero-sec22">المحتوى، والجماهير اللي بتعيش على</p> <p id="hero_desc" class="hero-sech22">المحتوى، والجماهير اللي بتعيش على</p>
<p id="hero_desc" class="hero-sec23">الحماس والإثارة </p> <p id="hero_desc" class="hero-sech23">الحماس والإثارة </p>
<p id="hero_desc" class="hero-sec24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p> <p id="hero_desc" class="hero-sech24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p>
<p id="hero_desc" class="hero-sec25">وروح المجتمع</p> <p id="hero_desc" class="hero-sech25">وروح المجتمع</p>
<a id="book_now" class="bookA1" href="#ticketing_section_ar">احجز الان</a> <a id="book_now" class="bookA1" href="#ticketing_section_ar">احجز الان</a>
</div> </div>
<div class="hero_desc_res_ar"> <div class="hero_desc_res_ar">
...@@ -268,10 +269,10 @@ COMFORT — WHERE GAMING IS PURE JOY!</p> ...@@ -268,10 +269,10 @@ COMFORT — WHERE GAMING IS PURE JOY!</p>
<p>تجربة تجمع بين الواقع الافتراضي وألعاب <p>تجربة تجمع بين الواقع الافتراضي وألعاب
الآركيد الكلاسيكية لتمنحك مزيجا من الحنين الآركيد الكلاسيكية لتمنحك مزيجا من الحنين
ً
والمستقبل والمستقبل
<p> ّ متطورة، استعد لمغامرات VR مع 6 محطات ستعيشها بكل حواسك — تجربة تنقلك من المشاهدة إلى قلب الحدث</p> <p> متطورة، استعد لمغامرات VR مع 6 محطات ستعيشها بكل حواسك — تجربة تنقلك من المشاهدة إلى قلب الحدث</p>
</p> </p>
</div> </div>
...@@ -370,7 +371,8 @@ COMFORT — WHERE GAMING IS PURE JOY!</p> ...@@ -370,7 +371,8 @@ COMFORT — WHERE GAMING IS PURE JOY!</p>
</div> </div>
</div> </div>
<div class="main_img"> <div class="main_img">
<img src="./images/mobile .jpg"> <img src="./images/mobile ar.png">
<div class="overlay-vr_m"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -389,7 +391,7 @@ AND ONLY THE BEST REACH THE TOP.</p> ...@@ -389,7 +391,7 @@ AND ONLY THE BEST REACH THE TOP.</p>
</div> </div>
</div> </div>
<div class="main_img"> <div class="main_img">
<img src="./images/mobile .jpg"> <img src="./images/mobile ar.png">
</div> </div>
</div> </div>
</div> </div>
......
thebase/thebase/the/index.js
View file @ 573b19a0
...@@ -158,8 +158,12 @@ function changeLanguage(lang) { ...@@ -158,8 +158,12 @@ function changeLanguage(lang) {
} }
} }
// document.querySelector(".en_lang").addEventListener("click", () => changeLanguage("en")); window.onload=function()
// document.querySelector(".en_lang1").addEventListener("click", () => changeLanguage("en")); {
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_lang").addEventListener("click", () => changeLanguage("ar"));
document.querySelector(".ar_lang1").addEventListener("click", () => changeLanguage("ar")); document.querySelector(".ar_lang1").addEventListener("click", () => changeLanguage("ar"));
// ========================= // =========================
......
thebase/thebase/the/style.css
View file @ 573b19a0
This diff is collapsed.
thebase/thebase/the/style2.css
View file @ 573b19a0
...@@ -2033,6 +2033,7 @@ ...@@ -2033,6 +2033,7 @@
opacity: 0.4; opacity: 0.4;
} }
.vr-con { .vr-con {
width: 45%; width: 45%;
background: var(--gradient); background: var(--gradient);
...@@ -2280,7 +2281,7 @@ ...@@ -2280,7 +2281,7 @@
} }
.vr-btn1 .vr-btn1
{ {
font-size: 18px; font-size: 20px;
margin-top: 10px; margin-top: 10px;
} }
.vr-image .vr-image
...@@ -2312,6 +2313,12 @@ ...@@ -2312,6 +2313,12 @@
} }
@media(max-width:1300px) @media(max-width:1300px)
{ {
.vr-btn1
{
font-size: 18px;
}
.vr-image .vr-image
{ {
height: 380px; height: 380px;
...@@ -2526,6 +2533,7 @@ ...@@ -2526,6 +2533,7 @@
.vr-btn1 { .vr-btn1 {
width: 50%; width: 50%;
transform: translateX(0); transform: translateX(0);
font-size: 16px;
} }
} }
...@@ -3811,20 +3819,14 @@ body { ...@@ -3811,20 +3819,14 @@ body {
/* ====================================== */ /* ====================================== */
/* ===============Hero================= */ /* ===============Hero================= */
.mainiMg1 { .mainiMg1h {
width: 60%; width: 60%;
position: relative; 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-top-left-radius: 100% 300%;
border-bottom-left-radius: 10% 0%; border-bottom-left-radius: 10% 0%;
overflow: hidden; overflow: hidden;
margin-left: 40px; margin-left: 40px;
right: -35.5% !important;
object-position: 40% 70%; object-position: 40% 70%;
} }
...@@ -3840,8 +3842,6 @@ body { ...@@ -3840,8 +3842,6 @@ body {
inset: 0; inset: 0;
background: linear-gradient(to right, rgba(128, 0, 128, 0.5), rgba(11, 11, 58, 0.9)); background: linear-gradient(to right, rgba(128, 0, 128, 0.5), rgba(11, 11, 58, 0.9));
} }
.hero_section2,
.activate_section2, .activate_section2,
.VR_section2 { .VR_section2 {
display: grid; display: grid;
...@@ -3852,6 +3852,8 @@ body { ...@@ -3852,6 +3852,8 @@ body {
direction: rtl; direction: rtl;
} }
.ltr_size { .ltr_size {
grid-template-columns: 48% 50%; grid-template-columns: 48% 50%;
box-sizing: border-box; box-sizing: border-box;
...@@ -3977,7 +3979,7 @@ body { ...@@ -3977,7 +3979,7 @@ body {
.hero_section2 a { .hero_section2 a {
position: absolute; position: absolute;
top: 480px; bottom: 480px;
left: 0px; left: 0px;
color: #ffffff; color: #ffffff;
text-transform: uppercase; text-transform: uppercase;
...@@ -4879,7 +4881,7 @@ body { ...@@ -4879,7 +4881,7 @@ body {
height: 300px; height: 300px;
} }
.hero_section2 { .hero_sectionh2 {
display: grid; display: grid;
grid-template-columns: 80%; grid-template-columns: 80%;
justify-content: center; justify-content: center;
...@@ -4887,7 +4889,7 @@ body { ...@@ -4887,7 +4889,7 @@ body {
} }
@media(max-width:500px) { @media(max-width:500px) {
.hero_section2 { .hero_sectionh2 {
grid-template-columns: 100%; grid-template-columns: 100%;
padding: 0px 5% 0; padding: 0px 5% 0;
} }
...@@ -4898,7 +4900,7 @@ body { ...@@ -4898,7 +4900,7 @@ body {
/* line-height: 32px; */ /* line-height: 32px; */
} }
.hero_section2 a { .hero_sectionh2 a {
padding: 10px; padding: 10px;
} }
...@@ -4928,7 +4930,7 @@ body { ...@@ -4928,7 +4930,7 @@ body {
} }
.hero_section2 { .hero_sectionh2 {
grid-template-columns: 100%; grid-template-columns: 100%;
padding: 0px 3% 0; padding: 0px 3% 0;
} }
......
thebase/thebase/the/style3.css 0 → 100644
View file @ 573b19a0
.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;
}
}
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