[hideprofile]
[html]
<style>
/* Палитра и размеры */
.folio-card {
--paper: #f5f3ef;
--panel: #fffefa;
--ink: #343738;
--muted: #696d69;
--line: #deded6;
--accent: #526759;
box-sizing: border-box;
position: relative;
width: 100%;
max-width: 860px;
margin: 24px auto;
padding: 24px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--paper);
color: var(--ink);
font: 16px/1.65 Arial, sans-serif;
text-align: left;
color-scheme: light;
}
.folio-card * { box-sizing: border-box; }
.folio-card .folio-radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
}
.folio-card .folio-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; }
.folio-card .folio-nav { display: flex; flex-direction: column; gap: 9px; padding-top: 7px; }
.folio-card .folio-caption { margin: 0 0 20px; color: var(--muted); font: 11px/1.5 Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.folio-card .folio-nav label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
margin: 0;
padding: 12px 15px;
border: 1px solid var(--line);
border-radius: 7px;
background: transparent;
color: var(--ink);
font: 14px/1.4 Arial, sans-serif;
cursor: pointer;
transition: background .18s ease, color .18s ease;
}
.folio-card .folio-nav label span { font-size: 10px; opacity: .65; }
.folio-card .folio-nav label:hover { background: var(--panel); }
.folio-card .folio-main { min-width: 0; min-height: 370px; padding: 30px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.folio-card .folio-panel { display: none; }
.folio-card .folio-kicker { margin-bottom: 16px; color: var(--accent); font: 11px/1.5 Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.folio-card .folio-title { margin: 0 0 22px; padding: 0; border: 0; background: none; color: var(--ink); font: normal 36px/1.12 Georgia, serif; letter-spacing: -1px; text-transform: none; }
.folio-card .folio-text { margin: 0 0 16px; padding: 0; font: inherit; color: var(--ink); }
.folio-card .folio-note { margin-top: 25px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font: 13px/1.65 Arial, sans-serif; }
.folio-card .folio-price { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.folio-card .folio-price strong { flex-shrink: 0; color: var(--accent); font-weight: 600; }
.folio-card .folio-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 19px; color: var(--muted); font: 11px/1.5 Arial, sans-serif; letter-spacing: .5px; }
/* Переключение без скриптов */
.folio-card .folio-radio:nth-of-type(1):checked ~ .folio-layout .folio-panel:nth-child(1),
.folio-card .folio-radio:nth-of-type(2):checked ~ .folio-layout .folio-panel:nth-child(2),
.folio-card .folio-radio:nth-of-type(3):checked ~ .folio-layout .folio-panel:nth-child(3) { display: block; }
.folio-card .folio-radio:nth-of-type(1):checked ~ .folio-layout > .folio-nav > label:nth-of-type(1),
.folio-card .folio-radio:nth-of-type(2):checked ~ .folio-layout > .folio-nav > label:nth-of-type(2),
.folio-card .folio-radio:nth-of-type(3):checked ~ .folio-layout > .folio-nav > label:nth-of-type(3) { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.folio-card .folio-radio:nth-of-type(1):focus-visible ~ .folio-layout > .folio-nav > label:nth-of-type(1),
.folio-card .folio-radio:nth-of-type(2):focus-visible ~ .folio-layout > .folio-nav > label:nth-of-type(2),
.folio-card .folio-radio:nth-of-type(3):focus-visible ~ .folio-layout > .folio-nav > label:nth-of-type(3) { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 620px) {
.folio-card { padding: 15px; }
.folio-card .folio-layout { grid-template-columns: minmax(0, 1fr); gap: 15px; }
.folio-card .folio-nav { flex-direction: row; flex-wrap: wrap; padding: 0; }
.folio-card .folio-caption { width: 100%; margin-bottom: 3px; }
.folio-card .folio-nav label { width: auto; flex: 1; min-width: 90px; padding: 10px; }
.folio-card .folio-main { padding: 23px 19px; min-height: 0; }
.folio-card .folio-title { font-size: 30px; }
.folio-card .folio-price { flex-wrap: wrap; gap: 3px 12px; }
}
@media (prefers-reduced-motion: reduce) { .folio-card .folio-nav label { transition: none; } }
/* Вкладки с примерами */
.folio-card .fg-switch { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.folio-card .fg-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 15px; }
.folio-card .fg-tabs label { display: block; margin: 0; padding: 7px 11px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--accent); font: 13px/1.5 Arial,sans-serif; cursor: pointer; transition: background .18s,color .18s; }
.folio-card .fg-tabs label:hover { background: var(--paper); }
.folio-card .fg-switch:nth-of-type(1):checked ~ .fg-tabs label:nth-child(1),
.folio-card .fg-switch:nth-of-type(2):checked ~ .fg-tabs label:nth-child(2),
.folio-card .fg-switch:nth-of-type(3):checked ~ .fg-tabs label:nth-child(3),
.folio-card .fg-switch:nth-of-type(4):checked ~ .fg-tabs label:nth-child(4) { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.folio-card .fg-switch:nth-of-type(1):focus-visible ~ .fg-tabs label:nth-child(1),
.folio-card .fg-switch:nth-of-type(2):focus-visible ~ .fg-tabs label:nth-child(2),
.folio-card .fg-switch:nth-of-type(3):focus-visible ~ .fg-tabs label:nth-child(3),
.folio-card .fg-switch:nth-of-type(4):focus-visible ~ .fg-tabs label:nth-child(4) { outline: 2px solid var(--accent); outline-offset: 3px; }
.folio-card .fg-panel { display: none; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.folio-card .fg-switch:nth-of-type(1):checked ~ .fg-panels > .fg-panel:nth-child(1),
.folio-card .fg-switch:nth-of-type(2):checked ~ .fg-panels > .fg-panel:nth-child(2),
.folio-card .fg-switch:nth-of-type(3):checked ~ .fg-panels > .fg-panel:nth-child(3),
.folio-card .fg-switch:nth-of-type(4):checked ~ .fg-panels > .fg-panel:nth-child(4) { display: grid; }
/* Клик по превью открывает его, повторный клик закрывает */
.folio-card .fg-shot { min-width: 0; height: 112px; margin: 0; padding: 0; border: 0; background: none; }
.folio-card .fg-shot summary { display: flex; align-items: center; justify-content: center; width: 100%; height: 112px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); cursor: zoom-in; list-style: none; }
.folio-card .fg-shot summary::-webkit-details-marker { display: none; }
.folio-card .fg-shot summary::marker { content: ''; }
.folio-card .fg-shot summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.folio-card .fg-shot img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; object-fit: cover; filter: saturate(.55) brightness(.8); transition: filter .22s ease; }
.folio-card .fg-shot summary:hover img,
.folio-card .fg-shot summary:focus-visible img { filter: saturate(1) brightness(1); }
.folio-card .fg-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; width: 100%; height: 100%; padding: 15px; color: var(--muted); background: var(--paper); font: 12px/1.5 Arial,sans-serif; text-align: center; }
.folio-card .fg-empty::before { content: '+'; font: 26px/1 Georgia,serif; opacity: .5; }
.folio-card .fg-shot[open] summary { position: fixed; inset: 0; z-index: 2147483647; width: 100%; height: 100%; padding: 48px 24px; border: 0; border-radius: 0; background: rgba(20,24,22,.88); cursor: zoom-out; }
.folio-card .fg-shot[open] summary::after { content: '× Закрыть'; position: absolute; top: 15px; right: 22px; color: #fff; font: 14px/1.5 Arial,sans-serif; }
.folio-card .fg-shot[open] img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: none; }
.folio-card .fg-shot[open] .fg-empty { width: 760px; max-width: 100%; height: 500px; max-height: 100%; border-radius: 9px; }
@media (max-width: 620px) { .folio-card .fg-panel { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .folio-card .fg-shot img,.folio-card .fg-tabs label { transition: none; } }
</style>
<div class="folio-card">
<input class="folio-radio" type="radio" name="folio-tabs-01" id="folio-about-01" aria-label="О себе" checked>
<input class="folio-radio" type="radio" name="folio-tabs-01" id="folio-design-01" aria-label="Цены">
<input class="folio-radio" type="radio" name="folio-tabs-01" id="folio-html-01" aria-label="Примеры">
<div class="folio-layout">
<div class="folio-nav">
<div class="folio-caption">Немного о работе</div>
<label for="folio-about-01">О себе <span>01</span></label>
<label for="folio-design-01">Цены <span>02</span></label>
<label for="folio-html-01">Примеры <span>03</span></label>
</div>
<div class="folio-main">
<section class="folio-panel">
<div class="folio-kicker">основная информация</div>
<h2 class="folio-title">Привет, я орех<br>и люблю эксперименты.</h2>
<p class="folio-text">Двигающаяся шапка, анимации, звуки калимбы на страницах? Сделать, как ни у кого еще не было — и не понятно, будет ли вообще работать? Сюдааа!<br><br>
Теперь серьезнее. Пеимущественно занимаюсь версткой форумов: собираю макеты, оформляю страницы и подгоняю детали под общую идею.</p>
<p class="folio-text">Фотошоп — на троечку, зато с удовольствием возьмусь за ваш готовый макет и превращу его в работающий дизайн со всякими уникальными штучками и приятными глазу мелочами.</p>
<p class="folio-text">Сроки выполнения зависят от объема работ, ориентировочно от 2-3 недель..</p>
<p class="folio-text"><<< листай меню, чтобы уверовать</p>
<div class="folio-note">Есть идея или референс? Напишите в личные сообщения — обсудим задачу, детали и стоимость.</div>
</section>
<section class="folio-panel">
<div class="folio-kicker">Услуги / стоимость</div>
<div class="folio-price"><span>Поставить на код <u>ваш</u> макет</span><strong>от 3 000 ₽</strong></div>
<div class="folio-price"><span>Собрать тест с 0</span><strong>от 5 000 ₽</strong></div>
<div class="folio-price"><span>Готовим полноценный дизайн</span><strong>от 10 000 ₽</strong></div>
<div class="folio-price"><span>Отдельно хтмл-коды, блоки, страницы, анимация</span><strong>обсуждаемо</strong></div>
<div class="folio-note">Итоговая стоимость зависит от объема работы. Все дополнительные функции обсуждаются отдельно.</div>
</section>
<section class="folio-panel">
<div class="folio-kicker">коды / дизайны</div>
<div class="fg-gallery">
<input class="fg-switch" type="radio" name="fg-examples-01" id="fg-category-1" aria-label="Дизайны" checked>
<input class="fg-switch" type="radio" name="fg-examples-01" id="fg-category-2" aria-label="Автобанк">
<input class="fg-switch" type="radio" name="fg-examples-01" id="fg-category-3" aria-label="Список ролей">
<input class="fg-switch" type="radio" name="fg-examples-01" id="fg-category-4" aria-label="Питомцы">
<div class="fg-tabs">
<label for="fg-category-1">Дизайны</label>
<label for="fg-category-2">Автобанк</label>
<label for="fg-category-3">Список ролей</label>
<label for="fg-category-4">Питомцы</label>
</div>
<div class="fg-panels">
<!-- Дизайны -->
<div class="fg-panel">
<details class="fg-shot">
<summary aria-label="Дизайны: открыть или закрыть пример 1">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Дизайны — пример 1"> -->
<span class="fg-empty">Дизайны<br>Пример 1</span>
</summary>
</details>
<details class="fg-shot">
<summary aria-label="Дизайны: открыть или закрыть пример 2">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Дизайны — пример 2"> -->
<span class="fg-empty">Дизайны<br>Пример 2</span>
</summary>
</details>
<details class="fg-shot">
<summary aria-label="Дизайны: открыть или закрыть пример 3">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Дизайны — пример 3"> -->
<span class="fg-empty">Дизайны<br>Пример 3</span>
</summary>
</details>
</div>
<!-- Автобанк -->
<div class="fg-panel">
<details class="fg-shot">
<summary aria-label="Автобанк: открыть или закрыть пример 1">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Автобанк — пример 1"> -->
<span class="fg-empty">Автобанк<br>Пример 1</span>
</summary>
</details>
<details class="fg-shot">
<summary aria-label="Автобанк: открыть или закрыть пример 2">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Автобанк — пример 2"> -->
<span class="fg-empty">Автобанк<br>Пример 2</span>
</summary>
</details>
<details class="fg-shot">
<summary aria-label="Автобанк: открыть или закрыть пример 3">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Автобанк — пример 3"> -->
<span class="fg-empty">Автобанк<br>Пример 3</span>
</summary>
</details>
</div>
<!-- Список ролей -->
<div class="fg-panel">
<details class="fg-shot">
<summary aria-label="Список ролей: открыть или закрыть пример 1">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Список ролей — пример 1"> -->
<span class="fg-empty">Список ролей<br>Пример 1</span>
</summary>
</details>
<details class="fg-shot">
<summary aria-label="Список ролей: открыть или закрыть пример 2">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Список ролей — пример 2"> -->
<span class="fg-empty">Список ролей<br>Пример 2</span>
</summary>
</details>
<details class="fg-shot">
<summary aria-label="Список ролей: открыть или закрыть пример 3">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Список ролей — пример 3"> -->
<span class="fg-empty">Список ролей<br>Пример 3</span>
</summary>
</details>
</div>
<!-- Питомцы -->
<div class="fg-panel">
<details class="fg-shot">
<summary aria-label="Питомцы: открыть или закрыть пример 1">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Питомцы — пример 1"> -->
<span class="fg-empty">Питомцы<br>Пример 1</span>
</summary>
</details>
<details class="fg-shot">
<summary aria-label="Питомцы: открыть или закрыть пример 2">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Питомцы — пример 2"> -->
<span class="fg-empty">Питомцы<br>Пример 2</span>
</summary>
</details>
<details class="fg-shot">
<summary aria-label="Питомцы: открыть или закрыть пример 3">
<!-- Замените span ниже на <img src="ССЫЛКА_НА_КАРТИНКУ" alt="Питомцы — пример 3"> -->
<span class="fg-empty">Питомцы<br>Пример 3</span>
</summary>
</details>
</div>
</div>
</div>
<p class="folio-text">Любая ваша потребность и фантазия, всё обсуждаемо..</p>
<div class="folio-note">Состав работы и стоимость согласуем под вашу задачу.</div>
</section>
</div>
</div>
</div>
[/html]
