Код:
<!--HTML--><link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,600,700,800,900|Roboto|Raleway|Sawarabi+Gothic" rel="stylesheet">
<style>
#faceclaims {
width: 500px;
background: #fff;
height: auto;
position: relative;
margin: 30px auto;
border: 1px solid #ccc;
outline: 1px solid #bb9656;
outline-offset: 10px;
font-family: roboto;
color: #191919;
line-height: 170%;
font-size: 11px;
margin-bottom: 10px;
}
#faceclaims maintitle {
position: relative;
display: block;
height: 60px;
border-bottom: 1px solid #bb9656;
overflow: hidden;
font-family: playfair display;
font-weight: 800;
text-align: center;
color: #bababa;
text-transform: uppercase;
line-height: 230%;
font-size: 40px;
}
#faceclaims text {
font-family: roboto;
padding: 30px;
display: block;
color: #191919;
text-align: justify;
font-size: 11px;
line-height: 150%;
}
#faceclaims subtitle {
position: relative;
display: block;
height: 20px;
border-bottom: 1px solid #ccc;
overflow: hidden;
font-family: playfair display;
font-weight: 800;
text-align: left;
color: #bababa;
text-transform: uppercase;
line-height: 130%;
font-size: 20px;
}
#faceclaims descript {
display: block;
color: #ddd!important;
font-size: 9px!important;
}
#faceclaims nameblock {
width: 300px;
height: 20px;
position: relative;
display: flex;
margin: 2px auto;
justify-content: space-between;
color: #191919;
line-height: 200%;
font-size: 11px;
text-transform: uppercase;
border-bottom: 1px solid #eee;
}
#faceclaims faceclaim {
display: block;
}
#faceclaims a {
color: #bb9656;
display: block;
text-decoration: none;
}
</style>
<div id="faceclaims">
<maintitle>Face Claims</maintitle>
<text>Face claims are limited to signed actors, musicians, and models on TV. No internet personalities or youtube stars will be permitted.</text>
<subtitle>A-F</subtitle>
<text>
<nameblock><descript>Face Claim</descript> <descript>Character</descript></nameblock>
<nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
</text>
<subtitle>G-M</subtitle>
<text>
<nameblock><descript>Face Claim</descript> <descript>Character</descript></nameblock>
<nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
<nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
<nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
<nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
</text>
<subtitle>N-Z</subtitle>
<text>
<nameblock><descript>Face Claim</descript> <descript>Character</descript></nameblock>
<nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
<nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
<nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
</text>
</div>
