[html]
<style>
/* =========================================================
BAD ATMOSPHERE — WANT TO SEE / FACE CLAIM
========================================================= */
#ba_wts_face {
display:block !important;
width:94% !important;
max-width:860px !important;
margin:28px auto !important;
padding:0 !important;
background:#f1ede5 !important;
border-top:1px solid #2b2823 !important;
border-bottom:1px solid #bdb2a5 !important;
box-shadow:0 12px 28px rgba(55,47,39,.06) !important;
color:#2b2824 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:14px !important;
line-height:1.75 !important;
box-sizing:border-box !important;
}
#ba_wts_face *,
#ba_wts_face *::before,
#ba_wts_face *::after {
box-sizing:border-box !important;
}
/* HEADER */
#ba_wts_face .wf_header {
padding:34px 42px 28px !important;
text-align:center !important;
}
#ba_wts_face .wf_kicker {
display:block !important;
margin:0 0 18px !important;
color:#8b8175 !important;
font-size:8px !important;
font-weight:bold !important;
line-height:14px !important;
letter-spacing:2.5px !important;
text-transform:uppercase !important;
}
#ba_wts_face .wf_line {
display:block !important;
width:90px !important;
height:1px !important;
margin:0 auto !important;
background:#988b7d !important;
}
/* IMAGES */
#ba_wts_face .wf_images {
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:14px !important;
padding:0 24px !important;
}
#ba_wts_face .wf_image {
display:block !important;
overflow:hidden !important;
border:1px solid #b9afa3 !important;
background:#ddd3c6 !important;
}
#ba_wts_face .wf_image img {
display:block !important;
width:100% !important;
height:270px !important;
object-fit:cover !important;
filter:saturate(.78) contrast(.98) !important;
}
/* NAME */
#ba_wts_face .wf_identity {
padding:31px 42px 29px !important;
text-align:center !important;
}
#ba_wts_face .wf_name {
display:block !important;
color:#282520 !important;
font-family:Georgia,"Times New Roman",serif !important;
font-size:28px !important;
font-weight:normal !important;
line-height:36px !important;
letter-spacing:2px !important;
text-transform:uppercase !important;
}
#ba_wts_face .wf_subtitle {
display:block !important;
margin:9px 0 0 !important;
color:#8f8579 !important;
font-size:8px !important;
font-weight:bold !important;
line-height:14px !important;
letter-spacing:2px !important;
text-transform:uppercase !important;
}
#ba_wts_face .wf_identity_line {
display:block !important;
width:90px !important;
height:1px !important;
margin:22px auto 0 !important;
background:#988b7d !important;
}
/* BODY */
#ba_wts_face .wf_body {
padding:31px 42px 35px !important;
background:rgba(214,204,191,.16) !important;
border-top:1px solid #c6bbae !important;
}
#ba_wts_face .wf_label {
display:block !important;
margin:0 0 17px !important;
color:#8b8175 !important;
font-size:8px !important;
font-weight:bold !important;
line-height:14px !important;
letter-spacing:2px !important;
text-transform:uppercase !important;
}
#ba_wts_face p {
margin:0 0 14px !important;
color:#38342f !important;
font-size:13px !important;
line-height:22px !important;
}
#ba_wts_face p:last-child {
margin-bottom:0 !important;
}
#ba_wts_face .wf_note {
display:block !important;
margin:19px 0 0 !important;
padding:12px 15px !important;
background:#e4dcd1 !important;
border-left:2px solid #968675 !important;
color:#71685e !important;
font-family:Georgia,"Times New Roman",serif !important;
font-size:12px !important;
font-style:italic !important;
line-height:19px !important;
}
/* FINAL */
#ba_wts_face .wf_final {
padding:28px 42px 30px !important;
background:#d8cec1 !important;
border-top:1px solid #aa9c8c !important;
text-align:center !important;
}
#ba_wts_face .wf_final_line {
display:block !important;
width:90px !important;
height:1px !important;
margin:0 auto 18px !important;
background:#87796a !important;
}
#ba_wts_face .wf_final_text {
display:block !important;
color:#766b60 !important;
font-size:8px !important;
font-weight:bold !important;
line-height:14px !important;
letter-spacing:2.1px !important;
text-transform:uppercase !important;
}
/* MOBILE */
@media screen and (max-width:650px) {
#ba_wts_face {
width:100% !important;
margin:18px auto !important;
}
#ba_wts_face .wf_header,
#ba_wts_face .wf_identity,
#ba_wts_face .wf_body,
#ba_wts_face .wf_final {
padding-left:22px !important;
padding-right:22px !important;
}
#ba_wts_face .wf_images {
grid-template-columns:1fr !important;
padding:0 14px !important;
}
#ba_wts_face .wf_image img {
height:auto !important;
}
#ba_wts_face .wf_name {
font-size:24px !important;
line-height:31px !important;
}
}
</style>
<div id="ba_wts_face">
<div class="wf_header">
<span class="wf_kicker">
Bad Atmosphere / Want To See / Face Claim
</span>
<span class="wf_line"></span>
</div>
<div class="wf_images">
<div class="wf_image">
<img
src="https://media.tenor.com/vH3WmTd8NY0AAAAM/lady-gaga-911.gif"
alt="Lady Gaga"
>
</div>
<div class="wf_image">
<img
src="https://media.tenor.com/vH3WmTd8NY0AAAAM/lady-gaga-911.gif"
alt="Lady Gaga"
>
</div>
</div>
<div class="wf_identity">
<span class="wf_name">
Lady Gaga
</span>
<span class="wf_subtitle">
Хочу видеть на форуме
</span>
<span class="wf_identity_line"></span>
</div>
<div class="wf_body">
<span class="wf_label">
Your Face / Your Story
</span>
<p>
Кем угодно.
</p>
<p>
Певицей, баристой, копом, хирургом, владелицей галереи,
женщиной с тремя разводами или человеком, который просто
каждое утро покупает кофе в одном и том же месте.
</p>
<p>
Никакой готовой роли за внешностью не закреплено.
Просто очень хочется однажды открыть форум и увидеть здесь это лицо.
</p>
<div class="wf_note">
Остальное придумайте сами. Мы верим в вас.
</div>
</div>
<div class="wf_final">
<span class="wf_final_line"></span>
<span class="wf_final_text">
Same Face / Your Story
</span>
</div>
</div>
[/html]
