Skip to content

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

edit english version No Curved

parent 20bc8b5b
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
...@@ -120,7 +120,22 @@ header .left_side img { ...@@ -120,7 +120,22 @@ header .left_side img {
object-fit: contain; object-fit: contain;
/* margin-right: 14px; */ /* margin-right: 14px; */
} }
header .left_side
{
transform: translateX(0);
} header .left_side img
{
width: 100% ;
object-fit: contain;
height: 100%;
/* height: 20%; */
}
header .left_side .logo_cont
{
position: relative;
/* background-color: red; */
width: 18%;
}
header .left_side .logo { header .left_side .logo {
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
...@@ -237,9 +252,16 @@ header .right_side a:nth-child(4) { ...@@ -237,9 +252,16 @@ header .right_side a:nth-child(4) {
color: white; color: white;
} }
header .left_side .date,
header .left_side .place
{
margin-left: 30px;
}
@media(max-width:2200px) @media(max-width:2200px)
{ {
header .left_side .date, header .left_side .date,
header .left_side .place header .left_side .place
{ {
...@@ -254,12 +276,18 @@ header .right_side a:nth-child(4) { ...@@ -254,12 +276,18 @@ header .right_side a:nth-child(4) {
object-fit: contain; object-fit: contain;
height: 100%; height: 100%;
/* height: 20%; */ /* height: 20%; */
}
header .left_side
{
align-items: end;
} }
header .left_side .logo_cont header .left_side .logo_cont
{ {
position: relative; position: relative;
/* background-color: red; */ /* background-color: red; */
width: 18%; width: 20%;
height: 100%;
align-items: end;
} }
header .right_side .ticketing_bnt_en, header .right_side .ticketing_bnt_en,
...@@ -270,14 +298,14 @@ header .right_side a:nth-child(4) { ...@@ -270,14 +298,14 @@ header .right_side a:nth-child(4) {
{ {
font-size: 26px; font-size: 26px;
} }
header .left_side .date header .left_side .date,
{
margin-left: 30px;
}
header .left_side .place header .left_side .place
{ {
margin-left: 5px; margin-left: 30px;
} }
} }
.right_side .ticketing_ar { .right_side .ticketing_ar {
padding: 6px 56px; padding: 6px 56px;
...@@ -297,7 +325,7 @@ header .right_side a:nth-child(4) { ...@@ -297,7 +325,7 @@ header .right_side a:nth-child(4) {
{ {
position: relative; position: relative;
/* background-color: red; */ /* background-color: red; */
width: 18%; width: 20%;
} }
header .left_side .date, header .left_side .date,
header .left_side .place header .left_side .place
...@@ -312,6 +340,10 @@ header .right_side a:nth-child(4) { ...@@ -312,6 +340,10 @@ header .right_side a:nth-child(4) {
{ {
font-size: 22px; font-size: 22px;
} }
header .left_side .date, header .left_side .place
{
font-size: 17px;
}
} }
@media(max-width:1500px) @media(max-width:1500px)
{ {
...@@ -332,7 +364,7 @@ header .right_side a:nth-child(4) { ...@@ -332,7 +364,7 @@ header .right_side a:nth-child(4) {
{ {
position: relative; position: relative;
/* background-color: red; */ /* background-color: red; */
width: 17%; width: 19%;
} }
header .right_side .ticketing_bnt_en, header .right_side .ticketing_bnt_en,
header .right_side .ticketing_ar, header .right_side .ticketing_ar,
...@@ -342,6 +374,7 @@ header .right_side a:nth-child(4) { ...@@ -342,6 +374,7 @@ header .right_side a:nth-child(4) {
{ {
font-size: 18px; font-size: 18px;
} }
} }
@media(max-width:1300px) @media(max-width:1300px)
{ {
...@@ -349,7 +382,8 @@ header .right_side a:nth-child(4) { ...@@ -349,7 +382,8 @@ header .right_side a:nth-child(4) {
{ {
position: relative; position: relative;
/* background-color: red; */ /* background-color: red; */
width: 20%; width: 22%;
height: 100%;
} }
header .left_side header .left_side
{ {
...@@ -359,7 +393,7 @@ header .right_side a:nth-child(4) { ...@@ -359,7 +393,7 @@ header .right_side a:nth-child(4) {
header .left_side .date, header .left_side .date,
header .left_side .place header .left_side .place
{ {
font-size: 16px; font-size: 14px;
} }
header .right_side .ticketing_bnt_en, header .right_side .ticketing_bnt_en,
header .right_side .ticketing_ar, header .right_side .ticketing_ar,
...@@ -370,6 +404,22 @@ header .right_side a:nth-child(4) { ...@@ -370,6 +404,22 @@ header .right_side a:nth-child(4) {
font-size: 16px; font-size: 16px;
} }
} }
@media(max-width:1030px)
{
header .left_side .place
{
flex-direction: column;
transform: translateY(0px);
}
header .left_side .date, header .left_side .place {
font-size: 12px;
}
header .left_side .logo_cont
{
width: 25%;
}
}
/* ==================================== */ /* ==================================== */
/* ===========Play-Games================ */ /* ===========Play-Games================ */
.play_games { .play_games {
...@@ -495,7 +545,7 @@ header .right_side a:nth-child(4) { ...@@ -495,7 +545,7 @@ header .right_side a:nth-child(4) {
.e_sport>div div { .e_sport>div div {
border-radius: 50px; border-radius: 50px;
background: linear-gradient(to right, var(--purple_col), #6a1a97); background: linear-gradient(to right, var(--purple_col), #6a1a97);
height: 385px; height: 605px;
/* overflow: hidden; */ /* overflow: hidden; */
position: relative; position: relative;
clip-path: inset(-100px 0 20px 0); clip-path: inset(-100px 0 20px 0);
...@@ -666,8 +716,8 @@ header .right_side a:nth-child(4) { ...@@ -666,8 +716,8 @@ header .right_side a:nth-child(4) {
} }
.letters div img { .letters div img {
width: 40%; width: 30%;
height: 60%; height: 30%;
object-fit: contain; object-fit: contain;
} }
...@@ -682,9 +732,9 @@ header .right_side a:nth-child(4) { ...@@ -682,9 +732,9 @@ header .right_side a:nth-child(4) {
} }
.letters div p:nth-child(1) { .letters div p:nth-child(1) {
font-size: 22px; font-size: 50px;
width: 55%; width: 55%;
line-height: 30px; line-height: 50px;
font-family: var(--sora_font); font-family: var(--sora_font);
margin-bottom: 50px; margin-bottom: 50px;
} }
...@@ -755,7 +805,9 @@ header .right_side a:nth-child(4) { ...@@ -755,7 +805,9 @@ header .right_side a:nth-child(4) {
right: 0; right: 0;
padding: 20px 10px; padding: 20px 10px;
top: 75px; top: 75px;
transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease 0.2s, opacity 0.3s ease 1s;
transform: translateY(0);
z-index: 4; z-index: 4;
} }
...@@ -772,8 +824,9 @@ header .right_side a:nth-child(4) { ...@@ -772,8 +824,9 @@ header .right_side a:nth-child(4) {
} }
.hidden { .hidden {
display: none !important; opacity: 0;
width: 0; transform: translateY(-20px);
pointer-events: none;
} }
.hidden1 { .hidden1 {
...@@ -802,6 +855,10 @@ header .right_side a:nth-child(4) { ...@@ -802,6 +855,10 @@ header .right_side a:nth-child(4) {
.hero_title_res { .hero_title_res {
display: none; display: none;
} }
.info form div:nth-child(2)
{
margin-top: 40px;
}
/* ========================== */ /* ========================== */
/* =====Responsive========== */ /* =====Responsive========== */
...@@ -817,6 +874,10 @@ header .right_side a:nth-child(4) { ...@@ -817,6 +874,10 @@ header .right_side a:nth-child(4) {
grid-template-columns: repeat(3, 569px); grid-template-columns: repeat(3, 569px);
/* background: blue; */ /* background: blue; */
} }
.e_sport>div div {
height: 385px;
}
.e_sport > div div .bellingham_img .e_sport > div div .bellingham_img
{ {
transform: translateY(-100px); transform: translateY(-100px);
...@@ -1460,8 +1521,8 @@ header .right_side a:nth-child(4) { ...@@ -1460,8 +1521,8 @@ header .right_side a:nth-child(4) {
} }
.letters div img { .letters div img {
width: 60%; width: 50%;
height: 60%; height: 50%;
object-fit: contain; object-fit: contain;
} }
...@@ -1472,7 +1533,16 @@ header .right_side a:nth-child(4) { ...@@ -1472,7 +1533,16 @@ header .right_side a:nth-child(4) {
header .left_side .logo { header .left_side .logo {
display: none; display: none;
} }
header
{
padding-bottom: 40px;
}
header .left_side
{
align-items: center;
/* padding-bottom: 40px; */
}
.letters > div { .letters > div {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -1481,6 +1551,11 @@ header .right_side a:nth-child(4) { ...@@ -1481,6 +1551,11 @@ header .right_side a:nth-child(4) {
width: 80%; width: 80%;
margin-left: 15%; margin-left: 15%;
} }
header .left_side .date, header .left_side .place
{
/* flex-direction: column; */
font-size: 17px;
}
.letters>div>div { .letters>div>div {
width: 60%; width: 60%;
...@@ -1576,7 +1651,7 @@ header .right_side a:nth-child(4) { ...@@ -1576,7 +1651,7 @@ header .right_side a:nth-child(4) {
} }
header { header {
padding-bottom: 70px; padding-bottom: 50px;
} }
header .left_side>p { header .left_side>p {
...@@ -1667,7 +1742,7 @@ header .right_side a:nth-child(4) { ...@@ -1667,7 +1742,7 @@ header .right_side a:nth-child(4) {
@media(max-width:400px) { @media(max-width:400px) {
header { header {
padding: 0 5px 100px; padding: 0 5px 50px;
} }
.e_sport>div:nth-child(2) { .e_sport>div:nth-child(2) {
...@@ -1963,7 +2038,7 @@ header .right_side a:nth-child(4) { ...@@ -1963,7 +2038,7 @@ header .right_side a:nth-child(4) {
border-radius: 30px; border-radius: 30px;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-family: var(--sora_font); font-family: var(--sora_extrabold);
font-weight: bold; font-weight: bold;
padding: 15px 30px; padding: 15px 30px;
position: absolute; position: absolute;
...@@ -1982,13 +2057,13 @@ header .right_side a:nth-child(4) { ...@@ -1982,13 +2057,13 @@ header .right_side a:nth-child(4) {
.card_game_ar .card_game_cont .text h1 { .card_game_ar .card_game_cont .text h1 {
/* color: var(--text_color); */ /* color: var(--text_color); */
font-size: 40px; font-size: 50px;
font-weight: 700; font-weight: 700;
width: 100%; width: 100%;
direction: ltr; direction: ltr;
color: var(--neon); color: var(--neon);
margin-left: 0%; margin-left: 0%;
font-family: var(--sora_font); font-family: var(--sora_extrabold);
margin-bottom: 5px; margin-bottom: 5px;
...@@ -1998,61 +2073,54 @@ header .right_side a:nth-child(4) { ...@@ -1998,61 +2073,54 @@ header .right_side a:nth-child(4) {
color: white; color: white;
} }
.card_game_ar .card_game_cont .text div {
position: absolute;
left: -110px;
top: 20px;
}
.card_game_ar .card_game_cont .text div h1:nth-child(2) { .card_game_ar .card_game_cont .text div h1:nth-child(2) {
margin-left: 5%; margin-left: 5%;
margin-top: 5px; margin-top: 5px;
} }
.card_game_ar .card_game_cont .text p { .card_game_ar .card_game_cont .text p
position: absolute; {
} transform: translateX(-50px);
font-size: 25px;
margin-top: 0;
margin-bottom: 10px;
color: var(--text_color);
}
.card_game_ar .card_game_cont .text p:nth-child(2) { .card_game_ar .card_game_cont .text p:nth-child(2) {
left: -60px; margin-top: 30px;
top: 130px; }
}
.card_game_ar .card_game_cont .text p:nth-child(3) { .card_game_ar .card_game_cont .text p:nth-child(3) {
left: -50px; transform: translateX(-40px);
top: 165px; }
}
.card_game_ar .card_game_cont .text p:nth-child(4) { .card_game_ar .card_game_cont .text p:nth-child(4) {
left: -40px; transform: translateX(-30px);
top: 200px; }
}
.card_game_ar .card_game_cont .text p:nth-child(5) { .card_game_ar .card_game_cont .text p:nth-child(5) {
left: -30px; transform: translateX(-20px);
top: 235px; }
}
.card_game_ar .card_game_cont .text p:nth-child(6) { .card_game_ar .card_game_cont .text p:nth-child(6) {
left: -15px; transform: translateX(-15px);
top: 270px;
}
.card_game_ar .card_game_cont .text p:nth-child(7) { }
left: -5px;
top: 305px;
}
.card_game_ar .card_game_cont .text p:nth-child(8) { .card_game_ar .card_game_cont .text p:nth-child(7) {
left: 2px; transform: translateX(-10px);
top: 340px; }
}
.card_game_ar .card_game_cont .text p:nth-child(9) { .card_game_ar .card_game_cont .text p:nth-child(8) {
left: 7px; transform: translateX(-5px);
top: 375px; }
}
.card_game_ar .card_game_cont .text p:nth-child(9) {
transform: translateX(0px);
}
.card_game_ar .card_game_cont .text h1 span { .card_game_ar .card_game_cont .text h1 span {
color: white; color: white;
...@@ -2061,9 +2129,9 @@ header .right_side a:nth-child(4) { ...@@ -2061,9 +2129,9 @@ header .right_side a:nth-child(4) {
.card_game_ar .card_game_cont .text p { .card_game_ar .card_game_cont .text p {
direction: ltr; direction: ltr;
color: var(--text_color); color: var(--text_color);
font-size: 25px; font-size: 35px;
/* font-weight: bold; */ /* font-weight: bold; */
line-height: 25px; line-height: 32px;
width: 100%; width: 100%;
/* margin-left: 0%; */ /* margin-left: 0%; */
/* margin-top: 0; */ /* margin-top: 0; */
...@@ -2071,8 +2139,16 @@ header .right_side a:nth-child(4) { ...@@ -2071,8 +2139,16 @@ header .right_side a:nth-child(4) {
font-family: var(--sora_font); font-family: var(--sora_font);
} }
.card_game_ar .card_game_cont .text div
{
transform: translateX(-100px);
}
@media(max-width:2200px) @media(max-width:2200px)
{ {
.card_game_ar .card_game_cont .text
{
transform: translateX(20px);
}
.card_game .card_game_cont .main_img, .card_game .card_game_cont .main_img,
.card_game .card_game_cont .img_parent .card_game .card_game_cont .img_parent
{ {
...@@ -2097,13 +2173,20 @@ header .right_side a:nth-child(4) { ...@@ -2097,13 +2173,20 @@ header .right_side a:nth-child(4) {
direction: rtl; direction: rtl;
margin-left: 15%; margin-left: 15%;
} }
.card_game .card_game_cont a .card_game .card_game_cont a,
.card_game_ar .card_game_cont a
{ {
left: 80px; left: 80px;
font-size: 31.5px; font-size: 31.5px;
bottom: 50px; bottom: 50px;
} }
.card_game_ar .card_game_cont .text div
{
transform: translateX(-120px);
/* background-color: red; */
}
} }
@media(max-width:2000px) @media(max-width:2000px)
{ {
...@@ -2119,12 +2202,17 @@ header .right_side a:nth-child(4) { ...@@ -2119,12 +2202,17 @@ header .right_side a:nth-child(4) {
font-size: 52px; font-size: 52px;
} }
.card_game .card_game_cont a .card_game .card_game_cont a,
.card_game_ar .card_game_cont a
{ {
left: 80px; left: 80px;
font-size: 30px; font-size: 30px;
bottom: 20px; bottom: 20px;
} }
.card_game_ar .card_game_cont .text div
{
transform: translateX(-100px);
}
} }
...@@ -2155,7 +2243,8 @@ header .right_side a:nth-child(4) { ...@@ -2155,7 +2243,8 @@ header .right_side a:nth-child(4) {
direction: rtl; direction: rtl;
margin-left: 15%; margin-left: 15%;
} }
.card_game .card_game_cont a .card_game .card_game_cont a,
.card_game_ar .card_game_cont a
{ {
left: 80px; left: 80px;
font-size: 30px; font-size: 30px;
...@@ -2190,7 +2279,8 @@ header .right_side a:nth-child(4) { ...@@ -2190,7 +2279,8 @@ header .right_side a:nth-child(4) {
direction: rtl; direction: rtl;
margin-left: 10%; margin-left: 10%;
} }
.card_game .card_game_cont a .card_game .card_game_cont a,
.card_game_ar .card_game_cont a
{ {
font-size: 27px; font-size: 27px;
...@@ -2200,11 +2290,20 @@ header .right_side a:nth-child(4) { ...@@ -2200,11 +2290,20 @@ header .right_side a:nth-child(4) {
{ {
margin-top: 40px; margin-top: 40px;
} }
.card_game_ar .card_game_cont .text p
{
font-size: 25px;
}
.card_game_ar .card_game_cont .text h1
{
font-size: 40px;
}
} }
@media(max-width:1500px) @media(max-width:1500px)
{ {
.card_game .card_game_cont a .card_game .card_game_cont a,
.card_game_ar .card_game_cont a
{ {
left: 50px; left: 50px;
bottom: 10px; bottom: 10px;
...@@ -2229,12 +2328,23 @@ header .right_side a:nth-child(4) { ...@@ -2229,12 +2328,23 @@ header .right_side a:nth-child(4) {
{ {
margin-top: 10px; margin-top: 10px;
} }
.card_game .card_game_cont a .card_game .card_game_cont a,
.card_game_ar .card_game_cont a
{ {
left: 80px; left: 80px;
font-size: 20px; font-size: 20px;
bottom: 20px; bottom: 20px;
} }
.card_game_ar .card_game_cont .text p
{
font-size: 25px;
line-height: 20px;
}
.card_game_ar .card_game_cont .text h1
{
font-size: 40px;
}
} }
@media(max-width:1440px) @media(max-width:1440px)
{ {
...@@ -2247,27 +2357,40 @@ header .right_side a:nth-child(4) { ...@@ -2247,27 +2357,40 @@ header .right_side a:nth-child(4) {
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
} }
.card_game_ar .card_game_cont .text
{
transform: translateX(15px);
}
.card_game_ar .card_game_cont .text div
{
transform: translateX(-102px);
}
.card_game_ar .card_game_cont .main_img, .card_game_ar .card_game_cont .img_parent
{
height: 500px;
}
} }
@media(max-width:1439px) { @media(max-width:1439px) {
.card_game_ar .card_game_cont .text p { .card_game_ar .card_game_cont .text p {
left: -60px; /* left: -60px;
top: 130px; top: 130px; */
margin-left: 10px; margin-left: 10px;
} }
.card_game_ar .card_game_cont .text div {
position: absolute;
left: -90px;
top: 20px;
}
} }
@media(max-width:1300px) @media(max-width:1300px)
{ {
.card_game .card_game_cont a .card_game_ar .card_game_cont .main_img, .card_game_ar .card_game_cont .img_parent
{
height: 450px;
}
.card_game .card_game_cont a,
.card_game_ar .card_game_cont a
{ {
left: 50px; left: 50px;
bottom: 10px; bottom: 10px;
...@@ -2275,12 +2398,7 @@ header .right_side a:nth-child(4) { ...@@ -2275,12 +2398,7 @@ header .right_side a:nth-child(4) {
padding: 7px 20px; padding: 7px 20px;
} }
.card_game .card_game_cont .main_img,
.card_game .card_game_cont .img_parent
{
height: 350px;
/* background: red; */
}
.card_game .card_game_cont .text h1 .card_game .card_game_cont .text h1
{ {
font-size: 35px; font-size: 35px;
...@@ -2297,13 +2415,76 @@ header .right_side a:nth-child(4) { ...@@ -2297,13 +2415,76 @@ header .right_side a:nth-child(4) {
{ {
margin-top: 10px; margin-top: 10px;
} }
.card_game_ar .card_game_cont .text h1
{
font-size: 35px;
width: 100%;
margin: 0;
/* color: red; */
/* letter-spacing: 1px; */
transform: translateX(-80px);
}
.card_game_ar .card_game_cont .text h1 span
{
margin-right: 5px;
/* color: red; */
}
.card_game_ar .card_game_cont .text p
{
transform: translateX(-50px);
font-size: 25px;
margin-top: 0;
margin-bottom: 10px;
/* color: white; */
/* color: rebeccapurple; */
}
.card_game_ar .card_game_cont .text p:nth-child(2) {
margin-top: 30px;
}
.card_game_ar .card_game_cont .text p:nth-child(3) {
transform: translateX(-40px);
}
.card_game_ar .card_game_cont .text p:nth-child(4) {
transform: translateX(-30px);
}
.card_game_ar .card_game_cont .text p:nth-child(5) {
transform: translateX(-20px);
}
.card_game_ar .card_game_cont .text p:nth-child(6) {
transform: translateX(-15px);
}
.card_game_ar .card_game_cont .text p:nth-child(7) {
transform: translateX(-10px);
}
.card_game_ar .card_game_cont .text p:nth-child(8) {
transform: translateX(-5px);
}
.card_game_ar .card_game_cont .text p:nth-child(9) {
transform: translateX(0px);
}
.card_game_ar .card_game_cont .text div
{
transform: translateX(-10px);
}
} }
@media(max-width:1030px) { @media(max-width:1030px) {
.card_game_ar .card_game_cont .text div { .card_game_ar .card_game_cont .text div {
left: -67px; font-size: 35px;
} }
.card_game_ar .card_game_cont .text p { .card_game_ar .card_game_cont .text p {
...@@ -2316,8 +2497,9 @@ header .right_side a:nth-child(4) { ...@@ -2316,8 +2497,9 @@ header .right_side a:nth-child(4) {
} }
.card_game .card_game_cont .text h1 { .card_game .card_game_cont .text h1 {
font-size: 28px; font-size: 27px;
margin-bottom: 0; margin-bottom: 0;
/* color: red; */
} }
.card_game .card_game_cont .text p { .card_game .card_game_cont .text p {
...@@ -2326,9 +2508,12 @@ header .right_side a:nth-child(4) { ...@@ -2326,9 +2508,12 @@ header .right_side a:nth-child(4) {
/* */ /* */
.card_game_ar .card_game_cont .text h1 { .card_game_ar .card_game_cont .text h1 {
font-size: 30px; font-size: 23px;
}
.card_game_ar .card_game_cont .main_img, .card_game_ar .card_game_cont .img_parent
{
height: 360px;
} }
.card_game_ar .card_game_cont .text p { .card_game_ar .card_game_cont .text p {
font-size: 17px; font-size: 17px;
/* margin-left: 10%; */ /* margin-left: 10%; */
...@@ -2350,41 +2535,63 @@ header .right_side a:nth-child(4) { ...@@ -2350,41 +2535,63 @@ header .right_side a:nth-child(4) {
margin-left: 2%; margin-left: 2%;
} }
.card_game_ar .card_game_cont .text div {
transform: translateX(-2px);
}
}
@media(max-width:800px) {
.card_game_ar .card_game_cont .text p
{
transform: translateX(-50px);
font-size: 25px;
margin-top: 0;
margin-bottom: 10px;
/* color: white; */
}
.card_game_ar .card_game_cont .text div,
.card_game_ar .card_game_cont .text h1,
.card_game_ar .card_game_cont .text
{
transform: translateX(0);
}
.card_game_ar .card_game_cont .text p:nth-child(2) { .card_game_ar .card_game_cont .text p:nth-child(2) {
top: 165px; margin-top: 30px;
transform: translateX(0);
} }
.card_game_ar .card_game_cont .text p:nth-child(3) { .card_game_ar .card_game_cont .text p:nth-child(3) {
top: 200px; transform: translateX(0px);
} }
.card_game_ar .card_game_cont .text p:nth-child(4) { .card_game_ar .card_game_cont .text p:nth-child(4) {
top: 235px; transform: translateX(0px);
} }
.card_game_ar .card_game_cont .text p:nth-child(5) { .card_game_ar .card_game_cont .text p:nth-child(5) {
top: 270px; transform: translateX(0px);
} }
.card_game_ar .card_game_cont .text p:nth-child(6) { .card_game_ar .card_game_cont .text p:nth-child(6) {
top: 305px; transform: translateX(0px);
} }
.card_game_ar .card_game_cont .text p:nth-child(7) { .card_game_ar .card_game_cont .text p:nth-child(7) {
top: 335px; transform: translateX(0px);
} }
.card_game_ar .card_game_cont .text p:nth-child(8) { .card_game_ar .card_game_cont .text p:nth-child(8) {
top: 370px; transform: translateX(0px);
} }
.card_game_ar .card_game_cont .text p:nth-child(9) { .card_game_ar .card_game_cont .text p:nth-child(9) {
top: 405px; transform: translateX(0px);
} }
}
@media(max-width:800px) {
.card_game .card_game_cont .main_img, .card_game .card_game_cont .img_parent { .card_game .card_game_cont .main_img, .card_game .card_game_cont .img_parent {
height: 400px; height: 400px;
} }
...@@ -2441,13 +2648,27 @@ header .right_side a:nth-child(4) { ...@@ -2441,13 +2648,27 @@ header .right_side a:nth-child(4) {
margin-bottom: 20px; margin-bottom: 20px;
} }
.card_game_ar .card_game_cont { .card_game_ar .card_game_cont .text h1
/* padding: 30px 0; */ {
font-size: 25px;
}
.card_game_ar .card_game_cont .text p
{
font-size: 17px;
display: inline;
line-height: 29px;
} }
} }
@media(max-width:500px) { @media(max-width:500px) {
.card_game_ar .card_game_cont .text div h1:nth-child(2)
{
margin-top: 10px;
}
.card_game_ar .card_game_cont .text p:nth-child(2)
{
margin-top: 25px;
}
.card_game .card_game_cont, .card_game .card_game_cont,
.card_game_ar .card_game_cont { .card_game_ar .card_game_cont {
grid-template-columns: 100%; grid-template-columns: 100%;
...@@ -2488,11 +2709,12 @@ header .right_side a:nth-child(4) { ...@@ -2488,11 +2709,12 @@ header .right_side a:nth-child(4) {
.card_game_ar .card_game_cont .text p { .card_game_ar .card_game_cont .text p {
margin-left: 0%; margin-left: 0%;
margin-bottom: 5px; margin-bottom: 1px;
} }
.card_game_ar .card_game_cont a, .card_game_ar .card_game_cont a,
.card_game .card_game_cont a { .card_game .card_game_cont a,
.card_game_ar .card_game_cont a {
font-size: 16px; font-size: 16px;
padding: 6px 25px; padding: 6px 25px;
left: 10px; left: 10px;
...@@ -2572,17 +2794,27 @@ header .right_side a:nth-child(4) { ...@@ -2572,17 +2794,27 @@ header .right_side a:nth-child(4) {
justify-content: center; justify-content: center;
width: 90%; width: 90%;
margin-left: 5%; margin-left: 5%;
background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
}
.mobile .mobile_cont .main_img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: linear-gradient(to right, transparent, rgba(150, 0, 200, 0.55) 99%); */
opacity: .5;
} }
.mobile_cont .text { .mobile_cont .text {
direction: rtl; direction: rtl;
margin-top: 70px; padding-top: 70px;
position: relative; position: relative;
transform: translateX(60px); transform: translateX(15px);
z-index: 2; z-index: 7;
/* background: linear-gradient(to right, #160b46); */
height: 100%;
} }
...@@ -2617,9 +2849,10 @@ header .right_side a:nth-child(4) { ...@@ -2617,9 +2849,10 @@ header .right_side a:nth-child(4) {
.mobile .mobile_cont img { .mobile .mobile_cont img {
width: 100%; width: 100%;
height: 510px; height: 100%;
z-index: -1;
object-fit: cover; object-fit: cover;
object-position: center; object-position: 90%;
/* border-bottom-right-radius: 20px; */ /* border-bottom-right-radius: 20px; */
/* border-top-right-radius: 20px; */ /* border-top-right-radius: 20px; */
} }
...@@ -2650,18 +2883,7 @@ header .right_side a:nth-child(4) { ...@@ -2650,18 +2883,7 @@ header .right_side a:nth-child(4) {
position: relative; position: relative;
} }
.mobile .mobile_cont .main_img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right,
#160b46,
rgba(150, 0, 200, 0.55));
opacity: .5;
}
@media(max-width:2200px) { @media(max-width:2200px) {
.mobile .mobile_cont .text h1 { .mobile .mobile_cont .text h1 {
...@@ -2681,7 +2903,7 @@ header .right_side a:nth-child(4) { ...@@ -2681,7 +2903,7 @@ header .right_side a:nth-child(4) {
} }
.mobile_cont .text .mobile_cont .text
{ {
margin-top: 30px; padding-top: 30px;
} }
.mobile .mobile_cont a .mobile .mobile_cont a
{ {
...@@ -2823,6 +3045,15 @@ header .right_side a:nth-child(4) { ...@@ -2823,6 +3045,15 @@ header .right_side a:nth-child(4) {
@media(max-width:1030px) @media(max-width:1030px)
{ {
.mobile .mobile_cont img {
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
object-position: unset;
/* border-bottom-right-radius: 20px; */
/* border-top-right-radius: 20px; */
}
.mobile .mobile_cont .text h1 { .mobile .mobile_cont .text h1 {
font-size: 30px; font-size: 30px;
line-height: 37px; line-height: 37px;
...@@ -2904,7 +3135,7 @@ header .right_side a:nth-child(4) { ...@@ -2904,7 +3135,7 @@ header .right_side a:nth-child(4) {
margin-top: 20px; margin-top: 20px;
} }
.mobile .mobile_cont a { .mobile .mobile_cont a {
font-size: 18px; font-size: 16px;
} }
} }
...@@ -3009,6 +3240,8 @@ header .right_side a:nth-child(4) { ...@@ -3009,6 +3240,8 @@ header .right_side a:nth-child(4) {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
z-index: -4;
object-position: 90%;
/* border-bottom-right-radius: 20px; */ /* border-bottom-right-radius: 20px; */
/* border-top-right-radius: 20px; */ /* border-top-right-radius: 20px; */
} }
...@@ -3037,6 +3270,7 @@ header .right_side a:nth-child(4) { ...@@ -3037,6 +3270,7 @@ header .right_side a:nth-child(4) {
.mobile .mobile_cont .main_img { .mobile .mobile_cont .main_img {
position: relative; position: relative;
/* z-index: ; */
} }
.mobile_ar .mobile_cont .main_img::after { .mobile_ar .mobile_cont .main_img::after {
...@@ -3048,13 +3282,22 @@ header .right_side a:nth-child(4) { ...@@ -3048,13 +3282,22 @@ header .right_side a:nth-child(4) {
height: 100%; height: 100%;
/* background-color:var(--title_color); */ /* background-color:var(--title_color); */
background: linear-gradient(90deg, transparent 0%, var(--title_color)90%); background: linear-gradient(90deg, transparent 0%, var(--title_color)90%);
background: linear-gradient(to right, background: linear-gradient(90deg,
#160b46, #160b46,
rgba(150, 0, 200, 0.55)); rgba(150, 0, 200, 0.55));
/* mix-blend-mode: multiply; */ /* mix-blend-mode: multiply; */
opacity: .5; opacity: .5;
opacity: .3; opacity: .3;
} }
.overlay-vr_m {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #1f0c4e ,#be2fbe75 99%);
opacity: 0.4;
}
@media(max-width:2200px) @media(max-width:2200px)
{ {
.mobile_ar .mobile_cont .mobile_ar .mobile_cont
...@@ -3087,6 +3330,22 @@ header .right_side a:nth-child(4) { ...@@ -3087,6 +3330,22 @@ header .right_side a:nth-child(4) {
} }
} }
@media(max-width:2000px)
{
.mobile_ar .mobile_cont a
{
font-size: 30px;
}
}
@media(max-width:1800px)
{
.mobile_ar .mobile_cont a
{
font-size: 27px;
}
}
@media(max-width:1780px) @media(max-width:1780px)
{ {
.mobile_ar .mobile_cont .mobile_ar .mobile_cont
...@@ -3114,7 +3373,7 @@ header .right_side a:nth-child(4) { ...@@ -3114,7 +3373,7 @@ header .right_side a:nth-child(4) {
} }
.mobile_ar .mobile_cont a .mobile_ar .mobile_cont a
{ {
font-size: 30px;
margin-top: 5px; margin-top: 5px;
} }
...@@ -3168,7 +3427,7 @@ header .right_side a:nth-child(4) { ...@@ -3168,7 +3427,7 @@ header .right_side a:nth-child(4) {
} }
.mobile_ar .mobile_cont a .mobile_ar .mobile_cont a
{ {
font-size: 25px; font-size: 20px;
} }
.mobile_ar .mobile_cont .main_img .mobile_ar .mobile_cont .main_img
{ {
...@@ -3197,12 +3456,12 @@ header .right_side a:nth-child(4) { ...@@ -3197,12 +3456,12 @@ header .right_side a:nth-child(4) {
} }
.mobile_ar .mobile_cont a .mobile_ar .mobile_cont a
{ {
font-size: 22px; font-size: 18px;
margin-top: 5px; margin-top: 5px;
} }
.mobile_ar .mobile_cont .main_img .mobile_ar .mobile_cont .main_img
{ {
height: 440px; height: 460px;
} }
} }
@media(max-width:1030px) @media(max-width:1030px)
...@@ -3219,6 +3478,10 @@ header .right_side a:nth-child(4) { ...@@ -3219,6 +3478,10 @@ header .right_side a:nth-child(4) {
{ {
margin-top: 13px; margin-top: 13px;
} }
.mobile_ar .mobile_cont img
{
object-position: unset;
}
} }
@media(max-width:800px) { @media(max-width:800px) {
...@@ -3247,6 +3510,7 @@ header .right_side a:nth-child(4) { ...@@ -3247,6 +3510,7 @@ header .right_side a:nth-child(4) {
{ {
font-size: 25px; font-size: 25px;
line-height: 32px; line-height: 32px;
width: 80%;
} }
.Vr_zone_ar .Vr_zone_ar_cont .text p,.mobile_ar .mobile_cont .text p .Vr_zone_ar .Vr_zone_ar_cont .text p,.mobile_ar .mobile_cont .text p
{ {
...@@ -3327,7 +3591,7 @@ header .right_side a:nth-child(4) { ...@@ -3327,7 +3591,7 @@ header .right_side a:nth-child(4) {
color: #aa09b4; color: #aa09b4;
font-family: var(--sora_extrabold) !important; font-family: var(--sora_extrabold) !important;
direction: ltr; direction: ltr;
font-size: 39px; font-size: 70px;
width: 100%; width: 100%;
/* text-align: center; */ /* text-align: center; */
margin-top: 0px; margin-top: 0px;
...@@ -3341,7 +3605,7 @@ header .right_side a:nth-child(4) { ...@@ -3341,7 +3605,7 @@ header .right_side a:nth-child(4) {
.casual_av .casual_av_cont .text h1 { .casual_av .casual_av_cont .text h1 {
color: white; color: white;
font-size: 45px; font-size: 55px;
font-weight: 700; font-weight: 700;
width: 100%; width: 100%;
direction: rtl; direction: rtl;
...@@ -3438,7 +3702,12 @@ header .right_side a:nth-child(4) { ...@@ -3438,7 +3702,12 @@ header .right_side a:nth-child(4) {
} }
.casual_av .casual_av_cont .img_parent, .casual_av .casual_av_cont .img_parent,
.casual_av .casual_av_cont .main_img{ .casual_av .casual_av_cont .main_img{
height: 500px; height: 700px;
}
.casual_av .casual_av_cont .text .casual_text p
{
font-family: var(--font_noor_light);
font-size: 40px;
} }
@media(max-width:2200px) { @media(max-width:2200px) {
.casual_av .casual_av_cont .casual_av .casual_av_cont
...@@ -3455,6 +3724,10 @@ header .right_side a:nth-child(4) { ...@@ -3455,6 +3724,10 @@ header .right_side a:nth-child(4) {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.casual_av .casual_av_cont a
{
font-size: 31.5px;
}
.casual_av .casual_av_cont .img_parent::after { .casual_av .casual_av_cont .img_parent::after {
...@@ -3536,14 +3809,23 @@ header .right_side a:nth-child(4) { ...@@ -3536,14 +3809,23 @@ header .right_side a:nth-child(4) {
} }
@media(max-width:2000px) { @media(max-width:2000px) {
.casual_av .casual_av_cont a
{
font-size: 30px;
}
.casual_av .casual_av_cont .text h1 { .casual_av .casual_av_cont .text h1 {
/* padding-right: 10px; */ /* padding-right: 10px; */
/* text-align: start; */ /* text-align: start; */
padding-right: 150px; padding-right: 150px;
transform: translateX(0); transform: translateX(50px);
font-size: 60px ; font-size: 60px ;
/* color: blueviolet; */ /* color: blueviolet; */
}
.casual_av .casual_av_cont .text h1 span
{
font-size: 60px;
} }
.casual_av .casual_av_cont .text .casual_text .casual_av .casual_av_cont .text .casual_text
{ {
...@@ -3611,7 +3893,14 @@ header .right_side a:nth-child(4) { ...@@ -3611,7 +3893,14 @@ header .right_side a:nth-child(4) {
} }
@media(max-width:1920px)
{
.casual_av .casual_av_cont .text .casual_text
{
padding-right: 186px;
}
}
@media(max-width:1850px) @media(max-width:1850px)
{ {
...@@ -3623,6 +3912,15 @@ header .right_side a:nth-child(4) { ...@@ -3623,6 +3912,15 @@ header .right_side a:nth-child(4) {
font-size: 45px ; font-size: 45px ;
}
.casual_av .casual_av_cont a
{
font-size: 27px;
}
.casual_av .casual_av_cont .text h1
{
font-size: 45px;
} }
.casual_av .casual_av_cont .text .casual_text .casual_av .casual_av_cont .text .casual_text
{ {
...@@ -3676,7 +3974,8 @@ header .right_side a:nth-child(4) { ...@@ -3676,7 +3974,8 @@ header .right_side a:nth-child(4) {
{ {
font-size: 62px; font-size: 62px;
} }
.casual_av .casual_av_cont .text h1 .casual_av .casual_av_cont .text h1,
.casual_av .casual_av_cont .text h1 span
{ {
font-size: 50px; font-size: 50px;
} }
...@@ -3726,7 +4025,8 @@ header .right_side a:nth-child(4) { ...@@ -3726,7 +4025,8 @@ header .right_side a:nth-child(4) {
font-size: 52px; font-size: 52px;
} }
.casual_av .casual_av_cont .text h1 .casual_av .casual_av_cont .text h1,
.casual_av .casual_av_cont .text h1 span
{ {
font-size: 40px; font-size: 40px;
} }
...@@ -3812,7 +4112,8 @@ header .right_side a:nth-child(4) { ...@@ -3812,7 +4112,8 @@ header .right_side a:nth-child(4) {
/* color: #00ff00; */ /* color: #00ff00; */
} }
.casual_av .casual_av_cont .text h1 .casual_av .casual_av_cont .text h1,
.casual_av .casual_av_cont .text h1 span
{ {
font-size: 35px; font-size: 35px;
} }
...@@ -3825,6 +4126,11 @@ header .right_side a:nth-child(4) { ...@@ -3825,6 +4126,11 @@ header .right_side a:nth-child(4) {
height: 97%; height: 97%;
} }
.casual_av .casual_av_cont a
{
font-size: 20px;
}
.casual_av .casual_av_cont .img_parent::after { .casual_av .casual_av_cont .img_parent::after {
...@@ -3953,7 +4259,7 @@ header .right_side a:nth-child(4) { ...@@ -3953,7 +4259,7 @@ header .right_side a:nth-child(4) {
padding-right: 0px; padding-right: 0px;
transform: translateX(0); transform: translateX(0);
width: 100%; width: 100%;
font-size: 30px; font-size: 39px;
/* color: black; */ /* color: black; */
} }
.casual_av .casual_av_cont .text .casual_text p:nth-child(1) .casual_av .casual_av_cont .text .casual_text p:nth-child(1)
...@@ -3998,6 +4304,10 @@ header .right_side a:nth-child(4) { ...@@ -3998,6 +4304,10 @@ header .right_side a:nth-child(4) {
{ {
height: 420px; height: 420px;
} }
.casual_av .casual_av_cont a
{
font-size: 18px;
}
} }
...@@ -4088,10 +4398,7 @@ header .right_side a:nth-child(4) { ...@@ -4088,10 +4398,7 @@ header .right_side a:nth-child(4) {
} }
} }
.casual_av .casual_av_cont .text .casual_text p
{
font-family: var(--font_noor_light);
}
@media(max-width:800px) { @media(max-width:800px) {
.casual_av .casual_av_cont .text .casual_text, .casual_av .casual_av_cont .text .casual_text,
.casual_av .casual_av_cont .text .casual_text p .casual_av .casual_av_cont .text .casual_text p
...@@ -4213,7 +4520,7 @@ header .right_side a:nth-child(4) { ...@@ -4213,7 +4520,7 @@ header .right_side a:nth-child(4) {
.casual_av .casual_av_cont a { .casual_av .casual_av_cont a {
font-size: 14px; font-size: 16px;
right: 30px; right: 30px;
padding: 5px 10px; padding: 5px 10px;
width: fit-content; width: fit-content;
...@@ -5155,7 +5462,7 @@ header .right_side a:nth-child(4) { ...@@ -5155,7 +5462,7 @@ header .right_side a:nth-child(4) {
.cosplay .cosplay_cont a { .cosplay .cosplay_cont a {
font-size: 14px; font-size: 16px;
right: 30px; right: 30px;
padding: 5px 10px; padding: 5px 10px;
} }
...@@ -5563,6 +5870,12 @@ header .right_side a:nth-child(4) { ...@@ -5563,6 +5870,12 @@ header .right_side a:nth-child(4) {
position: relative; position: relative;
transform: translateX(60px); transform: translateX(60px);
z-index: 2; z-index: 2;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
/* background-color: red; */
gap: 0;
} }
...@@ -5579,6 +5892,7 @@ header .right_side a:nth-child(4) { ...@@ -5579,6 +5892,7 @@ header .right_side a:nth-child(4) {
/* margin-left: 10%; */ /* margin-left: 10%; */
line-height: 51px; line-height: 51px;
font-family: var(--font_noor_bold); font-family: var(--font_noor_bold);
/* background-color: beige; */
...@@ -5591,6 +5905,7 @@ header .right_side a:nth-child(4) { ...@@ -5591,6 +5905,7 @@ header .right_side a:nth-child(4) {
font-weight: normal; font-weight: normal;
font-family: var(--font_noor_light); font-family: var(--font_noor_light);
line-height: 38px; line-height: 38px;
margin-top: 0;
} }
...@@ -5663,7 +5978,7 @@ header .right_side a:nth-child(4) { ...@@ -5663,7 +5978,7 @@ header .right_side a:nth-child(4) {
{ {
/* margin: 50px; */ /* margin: 50px; */
/* color: red; */ /* color: red; */
margin: 0 -17px 0 0; margin: 0 0px 0 0;
} }
.Vr_zone_cont .text .Vr_zone_cont .text
...@@ -5890,7 +6205,7 @@ header .right_side a:nth-child(4) { ...@@ -5890,7 +6205,7 @@ header .right_side a:nth-child(4) {
} }
.Vr_zone .Vr_zone_cont a { .Vr_zone .Vr_zone_cont a {
font-size: 18px; font-size: 16px;
} }
} }
...@@ -6011,6 +6326,7 @@ header .right_side a:nth-child(4) { ...@@ -6011,6 +6326,7 @@ header .right_side a:nth-child(4) {
position: absolute; position: absolute;
bottom: 50px; bottom: 50px;
left: 30px; left: 30px;
z-index: 4;
} }
.Vr_zone_ar .Vr_zone_ar_cont .main_img::after { .Vr_zone_ar .Vr_zone_ar_cont .main_img::after {
...@@ -6085,12 +6401,19 @@ header .right_side a:nth-child(4) { ...@@ -6085,12 +6401,19 @@ header .right_side a:nth-child(4) {
height: 700px; height: 700px;
} }
} }
@media(max-width:1850px)
{
.Vr_zone_ar .Vr_zone_ar_cont a
{
font-size: 27px;
}
}
@media(max-width:1780px) @media(max-width:1780px)
{ {
.Vr_zone_ar .Vr_zone_ar_cont a .Vr_zone_ar .Vr_zone_ar_cont a
{ {
font-size: 30px; /* font-size: 30px; */
padding: 10px 60px; padding: 10px 60px;
/* color: red; */ /* color: red; */
} }
...@@ -6154,7 +6477,7 @@ header .right_side a:nth-child(4) { ...@@ -6154,7 +6477,7 @@ header .right_side a:nth-child(4) {
} }
.Vr_zone_ar .Vr_zone_ar_cont a .Vr_zone_ar .Vr_zone_ar_cont a
{ {
font-size: 25px; font-size: 20px;
padding: 10px 60px; padding: 10px 60px;
} }
} }
...@@ -6185,7 +6508,7 @@ header .right_side a:nth-child(4) { ...@@ -6185,7 +6508,7 @@ header .right_side a:nth-child(4) {
} }
.Vr_zone_ar .Vr_zone_ar_cont a .Vr_zone_ar .Vr_zone_ar_cont a
{ {
font-size: 20px; font-size: 18px;
padding: 10px 60px; padding: 10px 60px;
} }
} }
...@@ -6195,8 +6518,8 @@ header .right_side a:nth-child(4) { ...@@ -6195,8 +6518,8 @@ header .right_side a:nth-child(4) {
transform: translateX(-65px); transform: translateX(-65px);
} }
.Vr_zone_ar .Vr_zone_ar_cont .text h1 { .Vr_zone_ar .Vr_zone_ar_cont .text h1 {
font-size: 20px; font-size: 27px;
width: 90%; width: 100%;
line-height: 31px; line-height: 31px;
} }
.Vr_zone_ar .Vr_zone_ar_cont .text p { .Vr_zone_ar .Vr_zone_ar_cont .text p {
...@@ -6276,6 +6599,7 @@ header .right_side a:nth-child(4) { ...@@ -6276,6 +6599,7 @@ header .right_side a:nth-child(4) {
bottom: 30px; bottom: 30px;
left: 10px; left: 10px;
padding: 6px 45px; padding: 6px 45px;
font-size: 16px;
} }
} }
...@@ -6298,7 +6622,7 @@ header .right_side a:nth-child(4) { ...@@ -6298,7 +6622,7 @@ header .right_side a:nth-child(4) {
} }
.En_font { .En_font {
font-family: var(--sora_font) !important; font-family: var(--sora_extrabold) !important;
} }
/* =========== */ /* =========== */
......
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