diff --git a/aboutUs.html b/aboutUs.html index 33704a7..1a10d8e 100644 --- a/aboutUs.html +++ b/aboutUs.html @@ -29,7 +29,7 @@ Our Mission - + + [ Our Achievement ] - - + + - + + + + + + + + + 580 Enrolled Students + + + + + + + + + 580Qualified Trainers + + + + + + + + + 250 Training Hours + + + + + + + + + 25 Participate in a Completions + + + + @@ -200,7 +240,7 @@ Our Achievement diff --git a/addAddress.html b/addAddress.html index dba7b8f..a961760 100644 --- a/addAddress.html +++ b/addAddress.html @@ -31,7 +31,7 @@ diff --git a/careers.html b/careers.html index 4734278..ba717d9 100644 --- a/careers.html +++ b/careers.html @@ -31,7 +31,7 @@ We will be glad to see you in our team! diff --git a/cart.html b/cart.html index e64e9e8..fd113e6 100644 --- a/cart.html +++ b/cart.html @@ -31,7 +31,7 @@ -25 EGP diff --git a/changePassword.html b/changePassword.html index d911174..71e2516 100644 --- a/changePassword.html +++ b/changePassword.html @@ -31,7 +31,7 @@ 638 EGP diff --git a/contactUs.html b/contactUs.html index 73e0cbe..47b4e9e 100644 --- a/contactUs.html +++ b/contactUs.html @@ -30,7 +30,7 @@ Send Us A Message diff --git a/courseDetails.html b/courseDetails.html index 2e3fd05..e2aa95f 100644 --- a/courseDetails.html +++ b/courseDetails.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/courses.html b/courses.html index 5cd764d..b02bcb5 100644 --- a/courses.html +++ b/courses.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/addAddress.html b/addAddress.html index dba7b8f..a961760 100644 --- a/addAddress.html +++ b/addAddress.html @@ -31,7 +31,7 @@ diff --git a/careers.html b/careers.html index 4734278..ba717d9 100644 --- a/careers.html +++ b/careers.html @@ -31,7 +31,7 @@ We will be glad to see you in our team! diff --git a/cart.html b/cart.html index e64e9e8..fd113e6 100644 --- a/cart.html +++ b/cart.html @@ -31,7 +31,7 @@ -25 EGP diff --git a/changePassword.html b/changePassword.html index d911174..71e2516 100644 --- a/changePassword.html +++ b/changePassword.html @@ -31,7 +31,7 @@ 638 EGP diff --git a/contactUs.html b/contactUs.html index 73e0cbe..47b4e9e 100644 --- a/contactUs.html +++ b/contactUs.html @@ -30,7 +30,7 @@ Send Us A Message diff --git a/courseDetails.html b/courseDetails.html index 2e3fd05..e2aa95f 100644 --- a/courseDetails.html +++ b/courseDetails.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/courses.html b/courses.html index 5cd764d..b02bcb5 100644 --- a/courses.html +++ b/courses.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/careers.html b/careers.html index 4734278..ba717d9 100644 --- a/careers.html +++ b/careers.html @@ -31,7 +31,7 @@ We will be glad to see you in our team! diff --git a/cart.html b/cart.html index e64e9e8..fd113e6 100644 --- a/cart.html +++ b/cart.html @@ -31,7 +31,7 @@ -25 EGP diff --git a/changePassword.html b/changePassword.html index d911174..71e2516 100644 --- a/changePassword.html +++ b/changePassword.html @@ -31,7 +31,7 @@ 638 EGP diff --git a/contactUs.html b/contactUs.html index 73e0cbe..47b4e9e 100644 --- a/contactUs.html +++ b/contactUs.html @@ -30,7 +30,7 @@ Send Us A Message diff --git a/courseDetails.html b/courseDetails.html index 2e3fd05..e2aa95f 100644 --- a/courseDetails.html +++ b/courseDetails.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/courses.html b/courses.html index 5cd764d..b02bcb5 100644 --- a/courses.html +++ b/courses.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/cart.html b/cart.html index e64e9e8..fd113e6 100644 --- a/cart.html +++ b/cart.html @@ -31,7 +31,7 @@ -25 EGP diff --git a/changePassword.html b/changePassword.html index d911174..71e2516 100644 --- a/changePassword.html +++ b/changePassword.html @@ -31,7 +31,7 @@ 638 EGP diff --git a/contactUs.html b/contactUs.html index 73e0cbe..47b4e9e 100644 --- a/contactUs.html +++ b/contactUs.html @@ -30,7 +30,7 @@ Send Us A Message diff --git a/courseDetails.html b/courseDetails.html index 2e3fd05..e2aa95f 100644 --- a/courseDetails.html +++ b/courseDetails.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/courses.html b/courses.html index 5cd764d..b02bcb5 100644 --- a/courses.html +++ b/courses.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/changePassword.html b/changePassword.html index d911174..71e2516 100644 --- a/changePassword.html +++ b/changePassword.html @@ -31,7 +31,7 @@ 638 EGP diff --git a/contactUs.html b/contactUs.html index 73e0cbe..47b4e9e 100644 --- a/contactUs.html +++ b/contactUs.html @@ -30,7 +30,7 @@ Send Us A Message diff --git a/courseDetails.html b/courseDetails.html index 2e3fd05..e2aa95f 100644 --- a/courseDetails.html +++ b/courseDetails.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/courses.html b/courses.html index 5cd764d..b02bcb5 100644 --- a/courses.html +++ b/courses.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/contactUs.html b/contactUs.html index 73e0cbe..47b4e9e 100644 --- a/contactUs.html +++ b/contactUs.html @@ -30,7 +30,7 @@ Send Us A Message diff --git a/courseDetails.html b/courseDetails.html index 2e3fd05..e2aa95f 100644 --- a/courseDetails.html +++ b/courseDetails.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/courses.html b/courses.html index 5cd764d..b02bcb5 100644 --- a/courses.html +++ b/courses.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/courseDetails.html b/courseDetails.html index 2e3fd05..e2aa95f 100644 --- a/courseDetails.html +++ b/courseDetails.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/courses.html b/courses.html index 5cd764d..b02bcb5 100644 --- a/courses.html +++ b/courses.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/courses.html b/courses.html index 5cd764d..b02bcb5 100644 --- a/courses.html +++ b/courses.html @@ -31,7 +31,7 @@ 9-12 years . 11 session diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/coursesempty.html b/coursesempty.html index c8a8dc6..546d922 100644 --- a/coursesempty.html +++ b/coursesempty.html @@ -31,7 +31,7 @@ No Courses Found Here Yet diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/css/style.css b/css/style.css index 58800ef..e4aadf7 100644 --- a/css/style.css +++ b/css/style.css @@ -1449,23 +1449,370 @@ transform: rotateY(180deg); } .gallery { + position: relative; +} +.gallery .maskgroup{ + position: absolute; + top: 20px; + right: 0; + max-width: 70%; + z-index: -1; +} +html[dir=rtl] .gallery .maskgroup{ + right: auto; + left: 0; + transform:rotateY(180deg) } .gallery .parts{ display: flex; -align-items: center; +align-items: flex-start; justify-content: space-between; +margin-top: 50px; +gap: 80px; } .gallery .parts .part1{ + max-width: 80%; + margin: auto; +} +.gallery .parts .part1 img{ +width: 100%; + +} +.gallery .parts .part2 { + flex: 1; + position: relative; + width: 50%; + height: 450px; + overflow: hidden; +} +.gallery .parts .part2 .cricle { + position: absolute; + content: ""; + width: 300px; + top: 16%; + left: -230px; + height: 300px; + border-radius: 50%; + border: 1px dashed #9B9B9B; + /* animation: roooot 2s ; */ +} +html[dir=rtl] .gallery .parts .part2 .cricle { + right: -230px; +} +.gallery .parts .part2 .cricle .item { + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; +} +.gallery .parts .part2 .cricle .item1 { + top: -7px; + right: 11px; + transform: rotate(-16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 { + left: 11px; + right: auto; + transform: rotate(16deg); +} +.gallery .parts .part2 .cricle .item2 { + top: 75px; + right: auto; + left: calc(100% - 4px); + transform: rotate(-4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 { + left: auto; + right: calc(100% - 4px); + transform: rotate(4deg); } -.gallery .parts .part2{ +.gallery .parts .part2 .cricle .item3 { + top: 167px; + right: auto; + left: calc(100% - 4px); + transform: rotate(12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 { + top: 167px; + left: auto; + right: calc(100% - 4px); + transform: rotate(-12deg); +} +.gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + right: auto; + left: calc(100% - 62px); + transform: rotate(25deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 { + top: auto; + bottom: -11px; + left: auto; + right: calc(100% - 62px); + transform: rotate(-25deg); +} + +.gallery .parts .part2 .cricle .item span{ + display: block; + height: 1px; + min-width: 140px; + border: 1px #0B80D4 dotted; + position: relative; +} +.gallery .parts .part2 .cricle .item span::before { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #0B80D4; + left: -10px; + top: 50%; + transform: translateY(-50%); +} + +html[dir=rtl] .gallery .parts .part2 .cricle .item span::before { + + right: -10px; } + + +/* @keyframes roooot { +0%{ + transform: rotate(-360deg) ; +} +} */ + + +.gallery .parts .part2 .cricle .item{ +display: flex; +align-items: center; +} + +.gallery .parts .part2 .cricle .item .content{ + display: flex; + align-items: center; +position: relative; +} +.gallery .parts .part2 .cricle .item .content img { + + position: absolute; + top: 50%; + + left: -49px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item .content img { + right: -49px; + left: auto; +} +.gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(17deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content img { + transform: translateY(-46%) rotate(-16deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(6deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content img { + transform: translateY(-50%) rotate(-6deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(2deg);; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content img { + transform: translateY(-50%) rotate(-2deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(-23deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content img { + transform: translateY(-57%) rotate(23deg) rotateY(180deg); +} +.gallery .parts .part2 .cricle .item .content h3 { + min-width: 400px; + width: max-content; + height: 76px; + padding: 22px 80px ; + background: #FFFFFF; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12); + border-radius: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 12px; + z-index: -1; + transform: rotate(15deg); + font-size: 20px; + color: #5C5959; +} +.gallery .parts .part2 .cricle .item .content h3 b{ + font-size: 24px; + line-height: 31px; + color: #000000; + margin: 0 4px; +} + +.gallery .parts .part2 .cricle .item1 .content h3 { + top: 16px; + transform: rotate(16deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item1 .content h3 { + + transform: rotate(-16deg); +} +.gallery .parts .part2 .cricle .item1 span{ +min-width: 150px; +} +.gallery .parts .part2 .cricle .item2 .content h3 { + top: -27px; + transform: rotate(4deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item2 .content h3 { + transform: rotate(-4deg); +} +.gallery .parts .part2 .cricle .item2 span{ +min-width: 150px; +border-color: #02A730; +} +.gallery .parts .part2 .cricle .item2 span::before{ + background-color: #02A730; +} +.gallery .parts .part2 .cricle .item3 .content h3 { + top: -80px; + z-index: -1; + transform: rotate(-12deg); +} +html[dir=rtl] .gallery .parts .part2 .cricle .item3 .content h3 { + + + transform: rotate(12deg); +} +.gallery .parts .part2 .cricle .item3 span{ + min-width: 130px; + border-color: #F17044; +} +.gallery .parts .part2 .cricle .item3 span::before{ + background-color: #F17044; +} +.gallery .parts .part2 .cricle .item4 .content h3 { + top: -140px; + z-index: -1; + transform: rotate(-24.8deg); + left: -10px; +} +html[dir=rtl] .gallery .parts .part2 .cricle .item4 .content h3 { + + transform: rotate(24.8deg); + right: -10px; +} +.gallery .parts .part2 .cricle .item4 span{ + min-width: 120px; + border-color: #C9284F; +} +.gallery .parts .part2 .cricle .item4 span::before{ + background-color: #C9284F; +} + + + + + + + + + + + + + + + + + + +@media (max-width: 1400px) { + .gallery .parts { + gap: 30px; +} +} +@media (max-width: 1200px) { + .gallery .parts { + align-items: center; + justify-content: center; + flex-direction: column; + height: 900px; +} +.gallery .parts .part2 { + + + width: 68%; + +} +} + + @media (max-width: 992px) { + .gallery .parts .part2 { + width: 100%; + height: 100%; + overflow: visible; +} .about .aboutimg { display: none; } + .gallery .parts .part2 .cricle { + position: relative; + content: none; + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 40px; + border: none; + right: 0 !important; +} +.gallery .parts .part2 .cricle .item { + transform: rotate(0deg) !important; + position: relative; + top: 0 !important; + right: 0 !important; + width: 100%; + height: auto; + left: 0 !important; + bottom: 0 !important; +} +.gallery .parts .part2 .cricle .item span { + display: none; + +} +.gallery .parts .part2 .cricle .item .content{ + width: 100%; +} +.gallery .parts .part2 .cricle .item .content h3 { + position: relative; + top: 0 !important; + left: 0 !important; + z-index: 1; + transform: rotate(0deg) !important; + width: 100%; + margin: 0; + min-width: 100%; + padding: 0; +} +.gallery .parts .part2 .cricle .item .content img { + display:none; +} + + } /*==================================end about==============================*/ diff --git a/followUp.html b/followUp.html index 245beea..aa2efa7 100644 --- a/followUp.html +++ b/followUp.html @@ -31,7 +31,7 @@ + + + + + + + + + + diff --git a/images/C3.svg b/images/C3.svg new file mode 100644 index 0000000..1a10221 --- /dev/null +++ b/images/C3.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/C4.svg b/images/C4.svg new file mode 100644 index 0000000..7195512 --- /dev/null +++ b/images/C4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/Cstudents.svg b/images/Cstudents.svg new file mode 100644 index 0000000..eb843c3 --- /dev/null +++ b/images/Cstudents.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/headerimg3.webp b/images/headerimg3.webp index 3be9128..016a2b4 100644 Binary files a/images/headerimg3.webp and b/images/headerimg3.webp differ diff --git a/myCart.html b/myCart.html index 138bce4..3a965dc 100644 --- a/myCart.html +++ b/myCart.html @@ -31,7 +31,7 @@ 9-12 years diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/successOrder.html b/successOrder.html index 2eb7601..8509990 100644 --- a/successOrder.html +++ b/successOrder.html @@ -31,7 +31,7 @@ Price Summary diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/successPage.html b/successPage.html index ba1be44..deaafcc 100644 --- a/successPage.html +++ b/successPage.html @@ -37,7 +37,7 @@ Thank you for your trust in Megaminds Academy diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@
diff --git a/viewOrder.html b/viewOrder.html index 4222d0c..877886c 100644 --- a/viewOrder.html +++ b/viewOrder.html @@ -31,7 +31,7 @@