I have an image with a spinner rotating around it through animation, accompanied by two boxes containing information as depicted in the uploaded image below. However, I would like to position the image above the boxes rather than beside them.
.about-img {
position: relative;
width: 25rem;
height: 25rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.about-img .spin{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(0);
width: 68%;
height: 68%;
border-radius: 50%;
border-top: .2rem solid var(--main-color);
border-bottom: .2rem solid var(--main-color);
border-left: .2rem solid var(--main-color-alt);
border-right: .2rem solid var(--main-color-alt);
animation: aboutSpinner 8s linear infinite;
}
.team-page {
display: flex;
position: relative ;
justify-content: center;
align-items: center;
height: 100vh;
padding: 10px 5%;
}
.footer {
display: flex;
margin-top: auto;
justify-content: center;
align-items: center;
}
.about,.skills {
padding: 40px;
min-height: 330px;
}
.about {
background-color: white;
color: black;
}
.about h3 {
margin-bottom: 25px;
}
.skills {
background-color: #3366cc;
color: #f5f5f5;
height: 0;
}
.skills h2 {
margin-bottom: 20px;
}
.skills .progress {
margin-bottom: 30px;
}
.about-img .image {
transition: opacity 1s ease-in-out;
border-radius: 50%;
width: 60%;
border: .2rem solid var(--main-color-alt);
} <div class="team-page">
<div class="about-img disable_curet">
<img class="image" src="imgs/logo.png" alt="">
<span class="spin"></span>
</div>
<section class="container">
<div class="row">
<div class="col-md-6">
<div class="about">
<h3>Profile</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas temporibus a eveniet odio consequuntur, aspernatur fugit voluptatum laboriosam id unde voluptates modi quos omnis et numquam ipsa doloribus debitis.
</p>
</div>
</div>
<div class="col-md-6">
<div class="skills">
<h2>Our skills</h2>
<strong>PHP MySQL</strong>
<span class="pull-right"70%></span>
<div class="progress">
<div class="progress-bar progress-bar-primary" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
<strong>UI/UX</strong>
<span class="pull-right"85%></span>
<div class="progress">
<div class="progress-bar progress-bar-primary" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
</div>
<strong>Bootstrap</strong>
<span class="pull-right"95%></span>
<div class="progress">
<div class="progress-bar progress-bar-primary" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="footer">
<!-- The Paragraph at the End -->
<p class="copyright">© 2023 <span title="Science Lab Team | Sands International School">SLT | SIS</span> All right Reserved</p>
</div>If possible, kindly assist in repositioning the image above the boxes.