Yellow Street (tablón)

<div class="MC7">

   <div class="inMC7">

  <div class="paMC7 m01">

 <div class="ttMC7">
  <span><strong>Admin</strong>istración</span>
 </div>

 <div class="stMC7">

<div>

   <div style="background-image: url(https://i.postimg.cc/Y0Z9bSW-G/bosque.jpg);">

   </div><span>  <a href="URL" title="Perfil" class="th th-diamond"></a>  <a href="URL" title="Mensaje" class="th th-envelope"></a>  </span>
</div>

<div>

   <div style="background-image: url(https://i.postimg.cc/ydWstHBF/bosque2.jpg);">

   </div><span> <a href="URL" title="Perfil" class="th th-diamond"></a>  <a href="URL" title="Mensaje" class="th th-envelope"></a></span>
</div>

<div>

   <div style="background-image: url(https://i.postimg.cc/pdsPsTNW/bosque-3.jpg);">

   </div><span> <a href="URL" title="Perfil" class="th th-diamond"></a>  <a href="URL" title="Mensaje" class="th th-envelope"></a></span>
</div>

<div>

   <div style="background-image: url(https://i.postimg.cc/LX72Mb6G/bosque-4.jpg);">

   </div><span> <a href="URL" title="Perfil" class="th th-diamond"></a>  <a href="URL" title="Mensaje" class="th th-envelope"></a></span>
</div>

 </div>

 <div class="recMC7">

<div class="ttMC7">
   <span>Mensajes <strong>Recientes</strong></span>
</div>

<div class="ultMC7">

   <div>

   </div>

</div>

 </div>

  </div>

  <div class="paMC7 m02">

 <div class="ttMC7 mtt">
  <span><strong>Nav</strong>egación</span>
 </div>
 <a href="URL" title="Primer Enlace"></a>  <a href="URL" title="Segundo Enlace"></a>  <a href="URL" title="Tercer Enlace"></a>  <a href="URL" title="Cuarto Enlace"></a>  <a href="URL" title="Quinto Enlace"></a>  <a href="URL" title="Sexto Enlace"></a>  <a href="URL" title="Septimo Enlace"></a>  <a href="URL" title="Octavo Enlace"></a>
  </div>

  <div class="marMC7">

 <div>
  <strong>01</strong><span>Gummi bears sesame snaps icing donut chupa chups.</span><strong>02</strong><span>Cookie muffin cake tart cotton candy candy canes cookie.</span><strong>03</strong><span>Danish brownie toffee pie.</span><strong>04</strong><span>Tiramisu muffin toffee candy, <a href="url">Enlace</a>, caramels sweet jelly.</span><strong>05</strong><span>Jelly-o cake marzipan.</span>
 </div>

  </div>

  <div class="redMC7">
 <a href="URL" title="FaceBook" class="th th-facebook-o"></a>  <a href="URL" title="Tumblr" class="th th-tumblr-o"></a>  <a href="URL" title="Discord" class="th th-discord"></a>  <a href="https://emmescodes.tumblr.com/" title="Code by Emme" class="th th-code"></a>
  </div>

  <div class="amMC7">

 <div class="clMC7">
  <strong>Ciudad, País</strong><span class="th th-sun"></span>15°C/25°C
 </div>

 <div class="ttMC7">
  <span><strong>Amb</strong>ientación</span>
 </div>

 <div class="mmMC7">
Pastry bear claw jelly-o croissant gummies. Caramels chupa chups pudding jelly oat cake biscuit cheesecake brownie. Sweet roll candy cheesecake danish gummies gummi bears jelly beans biscuit toffee. Chocolate sesame snaps marzipan lollipop sweet rolloat cake.<br /><br /> Tootsie roll ice cream cake chocolate chocolate cake soufflé. Gingerbread gummies toffee marshmallow fruitcake. Tiramisu powder pudding pudding. Apple pie lemon drops jujubes cupcake lemon drops.<br /><br /> Liquorice jelly cupcake tart donut tart apple pie. Jelly-o donut brownie tart wafer cake. Wafer cupcake bonbon gingerbread cotton candy dessert sesame snaps jelly-o carrot cake.<br /><br /> Bear claw tootsie roll bear claw donut chupa chups dessert. Icing macaroon oat cake marshmallow chocolate cake gummi bears. Cheesecake lollipop lemon drops. Macaroon cake oat cake powder chocolate cake macaroon pudding chocolate.<br /><br /> Tootsie roll cheesecake jelly beans sweet roll tart marzipan muffin. Bear claw apple pie cotton candy marshmallow halvah. Bonbon liquorice sweet sugar plum.
 </div>

  </div>

   </div>
</div>
 <link href="https://fonts.googleapis.com/css?family=Darker+Grotesque:300,400,900|Lato&display=swap" rel="stylesheet" /><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet" /> <style>
.MC7,
.MC7 * {
  box-sizing: border-box;
  scrollbar-color: #dfbf57 #353723;
  scrollbar-width: thin;
}
.MC7 {
  background-image: url(http://cdn-tehran.wisgoon.com/dlir-s3/1538977727979539.jpg);
  background-position: center;
  background-size: cover;
  padding: 10px;
  min-width: 900px;
  margin: 10px auto;
}
.inMC7 {
  box-shadow: 0 0 0 10px #111D;
  border: 1px solid;
  letter-spacing: -5px;
  text-align: left;
  color: #353723;
  -webkit-text-fill-color: #dfbf57;
  position: relative;
}
.paMC7 {
  background: #111D;
  display: inline-block;
  vertical-align: top;
  border-right: 1px solid;
  letter-spacing: normal;
  text-align: center;
}
.paMC7.m01 {
  width: 250px;
}
.stMC7 {
  padding: 10px 5px 10px 10px;
  border-bottom: 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stMC7 > div {
  flex-grow: 1;
  margin-right: 5px;
  height: 90px;
  transition: 0.5s;
  position: relative;
  transform-style: preserve-3d;
  perspective: 900px;
}
.stMC7 > div:hover,
.paMC7.m02 a:hover {
  z-index: 5;
}
.stMC7 > div > div,
.stMC7 > div > span {
  position: absolute;
  box-shadow: inset 0 0 0 1px;
  width: 100%;
  height: 100%;
  top: 0;
  transition: 0.5s;
}
.stMC7 > div > div {
  left: 0%;
  transform-origin: right center;
  background-position: center;
  background-size: cover;
}
.stMC7 > div:hover > div {
  transform: rotateY(-90deg);
  left: -100%;
}
.stMC7 > div > span {
  left: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: #1119;
  padding-top: 17px;
}
.stMC7 > div:hover > span {
  transform: rotateY(0deg);
  left: 0%;
}
.stMC7 > div > span a {
  display: block;
  padding: 5px;
  transform: scale(0.7);
  transition: 0.5s;
  filter: saturate(0);
}
.stMC7 > div > span a:hover {
  transform: scale(1);
  filter: saturate(1);
}

.ttMC7 {
  font: 300 12px/15px Darker Grotesque;
  overflow: hidden;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 2px 0 -5px;
}
.ttMC7 > span {
  position: relative;
}
.ttMC7 > span::before,
.ttMC7 > span::after {
  content: "";
  width: 200%;
  position: absolute;
  border-bottom: 1px solid;
  top: 50%;
}
.ttMC7 > span::before {
  left: calc(100% + 5px);
}
.ttMC7 > span::after {
  right: calc(100% + 5px);
}
.ttMC7 strong {
  font-weight: 900;
}
.ultMC7 {
  margin: 11px;
  background: #1119;
  height: 198px;
  border: 20px solid transparent;
  position: relative;
  outline: 1px solid;
  text-align: center;
  font: 12px Lato;
  overflow: hidden;
}
.ultMC7 > div {
  position: absolute;
  width: 100%;
  top: 100%;
  animation: ulti 30s linear infinite;
-webkit-text-fill-color: #666;
}
.mod-recent-row > a {
-webkit-text-fill-color: #dfbf57;
font-size: 14px;
}
.ultMC7:hover > div {
  animation-play-state: paused;
}
@keyframes ulti {
  from {
top: 100%;
  }
  to {
top: 0%;
transform: translateY(-100%);
  }
}
.paMC7.m02 {
  width: 200px;
  height: 315px;
  position: relative;
  padding: 5px 5px 0 20px;
}
.ttMC7.mtt {
  position: absolute;
  width: 315px;
  transform: rotate(-90deg);
  top: 149px;
  left: -147px;
  letter-spacing: 5px;
}
.paMC7.m02 a {
  display: block;
  font: 10px/12px Lato;
  text-transform: uppercase;
  color: inherit !important;
  letter-spacing: 1px;
  margin: 5px 5px 8px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 900px;
  height: 30px;
}
.paMC7.m02 a::before,
.paMC7.m02 a::after {
  content: attr(title);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  transition: 0.5s;
  background: #1119;
  box-shadow: inset 0 0 0 1px;
  line-height: 30px;
}
.paMC7.m02 a::before {
  bottom: 100%;
  transform-origin: bottom center;
  transform: rotateX(90deg);
}
.paMC7.m02 a:hover::before {
  bottom: 0%;
  transform: rotateX(0deg);
}
.paMC7.m02 a::after {
  bottom: 0%;
  transform-origin: top center;
  -webkit-text-fill-color: #666;
}
.paMC7.m02 a:hover::after {
  bottom: -100%;
  transform: rotateX(-90deg);
}
.marMC7 {
  position: absolute;
  background: #111D;
  border-left: 10px solid transparent;
  width: calc(100% - 250px);
  right: 0;
  bottom: 0;
  letter-spacing: 1px;
  white-space: nowrap;
  font: 12px Lato;
  height: 40px;
  overflow: hidden;
  box-shadow: 0 -1px;
  border-right: 10px solid transparent;
}
.marMC7 > div {
  position: absolute;
  left: 100%;
  top: calc(50% - 8px);
  animation: lado 40s linear infinite;
}
.marMC7:hover > div {
  animation-play-state: paused;
}
@keyframes lado {
  from {
transform: translateX(0%);
left: 100%;
  }
  to {
transform: translateX(-100%);
left: 0%;
  }
}
.marMC7 > div > strong {
  display: inline-block;
  font: 20px/10px Darker Grotesque;
  vertical-align: middle;
  padding: 0 5px 4px;
  transform: rotate(10deg);
  text-shadow: 1px 1px #666;
}
.marMC7 > div > span {
  vertical-align: middle;
  -webkit-text-fill-color: #666;
}

.redMC7 {
  position: absolute;
  right: 0;
  top: 0;
  background: #111D;
  bottom: 41px;
  border-left: 1px solid;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  width: 70px;
}
.redMC7 a {
  display: block;
  font-size: 30px;
  padding: 10px;
  background: #111D;
  border: 1px solid;
  color: inherit;
  margin: 5px;
  flex-grow: 1;
  position: relative;
  letter-spacing: normal;
}
.redMC7 a::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  transition: 0.5s;
}
.redMC7 a:hover:before {
  transform: translate(-50%, -50%) scale(1);
}
.amMC7 {
  position: absolute;
  top: 0;
  right: 70px;
  bottom: 40px;
  background: #111D;
  left: 450px;
  border-bottom: 1px solid;
  transition: 0.5s;
  padding: 10px;
  letter-spacing: normal;
  text-align: center;
}
.clMC7 {
  background-image: url(http://cdn-tehran.wisgoon.com/dlir-s3/1538977727979539.jpg);
  background-position: center;
  background-size: cover;
  border: 1px solid;
  padding: 10px 0 15px;

  text-shadow: 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111;
  font: 15px Lato;
}
.clMC7 > span {
  font-size: 30px;
  vertical-align: middle;
  margin-right: 10px;
}
.clMC7 > b {
  display: block;
  font: bold 20px Darker Grotesque;
  letter-spacing: 5px;
}
.amMC7 .ttMC7 {
  margin: 2px -10px -5px;
}
.mmMC7 {
  background: #1119;
  font: 10px Lato;
  -webkit-text-fill-color: #666;
  text-align: justify;
  margin: 11px 1px;
  height: calc(100% - 107px);
  overflow: auto;
  padding-right: 5px;
  box-shadow: 0 0 0 1px;
  border: 20px solid transparent;
}
.mmMC7::first-letter {
  font: bold 50px Darker Grotesque;
  -webkit-text-fill-color: #dfbf57;
  float: left;
  margin: 10px;
}
.MC7 div::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background: #353723 !important;
}
.MC7 div::-webkit-scrollbar-thumb {
  background: #dfbf57 !important;
}

body {
  background: url(http://i64.tinypic.com/1z2hqts_th.jpg), #111;
  padding: 50px 0;
  color: #999;
  background-blend-mode: soft-light;
}
body a {
  text-decoration: none;
  color: #999;
}
</style> <script type="text/javascript">
  jQuery(function() {
jQuery('#comments_scroll_div .js-marquee').appendTo('.ultMC7 > div');
  });
</script>