Skip to content

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

add whatsapp connection

parent 7fdb0710
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1483 additions and 128 deletions
index.html
View file @ c1669fd3
...@@ -16,6 +16,18 @@ ...@@ -16,6 +16,18 @@
<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"> <link rel="stylesheet" href="style3.css">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init({
publicKey: "d2Ro5scl2UY-N-y5R",
});
})();
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</head> </head>
<body> <body>
...@@ -41,7 +53,7 @@ ...@@ -41,7 +53,7 @@
<span id="from">from</span> <span id="from">from</span>
<span id="date_from">feb 5TH</span> <span id="date_from">feb 5TH</span>
<span id="to">to</span> <span id="to">to</span>
<span id="date_to">feb 7TH <span>2025</span> </span> <span id="date_to">feb 7TH <span>2026</span> </span>
</p> </p>
<p class="place" id="place"> <p class="place" id="place">
...@@ -52,8 +64,8 @@ ...@@ -52,8 +64,8 @@
</div> </div>
<div class="right_side"> <div class="right_side">
<a id="ticketing_bnt_en" href="#ticketing_section" class="ticketing_bnt_en hidden1">ticketing</a> <a id="ticketing_bnt_en" class="ticketing_bnt_en hidden1">ticketing</a>
<a id="ticketing_ar" href="#ticketing_section_ar" class=" ticketing_ar"> التذاكر</a> <a id="ticketing_ar" class=" ticketing_ar"> التذاكر</a>
<a class="lines"> <a class="lines">
<span></span> <span></span>
<span></span> <span></span>
...@@ -66,8 +78,44 @@ ...@@ -66,8 +78,44 @@
</header> </header>
<!-- ============Hero_AR --> <!-- ============Hero_AR -->
<div class="hero_sectionh2 " id="hero_ar"> <div class="hero_sectionh2_en hidden1 " id="hero_en">
<div class="mainiMg1h"> <div class="mainiMg1h_en">
<img src="./images/main1.jpg">
</div>
<div class="hero_desc_en">
<h3 id="hero_title" class="hero_title2_en">
<div class="wordh21_en">
<span> WELCOME TO <span>THE</span></span>
<span class="the_en"><span>BASE</span> — WHERE THE</span>
</div>
<div class="wordh22_en">
<span> GAME COMES</span>
</div>
<div class="wordh23_en">
<span> ALIVE! </span>
</div>
</h3>
<p id="hero_desc" class="hero-sech21_en">A FESTIVAL BUILT FOR GAMERS, </p>
<p id="hero_desc" class="hero-sech22_en">CREATORS, AND FANS WHO LIVE</p>
<p id="hero_desc" class="hero-sech23_en"> FOR THE ACTION.</p>
<p id="hero_desc" class="hero-sech24_en">THREE DAYS OF PURE ENERGY,</p>
<p id="hero_desc" class="hero-sech25_en">COMPETITION, AND COMMUNITY.</p>
<a id="" class="bookA1_en"> BOOK NOW</a>
</div>
<div class="hero_desc_res_en " >
<h3 id="hero_title" class="hero_title2_en">
WELCOME TO <span class="the">THE BASE</span> — WHERE THE GAME COMES ALIVE!
</h3>
<p>
A FESTIVAL BUILT FOR GAMERS, CREATORS, AND FANS WHO LIVE FOR THE ACTION. THREE DAYS OF ENERGY, COMPETITION, AND COMMUNITY.
</p>
<a id="" class="bookA1"> BOOK NOW</a>
</div>
</div>
<div class="hero_sectionh2 " id="hero_ar">
<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">
...@@ -85,7 +133,7 @@ ...@@ -85,7 +133,7 @@
<p id="hero_desc" class="hero-sech23">الحماس والإثارة </p> <p id="hero_desc" class="hero-sech23">الحماس والإثارة </p>
<p id="hero_desc" class="hero-sech24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p> <p id="hero_desc" class="hero-sech24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p>
<p id="hero_desc" class="hero-sech25">وروح المجتمع</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">احجز الان</a>
</div> </div>
<div class="hero_desc_res_ar"> <div class="hero_desc_res_ar">
<h3 id="hero_title" class="hero_title2"> <h3 id="hero_title" class="hero_title2">
...@@ -104,11 +152,12 @@ ...@@ -104,11 +152,12 @@
ثلاثة أيام من الطاقة الخالصة، والمنافسة، ثلاثة أيام من الطاقة الخالصة، والمنافسة،
وروح المجتمع وروح المجتمع
</p> </p>
<a id="book_now" class="bookA1" href="#ticketing_section_ar">احجز الان</a> <a id="book_now1" class="bookA1">احجز الان</a>
</div> </div>
</div> </div>
<!-- ==================== Hero_EN --> <!-- ==================== Hero_EN -->
<div class="hero_section rtl_size hidden1" id="hero_en"> <!-- <div class="hero_section rtl_size hidden1" id="hero_en">
<div class="mainiMg"> <div class="mainiMg">
<img src="./images/main1.jpg"> <img src="./images/main1.jpg">
</div> </div>
...@@ -151,7 +200,7 @@ ...@@ -151,7 +200,7 @@
COMPETITION, AND COMMUNITY.</p> COMPETITION, AND COMMUNITY.</p>
<a id="book_now" class="bookA" href="#ticketing_section">book now</a> <a id="book_now" class="bookA" href="#ticketing_section">book now</a>
</div> </div>
</div> </div> -->
<div class="play_games " id="play_games"> <div class="play_games " id="play_games">
...@@ -482,9 +531,8 @@ AND ONLY THE BEST REACH THE TOP.</p> ...@@ -482,9 +531,8 @@ AND ONLY THE BEST REACH THE TOP.</p>
</h2> </h2>
<div class="vr-p p-en"> <div class="vr-p p-en">
<p>FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADRENALINE.</p>
FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADRENALINE.EVERY MOMENT HERE IS AN <p>EVERY MOMENT HERE IS AN EXPERIENCE WORTH LIVING.</p>
EXPERIENCE WORTH LIVING.
</div> </div>
<button class="vr-btn1 btnen">CAR simulator</button> <button class="vr-btn1 btnen">CAR simulator</button>
...@@ -529,10 +577,11 @@ AND ONLY THE BEST REACH THE TOP.</p> ...@@ -529,10 +577,11 @@ AND ONLY THE BEST REACH THE TOP.</p>
<span>15 KD</span> <span>15 KD</span>
</div> </div>
<div class="text"> <div class="text">
<p class="first-p">GET FULL ACCESS TO BASE ACROSS ALL THREE DAYS_TOURNAMENTS, <p class="first-p days3_p">GET FULL ACCESS TO THE BASE ACROSS ALL THREE DAYS — TOURNAMENTS,
STAGES,COSPLAY SHOWS ,VR,ARCADE, STAGES, COSPLAY SHOWS, VR, ARCADE,
AND EVERY GAMING ZONE.ENJOY UNLIMITED ENTRY TO ALL CASUAL AND COMPETITIVE AREAS ,MAIN STAGES AND EVERY GAMING ZONE. ENJOY UNLIMITED ENTRY TO ALL CASUAL AND
ACTIVITIES,AND EXCLUSIVE COMMUNITY THROUGHOUT THE FESTIVAL. COMPETITIVE AREAS, MAIN STAGE
ACTIVITIES, AND EXCLUSIVE COMMUNITY EVENTS THROUGHOUT THE FESTIVAL.
</p> </p>
...@@ -549,10 +598,9 @@ AND ONLY THE BEST REACH THE TOP.</p> ...@@ -549,10 +598,9 @@ AND ONLY THE BEST REACH THE TOP.</p>
<span>10 KD</span> <span>10 KD</span>
</div> </div>
<div class="text"> <div class="text">
<p class="first-p">GET FULL ACCESS TO BASE ACROSS ALL THREE DAYS_TOURNAMENTS, <p class="first-p">PERFECT FOR GAMERS WHO
STAGES,COSPLAY SHOWS ,VR,ARCADE, WANT TO EXPERIENCE THE EVENT IN ONE HIT! SPEND A FULL DAY EXPLORING EVERY PART OF THE BASE:
AND EVERY GAMING ZONE.ENJOY UNLIMITED ENTRY TO ALL CASUAL AND COMPETITIVE AREAS ,MAIN STAGES TOURNAMENTS, VR, CARD ZONES, COSPLAY SHOWS, AND MORE — ALL IN ONE PASS.
ACTIVITIES,AND EXCLUSIVE COMMUNITY THROUGHOUT THE FESTIVAL.
</p> </p>
...@@ -571,11 +619,11 @@ AND ONLY THE BEST REACH THE TOP.</p> ...@@ -571,11 +619,11 @@ AND ONLY THE BEST REACH THE TOP.</p>
<span>50 KD</span> <span>50 KD</span>
</div> </div>
<div class="text"> <div class="text">
<p class="first-p">FOR THOOSE WHO WANT THE FULL EXPERIENCE - AND MORE. ENJOY EXCLUSIVE VIP <p class="first-p">FOR THOSE WHO WANT THE FULL EXPERIENCE — AND MORE. ENJOY EXCLUSIVE VIP
ACCESS WITH PRIORITY ENTRY, ACCESS WITH PRIORITY ENTRY,
RESERVED MAIN STAGE SEATING,BACKSTAGE MEET & GREETS, AND A PREMIUM MERCH RESERVED MAIN STAGE SEATING, BACKSTAGE MEET & GREETS, AND A PREMIUM MERCH
PACK.THREE DAYS OF PACK. THREE DAYS OF
GAMING ,LUXORY,AND NEXT-LEVEL ACCESS TO THE BASE. GAMING, LUXURY, AND NEXT-LEVEL ACCESS TO THE BASE.
</p> </p>
...@@ -636,7 +684,7 @@ AND ONLY THE BEST REACH THE TOP.</p> ...@@ -636,7 +684,7 @@ AND ONLY THE BEST REACH THE TOP.</p>
</div> </div>
<button class="btn2_type" onclick="openNewWindow( 'https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625862' <button class="btn2_type" onclick="openNewWindow( 'https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625862'
)">احجز الان</button> )">احجز الان</button>
...@@ -759,7 +807,7 @@ AND ONLY THE BEST REACH THE TOP.</p> ...@@ -759,7 +807,7 @@ AND ONLY THE BEST REACH THE TOP.</p>
</div> </div>
<div class="info"> <div class="info">
<p id="newsletter_text">RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL</p> <p id="newsletter_text">RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL</p>
<form> <form onsubmit="sendEmail(event)" method="post">
<div> <div>
<label for="email">Email:</label> <label for="email">Email:</label>
<input type="text" id="email" name="email" /> <input type="text" id="email" name="email" />
...@@ -768,13 +816,28 @@ AND ONLY THE BEST REACH THE TOP.</p> ...@@ -768,13 +816,28 @@ AND ONLY THE BEST REACH THE TOP.</p>
<label for="phone">Phone:</label> <label for="phone">Phone:</label>
<input type="text" id="phone" name="phone" /> <input type="text" id="phone" name="phone" />
</div> </div>
<button type="submit" onclick=>send message</button> <button type="submit" >subscribe</button>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<div class="social_accounts">
<div class="icons">
<a onclick="openNewWindow('https://x.com/thebasekuwait')"><img src="./images/twitter.png"></a>
<a onclick="openNewWindow('https://www.instagram.com/kuwaitthebase/')"><img src="./images/instagram.png"></a>
<a onclick="openNewWindow('https://www.facebook.com/profile.php?id=61581965409215')"><img src="./images/facebook-app-symbol.png"></a>
</div>
<div class="buttonc_parent">
<button onclick="openWhatsApp()">Contact us </button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
......
index.js
View file @ c1669fd3
const swiper = new Swiper(".mySwiper", { const swiper = new Swiper(".mySwiper", {
slidesPerView: 7, slidesPerView: 7,
spaceBetween: 30, spaceBetween: 30,
loop: false, loop: false,
...@@ -77,6 +78,9 @@ let playable_games_title=document.getElementById("playable_games_title") ...@@ -77,6 +78,9 @@ let playable_games_title=document.getElementById("playable_games_title")
let esports_title=document.getElementById("esports_title") let esports_title=document.getElementById("esports_title")
let e_sport_btn=document.getElementById("e_sport_btn") let e_sport_btn=document.getElementById("e_sport_btn")
let Ar_flag=true let Ar_flag=true
let user_email=document.getElementById("email")
let user_phone=document.getElementById("phone")
let book_now1=document.getElementById("book_now1")
function changeLanguage(lang) { function changeLanguage(lang) {
console.log("function") console.log("function")
...@@ -158,10 +162,10 @@ function changeLanguage(lang) { ...@@ -158,10 +162,10 @@ function changeLanguage(lang) {
} }
} }
// window.onload=function() window.onload=function()
// { {
// changeLanguage("en") changeLanguage("en")
// } }
// document.querySelector(".en_lang").addEventListener("click", () => changeLanguage("en")); // document.querySelector(".en_lang").addEventListener("click", () => changeLanguage("en"));
// document.querySelector(".en_lang1").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"));
...@@ -212,20 +216,142 @@ window.addEventListener("resize", function() { ...@@ -212,20 +216,142 @@ window.addEventListener("resize", function() {
else else
window.open(url, "_blank"); window.open(url, "_blank");
} }
e_sport_btn.onclick=function () e_sport_btn.onclick = function() {
{ const targetId = Ar_flag ? "ticketing_section_ar" : "ticketing_section";
if(Ar_flag) const target = document.getElementById(targetId);
location.href = "#ticketing_section_ar"
else
location.href = "#ticketing_section"
}
ticketing_btn1.onclick=function () if (target) {
{ target.scrollIntoView({ behavior: "smooth" });
if(Ar_flag) // Remove hash from URL
location.href = "#ticketing_section_ar" history.pushState("", document.title, window.location.pathname + window.location.search);
else }
location.href = "#ticketing_section" };
} book_now.onclick = function() {
const targetId = "ticketing_section_ar"
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
// Remove hash from URL
history.pushState("", document.title, window.location.pathname + window.location.search);
}
};
book_now1.onclick = function() {
console.log("id")
const targetId = "ticketing_section_ar"
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
// Remove hash from URL
history.pushState("", document.title, window.location.pathname + window.location.search);
}
};
ticketing_ar.onclick = function() {
const targetId = "ticketing_section_ar"
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
// Remove hash from URL
history.pushState("", document.title, window.location.pathname + window.location.search);
}
};
// e_sport_btn.onclick=function ()
\ No newline at end of file // {
// if(Ar_flag)
// location.href = "#ticketing_section_ar"
// else
// location.href = "#ticketing_section"
// }
ticketing_btn1.onclick = function() {
const targetId = Ar_flag ? "ticketing_section_ar" : "ticketing_section";
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
// Remove hash from URL
history.pushState("", document.title, window.location.pathname + window.location.search);
}
};
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
function sendEmail(event)
{
event.preventDefault();
console.log("sendmail")
if(!user_email.value||!user_phone.value)
notify()
else if(!emailPattern.test(user_email.value))
notify1()
else{
var Params={
email:user_email.value,
phone: user_phone.value
}
const servieceID="service_n1e464q"
const templateID="template_3dejf6d"
emailjs.send(servieceID,templateID,Params)
.then(
res=>{
document.getElementById("email").value="";
document.getElementById("phone").value="";
notifyS()
}
).catch((error)=>console.log("Error : ",error))
}
}
function openWhatsApp() {
const phone = "96595504919"; // full number, no '+'
const appUrl = `whatsapp://send?phone=${phone}`;
const webUrl = `https://wa.me/${phone}`;
// Detect platform
const ua = navigator.userAgent.toLowerCase();
const isAndroid = ua.includes("android");
const isIOS = /iphone|ipad|ipod/.test(ua);
// Try open WhatsApp app
window.location.href = appUrl;
setTimeout(() => {
if (isAndroid) {
window.location.href = webUrl;
} else if (isIOS) {
window.location.href = webUrl;
} else {
window.open(webUrl, "_blank");
}
}, 800);
}
function notify() {
Toastify({
text: "Email and Phone required",
duration: 3000,
gravity: "top",
position: "right",
backgroundColor: "red",
}).showToast();
}
function notify1() {
Toastify({
text: " invalid Email",
duration: 3000,
gravity: "top",
position: "right",
backgroundColor: "red",
}).showToast();
}
function notifyS() {
Toastify({
text: "Form submitted successfully!",
duration: 3000,
gravity: "top",
position: "right",
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
}
\ No newline at end of file
style.css
View file @ c1669fd3
...@@ -685,7 +685,7 @@ header .right_side a:nth-child(4) { ...@@ -685,7 +685,7 @@ header .right_side a:nth-child(4) {
/* ===========letters================ */ /* ===========letters================ */
.letters { .letters {
background-color: var(--bck_color); background-color: var(--bck_color);
padding: 20px 0; padding: 20px 0 50px 0;
} }
...@@ -775,7 +775,8 @@ header .right_side a:nth-child(4) { ...@@ -775,7 +775,8 @@ header .right_side a:nth-child(4) {
color: white; color: white;
} }
.letters form button { .letters form button,
.social_accounts .buttonc_parent button {
background: linear-gradient(to right, #151552f7 20%, #6a1a97, var(--purple_col)); background: linear-gradient(to right, #151552f7 20%, #6a1a97, var(--purple_col));
; ;
outline: none; outline: none;
...@@ -937,7 +938,8 @@ header .right_side a:nth-child(4) { ...@@ -937,7 +938,8 @@ header .right_side a:nth-child(4) {
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
} }
.letters form button .letters form button,
.social_accounts .buttonc_parent button
{ {
font-size: 31.5px; font-size: 31.5px;
margin-top: 80px; margin-top: 80px;
...@@ -1134,7 +1136,8 @@ header .right_side a:nth-child(4) { ...@@ -1134,7 +1136,8 @@ header .right_side a:nth-child(4) {
{ {
margin-top: 25px; margin-top: 25px;
} }
.letters form button .letters form button,
.social_accounts .buttonc_parent button
{ {
font-size: 25px; font-size: 25px;
margin-top: 40px; margin-top: 40px;
...@@ -1229,7 +1232,8 @@ header .right_side a:nth-child(4) { ...@@ -1229,7 +1232,8 @@ header .right_side a:nth-child(4) {
{ {
margin-top: 25px; margin-top: 25px;
} }
.letters form button .letters form button,
.social_accounts .buttonc_parent button
{ {
font-size: 25px; font-size: 25px;
margin-top: 40px; margin-top: 40px;
...@@ -1357,7 +1361,8 @@ header .right_side a:nth-child(4) { ...@@ -1357,7 +1361,8 @@ header .right_side a:nth-child(4) {
{ {
margin-top: 25px; margin-top: 25px;
} }
.letters form button .letters form button,
.social_accounts .buttonc_parent button
{ {
font-size: 18px; font-size: 18px;
margin-top: 40px; margin-top: 40px;
...@@ -2544,6 +2549,10 @@ header .right_side a:nth-child(4) { ...@@ -2544,6 +2549,10 @@ header .right_side a:nth-child(4) {
} }
@media(max-width:800px) { @media(max-width:800px) {
.card_game_ar .card_game_cont .main_img, .card_game_ar .card_game_cont .img_parent
{
height: 400px;
}
.card_game_ar .card_game_cont .text p .card_game_ar .card_game_cont .text p
{ {
transform: translateX(-50px); transform: translateX(-50px);
...@@ -2645,7 +2654,7 @@ header .right_side a:nth-child(4) { ...@@ -2645,7 +2654,7 @@ header .right_side a:nth-child(4) {
.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: 0; margin-left: 0;
margin-bottom: 20px; margin-bottom: 30px;
} }
.card_game_ar .card_game_cont .text h1 .card_game_ar .card_game_cont .text h1
...@@ -2763,7 +2772,7 @@ header .right_side a:nth-child(4) { ...@@ -2763,7 +2772,7 @@ 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: 18px; font-size: 18px;
line-height: 32px; line-height: 18px;
} }
.card_game .card_game_cont .text p { .card_game .card_game_cont .text p {
...@@ -3476,7 +3485,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -3476,7 +3485,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
} }
.mobile_ar .mobile_cont a .mobile_ar .mobile_cont a
{ {
margin-top: 13px; margin-top: 15px;
} }
.mobile_ar .mobile_cont img .mobile_ar .mobile_cont img
{ {
...@@ -3505,12 +3514,15 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -3505,12 +3514,15 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
.mobile_ar .mobile_cont .text { .mobile_ar .mobile_cont .text {
transform: translateX(0); transform: translateX(0);
margin-top: 30px; margin-top: 30px;
padding: 0;
} }
.mobile_ar .mobile_cont .text h1 .mobile_ar .mobile_cont .text h1
{ {
font-size: 25px; font-size: 25px;
line-height: 32px; line-height: 32px;
width: 80%; width: 80%;
margin-top: 0;
margin-bottom: 30px;
} }
.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
{ {
...@@ -3548,6 +3560,10 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -3548,6 +3560,10 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
width: 94%; width: 94%;
margin: 0 3%; margin: 0 3%;
} }
.mobile_ar .mobile_cont .main_img
{
height: 350px;
}
} }
@media(max-width:350px) { @media(max-width:350px) {
...@@ -5545,6 +5561,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -5545,6 +5561,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
direction: ltr; direction: ltr;
/* margin-left: 10%; */ /* margin-left: 10%; */
line-height: 55px; line-height: 55px;
margin-bottom: 10px;
font-family: var(--sora_extrabold); font-family: var(--sora_extrabold);
...@@ -5558,6 +5575,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -5558,6 +5575,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
font-weight: normal; font-weight: normal;
font-family: var(--sora_font); font-family: var(--sora_font);
line-height: 48px; line-height: 48px;
margin-top: 0;
} }
...@@ -5801,12 +5819,17 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -5801,12 +5819,17 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
} }
.cosplay_ar .cosplay_cont .text p { .cosplay_ar .cosplay_cont .text p {
font-size: 25px; font-size: 20px;
} }
.cosplay_ar .cosplay_cont .text h1 { .cosplay_ar .cosplay_cont .text h1 {
font-size: 30px; font-size: 25px;
width: 100%; width: 100%;
line-height: 27px;
}
.cosplay_ar .cosplay_cont .img_parent,
.cosplay_ar .cosplay_cont .main_img {
height: 345px;
} }
} }
...@@ -5816,7 +5839,11 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -5816,7 +5839,11 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
height: 100%; height: 100%;
} }
.cosplay_ar .cosplay_cont .text h1
{
margin-top: 0;
margin-bottom: 30px;
}
.cosplay_ar .cosplay_cont { .cosplay_ar .cosplay_cont {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
...@@ -5834,6 +5861,15 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -5834,6 +5861,15 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
transform: translateX(0); transform: translateX(0);
margin-top: 30px; margin-top: 30px;
} }
.cosplay_ar .cosplay_cont .text p
{
font-size: 17px;
line-height: 25px;
}
.cosplay_ar .cosplay_cont .img_parent, .cosplay_ar .cosplay_cont .main_img
{
height: 400px;
}
} }
...@@ -5870,8 +5906,8 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -5870,8 +5906,8 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
.cosplay_ar .cosplay_cont .text h1 { .cosplay_ar .cosplay_cont .text h1 {
font-size: 18px; font-size: 18px;
width: 100%; width: 90%;
line-height: 32px; line-height: 25px;
} }
.cosplay_ar .cosplay_cont .text p { .cosplay_ar .cosplay_cont .text p {
...@@ -5886,7 +5922,18 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -5886,7 +5922,18 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
} }
} }
@media(max-width:400px)
{
.cosplay_ar .cosplay_cont .text h1 {
width: 95%;
}
.cosplay_ar .cosplay_cont .img_parent, .cosplay_ar .cosplay_cont .main_img
{
height: 350px;
}
}
@media(max-width:350px) { @media(max-width:350px) {
.cosplay_ar .cosplay_cont { .cosplay_ar .cosplay_cont {
width: 94%; width: 94%;
...@@ -6598,22 +6645,23 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -6598,22 +6645,23 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
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: 27px; font-size: 24px;
width: 100%; 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 {
font-size: 17px; font-size: 18px;
line-height: 24px; line-height: 24px;
width: 100%; width: 100%;
} }
.Vr_zone_ar .Vr_zone_ar_cont .main_img { .Vr_zone_ar .Vr_zone_ar_cont .main_img {
height: 390px; height: 397px;
} }
.Vr_zone_ar .Vr_zone_ar_cont a { .Vr_zone_ar .Vr_zone_ar_cont a {
font-size: 18px; font-size: 18px;
} }
} }
@media(max-width:800px) { @media(max-width:800px) {
...@@ -6647,6 +6695,8 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -6647,6 +6695,8 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
{ {
font-size: 25px; font-size: 25px;
line-height: 33px; line-height: 33px;
margin-bottom: 30px;
margin-top: 0;
} }
.Vr_zone_ar .Vr_zone_ar_cont .text p .Vr_zone_ar .Vr_zone_ar_cont .text p
{ {
...@@ -6665,6 +6715,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -6665,6 +6715,7 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
font-size: 18px; font-size: 18px;
width: 100%; width: 100%;
line-height: 26px; line-height: 26px;
margin-top: 0;
} }
.Vr_zone_ar .Vr_zone_ar_cont .text p { .Vr_zone_ar .Vr_zone_ar_cont .text p {
...@@ -6721,4 +6772,151 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%); ...@@ -6721,4 +6772,151 @@ background: linear-gradient(90deg, #410b67, #2b0c57, #160b46 40%);
.organize_slider .swiper-slide img { .organize_slider .swiper-slide img {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
} }
\ No newline at end of file .social_accounts
{
background-color: var(--bck_color);
padding: 10px 10px 40px 10px;
/* border-top: 2px solid var(--title_color); */
position: relative;
}
.social_accounts::before
{
width: 100%;
height: 2px;
position: absolute;
top: 0;
left: 0;
content: "";
background: linear-gradient(90deg,#a109ae ,#480c6c,#1f0d4e);
}
.social_accounts .icons
{
display: flex;
align-items: center;
justify-content: center;
column-gap: 30px;
width: 50%;
margin: 30px 25% 0;
}
.social_accounts .icons i
{
font-size: 25px;
color: white;
}
.social_accounts .icons a
{
cursor: pointer;
}
.social_accounts .icons img
{
width: 30px ;
height: 30px;
filter: invert(1);
}
/* .social_accounts .icons a:hover img
{
filter: invert(0);
} */
.social_accounts .buttonc_parent
{
display: flex;
align-items: center;
justify-content: center;
}
.social_accounts .buttonc_parent .button
{
color: #ffffff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
border: none;
border-radius: 22px;
background: linear-gradient(90deg, #a509b0, #680b83, #1e0d4e);
padding: 9px 35px;
display: block;
width: fit-content;
/* margin-left: 40%; */
cursor: pointer;
outline: none;
text-align: start;
margin-top: 50px;
transform: translateX(10px);
font-size: 25px;
font-family: var(--sora_extrabold);
}
@media(max-width:1030px)
{
/* .social_accounts .buttonc_parent button
{
font-size: 20px;
} */
}
@media(max-width:800px)
{
/* .social_accounts .buttonc_parent button
{
font-size: 20px;
padding: 10px 30px;
} */
}
@media(max-width:500px)
{
/* .social_accounts .buttonc_parent button
{
font-size: 15px;
padding: 10px 30px;
} */
.social_accounts .icons img
{
width: 20px;
height: 20px;
}
.social_accounts .icons
{
width: 70%;
margin: 30px 19% 0;
justify-content: start;
}
.social_accounts .buttonc_parent
{
width: 70%;
margin: 0px 16% 0;
justify-content: start;
}
}
@media(max-width:400px)
{
.social_accounts .icons
{
width: 95%;
margin: 30px 2.5% 0;
justify-content: start;
}
.social_accounts .buttonc_parent
{
width: 100%;
margin: 0px 0% 0;
justify-content: start;
}
}
.fade-black::after {
content: "";
position: absolute;
inset: 0;
background: black;
opacity: 0;
transition: opacity 0.4s;
z-index: 2;
}
/* Fade to black during transition */
.swiper-slide.swiper-slide-prev.fade-black::after,
.swiper-slide.swiper-slide-next.fade-black::after {
opacity: 1;
}
\ No newline at end of file
style2.css
View file @ c1669fd3
This diff is collapsed.
style3.css
View file @ c1669fd3
This diff is collapsed.
t.txt 0 → 100644
View file @ c1669fd3
.hero_sectionh2_en .span_base
{
font-family: var(--sora_font)
}
.hero_sectionh2_en .wordh21 .the {
color: #aa09b4;
margin-right: 15px;
font-family: var(--sora_extrabold);
}
.hero_sectionh2_en .wordh22 {
display: flex;
font-size: 35px;
/* width: 40%; */
transform: translate(56px,0px);
font-weight: 600;
margin-left: 40px;
font-family: var(--noor_font);
}
.hero_sectionh2_en .hero-sech21 {
display: flex;
transform: translate(20px, 10px);
font-size: 25px;
font-weight: 400;
/* width: 35% !important; */
font-family: var(--font_noor_light);
}
.hero_sectionh2_en .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_sectionh2_en .hero-sech23 {
display: flex;
font-size: 40px;
font-weight: 400;
/* width: 35% !important; */
font-family: var(--font_noor_light);
transform: translate(10px, -30px);
}
.hero_sectionh2_en .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_sectionh2_en .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_en 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_en .hero_desc_res_ar a
{
position: relative;
transform: translate(0,0);
}
\ No newline at end of file
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