Как переместить блок персонала под блок ссылок?CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как переместить блок персонала под блок ссылок?

Сообщение Anonymous »

У меня есть страница проекта и 3 блока: «Журнал обновлений», «Ссылки» и «Сотрудники». Пытаюсь переместить блок с нотоносцем под Ссылки, но у меня все блоки получаются горизонтально, как показано на скриншоте страницы проекта:
[img]https:// i.sstatic.net/7otkw71em.png[/img]

CSS:

Код: Выделить всё

.project-details {
display: flex;
align-items: flex-start;
gap: 20px;
}

.project-image {
width: 300px;
height: auto;
border-radius: 10px;
}

.project-info {
display: flex;
flex-direction: column;
gap: 20px;
}

.project-text {
display: flex;
flex-direction: column;
gap: 10px;
}

.project-content {
display: flex;
gap: 100px;
}

.project-blog {
flex: 1;
}

.project-links {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
}

.separator {
width: 100%;
height: 2px;
background-color: #376b95;
margin: 20px 0;
}

.blog-entry {
background: rgba(51, 51, 51, 0.6);
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
transition: background 0.3s ease, transform 0.3s ease;
}

.blog-entry:hover {
background: rgba(51, 51, 51, 1);
transform: translateY(-5px);
}

.blog-entry h3 {
margin-bottom: 10px;
font-size: 18px;
color: #376b95;
}

.blog-entry p {
margin-bottom: 10px;
font-size: 16px;
}

.date {
font-size: 14px;
color: #808080;
}

.link-entry {
margin-top: 20px;
margin-bottom: 40px;
}

.btn-link {
padding: 10px 20px;
border-radius: 10px;
background-color: #376b95;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
}

.btn-link:hover {
background-color: #2d7dc0;
}

.project-developers {
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 40px;
}

.developers-entry {
display: flex;
align-items: center;
gap: 20px;
padding: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
background: rgba(51, 51, 51, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-top: 40px;
}

.developers-entry:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.developer-image {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #376b95;
}

.developer-info h3 {
margin: 0;
font-size: 20px;
color: #fff;
}

.developer-info p {
margin: 5px 0 0;
font-size: 16px;
color: #aaa;
}

.developer-info p:last-child {
font-weight: bold;
color: #fff;
}

.badge {
background-color: #376b95;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
margin-left: 10px;
font-size: 14px;
position: relative;
bottom: 5px;
}

Код: Выделить всё





[img]project2-thumbnail.jpg[/img]


ProjectСтудия
Description





Лог обновлений проекта


Обновление 1
Создание студии
14.05.2022



Ссылки на другие сайты проекта


[url=https://example.com]GitHub[/url]

[url=https://example.com]VK[/url]

[url=https://example.com]Telegram[/url]



Состав команды


[img]e4calipt.jpg[/img]

Евкалипт Ноунеймович
Lovec
Владелец



[img]leclark.jpg[/img]

Артем Лекларк
LeClark
Разработчик



[img]fastconnect.jpg[/img]

Дмитрий Борисов
FastConnect
Разработчик


Я пытался создать один контейнер для персонала и ссылок и переместить их в правую сторону, но это не работает.

Подробнее здесь: https://stackoverflow.com/questions/792 ... inks-block
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»