end responsive background

This commit is contained in:
p2405951 committed 2025-11-07 11:36:55 +01:00
1 parent b7ebda5633
commit 47fee29d48
3 files changed
+63 -12

No files matched your search

@@ -1,9 +1,10 @@
/* BACKGROUND ////////////////////////////////////////////////////////*/
.background-container {
z-index: 0;
margin: 0;
padding: 0;
min-height: 100vh;
background: linear-gradient(135deg, #ff9500, #ffb347);
background: #00F0FF;
overflow: hidden;
position: relative;
width: 100vw;
@@ -22,7 +23,7 @@
.circle-1 {
width: 600px;
height: 600px;
background-color: rgba(255, 255, 204, 0.6);
background-color: #019AFF;
top: -10%;
left: -10%;
}
@@ -30,7 +31,7 @@
.circle-2 {
width: 250px;
height: 250px;
background-color: rgba(255, 255, 153, 0.829);
background-color: #91FCFF;
top: 51%;
left: 10%;
}
@@ -38,26 +39,27 @@
.circle-3 {
width: 280px;
height: 280px;
background-color: rgba(255, 255, 204, 0.439);
top: 17%;
background-color: #91FCFF;
top: 28%;
right: 9%;
}
.circle-4 {
width: 500px;
height: 500px;
background-color: rgb(244, 244, 172);
bottom: 0%;
right: 0%;
background-color: #019AFF;
bottom: 0;
right: 0;
}
.circle-5 {
width: 240px;
height: 240px;
background-color: rgba(240, 240, 41, 0.827);
background-color: #015AFF;
top: 2%;
right: 2%;
}
.circle-1,.circle-2, .circle-3, .circle-4, .circle-5 {
animation: float 6s ease-in-out infinite;
}
@@ -72,4 +74,49 @@
50% {
transform: translate(var(--random-x), var(--random-y));
}
}
@media (max-width:600px) {
.circle-1 {
width: 300px;
height: 300px;
background-color: #019AFF;
top: -5%;
left: -5%;
}
.circle-2 {
width: 175px;
height: 175px;
background-color: #91FCFF;
top: 58%;
left: 10%;
}
.circle-3 {
width: 140px;
height: 140px;
background-color: #91FCFF;
top: 29%;
right: 9%;
}
.circle-4 {
width: 250px;
height: 250px;
background-color: #019AFF;
bottom: 0;
right: 0;
}
.circle-5 {
width: 240px;
height: 240px;
background-color: #015AFF;
top: 2%;
right: 10%;
}
}