<!--HTML--><center><style>@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
/*font-family: 'Playfair Display', serif;*/
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");
/*font-family: 'Roboto Slab', serif;*/
.hogbase {
--orange:#6d1414;
--light: #dbe7ed;
--dark: #2d160a;
position: relative;
width: 560px;
height: 560px;
border: 20px solid var(--orange);
background: var(--light);
overflow: hidden;
}
.hogbasemain {
position: absolute;
top: 6px;
left: 6px;
height: 560px;
width: 560px;
overflow: hidden;
}
/* TILE TILE TILE TILE TILE TILE TILE TILE */
.hogtile1 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile2 {
position: absolute;
top: 0px;
left: 276px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile3 {
position: absolute;
top: 138px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile4 {
position: absolute;
top: 139px;
left: 414px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile5 {
position: absolute;
top: 276px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile6 {
position: absolute;
top: 276px;
left: 138px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile7 {
position: absolute;
top: 276px;
left: 276px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile8 {
position: absolute;
top: 414px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile9 {
position: absolute;
top: 414px;
left: 276px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.hogtile10 {
position: absolute;
top: 414px;
left: 414px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* TILE STYLE TILE STYLETILE STYLETILE STYLETILE STYLETILE STYLE */
.hogtileS {
position: absolute;
top: 0px;
left: 0px;
height: 129px;
width: 129px;
overflow: hidden;
background: var(--light);
border-style: dashed;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.2);
}
.hogtileH {
position: absolute;
top: 0px;
left: 0px;
height: 129px;
width: 267px;
overflow: hidden;
background: var(--light);
border-style: dashed;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.2);
}
.hogtileV {
position: absolute;
top: 0px;
left: 0px;
height: 267px;
width: 129px;
overflow: hidden;
background: var(--light);
border-style: dashed;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.2);
object-fit: cover;
}
.hogtileSborder {
position: absolute;
top: 0px;
left: 0px;
width: 103px;
height: 103px;
margin: 10px;
background: transparent;
border: 3px solid var(--light);
}
.hogtileHborder {
position: absolute;
top: 0px;
left: 0px;
width: 241px;
height: 103px;
margin: 10px;
background: transparent;
border: 3px solid var(--light);
}
.hogtileVborder {
position: absolute;
top: 0px;
left: 0px;
width: 103px;
height: 241px;
margin: 10px;
background: transparent;
border: 3px solid var(--light);
}
/* IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG */
.hogtileS img {
display: block;
align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-botton: auto;
height: 100%;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.hogtileH img {
display: block;
align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-botton: auto;
width: 100%;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.hogtileV img {
display: block;
align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-botton: auto;
height: 100%;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.hogbluefilter {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--light);
mix-blend-mode: color;
}
.hogorangefilter {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--orange);
mix-blend-mode: color;
}
.hogimghog {
position: absolute;
top: 0px;
left: 0px;
height: 129px;
width: 267px;
overflow: hidden;
background-image: url(https://i.imgur.com/xDygb3i.gif);
background-size: 150%;
background-position: -55px top;
object-fit: cover;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.hogimgsign {
position: absolute;
top: 0px;
left: 0px;
height: 129px;
width: 267px;
overflow: hidden;
background-image: url(https://i.imgur.com/5oqmLLx.jpg);
background-size: 100%;
background-position: 0px -30px;
object-fit: cover;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/* TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT*/
.hogtitle {
position: absolute;
top: 0px;
left: 0px;
height: 129px;
width: 405px;
overflow: hidden;
background: var(--light);
border-style: dashed;
border-width: 2px;
border-color: rgba(0, 0, 0, 0.2);
}
.hogtitlebox {
position: absolute;
top: 2px;
left: 2px;
height: 129px;
width: 405px;
overflow: hidden;
background: var(--orange);
}
.hogtitleborder {
position: absolute;
top: 2px;
left: 2px;
width: 379px;
height: 103px;
margin: 10px;
background: transparent;
border: 3px solid var(--light);
}
.hogtitletxt {
position: absolute;
top: 3px;
left: 25px;
height:100px;
width:100%;
padding: 5px;
overflow: auto;
background: transparent;
font-size: 60px;
font-family: "Roboto Slab", serif;
text-align:left;
line-height:135%;
color: var(--light);
text-shadow: -3px 3px 0 var(--orange), -6px 5px 0 var(--dark);
}
.hogtitlesubtxt {
position: absolute;
top: 85px;
left: 55px;
padding: 5px;
overflow: auto;
background: transparent;
font-size: 15px;
font-family: "Playfair Display", serif;
letter-spacing: 0.5px;
word-spacing: 2px;
font-style: italic;
color: var(--light);
}
.hogtxtbox {
position: absolute;
top: 0px;
left: 0px;
height: 123px;
width: 123px;
padding: 5px;
overflow: hidden;
background: transparent;
text-align: center;
font-size: 12px;
font-family: "Playfair Display", serif;
line-height: 20px;
color: var(--dark);
}
.hogtxtbox i {
font-weight: bold;
color: var(--orange);
}
</style><body>
<div class="hogbase">
<div class="hogbasemain">
<div class="hogtile1">
<div class="hogtileH">
<div class="hogimgsign"></div>
<div class="hogbluefilter"></div>
<div class="hogtileHborder"></div>
</div>
</div>
<div class="hogtile2">
<div class="hogtileH">
<img src="https://i.imgur.com/IDdPfFV.jpg" alt="Butterbeer">
<div class="hogorangefilter"></div>
<div class="hogtileHborder"></div>
</div>
</div>
<div class="hogtile3">
<div class="hogtitle"></div>
<div class="hogtitlebox"><div class="hogtitletxt">9 миров</div>
<div class="hogtitlesubtxt">
</div></div>
<div class="hogtitleborder"></div>
</div>
<div class="hogtile4">
<div class="hogtileS">
<img src="https://i.imgur.com/wTIUC8W.gif" alt="Candy Shelves">
<div class="hogorangefilter"></div>
<div class="hogtileSborder"></div>
</div>
</div>
<div class="hogtile5">
<div class="hogtileS">
<img src="https://i.imgur.com/hGiBhko.gif" alt="">
<div class="hogbluefilter"></div>
<div class="hogtileSborder"></div>
</div>
</div>
<div class="hogtile6">
<div class="hogtileV">
<img src="https://i.imgur.com/yjBltZ1.jpg" alt="">
<div class="hogorangefilter"></div>
<div class="hogtileVborder"></div>
</div>
</div>
<div class="hogtile7">
<div class="hogtileH">
<div class="hogimghog"></div>
<div class="hogbluefilter"></div>
<div class="hogtileHborder"></div>
</div>
</div>
<div class="hogtile8">
<div class="hogtileS">
<img src="https://i.imgur.com/tPpE8Dr.gif" alt="Fireplace">
<div class="hogorangefilter"></div>
<div class="hogtileSborder"></div>
</div>
</div>
<div class="hogtile9">
<div class="hogtxtbox">“In the universe of your fantasy there is a fabulous place where amazing, powerful creatures make dreams come true.”</div>
</div>
<div class="hogtile10">
<div class="hogtileS">
<img src="https://i.imgur.com/j8c5dC1.gif" alt="Three Broomsticks">
<div class="hogorangefilter"></div>
<div class="hogtileSborder"></div>
</div>
</div>
</div>
</div>
</body></center>[hideprofile]





















































