Мобильная версияКод: Выделить всё
/* 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;
}Код: Выделить всё
MyJuggler - Plan for a Balanced Life
[*]
[img]https://iili.io/2JR0ANV.webp[/img]
[list]
[url=#home]Home[/url]
[*][url=#juggling]Juggling[/url]
[*][url=#about]About[/url]
[*][url=#contact]Contact[/url]
[*][url=#resources]Resources[/url]
[/list]
MyJuggler
Plan for a balanced life.
Juggler? — What is it?
[img]https://iili.io/dmsT057.png[/img]
Non-profit, free solution for simple personal time management.
How do I do it?
Your life.
Divide it into five key areas.
Imagine them as juggling balls:
[img]https://iili.io/2BmR15l.webp[/img]
BODY
[img]https://iili.io/2BmXRKQ.webp[/img]
SOUL
[img]https://iili.io/2BmRa0G.webp[/img]
FAMILY &
FRIENDS
[img]https://iili.io/2BmRRWX.webp[/img]
CAREER
& WORK
[img]https://iili.io/2BmUkPt.webp[/img]
COMMUNITY
I want to get started:
Get Going
Your browser does not support the video tag.
Find Your Starter Kit Worksheet here.
Next, fill it out. OK. Now you’re Juggling.
[url=starter_kit.pdf]Download Starter Kit Worksheet[/url]
© 2024 MyJuggler. All rights reserved.
Я попробовал использовать выравнивание текста: по центру и поле: авто на ТЕЛЕ изображение, ожидая, что оно центрируется в контейнере, но оно остается смещенным от центра. Я также попробовал Transform: Rotate() для каждого изображения для вращения, и это сработало, но изображение BODY по-прежнему не выравнивается по центральной точке. Выравнивание текста с помощью text-align не оставалось по центру изображений.
Прикреплено изображение, показывающее желаемый макет для круговых изображений.
eДо и после
Подробнее здесь: https://stackoverflow.com/questions/791 ... -and-align
