005. Alternative

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
@import url('https://fonts.googleapis.com/css?family=Karla:300,300i,400,400i,600,700,800');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,600;0,800;1,300;1,400;1,500;1,600;1,800&display=swap');
body, a, a:hover{ cursor:url('http://i.picpar.com/kBOc.png'),auto;}

body{
background: #f1f1f1;
}
::-webkit-scrollbar-thumb:vertical{
width: 0px;
background-color:  transparent;
}
::-webkit-scrollbar {
width: 0px;
background-color: transparent;
}
::selection {
background: transparent;
color: rgba(366,366,366,.5);
}
::-moz-selection {
background: transparent;
color: rgba(366,366,366,.5);
}
.background{
position: fixed; margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
height: 600px; width: 800px;
background: #fff;
border: 1px solid rgb(232 156 156 / 50%);
border-radius: 3px;
overflow: hidden;
}
.left{
display: block;
height: 600px; width: 300px;
float: left;
overflow: auto;

}
.name{
display: block;
margin-top: 25px; margin-left: 25px;
height: 100px; width: 250px;
background: rgb(232 156 156 / 50%); /*-- big title background color --*/
line-height: 100px;
font-family: sarabun;
font-weight: 900;
font-size: 50px;
color: #fff;
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 2px;
text-align: center;
}
.desc{
display: block;
margin-top: 25px; margin-left: 25px;
height: 425px; width: 250px;
text-align: justify;
font-family: karla;
font-size: 11px;
font-weight: 400;
color: #222; /*-- side bar description text color --*/
text-transform: uppercase;
line-height: 22px;
overflow: auto;
}
.desc p{
border-left: 1px solid rgb(232 156 156 / 50%); /*-- paragraph left border color --*/
padding-left: 10px;
line-height: 15px;
font-style: italic;
margin-top: 5px;
margin-bottom: 0px;
color: #444; /*-- paragraph text color --*/
}
.desc h1{
color: #6d6d6d; /*-- description title text color --*/
font-size: 15px;
font-weight: 700;
letter-spacing: 2px;
font-style: normal;
margin: 5px;
padding: 0px;
line-height: 15px;
}
.right{
float: left;
height: 550px; width: 450px;
overflow: auto;
display: block;
border-left: 1px solid rgb(232 156 156 / 50%); /*-- separating border color --*/
padding-left: 25px;
margin-top: 25px;
}
.right h1{
display: block;
margin-top: 0px;
height: 35px; padding: 5px 10px;
background: rgb(232 156 156 / 50%); /*-- right header background color --*/
line-height: 35px;
font-family: sarabun;
font-weight: 900;
font-size: 25px;
color: #fff; /*-- right header text color --*/
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 2px;
text-align: left;
}
.pal{
width: 220px; height: 100px;
display: inline-block;
margin-top: 11px;
}
.paliconbg{
float: left;
display: block;
margin-top: 10px; margin-left: 10px;
width: 100px; height: 100px;
background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgb(232 156 156 / 50%) 6px, rgb(232 156 156 / 50%) 7px); /*-- change the "rgb(0 0 0 / 10%)" to switch the colors.
it's the line decoration behind the icon. */

border-radius: 50%;
}
.palicon{
float: left;
display: block;
height: 100px; width: 100px;
border-radius: 50%;
margin-top: -10px; margin-left: -10px;
border: 2px solid #fff; /*-- icon border --*/
background-image: url('/'); /*-- do no touch, you change the icon png within the HTML --*/
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.palname{
float: left;
display: block;
margin-top: 70px; margin-left: -50px;
height: 25px; width: 150px;
line-height: 25px;
font-family: karla;
font-weight: 900;
font-size: 20px;
color: rgb(232 156 156 / 1); /*-- icon name text color --*/
text-shadow: -1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, 1px 1px 0px #fff; /*-- icon name text border --*/
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 2px;
text-align: left;
text-decoration: none;
transition: .7s linear;
}
.palname:hover{
color: #fff; /*-- icon name text color on hover --*/
text-shadow: -1px 1px 0px rgb(232 156 156 / 1), -1px -1px 0px rgb(232 156 156 / 1), 1px -1px 0px rgb(232 156 156 / 1), 1px 1px 0px rgb(232 156 156 / 1); /*-- icon name text border on hover --*/
transition: .7s linear;
}


</style>

<div class="background">

<div class="left">

<div class="name">hub.</div>
<div class="desc">
<p>paragraphs generally look like this.</p>
<h1>title,</h1>
<p><b>bold</b>, something, something.</p>
<h1>&</h1>
<p><b>ahhhh</b>: it does scroll, so you can write as much as you want.</p>

</div>


</div>

<div class="right">

<h1>title.</h1>

<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('https://res.cloudinary.com/teepublic/image/private/s--dnuTPBAV--/t_Resized%20Artwork/c_fit,g_north_west,h_954,w_954/co_fac2cd,e_outline:48/co_fac2cd,e_outline:inner_fill:48/co_ffffff,e_outline:48/co_ffffff,e_outline:inner_fill:48/co_bbbbbb,e_outline:3:1000/c_mpad,g_center,h_1260,w_1260/b_rgb:eeeeee/c_limit,f_auto,h_630,q_90,w_630/v1575619558/production/designs/7064774_0.jpg');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>

<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>


<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>


<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>


<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>


<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>


<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>


<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>


<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>


<div class="pal">
<div class="paliconbg"><div class="palicon" style="background-image: url('iconimagehere');"></div></div>
<a href="https://roleplay.chat/profile.php?user=linkhere" class="palname" target="_blank">name.</a>
</div>






</div></div>