<!--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]



















 














































