I’m struggling with centering and positioning in my layout. All images currently rotate correctly around the container, but I need them to shift so that the BODY image is centered. Additionally, I’m having trouble aligning the text to the center of each image. What CSS techniques can help adjust the rotation position and text alignment?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyJuggler - Plan for a Balanced Life</title>
<link rel="stylesheet" href="styles.css">
<script defer type="text/javascript" src="javascript.js"></script>
</head>
<body>
<!-- Header -->
<header>
<img src="https://iili.io/2JR0ANV.webp" class="logo">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#juggling">Juggling</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#resources">Resources</a></li>
</ul>
</nav>
</header>
<!-- Main Banner -->
<section id="home" class="main-banner">
<h1>MyJuggler</h1>
<p>Plan for a balanced life.</p>
</section>
<!-- Introduction Section -->
<section id="introduction" class="content-section">
<div class="text-content">
<div class="headers"> <h2>Juggler? — What is it?</h2></div>
</div>
<div class="image-content">
<img src="https://iili.io/dmsT057.png" alt="Introduction Image" style="height: 30vw;">
<div class="non-profit">Non-profit, free solution for simple personal time management.</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how_works" class="content-section">
<div class="text-content">
<div class="headers"> <h2>How do I do it?</h2></div>
<p>Your life.
Divide it into five key areas.
Imagine them as juggling balls:</p>
</div>
<div class="revolve pentagon-container">
<div class="icon">
<div class="image-container" style="--i: 1;">
<img src="https://iili.io/2BmR15l.webp" style="--color:#f1694c" alt="Sample Image 1">
<div class="image-text">BODY</div>
</div>
<div class="image-container" style="--i: 2;">
<img src="https://iili.io/2BmXRKQ.webp" style="--color:#82519c" alt="Sample Image 2">
<div class="image-text">SOUL</div>
</div>
<div class="image-container" style="--i: 3;">
<img src="https://iili.io/2BmRa0G.webp" style="--color:#169d81" alt="Sample Image 3">
<div class="image-text">FAMILY & <br/> FRIENDS</div>
</div>
<div class="image-container" style="--i: 4;">
<img src="https://iili.io/2BmRRWX.webp" style="--color:#e2b838" alt="Sample Image 4">
<div class="image-text">CAREER<br/>& WORK</div>
</div>
<div class="image-container" style="--i: 5;">
<img src="https://iili.io/2BmUkPt.webp" style="--color:#15629d" alt="Sample Image 5">
<div class="image-text">COMMUNITY</div>
</div>
</div>
</div>
</section>
<!-- Get Started Section -->
<section id="get-started">
<h2>I want to get started:</h2>
<button onclick="window.location.href='#resources'">Get Going</button>
<div class="video-container">
<!-- Marc video embedded here -->
<video controls>
<source src="marc_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</section>
<!-- Resources Section -->
<section id="resources">
<h2>Find Your Starter Kit Worksheet here.</h2>
<p>Next, fill it out. OK. Now you’re Juggling.</p>
<a href="starter_kit.pdf" download>Download Starter Kit Worksheet</a>
</section>
<!-- Footer -->
<footer>
<p>© 2024 MyJuggler. All rights reserved.</p>
</footer>
</body>
</html>
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica Neue, sans-serif;
}
body {
line-height: 2;
background-color: #fff;
color: #333;
}
/* Header Styles */
header {
background: white;
color: #fff;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.logo {
height: 50px;
}
header nav ul {
list-style: none;
display: flex;
}
header nav ul li {
margin: 0 15px;
}
header nav ul li a {
color: #2F4C61;
text-decoration: none;
transition: color 0.3s;
}
header nav ul li a:hover {
color: #ff6347;
}
/* Main Banner Styles */
.main-banner {
background: #4CAF50;
color: #fff;
text-align: center;
padding: 100px 20px;
}
.main-banner h1 {
font-size: 3em;
margin-bottom: 20px;
}
/* Content Section Styles */
.content-section {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 5px 0px 5px;
gap: 5px;
width: 100%;
}
.text-content {
text-align: center;
background: #f4f4f4;
width: 50%;
height: 30vw; /* Height of the text content */
position: inherit;
}
.headers {
position: inherit;
left: -50%;
text-align: center;
margin-top: 13vw;
font-weight: bold;
}
.image-content {
position: relative;
width: 50%;
height: auto;
text-align: center;
padding: 0;
}
.non-profit {
position: absolute;
top: 33%;
left: 50%;
transform: translateX(-50%);
text-align: center;
margin-top: 10px;
font-weight: bold;
}
/* Flexbox Pentagon Layout for "revolve" Section */
.pentagon-container {
position: relative;
width: 50%;
height: 30vw;
}
.pentagon-container .icon {
position: relative;
width: 50%;
height: 30vw;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.pentagon-container .icon .image-container {
position: absolute;
width: 180px;
height: 180px;
transition: 0.7s;
transform: rotate(calc(360deg/5 * var(--i)));
transform-origin: 15vw;
z-index: 100;
}
.pentagon-container .icon .image-container.active {
box-shadow: 0 0 6px #222, 0 0 12px #ff1d50;
}
.pentagon-container .icon .image-container img {
transform: rotate(calc(-360deg/5 * var(--i)));
}
/* Image Text Styles */
.image-text {
display: block;
position: absolute;
top: 50%;
color: #2F4C61;
font-weight: bold;
text-align: center;
pointer-events: none; /* Ensures text doesn't interfere with image hover effects */
font-size: 1em;
width: 180px; /* Ensures text is centered and fits within the image container */
transform: rotate(calc(-360deg/5 * var(--i)));
}
/* Image Styles */
.image-container img {
--border: 5px; /* the thickness of the border */
--offset: 10px; /* control the movement of the border */
--gap: 5px; /* the gap on hover */
width: 100%;
border-radius: 50%;
cursor: pointer;
padding: calc(var(--border) + var(--gap));
border: var(--offset) solid #0000;
--_m: radial-gradient(50% 50%, #000 calc(100% - var(--offset)), #0000 calc(100% - var(--border)));
-webkit-mask: var(--_m);
mask: var(--_m);
--_g: #0000 calc(99% - var(--border)), var(--color) calc(100% - var(--border)) 99%, #0000;
--_s: var(--offset);
--_r: 100% 100% at;
background:
radial-gradient(var(--_r) 0 0 , var(--_g)) calc(100% + var(--_s)) calc(100% + var(--_s)),
radial-gradient(var(--_r) 100% 0 , var(--_g)) calc(0% - var(--_s)) calc(100% + var(--_s)),
radial-gradient(var(--_r) 0 100%, var(--_g)) calc(100% + var(--_s)) calc(0% - var(--_s)),
radial-gradient(var(--_r) 100% 100%, var(--_g)) calc(0% - var(--_s)) calc(0% - var(--_s));
background-size: 50% 50%;
background-repeat: no-repeat;
transition: .4s;
}
.image-container img:hover {
--_s: 0px;
}
/* Get Started Section Styles */
#get-started {
background: #fff;
padding: 50px 20px;
text-align: center;
}
#get-started button {
background: #ff6347;
color: #fff;
padding: 15px 30px;
border: none;
cursor: pointer;
font-size: 1em;
transition: background 0.3s;
border-radius: 5px;
}
#get-started button:hover {
background: #e5533d;
}
.video-container {
margin-top: 30px;
}
/* Resources Section Styles */
#resources {
background: #f9f9f9;
padding: 50px 20px;
text-align: center;
}
#resources a {
display: inline-block;
margin-top: 20px;
padding: 15px 30px;
background: #4CAF50;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
#resources a:hover {
background: #3e8e41;
}
/* Footer Styles */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px;
margin-top: 40px;
}