Skip to content

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

casual section

parent 9e201f36
Hide whitespace changes
Inline Side-by-side
Showing with 351 additions and 103 deletions
thebase/thebase/the/index.html
View file @ 9cbb9205
......@@ -207,9 +207,19 @@
<div class="text">
<h1>CASUAL ACTIVITIES</h1>
<h1> هنا يبدأ <span>المرح الحقيقى </span></h1>
<p>استمتع بأجواء اللعب الحر على أكثر من 20 جهاز كمبيوتر جيمينغ و 10
أجهزة بلايستيشن 5 متاحة للجميع شارك في بطولات قصيرة تفجّر الحماس، اربح جوائز مميزة، أو تحدّ أصدقاءك في مباريات
<div class="casual_text">
<p>استمتع بأجواء اللعب الحر على أكثر </p>
<p>من 20 جهاز كمبيوتر جيمينغ و 10</p>
<p>أجهزة بلايستيشن 5 متاحة للجميع </p>
<p>شارك في بطولات قصيرة تفجّر الحماس ،</p>
<p>اربح جوائز مميزة، أو تحدّ أصدقاءك في</p>
<p> مباريات ودية - كل لحظة هنا متعة خالصة</p>
<p>منطقة تجمع بين الإثارة والراحة، حيث اللعب </p>
<p> هو جوهر التجربة !</p>
</div>
<p class="casual_text_res">استمتع بأجواء اللعب الحر على أكثر من 20 جهاز كمبيوتر جيمينغ و 10
أجهزة بلايستيشن 5 متاحة للجميع شارك في بطولات قصيرة تفجّر الحماس ، اربح جوائز مميزة، أو تحدّ أصدقاءك في مباريات
ودية - كل لحظة هنا متعة خالصة منطقة تجمع بين الإثارة والراحة، حيث اللعب
هو جوهر التجربة !</p>
</div>
......
thebase/thebase/the/style.css
View file @ 9cbb9205
......@@ -2087,7 +2087,7 @@ header .right_side a:nth-child(4) {
}
.card_game .card_game_cont .text h1
{
font-size: 40px;
font-size: 39px;
}
.card_game .card_game_cont .text p
{
......@@ -2627,6 +2627,7 @@ header .right_side a:nth-child(4) {
.mobile .mobile_cont a
{
font-size: 18px;
margin-top: 50px;
}
.mobile .mobile_cont .text h1 {
font-size: 35px;
......@@ -3098,11 +3099,15 @@ header .right_side a:nth-child(4) {
left: 20px;
text-transform: uppercase;
color: var(--text_color);
}
.casual_av .casual_av_cont .text .casual_text_res
{
display: none;
}
@media(max-width:2200px) {
.casual_av .casual_av_cont
{
grid-template-columns: 55% 45%;
grid-template-columns: 59% 41%;
}
.casual_av .casual_av_cont .img_parent {
......@@ -3117,7 +3122,7 @@ header .right_side a:nth-child(4) {
.casual_av .casual_av_cont .img_parent::after {
height: 550px;
height: 100%;
width: 105%;
}
......@@ -3135,22 +3140,97 @@ header .right_side a:nth-child(4) {
font-size: 60px ;
}
.casual_av .casual_av_cont .text p {
.casual_av .casual_av_cont .text .casual_text
{
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
padding-right: 130px;
}
.casual_av .casual_av_cont .text .casual_text p {
padding-right: 0px;
transform: translateX(-150px);
/* transform: translateX(-110px); */
font-size: 36px;
width: 80%;
line-height: 42px;
/* width: 80%; */
line-height: 52px;
/* direction: ltr; */
margin: 0;
transform: translateX(0px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(2)
{
transform: translateX(-36px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(3)
{
transform: translateX(-36px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(4)
{
transform: translateX(6px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(5)
{
transform: translateX(-36px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(6)
{
transform: translateX(6px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(7)
{
transform: translateX(6px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(8)
{
direction: ltr;
/* background-color: #00ff00; */
width: 100%;
}
.casual_av .casual_av_cont .text p
.casual_av .casual_av_cont .img_parent,
.casual_av .casual_av_cont .main_img{
height: 550px;
height: 650px;
}
}
@media(max-width:2000px) {
.casual_av .casual_av_cont .text h1 {
/* padding-right: 10px; */
/* text-align: start; */
padding-right: 150px;
transform: translateX(0);
font-size: 60px ;
/* color: blueviolet; */
}
.casual_av .casual_av_cont .text .casual_text
{
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
padding-right: 130px;
}
.casual_av .casual_av_cont .text .casual_text p {
padding-right: 0px;
/* transform: translateX(-110px); */
font-size: 32px;
/* width: 80%; */
line-height: 52px;
/* direction: ltr; */
width: 100%;
margin: 0;
transform: translateX(0px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(8)
{
transform: translateX(30px);
}
.casual_av .casual_av_cont .img_parent,
.casual_av .casual_av_cont .main_img{
height: 550px;
......@@ -3182,28 +3262,73 @@ header .right_side a:nth-child(4) {
text-align: center;
}
}
@media(max-width:1850px)
{
.casual_av .casual_av_cont .text h1 {
/* padding-right: 10px; */
/* text-align: start; */
padding-right: 100px;
padding-right: 200px;
transform: translateX(0);
font-size: 57px ;
font-size: 45px ;
}
.casual_av .casual_av_cont .text p {
.casual_av .casual_av_cont .text .casual_text
{
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
padding-right: 170px;
}
.casual_av .casual_av_cont .text .casual_text p {
padding-right: 0px;
transform: translateX(-130px);
font-size: 30px;
width: 80%;
/* transform: translateX(-110px); */
font-size: 28px;
/* width: 80%; */
line-height: 42px;
/* direction: ltr; */
margin: 0;
width: 100%;
transform: translateX(0px);
}
}
@media(max-width:1850px)
{
.casual_av .casual_av_cont .text .casual_text p:nth-child(2)
{
transform: translateX(-36px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(3)
{
transform: translateX(-36px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(4)
{
transform: translateX(6px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(5)
{
transform: translateX(-36px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(6)
{
transform: translateX(6px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(7)
{
transform: translateX(6px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(8)
{
transform: translateX(46px);
}
.casual_av .casual_av_cont .text h1:nth-child(1)
{
font-size: 62px;
......@@ -3217,7 +3342,34 @@ header .right_side a:nth-child(4) {
bottom: 40px;
}
}
@media(max-width:1800px) {
.casual_av .casual_av_cont .text h1 {
padding-right: 160px;
/* color: black; */
}
.casual_av .casual_av_cont .text .casual_text
{
padding-right: 150px;
}
.casual_av .casual_av_cont .text .casual_text p {
padding-right: 0px;
/* transform: translateX(-110px); */
font-size: 26px;
line-height: 36px;
width: 100%;
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(8)
{
transform: translateX(-10px);
/* background-color: red; */
}
.casual_av .casual_av_cont
{
grid-template-columns: 55% 45%;
......@@ -3247,21 +3399,51 @@ header .right_side a:nth-child(4) {
}
.casual_av .casual_av_cont .text h1 {
padding-right: 10px;
text-align: center;
}
.casual_av .casual_av_cont .img_parent,
.casual_av .casual_av_cont .main_img{
height: 500px;
height: 500px;
}
}
/* Zoom OUT 75% Google */
@media(max-width:1750px)
{
.casual_av .casual_av_cont .text .casual_text p:nth-child(8)
{
transform: translateX(50px);
/* color: gray; */
}
}
@media(max-width:1730px)
{
.casual_av .casual_av_cont .text .casual_text p:nth-child(8)
{
transform: translateX(10px);
/* color: b/lack; */
}
}
@media(max-width:1500px) {
.casual_av .casual_av_cont .text .casual_text
{
padding-right: 130px;
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(8)
{
transform: translateX(10px);
}
.casual_av .casual_av_cont .text .casual_text p {
font-size: 23px;
line-height: 34px;
}
.casual_av .casual_av_cont
{
/* background-color: red; */
grid-template-columns: 55% 45%;
}
.casual_av .casual_av_cont .text h1:nth-child(1)
......@@ -3314,14 +3496,16 @@ height: 500px;
@media(max-width:1300px) {
.casual_av .casual_av_cont a
{
bottom: 30px;
}
.casual_av .casual_av_cont
{
/* background-color: red; */
grid-template-columns: 55% 45%;
}
.casual_av .casual_av_cont a
{
bottom: 30px;
}
.casual_av .casual_av_cont .img_parent {
width: 100%;
}
......@@ -3331,9 +3515,7 @@ height: 500px;
height: 100%;
}
.casual_av {
/* background-color: rebeccapurple; */
}
.casual_av .casual_av_cont .img_parent::after {
......@@ -3346,24 +3528,54 @@ height: 500px;
font-size: 45px;
padding-right: 10px;
text-align: center;
/* color: black; */
}
.casual_av .casual_av_cont .text h1 {
/* padding-right: 10px; */
/* text-align: start; */
padding-right: 10px;
padding-right: 80px;
transform: translateX(0);
font-size: 40px;
font-size: 42px;
/* color: red; */
}
.casual_av .casual_av_cont .text h1 span
{
font-size: 42px;
}
.casual_av .casual_av_cont .text p {
.casual_av .casual_av_cont .text .casual_text
{
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
padding-right: 60px;
}
.casual_av .casual_av_cont .text .casual_text p {
padding-right: 0px;
transform: translateX(-60px);
font-size: 20px;
width: 90%;
/* transform: translateX(-110px); */
font-size: 23px;
/* width: 80%; */
line-height: 32px;
/* direction: ltr; */
margin: 0;
width: 100%;
transform: translateX(0px);
}
.casual_av .casual_av_cont .text .casual_text p:nth-child(8)
{
direction: ltr;
/* background-color: #00ff00; */
width: 100%;
transform: translateX(27px);
}
.casual_av .casual_av_cont .main_img,
.casual_av .casual_av_cont .img_parent
{
......@@ -3373,6 +3585,14 @@ height: 500px;
@media(max-width:1030px) {
.casual_av .casual_av_cont .text .casual_text
{
padding-right:27px;
}
.casual_av .casual_av_cont .text .casual_text p
{
font-size: 20px;
}
.casual_av .casual_av_cont .img_parent,
.casual_ar .casual_av_cont .main_img {
height: 400px;
......@@ -3405,18 +3625,26 @@ height: 500px;
width: 100%;
font-size: 30px;
}
.casual_av .casual_av_cont .text p {
padding-right: 0px;
/* transform: translateX(-30px); */
font-size: 20px;
width: 100%;
transform: translateX(9px);
.casual_av .casual_av_cont .text h1 span
{
font-size: 30px;
}
}
.casual_av .casual_av_cont .text .casual_text p
{
font-family: var(--font_noor_light);
}
@media(max-width:800px) {
.casual_av .casual_av_cont .text .casual_text,
.casual_av .casual_av_cont .text .casual_text p
{
display: none;
}
.casual_av .casual_av_cont .text .casual_text_res
{
display: block;
}
.casual_av .casual_av_cont .main_img,
.casual_ar .casual_av_cont .main_img {
height: 300px;
......@@ -3465,8 +3693,9 @@ height: 500px;
}
.casual_av .casual_av_cont .text p {
font-size: 25px;
font-size: 22px;
transform: translateX(0);
padding: 0;
}
......@@ -3474,6 +3703,10 @@ height: 500px;
.casual_ar .casual_av_cont a {
bottom: 20px;
}
.casual_av .casual_av_cont .main_img, .casual_ar .casual_av_cont .main_img
{
height: 400px;
}
}
@media(max-width:500px) {
......@@ -4807,6 +5040,7 @@ height: 500px;
line-height: 80px;
font-size: 50px;
}
.Vr_zone .Vr_zone_cont a
{
......@@ -4879,6 +5113,10 @@ height: 500px;
height: 470px;
}
.Vr_zone .Vr_zone_cont .text h1
{
font-size: 40px;
}
}
@media(max-width:1300px) {
......
thebase/thebase/the/style2.css
View file @ 9cbb9205
......@@ -2086,12 +2086,13 @@
}
.arb {
font-size: 36px;
width: 80%;
width: 76%;
margin-left: 20%;
}
.vr-btn1
{
font-size: 31.5px;
margin-top: 30px;
}
.vr-image
{
......@@ -3975,7 +3976,7 @@ body {
.hero-sec21 {
left: 6%;
top: 48%;
top: 51%;
font-size: 36px;
font-family: var(--font_noor_light);
......@@ -3983,7 +3984,7 @@ body {
.hero-sec22 {
left: -19%;
top: 54%;
top: 57%;
font-size: 36px;
width: 60% !important;
font-family: var(--font_noor_light);
......@@ -3991,14 +3992,14 @@ body {
.hero-sec23 {
left: 5.5%;
top: 60%;
top: 63%;
font-size: 36px;
font-family: var(--font_noor_light);
}
.hero-sec24 {
left:-20.5%;
top: 66%;
top: 69%;
font-size: 36px;
width: 60% !important;
font-family: var(--font_noor_light);
......@@ -4007,14 +4008,14 @@ body {
.hero-sec25 {
font-size: 36px;
left: 3.5%;
top: 72%;
top: 75%;
font-family: var(--font_noor_light);
}
.hero_section2 a {
font-size: 20px;
top: 800px;
top: 850px;
height: 7%;
width: 28%;
font-family: var(--font_noor_light);
......@@ -4048,7 +4049,7 @@ body {
.hero-sec21 {
left: 6%;
top: 48%;
top: 51%;
font-size: 33px;
font-family: var(--font_noor_light);
......@@ -4056,7 +4057,7 @@ body {
.hero-sec22 {
left: -19%;
top: 54%;
top: 57%;
font-size: 33px;
width: 60% !important;
font-family: var(--font_noor_light);
......@@ -4064,14 +4065,14 @@ body {
.hero-sec23 {
left: 5.5%;
top: 60%;
top: 63%;
font-size: 33px;
font-family: var(--font_noor_light);
}
.hero-sec24 {
left:-20.5%;
top: 66%;
top: 69%;
font-size: 33px;
width: 60% !important;
font-family: var(--font_noor_light);
......@@ -4080,7 +4081,7 @@ body {
.hero-sec25 {
font-size: 33px;
left: 3.5%;
top: 72%;
top: 75%;
font-family: var(--font_noor_light);
}
......@@ -4123,7 +4124,7 @@ body {
.hero-sec21 {
top: 48%;
top: 51%;
left: 6%;
/* font-size: 40px; */
......@@ -4131,20 +4132,20 @@ body {
.hero-sec22 {
top: 54%;
top: 57%;
left: -19.5%;
}
.hero-sec23 {
top: 60%;
top: 63%;
left: 5%;
}
.hero-sec24 {
top: 66%;
top: 69%;
left: -20.5%;
/* color: gray; */
......@@ -4152,7 +4153,7 @@ body {
.hero-sec25 {
top: 72%;
top: 75%;
left: 4%;
/* color: red; */
......@@ -4160,7 +4161,7 @@ body {
.hero_section2 a {
top: 750px;
top: 740px;
width: 32%;
/* color: black; */
......@@ -4197,7 +4198,7 @@ body {
.hero-sec21 {
top: 49%;
top: 51%;
left: 7%;
font-size: 32px;
......@@ -4205,14 +4206,14 @@ body {
.hero-sec22 {
top: 55%;
top: 57%;
left: -18.5%;
font-size: 32px;
}
.hero-sec23 {
top: 61%;
top: 63%;
left: 6%;
font-size: 32px;
......@@ -4221,7 +4222,7 @@ body {
.hero-sec24 {
top: 67%;
top: 69%;
left: -19.5%;
font-size: 32px;
/* color: red; */
......@@ -4230,7 +4231,7 @@ body {
.hero-sec25 {
top: 74%;
top: 76%;
left: 05%;
font-size: 32px;
......@@ -4247,7 +4248,6 @@ body {
@media(max-width:1440px) {
/* .hero_section2
......@@ -4276,7 +4276,7 @@ body {
}
.word22 {
top: 40%;
top: 40.5%;
left: -27%;
font-size: 42px;
......@@ -4325,7 +4325,7 @@ body {
.hero_section2 a {
top: 600px;
top: 620px;
width: 32%;
font-size: 28px;
display: flex;
......@@ -4360,7 +4360,7 @@ body {
}
.word22 {
top: 49%;
top: 50%;
left: -29%;
font-size: 42px;
......@@ -4368,15 +4368,15 @@ body {
.hero-sec21 {
top: 56%;
left: 8%;
top: 59%;
left: 7%;
font-size: 28px;
}
.hero-sec22 {
top: 62%;
top: 65%;
left: -17.5%;
width: 100%;
font-size: 28px;
......@@ -4384,7 +4384,7 @@ body {
.hero-sec23 {
top: 68%;
top: 71%;
left: 7%;
width: 100%;
font-size: 28px;
......@@ -4393,7 +4393,7 @@ body {
.hero-sec24 {
top: 74%;
top: 77%;
left: -19%;
font-size: 28px;
......@@ -4401,7 +4401,7 @@ body {
.hero-sec25 {
top: 81%;
top: 84%;
font-size: 28px;
left: 5%;
......@@ -4440,21 +4440,21 @@ body {
}
.hero-sec21 {
top: 57%;
top: 58%;
font-size: 26px;
}
.hero-sec22 {
top: 63%;
top: 64%;
font-size: 26px;
}
.hero-sec23 {
top: 69%;
top: 70%;
font-size: 26px;
......@@ -4462,7 +4462,7 @@ body {
.hero-sec24 {
top: 75%;
top: 76%;
font-size: 26px;
......@@ -4472,13 +4472,13 @@ body {
font-size: 26px;
top: 81%;
top: 82%;
}
.hero_section2 a {
top: 550px;
top: 570px;
font-size: 24px;
}
......@@ -4494,27 +4494,27 @@ body {
top: 38%;
left: 0%;
width: 50%;
font-size: 30px;
font-size: 40px;
}
.word21 .the
{
font-size: 30px;
font-size: 40px;
}
.word22 {
top: 46%;
top: 47%;
left: -27%;
font-size: 25px;
font-size: 35px;
}
.hero-sec21 {
top: 52%;
top: 55%;
width: 40% !important;
left: 4%;
font-size: 21px;
......@@ -4523,7 +4523,7 @@ body {
.hero-sec22 {
top: 58%;
top:61%;
left: -16%;
font-size: 21px;
......@@ -4531,7 +4531,7 @@ body {
.hero-sec23 {
top: 64%;
top: 67%;
font-size: 21px;
left: 8%;
......@@ -4540,7 +4540,7 @@ body {
.hero-sec24 {
top: 70%;
top: 73%;
width: 40% !important;
left: 2%;
font-size: 21px;
......@@ -4550,7 +4550,7 @@ body {
.hero-sec25 {
top: 76%;
top: 79%;
left: 5%;
font-size: 21px;
......@@ -4559,7 +4559,7 @@ body {
.hero_section2 a {
top: 547px;
top: 590px;
width: 38%;
}
......
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