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