I have a few tasks to accomplish:
- Ensuring the logo scales properly within the viewport without losing relative proportions
- Applying a purple gradient (to transparent) specifically to the rings
- Having the rings rotate at varying speeds and in opposite directions while maintaining the top-to-bottom gradient
This is the desired outcome:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: transparent;
/* Set a background color if needed */
}
.container {
position: relative;
}
.title {
position: relative;
z-index: 2;
/* Increase z-index for the title */
}
.core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
/* Reduce z-index for the cores */
background: linear-gradient(8c04fe, transparent);
}
/* Define different sizes for Core 1, Core 2, and Core 3 */
.core1 {
width: 48vw;
height: 48vw;
}
.core2 {
width: 32vw;
height: 32vw;
}
.core3 {
width: 16vw;
height: 16vw;
}
@media (max-width: 768px) {
.title img {
max-width: 100%;
}
.core {
width: 50%;
/* Adjust the width as needed */
max-width: none;
}
}<div class="container">
<img class="core core1" src="https://drive.google.com/uc?id=1mPcXOui7mzn4N60ZcFzmb1wFTTX_CcG9" alt="Core 1">
<img class="core core2" src="https://drive.google.com/uc?id=1_0TthVwoC9xjU7aYw3fn5dNjidqmVwrM" alt="Core 2">
<img class="core core3" src="https://drive.google.com/uc?id=13hP0VO5kaEw5VkBiT2jhGG3upg78zum1" alt="Core 3">
<div class="title">
<img src="https://drive.google.com/uc?id=1fXAwjJmIGRbKzAlKGGUmCFwAUYZnXtwx" alt="Title Image">
</div>
</div>I attempted to add a gradient overlay using `background: linear-gradient(8c04fe, transparent)` and other methods, but it didn't show up over the rings.