Skip to content

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

edit imgs

parent cbe40d75
Show whitespace changes
Inline Side-by-side
Showing with 603 additions and 163 deletions
index.html
View file @ abf3a2c8
......@@ -11,6 +11,9 @@
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<title>THE BASE</title>
<link rel="stylesheet" href="style.css">
......@@ -27,7 +30,7 @@
</p>
</div>
<i class="fa-solid fa-bars list_icon" id="open_list"></i>
<div class="right_side_h hidden">
<div class="right_side_h hidden hidden1">
<a id="ticketing_btn1">ticketing</a>
<a><i class="fa-solid fa-bars"></i></a>
......@@ -45,6 +48,11 @@
<span>KUWAIT INTERNATIONAL</span>
<span> FAIR GROUND</span>
</p>
<p class="place hidden1" id="place_ar">
<span>القاعة ٨ - </span>
<span>أرض المعارض</span>
<span> الدولية بالكويت</span>
</p>
</div>
<div class="right_side">
<a id="ticketing_btn">ticketing</a>
......@@ -65,7 +73,20 @@
<img src="./images/shape.png">
</div>
<div>
<h3 id="hero_title">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</h3>
<h3 id="hero_title">
<span>
LOREM IPSUM
</span>
<span> DOLOR SIT AMET,</span>
<span>CONSECTETUER</span>
<span>ADIPISCING ELIT,</span>
<span>
SED DIAM .
</span>
</h3>
<h3 class="hidden1" id="hero_title_ar">
مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية.
</h3>
<p id="hero_desc">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<a id="book_now">book now</a>
</div>
......@@ -75,14 +96,14 @@
<div class="swiper_parent">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game.jpg" alt=""></div>
<div class="swiper-slide"><img src="/images/game1.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game2.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game3.png" alt=""></div>
<div class="swiper-slide"><img src="/images/game3.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game4.png" alt=""></div>
<div class="swiper-slide"><img src="/images/game5.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game6.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game6.webp" alt=""></div>
</div>
<div class="swiper-pagination"> next</div>
......@@ -94,21 +115,25 @@
<h1 id="esports">E-SPORTS TOURNAMENTS</h1>
<div>
<div>
<img src ="images/avatar1.png">
<img class="abs_img" src="/images/game2.webp">
<img src ="images/valorant2 (1).webp">
</div>
<div>
<img src ="images/avatar1.png">
<img class="abs_img1" src="/images/game3.png">
<img src ="images/league2_edit.webp">
</div>
<div>
<img src ="images/avatar1.png">
<img class="abs_img2" src="/images/fifaCard_.png">
<img src ="images/Lamin.png" class="lamin_img">
</div>
</div>
<div class="button_parent">
<a id="e_sport_btn">book now</a>
</div>
</div>
<div class="activate_section ltr_size">
<div>
<div class="activate_section ltr_size" id="activate_section">
<div id="arear1">
<h1 id="casual">CASUAL ACTIVITIES</h1>
<p id="casual_text2">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="casual_text3">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
......@@ -122,6 +147,8 @@
</div>
</div>
<div class="VR_section rtl_size">
<div >
<img src="./images/shape.png">
......@@ -133,19 +160,35 @@
<a id="vr_btn">VR ZONE</a>
</div>
</div>
<div class="CardGame_section rtl_size">
<div class="CardGame_section rtl_size" id="card_games">
<div >
<img src="./images/shape.png">
<a id="card_games_btn">CARD / BOARD GAMES</a>
</div>
<div>
<p id="card_txt1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="card_txt2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="card_txt3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="card_txt4">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<div id="card_info">
<p id="card_txt1"><span>LOREM IPSUM DOLOR SIT AMET,</span>
<span>CONSECTETUER ADIPISCING ELIT , SED</span>
<span>DIAM .</span></p>
<p id="card_txt2"><span>LOREM IPSUM DOLOR SIT AMET,</span>
<span>CONSECTETUER ADIPISCING ELIT , SED</span>
<span>DIAM .</span></p>
<p id="card_txt3"><span>LOREM IPSUM DOLOR SIT AMET ,</span>
<span>CONSECTETUER ADIPISCING ELIT ,</span>
<span> SED DIAM .</span></p>
<p id="card_txt4"><span>LOREM IPSUM DOLOR SIT AMET ,</span>
<span>CONSECTETUER ADIPISCING ELIT , </span>
<span>SED DIAM .</span></p>
</div>
<div id="card_info_ar" class="hidden1">
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
<p>هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي."</p>
</div>
</div>
<div class="VR_section mobile ltr_size">
<div>
......@@ -158,12 +201,13 @@
</div>
</div>
<div class="activate_section area ltr_size">
<div>
<p id="area_txt1">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt2">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt3">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt4">LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<div class="activate_section area ltr_size" id="area" >
<div id="arear12">
<p id="area_txt1">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt2">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt3">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
<p id="area_txt4">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT , SED DIAM .</p>
</div>
<div >
......@@ -222,7 +266,7 @@
<!-- <span id="ticketing2">G</span> -->
</h1>
</div>
<div id="ticketing_title_ar" class=" title hidden">
<div id="ticketing_title_ar" class=" title hidden1">
<h1>احجز تذكرتك</h1>
</div>
<div class="days">
......@@ -253,6 +297,7 @@
<div>
<p id="pass2_p1">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass2_p2">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<p id="pass2_p3">LOREM IPSUM DOLOR SIT AMET , CONSECTETUER ADIPISCING ELIT, SED DIAM .</p>
<a id="book_pass2_btn">BOOK YOUR PASS</a>
</div>
</div>
......@@ -276,7 +321,7 @@
<div class="days last">
<div>
<h1 id="vip_title">VIP TICKET</h1>
<span>$$.$$</span>
<h1>$$.$$</h1>
</div>
<div class="text">
<div>
......@@ -294,15 +339,17 @@
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="oragnize">
<div class="oragnize" id="organize">
<h1 id="organized">ORGANIZED BY</h1>
<div>
<img src="./images/organizer.png">
<img src="./images/organizer.png">
<img src="./images/organizer.png">
<img src="./images/organizer.png">
<img src="./images/logo4.png">
<img src="./images/logo1.jpg">
<img src="./images/logo2.jpg">
<img src="./images/logo3.jpg">
</div>
</div>
<div class="letters">
<h1 id="newsletter">NEWS LETTER</h1>
<div>
......@@ -323,7 +370,7 @@
</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="index.js"></script>
......
index.js
View file @ abf3a2c8
const swiper = new Swiper(".mySwiper", {
slidesPerView: 7,
spaceBetween: 20,
spaceBetween: 30,
loop: false,
pagination: {
el: ".swiper-pagination",
......@@ -47,6 +47,16 @@
let ticketing1=document.getElementById("ticketing1")
let newsletter_text=document.getElementById("newsletter_text")
let e_sport=document.getElementById("e_sport")
let activate_section=document.getElementById("activate_section")
let card_games=document.getElementById("card_games")
let area=document.getElementById("area")
let organize=document.getElementById("organize")
let hero_title=document.getElementById("hero_title")
let hero_title_ar=document.getElementById("hero_title_ar")
let place_ar=document.getElementById("place_ar")
let place=document.getElementById("place")
let card_info=document.getElementById("card_info")
let card_info_ar=document.getElementById("card_info_ar")
const translations = {
en: {
logo_the: "The",
......@@ -56,10 +66,8 @@
date_from: "Feb 5TH",
to: "to",
date_to: "Feb 7TH 2025",
place: "HALL 8 - KUWAIT INTERNATIONAL FAIR GROUND",
ticketing_btn: "Ticketing",
ticketing_btn1:"Ticketing",
hero_title: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.",
hero_desc: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.",
book_now: "Book Now",
playable_games: "PLAYABLE GAMES",
......@@ -79,10 +87,7 @@
vr2_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr2_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
vr2_btn:"VR zone",
card_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
card_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
card_txt3:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
card_txt4:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
mob_txt1:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
mob_txt2:"LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
mob_btn:"MOBILE AREA",
......@@ -107,6 +112,7 @@
pass2_title: "2 DAY PASS - REGULAR",
pass2_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass2_p2: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
pass2_p3: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
book_pass2_btn: "BOOK YOUR PASS",
pass1_title: "1 DAY PASS - REGULAR",
pass1_p1: "LOREM IPSUM DOLOR SIT AMET,CONSECTETUER ADIPISCING ELIT , SED DIAM .",
......@@ -130,11 +136,10 @@
date_from: "٥ فبراير",
to: "إلى",
date_to: "٧ فبراير ٢٠٢٥",
place: "القاعة ٨ - أرض المعارض الدولية بالكويت",
ticketing_btn: "حجز التذاكر",
ticketing_btn1: "حجز التذاكر",
hero_title: "مرحبا بكم في أكبر مهرجان للألعاب الإلكترونية.",
hero_desc: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
hero_desc: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_now: "احجز الآن",
playable_games: "الألعاب المتاحة",
esports: "بطولات الرياضات الإلكترونية",
......@@ -142,29 +147,26 @@
ticketing_title: "التذاكر",
organized: "من تنظيم",
newsletter: "النشرة الإخبارية",
casual_text1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text5:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
casual_text1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
casual_text5:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr_btn:"منطقه ال VR",
vr2_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr2_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vr2_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr2_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vr2_btn:"منطقه ال VR",
card_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
card_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
card_txt3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
card_txt4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
mob_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
mob_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
mob_btn:"منطقه الموبايل",
area_txt1:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
area_txt2:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
area_txt3:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
area_txt4:"انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
area_txt1:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt2:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt3:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
area_txt4:"هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
ticketing1:"حجز التذاكر",
ticketing2:"حجز التذاكر",
newsletter_text: "احصل على أحدث الأخبار من THE BASE - GAMING FESTIVAL",
......@@ -175,24 +177,25 @@
cosplay_area_btn: "منطقة الكوسبلاي",
pass3_title: "تذكرة ٣ أيام - عادية",
pass3_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass3_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass3_p3: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass3_p4: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass3_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass3_p4: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass3_btn: "احجز تذكرتك",
pass2_title: "تذكرة ٢ أيام - عادية",
pass2_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass2_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass2_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass2_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass2_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass2_btn: "احجز تذكرتك",
pass1_title: "تذكرة ١ يوم - عادية",
pass1_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass1_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
pass1_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
pass1_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_pass1_btn: "احجز تذكرتك",
vip_title: "تذكرة VIP",
vip_p1: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vip_p2: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vip_p3: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vip_p4: "انضم إلينا لتجربة فريدة من الترفيه والتحديات.",
vip_p1: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p2: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p3: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
vip_p4: "هذا نص عربي تجريبي يستخدم كعنصر بديل مؤقت، الغرض منه عرض التنسيق والشكل العام للنصوص داخل التصميم دون الاعتماد على محتوى حقيقي.",
book_vip_btn: "احجز تذكرتك",
e_sport_btn: "احجز الان",
}
......@@ -211,10 +214,24 @@ function changeLanguage(lang) {
header_bar.classList.add("header_ar")
ticketing_sec.classList.add("ticketing_sec_ar")
hero.classList.add("hero_ar")
ticketing1.classList.add("hidden")
ticketing_ar.classList.remove("hidden")
ticketing1.classList.add("hidden1")
ticketing_ar.classList.remove("hidden1")
newsletter_text.classList.add("newsletter_text_ar")
e_sport.classList.add("e_sport_ar")
organize.classList.add("e_sport_ar")
activate_section.classList.add("padd")
card_games.classList.add("col_gap")
area.classList.add("padd")
document.getElementById("arear1").classList.add("no_margin")
document.getElementById("arear12").classList.add("no_margin")
hero_title_ar.classList.remove("hidden1")
hero_title.classList.add("hidden1")
card_info_ar.classList.remove("hidden1")
card_info.classList.add("hidden1")
place_ar.classList.remove("hidden1")
place.classList.add("hidden1")
} else {
document.body.style.direction = "ltr";
......@@ -222,10 +239,23 @@ function changeLanguage(lang) {
header_bar.classList.remove("header_ar")
ticketing_sec.classList.remove("ticketing_sec_ar")
hero.classList.remove("hero_ar")
ticketing1.classList.remove("hidden")
ticketing_ar.classList.add("hidden")
ticketing1.classList.remove("hidden1")
ticketing_ar.classList.add("hidden1")
newsletter_text.classList.remove("newsletter_text_ar")
e_sport.classList.remove("e_sport_ar")
organize.classList.remove("e_sport_ar")
activate_section.classList.remove("padd")
card_games.classList.remove("col_gap")
area.classList.remove("padd")
hero_title.classList.remove("hidden1")
place_ar.classList.add("hidden1")
place.classList.remove("hidden1")
card_info_ar.classList.add("hidden1")
card_info.classList.remove("hidden1")
hero_title_ar.classList.add("hidden1")
document.getElementById("arear1").classList.remove("no_margin")
document.getElementById("arear12").classList.remove("no_margin")
}
}
......
style.css
View file @ abf3a2c8
:root
{
--bck_color:#190a38;
--bck_color:#0d0d41;
--main-font:'Montserrat', 'Poppins', 'Arial', sans-serif;
--title_font:"Archivo Black", "sans-serif";
--purple_col:#801880;
--background_buttons: linear-gradient(to right,var(--bck_color) 20%, #6a1a97,var(--purple_col));
--title_color:#be2fbe;
}
......@@ -25,7 +27,7 @@ header
header .logo_cont
{
display: flex;
align-items: center;
align-items: start;
column-gap: 5px;
}
header .left_side
......@@ -175,21 +177,31 @@ header .right_side a:nth-child(4)
}
.ltr_size
{
grid-template-columns: 39% 60% !important;
grid-template-columns: 48% 50% !important;
box-sizing: border-box;
column-gap: 10px;
padding: 50px 30px 40px;
justify-content: center;
align-items: center;
}
.ltr_size div:nth-child(1)
{
margin-top: 100px;
}
.rtl_size
{
grid-template-columns: 60% 39% !important;
grid-template-columns: 53% 45% !important;
box-sizing: border-box;
column-gap: 10px;
align-items: center;
padding: 50px 30px 40px;
padding: 50px 0px 0px;
}
#vr2_btn
{
padding: 10px 40px;
}
.hero_section div:nth-child(2)
......@@ -198,6 +210,7 @@ header .right_side a:nth-child(4)
font-family: var(--main-font);
text-transform: uppercase;
margin-top: 30px;
position: relative;
}
.hero_section div:nth-child(2) h3
{
......@@ -206,14 +219,61 @@ header .right_side a:nth-child(4)
font-size: 35px;
width: 76%;
margin-bottom: 10px;
/* position: relative; */
}
.hero_section div:nth-child(2) p,
.activate_section p
.hero_section div:nth-child(2) h3 span
{
position: absolute;
font-family: "Archivo Black", sans-serif;
font-size: 50px;
}
.hero_section div:nth-child(2) h3 span:nth-child(1)
{
left: -127px;
top: -207px;
}
.hero_section div:nth-child(2) h3 span:nth-child(2)
{
left: -100px;
top: -150px;
}
.hero_section div:nth-child(2) h3 span:nth-child(3)
{
left: -80px;
top: -100px;
}
.hero_section div:nth-child(2) h3 span:nth-child(4)
{
left: -55px;
top: -50px;
}
.hero_section div:nth-child(2) h3 span:nth-child(5)
{
left: -40px;
top: 0px;
}
.hero_section div:nth-child(2) p
{
position: absolute;
/* top: ; */
left:-25px;
top: 80px;
font-size: 16px;
width: 75% !important;
font-weight: bold;
}
.hero_section div:nth-child(2) p
{
margin: 0;
width: 73%;
width: 78% !important;
line-height: 25px;
}
.activate_section p:nth-child(4)
{
margin-top: 20px;
}
/* # */
.hero_section div:nth-child(1) img,
.activate_section img,
.CardGame_section img
......@@ -222,6 +282,9 @@ header .right_side a:nth-child(4)
}
.hero_section a
{
position: absolute;
top: 160px;
left: -10px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
......@@ -229,7 +292,7 @@ header .right_side a:nth-child(4)
border: none;
border-radius: 15px;
background: linear-gradient(90deg, #6a1a97,var(--purple_col),var(--bck_color));
padding: 10px 20px;
padding: 5px 20px;
display: block;
width: 100%;
cursor: pointer;
......@@ -237,7 +300,7 @@ header .right_side a:nth-child(4)
text-align: start;
margin-top: 20px;
box-sizing: border-box;
font-size: 25px;
font-size: 20px;
font-family: var(--main-font);
}
......@@ -247,7 +310,7 @@ header .right_side a:nth-child(4)
{
background-color: var(--bck_color);
padding: 25px 0 30px 0;
height: 400px;
height: 300px;
}
.swiper_parent
......@@ -260,7 +323,7 @@ header .right_side a:nth-child(4)
var(--bck_color) 7%,
var(--bck_color) 9%,
var(--bck_color) 94%,
#00ff00 99%,
#00ff00 98%,
#00ff00 100%
);
......@@ -268,17 +331,19 @@ header .right_side a:nth-child(4)
.play_games h1
{
text-align: center;
font-family: var(--main-font);
font-family: var(--title_font);
font-weight: bold;
color: var(--purple_col);
color: var(--title_color);
}
.swiper {
width: 85%;
width: 93%;
max-width: 100%;
height: 200px;
margin: 50px auto;
margin: 50px 7.5%;
margin: 0px 3.5%;
box-sizing: border-box;
padding: 40px 0 50px 0;
/* z-index: -3; */
}
......@@ -290,21 +355,20 @@ header .right_side a:nth-child(4)
text-align: center;
}
.swiper {
padding: 40px 0 40px 0;
}
.swiper-pagination {
bottom: 10px;
}
.swiper-slide img {
width: 100%;
width: 80%;
margin-left: 10%;
height: 100%;
object-fit: cover;
object-fit: contain;
border-radius: 10px;
z-index: -3;
opacity: .8;
}
/* Pagination circles */
......@@ -334,16 +398,18 @@ header .right_side a:nth-child(4)
font-weight: bold;
color: white;
text-align: center;
z-index: -2;
/* z-index: -2; */
font-size: 50px;
}
.e_sport > div:nth-child(2)
{
display: grid;
grid-template-columns: repeat(3,30%);
grid-template-columns: repeat(3,31%);
align-items: center;
justify-content: space-between;
width: 90%;
margin: 50px 5% 0;
justify-content: center;
column-gap: 20px;
width: 95%;
margin: 50px 2.5% 0;
}
.e_sport .button_parent
......@@ -354,21 +420,59 @@ header .right_side a:nth-child(4)
}
.e_sport > div div
{
border-radius: 15px;
border-radius: 50px;
background: linear-gradient(to right,var(--purple_col),#6a1a97);
height: 300px;
height: 450px;
/* overflow: hidden; */
position: relative;
}
.e_sport > div div img
{
width: 70%;
margin:0 15%;
height: 100%;
transform: translateY(-40px);
width: 100%;
/* margin: 10% 15% 0; */
height: 115%;
transform: translate(0px,0px);
transform: translateY(-70px);
object-fit: cover;
object-position: top center;
z-index: 3;
/* object-position: top top; */
}
.lamin_img
{
height: 145% !important;
transform: translateY(-30%) !important;
}
.no_margin
{
margin-top: 0 !important;
}
/* .e_sport > div div:nth-child(2) img
{
object-position: -100px 0;
} */
.e_sport > div div .abs_img,
.e_sport > div div .abs_img1,
.e_sport > div div .abs_img2
{
position: absolute;
width: 35px ;
height: 35px ;
left: 30px;
top: 110px;
}
.e_sport > div div .abs_img1
{
bottom: -50px;
top: unset;
}
.e_sport > div div .abs_img2
{
width: 60px;
object-fit: contain;
left: 20px;
}
.e_sport a
{
color: #ffffff;
......@@ -385,7 +489,7 @@ header .right_side a:nth-child(4)
cursor: pointer;
outline: none;
text-align: start;
margin-top: 20px;
margin-top: 40px;
transform: translateX(10px);
font-size: 25px;
font-family: var(--main-font);
......@@ -394,7 +498,7 @@ header .right_side a:nth-child(4)
/* ===============Activate================= */
.activate_section
{
padding:50px 30px 30px;
padding:50px 0px 30px 0;
}
.activate_section div:nth-child(2)
{
......@@ -420,22 +524,27 @@ header .right_side a:nth-child(4)
}
.activate_section h1
{
color: var(--purple_col);
width: 80%;
margin-left: 10%;
font-weight: 700;
font-family: var(--main-font);
color: var(--title_color);
width: 100%;
margin-left: 4%;
font-weight: 800;
font-family: var(--title_font);
font-size: 40px;
margin-top: 0px !important;
}
.activate_section div:nth-child(1)
{
margin-top: 0 !important;
}
.activate_section p
{
color: white;
font-family: var(--main-font);
margin-top: 10px;
margin-left: 10%;
font-weight: 700;
font-size: 18px;
line-height: 32px;
width: 80%;
margin: 0px 0 0 10%;
font-weight: 400;
font-size: 20px;
line-height: 25px;
width: 78% !important;
}
/* =================================*/
/* =============VR==================*/
......@@ -444,10 +553,10 @@ header .right_side a:nth-child(4)
background-color: white;
align-items: center;
}
.VR_section img
/* .VR_section img
{
width: 100%;
}
} */
.VR_section p
{
color: var(--bck_color);
......@@ -455,24 +564,25 @@ header .right_side a:nth-child(4)
font-weight: 700;
line-height: 32px;
text-transform: uppercase;
width: 80%;
margin-left: 10%;
width: 100%;
margin-left: 0%;
font-family: var(--main-font);
}
.VR_section a
{
background:var(--background_buttons);
color: white;
font-family: var(--main-font);
padding: 10px 45px;
font-family: var(--title_font);
padding: 8px 30px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 25px;
margin-top: 40px;
margin-left: 10%;
font-size: 20px;
margin-top: 100px;
/* margin-left: 10%; */
display: inline-block;
}
/* =================================*/
/* =============CardGame==================*/
......@@ -480,6 +590,12 @@ header .right_side a:nth-child(4)
{
position: relative;
}
.CardGame_section
{
grid-template-columns: 50% 39% !important;
padding: 0 40px;
/* justify-content: center; */
}
.CardGame_section div:nth-child(1) a
{
position: absolute;
......@@ -501,9 +617,99 @@ header .right_side a:nth-child(4)
color: white;
font-family: var(--main-font);
text-transform: uppercase;
width: 60%;
width: 100%;
font-weight: 700;
line-height: 25px;
position: relative;
}
.CardGame_section p span
{
position: absolute;
font-size: 25px;
}
.CardGame_section p:nth-child(1) span:nth-child(1)
{
top: -200px;
left: -120px;
}
.CardGame_section p:nth-child(1) span:nth-child(2)
{
top: -170px;
left: -100px;
}
.CardGame_section p:nth-child(1) span:nth-child(3)
{
top: -140px;
left: -80px;
}
/* ============================== */
.CardGame_section p:nth-child(2) span:nth-child(1)
{
top: -110px;
left: -65px;
}
.CardGame_section p:nth-child(2) span:nth-child(2)
{
top: -80px;
left: -50px;
}
.CardGame_section p:nth-child(2) span:nth-child(3)
{
top: -50px;
left: -35px;
}
/* ============================== */
.CardGame_section p:nth-child(3) span:nth-child(1)
{
top: 0px;
left: -20px;
}
.CardGame_section p:nth-child(3) span:nth-child(2)
{
top: 28px;
left: -10px;
}
.CardGame_section p:nth-child(3) span:nth-child(3)
{
top: 56px;
left: 0px;
}
/* ============================== */
.CardGame_section p:nth-child(4) span:nth-child(1)
{
top: 85px;
left: 10px;
}
.CardGame_section p:nth-child(4) span:nth-child(2)
{
top: 115px;
left: 20px;
}
.CardGame_section p:nth-child(4) span:nth-child(3)
{
top: 145px;
left: 30px;
}
.mobile p
{
margin-left: 5% !important;
width: 80%;
}
.mobile a
{
margin-left: 5%;
}
.area
{
grid-template-columns: 40% 57% !important;
}
.area p:nth-child(3)
{
margin-top: 20px;
}
.area p:nth-child(4)
{
margin-top: 0px;
}
/* ==================================== */
......@@ -620,11 +826,12 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.ticketing_section .days > div:nth-child(2)
{
margin-left: 40px;
align-items: start;
}
.ticketing_section .days > div:nth-child(2) div
{
width: 60%;
text-align: center;
/* text-align: center; */
}
.ticketing_section .days > div:nth-child(2) p
{
......@@ -634,6 +841,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
line-height: 25px;
margin-left: 10%;
text-align: start;
font-size: 19px;
}
.ticketing_section a
{
......@@ -652,7 +860,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
cursor: pointer;
outline: none;
text-align: start;
margin-top: 20px;
margin-top: 50px;
transform: translateX(23px);
}
.days_grid
......@@ -665,6 +873,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
background-color: #1b0b3c;
}
.days_grid .days:nth-child(2) a
{
/* margin-top: 140px !important; */
}
.ticketing_sec_ar a
{
margin-top: 60px !important;
}
.days_grid .days > div:nth-child(2) div
{
width: 100%;
......@@ -700,16 +916,25 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
padding-bottom: 60px;
}
.last div:nth-child(1) h1
{
width: 40%;
}
.ticketing_section .last > div:nth-child(1)
{
width: 50% !important;
margin: 0 25% !important;
width: 70% !important;
margin: 0 15% !important;
}
.ticketing_section .last > div:nth-child(2) p
{
margin-left: 25% !important;
margin-left: 10% !important;
text-align: start;
}
.last div:nth-child(1)
{
justify-content: center !important;
column-gap: 40%;
}
.map
{
width: 90%;
......@@ -751,25 +976,28 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{
width: 100%;
}
/* ==================================== */
/* ===========letters================ */
.letters
{
background-color: var(--bck_color);
padding-top: 20px;
padding: 20px 0;
}
.letters h1
{
text-align: center;
font-family: var(--main-font);
font-family: var(--title_font);
font-weight: bold;
color: var(--purple_col);
color: var(--title_color);
margin-bottom: 50px;
}
.letters > div
{
display: grid;
grid-template-columns: 40% 50%;
align-items: center;
align-items: start;
justify-content: center;
column-gap: 30px;
}
......@@ -779,10 +1007,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
align-items: center;
justify-content: end;
}
.letters>div div:nth-child(2)
{
margin-top: 60px;
}
.letters div img
{
width: 250px;
height: 250px;
width: 60%;
height: 60%;
object-fit: contain;
}
.letters div p
......@@ -797,9 +1029,11 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
}
.letters div p:nth-child(1)
{
font-size: 20px;
font-size: 22px;
width: 55%;
line-height: 30px;
font-family: var(--title_font);
margin-bottom: 50px;
}
.letters div p span:nth-child(2)
{
......@@ -846,6 +1080,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
transform: translateX(100%);
width: 0;
}
.hidden1
{
display: none !important;
}
/* ========================= */
/* ========Arabic============*/
......@@ -866,6 +1104,14 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{
background: linear-gradient(90deg,var(--bck_color),#6a1a97,var(--purple_col));
}
.hero_ar div:nth-child(2) p,
.hero_ar div:nth-child(2) h3,
.hero_ar a
{
position: relative;
top: 0;
}
.ticketing_sec_ar .days > div:nth-child(2)
{
margin: 0 40px 0 0;
......@@ -886,7 +1132,18 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{
width: 35% !important;
}
.e_sport_ar
{
direction: ltr !important;
}
.padd
{
padding: 50px 30px 30px;
}
.col_gap
{
column-gap: 40px;
}
/* ========================== */
/* =====Responsive========== */
@media(max-width:1200px)
......@@ -906,7 +1163,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.CardGame_section p
{
width: 100%;
margin-left: 0;
width: 90%;
margin-left: 7%;
font-size: 14px;
font-weight: normal;
}
.header_ar .left_side
{
......@@ -914,7 +1174,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
}
.VR_section a
{
margin-left: 0;
margin-left: 20px;
}
}
......@@ -971,11 +1231,25 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.ltr_size > div
{
width: 80%;
}
.activate_section div:nth-child(2) a
{
right: 90px !important;
}
.hero_section div:nth-child(1) img, .activate_section img, .CardGame_section img
{
width: 80%;
margin-left: 10%;
}
.CardGame_section div:nth-child(1) a
{
left: 90px;
}
.ticketing_section .days > div:nth-child(2)
{
flex-direction: column;
......@@ -990,6 +1264,9 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
width: 95%;
margin-left: 0 !important;
text-align: center;
font-size: 14px;
font-weight: normal;
margin-top: 30px;
}
.days_grid
{
......@@ -1044,6 +1321,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
}
}
@media(max-width:700px)
{
......@@ -1059,16 +1338,16 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
{
font-size: 25px;
width: 100%;
margin-left: 0;
/* margin-left: 0; */
}
.hero_section, .VR_section, .CardGame_section, .activate_section, .mobile
{
padding: 10px ;
padding: 20px 10px 10px 20px ;
}
.hero_section div:nth-child(2) p, .activate_section p
{
width: 95%;
margin-left: 0;
/* margin-left: 0; */
}
.ltr_size > div
{
......@@ -1090,7 +1369,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.activate_section p,
.activate_section h1, .VR_section p
{
font-size: 16px;
font-size: 14px;
font-weight: normal;
}
.ticketing_section .days > div:nth-child(1)
{
......@@ -1114,6 +1394,8 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.days_grid
{
grid-template-columns: 100% !important;
margin-top: 40px;
/* column-gap: 30px; */
}
.days_grid > div:nth-child(2)
{
......@@ -1125,6 +1407,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.ticketing_section .days
{
border-radius: 20px;
margin-bottom: 30px !important;
}
.oragnize div
{
......@@ -1132,6 +1415,10 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
row-gap: 30px;
}
.last
{
margin-top: 20px !important;
}
.days_grid a
{
......@@ -1149,6 +1436,9 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
.letters div p:nth-child(1)
{
width: 100%;
font-size: 14px;
font-weight: normal;
margin-bottom: 20px;
}
header .left_side > p
......@@ -1175,7 +1465,7 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
}
.right_side_h
{
width: 100% !important;
width: 40% !important;
}
.list_icon
{
......@@ -1187,14 +1477,16 @@ background: linear-gradient(to bottom ,var(--purple_col) 20%,var(--bck_color));
flex-direction: column;
row-gap: 5px;
align-items: start;
margin-top: 10px;
}
.ticketing_sec_ar a
{
margin: 20px 25% 0 0;
margin: 120px 25% 0 0;
transform: translateX(0) !important;
}
}
@media(max-width:500px)
{
.play_games h1
......
txt.txt 0 → 100644
View file @ abf3a2c8
.e_sport
{
background-color: var(--bck_color);
padding: 25px 0 25px 0;
}
.e_sport h1
{
/* text-align: start; */
font-family: var(--main-font);
font-weight: bold;
color: white;
text-align: center;
z-index: -2;
}
.e_sport > div:nth-child(2)
{
display: grid;
grid-template-columns: repeat(3,31%);
align-items: center;
justify-content: center;
column-gap: 20px;
width: 95%;
margin: 50px 2.5% 0;
}
.e_sport .button_parent
{
display: flex;
align-items: center;
justify-content: center;
}
.e_sport > div div
{
border-radius: 50px;
background: linear-gradient(to right,var(--purple_col),#6a1a97);
height: 450px;
/* overflow: hidden; */
}
.e_sport > div div img
{
width: 100%;
/* margin: 10% 15% 0; */
height: 100%;
transform: translateY(-40px);
object-fit: cover;
object-position: top top;
}
.e_sport a
{
color: #ffffff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
border: none;
border-radius: 18px;
background: linear-gradient(90deg,var(--purple_col), #6a1a97,var(--bck_color));
padding: 7px 45px;
display: block;
width: fit-content;
/* margin-left: 40%; */
cursor: pointer;
outline: none;
text-align: start;
margin-top: 40px;
transform: translateX(10px);
font-size: 25px;
font-family: var(--main-font);
}
\ 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