123
шаблон роут 66
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться22026-07-10 03:56:16
[html]
<style>
div.route66 {
width: 830px;
height: 680px;
background-image: url(https://forumstatic.ru/files/001c/97/3a/90132.png);
position: relative;
margin: auto !important;
}
div.route66 * {
box-sizing: border-box;
}
div.route66 .desc-left {
width: 497px;
height: 134px;
top: 195px;
left: 25px;
gap: 11px;
padding: 13px 26px;
border-radius: 5px;
background-color: rgba(49, 51, 50, 1);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
position: absolute;
font-family: Pragmatica;
font-weight: 400;
font-size: 10px;
line-height: 140%;
text-transform: lowercase;
color: rgba(233, 233, 233, 1);
white-space: pre-wrap;
}
div.route66 .desc-right {
width: 264px;
height: 300px;
top: 195px;
right: 22px;
gap: 11px;
padding: 13px 26px;
border-radius: 5px;
background-color: rgba(49, 51, 50, 1);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
position: absolute;
font-family: Pragmatica;
font-weight: 400;
font-size: 10px;
line-height: 140%;
text-transform: lowercase;
color: rgba(233, 233, 233, 1);
white-space: pre-wrap;
}
div.route66 .desc-right ttl {
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 12px !important;
line-height: 1;
color: rgba(49, 51, 50, 1);
background: white;
padding: 2px 5px;
margin: 0 auto 10px !important;
display: block;
width: fit-content;
}
div.route66 .desc-right span {
padding-right: 5px;
overflow: auto;
display: block;
width: 100%;
height: 80%;
text-align: left !important;
}
div.route66 .route-tarot {
width: 500px;
height: 309px;
position: absolute;
top: 350px;
left: 25px;
display: flex;
justify-content: space-between;
}
div.route66 .route-tarot > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
div.route66 .route-tarot > div ttl {
color: rgba(156, 72, 48, 1);
font-family: Spectral;
font-weight: 600;
font-style: Italic;
font-size: 18px !important;
line-height: 1;
text-align: center;
text-transform: lowercase;
}
div.route66 .route-tarot > div span {
background-color: rgba(156, 72, 48, 1);
font-family: Instrument Serif;
font-weight: 400;
font-size: 12px !important;
leading-trim: NONE;
line-height: 1;
letter-spacing: -2%;
text-align: center;
text-transform: lowercase;
color: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 11.7px 0px rgba(132, 57, 57, 1);
border-radius: 50px;
padding: 5px 11px;
}
div.route66 .route-arts {
width: 264px;
position: absolute;
top: 510px;
right: 22px;
padding-top: 26px;
}
div.route66 .route-arts > div {
display: flex;
gap: 11px;
justify-content: center;
}
div.route66 .route-arts > div > div {
position: relative;
}
div.route66 .route-arts > div > div span {
background-color: rgba(156, 72, 48, 1);
font-family: Instrument Serif;
font-weight: 400;
font-size: 12px !important;
line-height: 1;
letter-spacing: -2%;
text-align: center;
text-transform: lowercase;
color: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 11.7px 0px rgba(132, 57, 57, 1);
border-radius: 50px;
padding: 5px 11px;
position: absolute;
top: -5px;
right: -5px;
z-index: 5;
}
div.route66 .route-arts > ttl {
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 11px !important;
line-height: 1;
color: rgba(49, 51, 50, 1);
background: white;
padding: 2px 5px;
display: block;
width: max-content;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
}
div.route66 .route-arts img {
background-color: rgba(49, 51, 50, 1);
border: 1px solid rgba(70, 70, 70, 1);
width: 72px;
height: 72px;
border-radius: 5px;
object-fit: contain;
}
div.route66 .route-arts desc {
position: absolute;
background-color: rgba(49, 51, 50, 1);
color: rgba(233, 233, 233, 1);
font-family: Pragmatica;
font-weight: 400;
font-size: 10px !important;
line-height: 120%;
text-transform: lowercase;
padding: 10px;
max-width: 150px;
min-width: 120px;
text-align: center;
top: 85%;
z-index: 5;
transform: translateX(-50%);
left: 50%;
pointer-events: none;
opacity: 0;
border-radius: 5px;
border: 1px solid rgba(70, 70, 70, 1);
transition: .3s ease .1s;
}
div.route66 .route-arts > div> div:hover desc {
opacity: 1;
}
div.route66 .route-arts > span {
font-family: Pragmatica;
font-weight: 400;
font-size: 9px !important;
line-height: 140%;
text-transform: lowercase;
color: rgba(162, 162, 162, 1);
margin: 10px auto;
display: block;
width: 236px;
}
</style>
<div class='route66'>
<!-------- описание слева ------------------->
<div class='desc-left'>иногда, чтобы изменить свою судьбу, достаточно свернуть не на ту дорогу.
добро пожаловать на route 66: fortune stop — загадочную остановку посреди легендарного хайвея. здесь среди карт таро, хрустальных шаров и старых радиоприёмников каждый путник может узнать, что приготовила ему судьба.
каждая карта сама выбирает своего владельца.
сегодня и у вас есть шанс узнать, что приготовила дорога.
</div>
<!-------- описание справа ------------------->
<div class='desc-right'>
<ttl>как это работает</ttl><span>
выберите одну из трёх карт судьбы:
✨15$ — небольшое предсказание.
✨ 25$ — редкое пророчество.
✨ 50$ — легендарное предсказание.
дополнительная остановка
выполните дополнительное задание и получите случайный тотем — мистический сувенир, который станет памятным символом вашей остановки на route 66. какой именно тотем достанется вам — заранее не знает никто.
дополнительное задание: составить оккультный плейлист (минимум 5 песен) для поездки по route 66; концепт: тайны, мистика, что-то волнующее и настораживающее ✨
</span></div>
<!-------- таро ------------------->
<div class='route-tarot'>
<div><ttl>колесо фортуны</ttl>
<img src='https://forumstatic.ru/files/001c/97/3a/55785.png'>
<span>15 $</span>
</div>
<div><ttl>повешенный</ttl>
<img src='https://forumstatic.ru/files/001c/97/3a/76959.png'>
<span>25 $</span>
</div>
<div><ttl>верховная жрица</ttl>
<img src='https://forumstatic.ru/files/001c/97/3a/18030.png'>
<span>50 $</span>
</div>
</div>
<!-------- артефакты ------------------->
<div class='route-arts'>
<ttl>рандомный оберег* за дополнительное задание**</ttl><div>
<div>
<span>01</span>
<img src='https://forumstatic.ru/files/0017/a7/4c/50242.png'>
<desc>восполнение 3х дней в марафоне</desc>
</div>
<div>
<span>02</span>
<img src='https://forumstatic.ru/files/0017/a7/4c/68209.png'>
<desc>фон+уголок у магазине</desc>
</div>
<div>
<span>03</span>
<img src='https://forumstatic.ru/files/0017/a7/4c/51646.png'>
<desc>награда в конкурсе без выполнения задания</desc>
</div>
</div><span>*тотем **информация о свойстве тотема появляется при наведении</span>
</div></div>[/html][hideprofile]
Страница: 1
