<!--HTML-->
<script>

    $(document).ready(function () {
        $('.guest-btn').click(function () {
            var id = $(this).attr('id');
            if (id === 'names') {
                $('#reserve-faces').show();
                $('#reserve-names').hide();
                $('.reserve-header').text('придержанные внешности');
            } else if (id === 'fnames') {
                $('#reserve-faces').hide();
                $('#reserve-names').show();
                $('.reserve-header').text('имена и Фамилии');
            }
        });

    });
</script>
<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto:900&display=swap&subset=cyrillic');
    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap');

    .guest-theme {
        position: relative;
        background: url(https://forumstatic.ru/files/000e/d6/90/59564.png);
        width: 672px;
        height: 389px;
        color: #7e7e7e;-webkit-text-size-adjust: none; text-size-adjust: none; 
    }

    .guest-theme text {
        position: absolute;
        font-size: 11px;
        font-family: 'Tahoma';
        top: 52px;
     line-height:13px;
    width: 420px;
        left: 20px;
text-shadow: 0px 1px 0 #ffffff8c;
    }

    .guest-theme text img {
        position: relative;
        top: 7px;
        padding-right: 5px;
    }

    .guest-theme .reserve-header {
    font-weight: bold;
    top: 60px;
    left: 439px;
    position: absolute;
    color: white;
    font-size: 12px!important;
    font-family: 'Roboto'!important;
    width: 192px;
    padding: 1px 5px 1px 4px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    background: #d7af76;
    text-align: center;
    box-shadow: inset 0px 0px 3px #a2834f;
    border: solid 1px #e8cda5;
    text-shadow: 1px 1px 0px #b99970;
    outline: 1px solid #cc9c5c;
    }

    .guest-theme .reserve {
        position: absolute;
        width: 208px;
        padding-right: 3px;
        overflow-y: auto;
        overflow-x: hidden;
        height: 238px;
        top: 86px;
        left: 432px;
    }

    .guest-theme .reserve name {
    display: inline-block;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: bold;
    width: 191px;
    margin-left: 7px;
    background: #d2d2d2;
    text-transform: uppercase;
    color: #7e7e7e;
    height: 38px;
    position: relative;
    box-shadow: inset 0px 0px 2px #b5b5b5;
    }

    .guest-theme .reserve face {
    position: absolute;
    top: 1px;
    font-size: 14px;
    font-size: 12px!important;
    font-family: 'Roboto'!important;
    letter-spacing: 0.5px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0px 1px 0 #ffffff8c;
line-height: 19px;
    }

    .guest-theme .reserve name nik {
    border-top-style: solid;
    border-width: 1px;
    font-size: 12px;
    position: absolute;
    top: 25px;
    margin-top: -4px;
    text-transform: lowercase;
    font-size: 10px!important;
    font-weight: 600;
    font-family: 'Roboto'!important;
    letter-spacing: 0.5px;
    text-shadow: 0px 1px 0 #ffffff8c;
    }

    .guest-theme .reserve name:nth-child(even) nik {
        border-color: #d6ae76 !important;
    }

    .guest-theme .name nik {
        border-top-style: solid;
        border-width: 1px;
        font-size: 12px;
        position: absolute;
        top: 25px;
    }

    .guest-theme .reserve name:nth-child(odd) nik {
        border-color: #6e82b1;
    }

    .guest-theme .reserve name:nth-child(even):before {
        display: inline-block;
        width: 5px;
        height: inherit;
        background: #d6ae76;
        content: '';
        margin-right: 5px;
    }

    .guest-theme .reserve name:nth-child(odd):before {
        display: inline-block;
        width: 5px;
        height: inherit;
        background: #6e82b1;
        content: '';
        margin-right: 5px;
    }

    .guest-theme .guest-header {
   color: white;
    position: absolute;
    width: inherit;
    text-align: center;
    top: 7px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px !important;
    font-family: 'Roboto' !important;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0px rgb(84, 117, 59);  
    }

    .guest-theme .guest-btn {
    position: absolute;
    background-repeat: no-repeat;
    width: 87px;
    height: 14px;
    top: 342px;
    text-align: center;
    padding-top: 3px;
    cursor: pointer;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff !important;
    font-size: 9px !important;
    font-family: 'Roboto' !important;
    background: #799660;
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: inset 0px 0px 3px #6c7d5c;
    border: solid 1px #a2b990;
    /* text-shadow: 1px 1px 0px #6e688c; */
    outline: 1px solid #7f9c66;
    /* letter-spacing: 2px; */
    }

    .guest-theme .guest-btn#names {
        left: 445px;
    }

    .guest-theme .guest-btn#fnames {
        left: 545px;
    }

</style>
<div class="guest-theme">
    <div class="guest-header">welcome to los angeles</div>
    <text>
<img src="https://forumstatic.ru/files/000e/d6/90/48099.png"><br><br>
<div style="   width: 400px;text-align: justify;line-height: 14px;">Если Рим  — столица Италии, то Лос-Анджелес — столица мира. Место, где невинные наслаждаются грязными мечтами, а коварные оказываются в объятиях любовников. Залетай на шумные вечеринки Голливуда, оседлай океанскую волну или съешь хот-дог на многолюдной улице. Жизнь в Лос-Анджелесе подобна возвращению в райские сады, но, никогда не забывай, что за любым углом тебя может ждать змей-искуситель. Хорошо подобное или плохо — решать только тебе. <br>
Этот оазис отвратителен и прекрасен — ощущение такое же, как ходить в Макдональдс на завтрак, обед и ужин. Приехав сюда однажды, ты будешь не в силах стереть город из своей памяти. Возможно, именно сегодня ты обретешь свою La Familia! Готов испытать судьбу и нырнуть с головой в водоворот?</div > <br>

<div class="welcome-text" style="color: white; 
    width: 305px;
    padding: 1px 5px 1px 4px;
    letter-spacing: 0.2px;
    color: #ffffff!important;
    font-weight: bold;
    font-size: 9px!important;
    font-family: 'Roboto'!important;
    text-transform: uppercase;
    background: #d7af76;
    text-align: center;
    box-shadow: inset 0px 0px 3px #a2834f;
    border: solid 1px #e8cda5;
    text-shadow: 1px 1px 0px #b99970;
    outline: 1px solid #cc9c5c;">
       Время пошло. Спойлер: тебе это понравится.</div>
       
 <img src="https://forumstatic.ru/files/000e/d6/90/16052.png" style="padding-bottom: 3px;"> Внешности за гостями придерживаются сроком на 12 часов.<br>
 <img src="https://forumstatic.ru/files/000e/d6/90/16052.png" style="padding-bottom: 3px;"> Сообщение раз в сутки гарантирует сохранность внешности за профилем.<br>
<img src="https://forumstatic.ru/files/000e/d6/90/16052.png" style="padding-bottom: 3px;"> Внешности "на подумать" не придерживаются.
           </text>
    <div class="reserve-header">
        придержанные внешности
    </div>
    <div class="guest-btn" id="names">внешности</div>
    <div class="guest-btn" id="fnames">имена</div>
    <div class="reserve" id="reserve-faces">

<name><face>adam driver</face><nik>ваш ник</nik></name>
<name><face>ana de armas</face><nik>ваш ник</nik></name>
<name><face>anya chalotra</face><nik>ваш ник</nik></name>
<name><face>billie eilish</face><nik>ваш ник</nik></name>
<name><face>bradley james</face><nik>ваш ник</nik></name>
<name><face>camila mendes</face><nik>ваш ник</nik></name>
<name><face>can yaman</face><nik>ваш ник</nik></name>
<name><face>charles melton</face><nik>ваш ник</nik></name>
<name><face>chris wood</face><nik>ваш ник</nik></name>
<name><face>danna paola</face><nik>ваш ник</nik></name>
<name><face>daniel sharman</face><nik>ваш ник</nik></name>
<name><face>david dobrik</face><nik>ваш ник</nik></name>
<name><face>deborah ann woll</face><nik>ваш ник</nik></name>
<name><face>demet ozdemir</face><nik>ваш ник</nik></name>
<name><face>dua lipa</face><nik>ваш ник</nik></name>
<name><face>eiza gonzalez</face><nik>ваш ник</nik></name>
<name><face>emilia clarke</face><nik>ваш ник</nik></name>
<name><face>ester expósito</face><nik>ваш ник</nik></name>
<name><face>ester expósito</face><nik>ваш ник</nik></name>
<name><face>florence pugh</face><nik>ваш ник</nik></name>
<name><face>g‐eazy</face><nik>ваш ник</nik></name>
<name><face>jacob elordi</face><nik>ваш ник</nik></name>
<name><face>jake gyllenhaal</face><nik>ваш ник</nik></name>
<name><face>joaquin phoenix</face><nik>ваш ник</nik></name>
<name><face>jodie comer</face><nik>ваш ник</nik></name>
<name><face>joel kinnaman</face><nik>ваш ник</nik></name>
<name><face>katherine mcnamara</face><nik>ваш ник</nik></name>
<name><face>keira knightley</face><nik>ваш ник</nik></name>
<name><face>lily collins</face><nik>ваш ник</nik></name>
<name><face>lucy boynton</face><nik>ваш ник</nik></name>
<name><face>madelaine petsch</face><nik>ваш ник</nik></name>
<name><face>madison beer</face><nik>ваш ник</nik></name>
<name><face>maddison brown</face><nik>ваш ник</nik></name>
<name><face>matteo martari</face><nik>ваш ник</nik></name>
<name><face>mgk</face><nik>ваш ник</nik></name>
<name><face>nicola peltz</face><nik>ваш ник</nik></name>
<name><face>noah centineo</face><nik>ваш ник</nik></name>
<name><face>phoebe tonkin</face><nik>ваш ник</nik></name>
<name><face>richard madden</face><nik>ваш ник</nik></name>
<name><face>rooney mara</face><nik>ваш ник</nik></name>
<name><face>ryan guzman</face><nik>ваш ник</nik></name>
<name><face>samara weaving</face><nik>ваш ник</nik></name>
<name><face>summer bishil</face><nik>ваш ник</nik></name>
<name><face>timothée chalamet</face><nik>ваш ник</nik></name>
<name><face>zayn malik</face><nik>ваш ник</nik></name>
<name><face>zoey deutch</face><nik>ваш ник</nik></name>
    </div>

    <div class="reserve" id="reserve-names" style="display:none">
<name><face>adaline [n]</face><nik>ник</nik></name>
<name><face>aidan [n]</face><nik>ник</nik></name>
<name><face>alysa [n]</face><nik>ник</nik></name>
<name><face>baioni [s]</face><nik>ник</nik></name>
<name><face>bezzerides [s]</face><nik>ник</nik></name>
<name><face>bloom [n]</face><nik>ник</nik></name>
<name><face>brant [s]</face><nik>ник</nik></name>
<name><face>chris [n]</face><nik>ник</nik></name>
<name><face>covid [s]</face><nik>ник</nik></name>
<name><face>kelly [s]</face><nik>ник</nik></name>
<name><face>logan [n]</face><nik>ник</nik></name>
<name><face>lucas [n]</face><nik>ник</nik></name>
<name><face>luma [n]</face><nik>ник</nik></name>
<name><face>melanie [n]</face><nik>ник</nik></name>
<name><face>merlowe [s]</face><nik>ник</nik></name>
<name><face>ocean [s]</face><nik>ник</nik></name>
<name><face>oddveig [s]</face><nik>ник</nik></name>
<name><face>romeo [n]</face><nik>ник</nik></name>
<name><face>sadie [n]</face><nik>ник</nik></name>
    </div>

</div>

<name><face>внешность на англ.</face><nik>ваш ник</nik></name>