Hey, I'm working on my first project and running into some trouble with divs. I'm trying to position the firework behind the central text but can't figure it out. Can anyone lend a hand?
I need to add more details in order to submit the question. Just to give you an idea, my project is like a birthday invitation for my 18th birthday – I want to create something unique and different.
Here's the code, appreciate any help!
body {
background-color: blue;
}
.centro {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 100px 0;
}
.text {
display: flex;
flex-direction: column;
align-items: center;
}
.center-text {
color: #E7ECEF;
text-align: center;
font-size: 50px;
text-shadow: 3px 2px 1px rgba(0, 0, 0, .3);
width: 30%;
}
.firework {
display: flex;
justify-content: center;
}
.explosion {
position: absolute;
width: 2px;
height: 40px;
transform-origin: 50% 100%;
overflow: hidden;
}
.explosion:nth-child(1) {
transform: rotate(0deg) translateY(-15px);
}
(...and so on with your existing CSS code...)
<body>
<div class="centro">
<div class="text">
(→ Add your additional HTML structure here if necessary →)
</div>
<div class="firework" id="firework1">
(→ Add your additional HTML structure for fireworks here if required →)
</div>
</div>
</div>
</body>