body {
margin: 0;
padding: 30px;
/* padding: 0px; */
/* display: none; */
justify-content: center;
align-items: center;
width: 100%;
/* height: 100vh; */
height: 90vh;
box-sizing: border-box;
background-color: black;
/* background: linear-gradient(245deg, black, rgb(24, 32, 119)); */
}
h1{
color: white;
}
.section {
position: relative;
width: 100%;
max-width: 600px;
height: 800px;
/* display: flex; */
display: none;
justify-content: center;
align-items: center;
z-index: 1;
}
.section .box {
position: absolute;
width: 100px; /* Reduced size for better layout */
height: 100px;
/* border: 2px solid rgb(255, 204, 110); */
}
.section div:nth-child(1) {
background: linear-gradient(to bottom right, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(250deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(2) {
background: linear-gradient(to bottom right, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(293.5deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(3) {
background: linear-gradient(to bottom right, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(340deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(4) {
background: linear-gradient(to bottom right, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(385deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(5) {
background: linear-gradient(to bottom right, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(428deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(6) {
background: linear-gradient(to bottom right, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(473deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(7) {
background: linear-gradient(to bottom right, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(518deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(8) {
background: linear-gradient(to bottom right, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(563deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(9) {
background: linear-gradient(to top left, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(586deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(10) {
background: linear-gradient(to top left, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(272deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(11) {
background: linear-gradient(to top left, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(-44deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(12) {
background: linear-gradient(to top left, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(1deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(13) {
background: linear-gradient(to top left, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(46deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(14) {
background: linear-gradient(to top left, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(90deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(15) {
background: linear-gradient(to top left, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(135deg) skew(20deg, 20deg) translate(50px, 50px);
}
.section div:nth-child(16) {
background: linear-gradient(to top left, yellow, orange);
border-radius: 50% 50% 0% 50%;
transform: rotateZ(180deg) skew(20deg, 20deg) translate(50px, 50px);
}
#button {
text-align: center;
height: 3.5rem;
width: 3.5rem;
border-radius: 50%;
}
button {
font-size: 21px;
color: brown;
background-color: yellow;
border: none;
border-radius: 5px;
cursor: pointer;
height: 3.5rem;
width: 3.5rem;
border-radius: 50%;
box-shadow: 4px 4px 8px rgba(101, 52, 5, 0.879),
-4px -4px 8px rgba(101, 52, 5, 0.879),
4px -4px 8px rgba(101, 52, 5, 0.879),
-8px 8px 8px rgba(101, 52, 5, 0.879);
}
.container{
/* display:none; */
margin:0;
padding:0;
top:0px;
left:0px;
}
.theme{
margin:0;
padding:0;
}
.themebw{
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
/* align-items: right; */
height:100px;
align-items: flex-end;
}
.sun{
border-radius: 50%;
background: linear-gradient(to top left, yellow, orange);
height:80px;
width:80px;
display: block;
box-shadow: 0 0 10px orange,
0 0 20px orange,
0 0 30px orange,
0 0 40px orange,
0 0 50px orange;
}
.moon{
border-radius: 50%;
background: linear-gradient(to top left, lightgrey, grey);
height:80px;
display: none;
width:80px;
box-shadow: 0 0 10px whitesmoke,
0 0 20px whitesmoke,
0 0 30px whitesmoke,
0 0 40px whitesmoke,
0 0 50px whitesmoke;
}
.change span{
font-size: 30px;
}
.auto-type{
/* color: #0278c6; */
font-size: 40px;
background: linear-gradient(to left , red, #0552d7);
-webkit-background-clip: text;
color: transparent;
}
.image{
background-size: cover;
background-image: url('images/djj.png');
background-position: center;
border-radius: 50%;
position: absolute;
right: 30px;
background-position: center;
top:150px;
box-shadow: 5px 5px 5px grey;
width:450px;
height: 450px;
animation: floatAnimation 10s ease-in-out infinite;
}
@keyframes floatAnimation {
0% { transform: translateY(0); }
50% { transform: translateY(-15px); } /* Upar jaayegi */
100% { transform: translateY(0); } /* Wapas neeche aayegi */
}
.space{
height:20px;
}
@media (max-width: 850px) {
.image {
top:350px;
height: 350px;
width: 350px;
transform: translateX(-50%);
}
}
/*
@media (max-width: 500px) {
} */
@media (max-width: 400px) {
/* .image-container .image{
top:400px;
} */
.image {
height: 300px;
width: 300px;
transform: translateX(-50%);
}
}
/* .images{
/* background-image: url('p1.png');
background-size: cover;
background-position: center;
box-shadow: 5px 5px 5px grey;
animation: slider 15s linear infinite;
height: 300px;
width: 300px;
border-radius: 50%;
position: absolute;
right: 20px;
} */
/*
.images{
background-size: 100% 100%;
box-shadow: 5px 5px 5px grey;
animation: slider 15s linear infinite;
height:300px;
width: 300px;
border-radius: 50%;
position:relative;
right: 20px;
} */
.flex{
/* display: flex; */
}
/* @keyframes slider{
0%{
background-image: url(images/p1.png);
}
30%{
background-image: url(images/p2.png);
}
60%{
background-image: url(images/p3.png);
}
100%{
background-image: url(images/p1.png);
}
} */
/* @media screen and (max-width: 860px) {
.flex{
display:block;
}
.images{
background-size: 100% 100%;
box-shadow: 5px 5px 5px grey;
animation: slider 21s linear infinite;
border-radius: 50%;
display: flex;
justify-content: center; /* Horizontal center
align-items: center;
}
} */
/* .nav-bar{
width:100%;
}
.bottom{
background-color: rgba(229, 218, 218, 0.403);
width:50%;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border-radius: 50px;
position: fixed;
top: 900px;
} */
.nav-bar {
display: flex;
justify-content: center; /* Horizontal center */
align-items: center; /* Vertical center */
height: 85vh;
}
.bottom {
/* padding:5px; */
background: rgba(255, 255, 255, 0.178); /* Transparent white */
backdrop-filter: blur(10px);
width: 280px;
display:flex;
justify-content: center;
align-items: center;
bottom: 55px;
height: 50px;
/* background-color: #ff2764; */
z-index: 1;
border-radius: 50px;
position:fixed;
overflow: hidden;
border: solid 2px #0552d7;
}
.bottom .nav{
background-color: transparent;
box-shadow: none;
}
.bottom .nav:hover{
background: #13010d;
}
.images{
margin-top:-150px;
width:100%;
/* padding-left:120px;
padding-right:130px; */
text-align: center;
display:flex;
/* opacity: 0; */
/* transform: translateX(-100px); */
transition: all 2s ease-out;
/* align-items: center; */
justify-content: center;
}
img{
margin-top:-90px;
/* margin-left:-220px; */
}
.img.show{
opacity: 1;
transform: translateX(20px);
}
/* img{
margin-top:-90px;
margin-left:-220px;
}
img{
margin-top:-90px;
margin-left:-220px;
}
img{
margin-top:-90px;
margin-left:-220px;
} */
/*
.images .img1{
margin:0;
left:250px;
padding:20px;
position: absolute;
rotate: -35deg;
animation: floatAnimation1 10s ease-in-out infinite;
}
@keyframes floatAnimation1 {
0% { transform: translateY(0); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0); }
.images .img2{
right:20px;
right: 250px;
margin-top: 100px;
position: absolute;
animation: floatAnimation1 10s ease-in-out infinite;
}
@keyframes floatAnimation1 {
0% { transform: translateY(0); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0); }
}
.images .img3{
margin-top: 100px;
position: absolute;
animation: floatAnimation1 10s ease-in-out infinite;
}
@keyframes floatAnimation1 {
0% { transform: translateY(0); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0); }
}
.images .img4{
margin-top: 100px;
position: absolute;
animation: floatAnimation1 10s ease-in-out infinite;
}
@keyframes floatAnimation1 {
0% { transform: translateY(0); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0); }
} */
.images .img .img1:hover{
}
.images .img .img1{
/* z-index: -1; */
position: relative;
rotate: -33deg;
animation: floatAnimaimg 10s ease-in-out infinite;
}
@keyframes floatAnimaimg {
0% { transform: translateX(0); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}
.images .img .img2{
/* z-index: -1; */
top:120px;
position: relative;
animation: floatAnimaimg2 9s ease-in-out infinite;
}
@keyframes floatAnimaimg2 {
0% { transform: translateX(0); }
50% { transform: translateX(10px); }
100% { transform: translateY(0); }
}
.images .img .img3{
/* z-index: -1; */
/* margin-top:20px; */
position: relative;
animation: floatAnimaimg3 5s ease-in-out infinite;
}
@keyframes floatAnimaimg3 {
0%, 100% {
transform: scale(1); /* Normal size */
}
50% {
transform: scale(1.1); /* Zoom in */
}
}
.images .img .img4{
/* z-index: -1; */
top:120px;
position: relative;
animation: floatAnimaimg4 7s ease-in-out infinite;
}
@keyframes floatAnimaimg4 {
0%, 100% {
transform: scale(1) translateY(0);
}
50% {
transform: scale(1.1) translateY(20px);
}
}
.images .img .img5{
/* z-index: -1; */
/* margin-top:20px; */
position: relative;
animation: floatAnimaimg5 8s ease-in-out infinite;
}
@keyframes floatAnimaimg5 {
0% { transform: translateX(0); }
50% { transform: translateX(15px); }
100% { transform: translateY(0); }
}
@media screen and (max-width: 650px) {
.images{
margin-top:-100px;
width:100%;
padding:0;
text-align: center;
display:flex;
/* align-items: center; */
/* justify-content: center; */
}
.boximg1{
margin-top:35px;
z-index: 1;
}
.boximg2{
margin-top:45px;
z-index: 1;
}
.boximg3{
margin-top:50px;
z-index: 1;
}
.boximg4{
margin-top:50px;
z-index: 1;
}
.boximg5{
margin-top:50px;
z-index: 1;
}
}
@media screen and (max-width: 540px) {
.images{
/* margin-top:-100px; */
width:100%;
padding:0;
text-align: center;
display:flex;
/* align-items: center; */
/* justify-content: center; */
}
img{
/* width:70px;
height:70px; */
margin-top:0;
}
.img5{
top:130px;
left:-100px;
}
}
@media screen and (max-width: 438px) {
.img4{
/* top:-100px; */
left:140px;
}
}
@media screen and (max-width: 350px) {
.img1{
top:-180px;
width:80px;
height:60px;
}
.img2{
top:-200px;
left:-80px;
}
.img3{
top:-100px;
}
.img4{
top:0px;
/* left:15px; */
}
.img5{
top:-100px;
left:-55px;
}
}
.box1{
width:100%;
/* height:200px; */
padding:10px;
display: flex;
justify-content: center;
align-items: center;
}
.boximg1{
display: none;
top:825px;
width:450px;
background: rgba(255, 255, 255, 0.178);
backdrop-filter: blur(10px);
height:250px;
border-radius: 20px;
/* z-index: -1; */
position: absolute;
border: solid 1px #0552d7;
transition: all 0.3s ease-in-out;
}
.box2{
width:100%;
/* height:200px; */
padding:10px;
display: flex;
justify-content: center;
align-items: center;
}
.boximg2{
display: none;
/* top:25px; */
top:940px;
position: absolute;
width:450px;
background: rgba(255, 255, 255, 0.178);
backdrop-filter: blur(10px);
height:250px;
border-radius: 20px;
/* z-index: -1; */
border: solid 1px #0552d7;
transition: all 0.3s ease-in-out;
}
.box3{
width:100%;
/* height:200px; */
padding:10px;
display: flex;
justify-content: center;
align-items: center;
}
.boximg3{
display: none;
top:815px;
width:450px;
background: rgba(255, 255, 255, 0.178);
backdrop-filter: blur(10px);
height:250px;
border-radius: 20px;
/* z-index: -1; */
position: absolute;
border: solid 1px #0552d7;
transition: all 0.3s ease-in-out;
}
.box4{
width:100%;
/* height:200px; */
padding:10px;
display: flex;
justify-content: center;
align-items: center;
}
.boximg4{
display: none;
width:450px;
top:950px;
background: rgba(255, 255, 255, 0.178);
backdrop-filter: blur(10px);
height:250px;
border-radius: 20px;
/* z-index: -1; */
position: absolute;
border: solid 1px #0552d7;
transition: all 0.3s ease-in-out;
}
.box5{
width:100%;
/* height:200px; */
padding:10px;
display: flex;
justify-content: center;
align-items: center;
}
.boximg5{
display: none;
width:450px;
top:815px;
background: rgba(255, 255, 255, 0.178);
backdrop-filter: blur(10px);
height:250px;
border-radius: 20px;
/* z-index: -1; */
position: absolute;
border: solid 1px #0552d7;
transition: all 0.3s ease-in-out;
}
.introdu{
/* width:100%; */
padding: 0 50px 0 50px;
opacity: 0;
transform: translateX(-100px);
transition: all 2s ease-out;
/* font-family: Arial, Helvetica, sans-serif; */
}
.introdu.show{
opacity: 1;
transform: translateX(20px);
}
.class span{
background: linear-gradient(to bottom, orange, red);
-webkit-background-clip: text;
color: transparent;
}
.introdu .class{
/* width:100%; */
display:flex;
align-items: center;
/* justify-content: center; */
/* padding-left:100px; */
}
.class p{
font-size:50px;
color:white;
}
.class2{
/* padding-left:100px; */
top:-50px;
display: flex;
position:relative;
}
.class2 p{
color:white;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
}
.class2 .india{
background: linear-gradient(to right, rgb(218, 147, 16), white, green);
-webkit-background-clip: text;
color: transparent;
font-size: 28px;
font-weight: bold;
}
.class2 p span{
background: linear-gradient(to bottom, blue, rgb(173, 39, 226));
-webkit-background-clip: text;
color: transparent;
font-size: 28px;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
}
@media screen and (max-width: 500px) {
.image {
top:350px;
height: 350px;
width: 350px;
}
.class p{
font-size:40px;
}
.introdu{
padding:0;
}
.full1.show p{
font-size:25px;
}
.flex .text h1{
font-size: 28px;
}
}
@media screen and (max-width: 400px) {
.introdu{
padding: 0;
}
}
.class2 .marks{
background: linear-gradient(to top, lightgreen, darkgreen);
-webkit-background-clip: text;
color: transparent;
font-size: 22px;
font-weight: bold;
}
.image {
opacity: 0;
transform: scale(0.8);
animation: fadeIn 1.5s ease-out forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.full1 {
display: flex;
justify-content: end;
text-align: right;
}
.full1 p {
background: linear-gradient(to top, skyblue, blue);
-webkit-background-clip: text;
color: transparent;
font-size: 30px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
<!--.show {
opacity: 1;
transform: translateX(0px);
}-->
.cards{
width:100%;
}
.card{
/* width:50%; */
/* margin-top:100px; */
display:ruby;
justify-content: center;
align-items: center;
gap:10px;
}
.card1{
width:280px;
height:300px;
margin:10px;
}
.card1{
/* width:95%; */
}
.cards p{
font-size: 40px;
background: linear-gradient(to top, black, white);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.card1 img{
width:280px;
height:300px;
margin-top:-10px;
}