[hideprofile][html]
<style>
/* шаблон гостевой (с) astaarus */
.guest-template-container {
width: 90%;
margin: 0 auto;
background-color: #333;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
color: #fff;
margin-bottom: 15px !important;
}
.guest-header {
background: url('https://i.pinimg.com/736x/fb/f3/2d/fbf32d3652b8cbe3e48277872b061745.jpg') no-repeat center center;
background-size: cover;
color: white;
padding: 40px 20px;
text-align: center;
border-radius: 10px;
animation: guestHeaderAnimation 1s ease-in-out;
position: relative;
}
.guest-header_h1 {
margin: 0;
font-size: 32px;
font-family: 'Arial', sans-serif;
}
.guest-header p {
font-size: 16px;
font-family: 'Arial', sans-serif;
opacity: 0.8;
}
.guest-section-title {
font-size: 12px;
font-weight: bold;
text-align: center;
margin-top: 30px;
text-transform: uppercase;
color: #ffffff;
letter-spacing: 2px;
animation: fadeIn 1.5s ease-in-out;
background: linear-gradient(to right, #060709, #3d3d3d);
padding: 10px 10px !important;
border-radius: 10px;
}
.guest-column-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.guest-column {
width: 49%;
background: #444;
border-radius: 10px;
padding: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.guest-column h3 {
font-size: 10px;
color: #fff;
text-transform: uppercase;
padding: 10px;
margin: 0;
border-bottom: 1px solid #333333;
position: sticky;
top: 0;
z-index: 2;
text-align: center;
letter-spacing: 2px;
}
/* Стиль прокрутки для контейнера с элементами */
.guest-item-container {
padding: 10px;
max-height: 190px;
overflow-y: auto;
scrollbar-width: thin; /* Для Firefox */
scrollbar-color: #555 #333; /* Для Firefox */
}
/* Для Chrome, Safari, Edge */
.guest-item-container::-webkit-scrollbar {
width: 8px;
}
.guest-item-container::-webkit-scrollbar-thumb {
background-color: #555;
border-radius: 10px;
border: 2px solid #333;
}
.guest-item-container::-webkit-scrollbar-track {
background: #333;
border-radius: 10px;
}
.guest-item {
background: #555;
border-radius: 8px;
padding: 5px 10px !important;
margin-bottom: 5px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, background-color 0.3s ease;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.guest-item:hover {
transform: translateX(5px);
background-color: #666;
}
/* Нейтральный цвет для ссылок */
.guest-item a {
color: #bbb !important; /* Нейтральный серый */
text-decoration: none;
font-weight: normal;
transition: color 0.3s ease;
}
.guest-item a:hover {
color: #f77a52 !important; /* Легкий оранжевый для активации */
}
.guest-item i {
font-size: 14px;
color: #999;
}
/* Нижний цветной фон с динамикой */
.guest-footer { font-size:11px;
background: linear-gradient(90deg, #0056b3, #4a90e2, #f77a52);
background-size: 300% 300%;
animation: footerGradient 8s infinite;
padding: 20px;
text-align: center;
margin-top: 30px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
@keyframes footerGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes guestHeaderAnimation {
0% { opacity: 0; transform: translateY(-30px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
.guest-column-container {
flex-direction: column; /* Колонки друг под другом */
gap: 15px; /* Небольшой отступ между колонками */
}
.guest-column {
width: 100%; /* Каждая колонка на всю ширину */
}
.guest-header_h1 {
font-size: 24px; /* Немного уменьшаем заголовок */
}
.guest-header p {
font-size: 14px; /* Уменьшаем текст для лучшей читаемости */
}
}
</style>
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.1.2/css/pro.min.css">
<div class="guest-template-container">
<div class="guest-header">
<div class="guest-header_h1">Spector. AMS SEARCH</div>
<p>Мммм, этот Орландо, где погода переменчивее настроения той самой фурии, а суетность дней соседствует с очередями в парки развлечений. Этот город живет свою жизнь и проживает свои проблемы. Но к этим проблемам добавилось слишком много нового. К преступности добавились агрессивные секты и культы, а среди людей есть те, кто говорят про призраков и духов хранителей. Ну бред же. <br>Бред?<br><br>
Доброго времени суток и добро пожаловать на тестовый форум для поиска АМС, посвященный городской мистике. У нас есть идеи, у нас есть планы, и мы будем рады найти тех, кому это будет так же интересно. Забегайте. Задавайте свои вопросы. И, если идеи форума вам близки, присоединяйтесь к команде, заполнив небольшой шаблон. Мы вас будем очень сильно ждать! <br><br>
Из плюшек:
Можете заранее придержать свою внешность :3
.
</p>
</div>
<div class="guest-section-title"><i class="fa-solid fa-user"></i> Придержанные внешности</div>
<div class="guest-column-container">
<div class="guest-column">
<h3><i class="fa-solid fa-venus"></i> Девочки</h3>
<div class="guest-item-container">
<p class="guest-item">Anya Taylor-Joy - <a href="https://spector.rusff.me/profile.php?id=10">наглая кошачья жопка</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">dakota johnson - <a href="https://spector.rusff.me/profile.php?id=3">esquie</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">Hazal Filiz Küçükköse - <a href="#">красно девица </a> <i class="fas fa-heart"></i></p>
<p class="guest-item"> Victoria Pedretti - <a href="https://spector.rusff.me/profile.php?id=6">головокружение</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">tati gabrielle- <a href="https://spector.rusff.me/profile.php?id=12">artist</a> <i class="fas fa-heart"></i></p>
</div>
</div>
<div class="guest-column">
<h3><i class="fa-solid fa-mars"></i> Мальчики</h3>
<div class="guest-item-container">
<p class="guest-item"> josh heuston - <a href="https://spector.rusff.me/profile.php?id=2">serpent</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">jacob elordi - <a href="https://spector.rusff.me/profile.php?id=11">bugs bunny</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">jack oconnell - <a href="https://spector.rusff.me/profile.php?id=11">bugs bunny</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">charlie hunnam - <a href="https://spector.rusff.me/profile.php?id=11">bugs bunny</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">joel kinnaman - <a href="https://spector.rusff.me/profile.php?id=11">bugs bunny</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">Jake Gyllenhaal - <a href="https://spector.rusff.me/profile.php?id=9"> big bad wolf</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">boyd holbrook - <a href="https://spector.rusff.me/profile.php?id=8">cын маминой подруги</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">bill skarsgard - <a href="https://spector.rusff.me/profile.php?id=8">cын маминой подруги</a> <i class="fas fa-heart"></i></p>
<p class="guest-item">oliver jackson-cohen - <a href="https://spector.rusff.me/profile.php?id=3">esquie</a> <i class="fas fa-heart"></i></p>
</div>
</div>
</div>
<!---- <div class="guest-footer">
место для каких-то навигационных ссылок / списка администрации / чего-то другого
</div>
</div>----->[/html]
Коды
Внешность:
<p class="guest-item">лицо - <a href="ссылка_на_профиль">ваш ник</a> <i class="fas fa-heart"></i></p>
В команду:
[hide=98989898989898]1. [b]Связь [/b] ответ 2. [b]что хочется делать? [/b] ответ[/hide]
