afiliados 1

///*--- HTML ---*///
<link href="https://fonts.googleapis.com/css?family=Kreon" rel="stylesheet">
<center><div id="afi1"><div id="afi2"><t>Hermanos</t><img src="https://placehold.it/120x50"><img src="https://placehold.it/120x50"><img src="https://placehold.it/120x50"><img src="https://placehold.it/120x50"></div><div id="afi4"><t>Elite</t><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"><img src="https://placehold.it/35"></div><div id="afi5"><t>Directorios</t><img src="https://placehold.it/40"><img src="https://placehold.it/40"><img src="https://placehold.it/40"><img src="https://placehold.it/40"></div><div id="afi6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia purus at lobortis luctus. Sed mi elit, pharetra vel sem in, consequat mollis felis. Vivamus maximus suscipit erat quis ornare. Proin euismod facilisis nulla nec scelerisque. Sed eget vestibulum odio. Donec est justo, dignissim nec tincidunt id, viverra ut mi. Nullam sit amet vestibulum ipsum, quis placerat arcu. Suspendisse eget iaculis justo, at egestas elit. Suspendisse eleifend ipsum ac lectus tristique, vel aliquet tortor ultricies. Nullam tristique tortor vel auctor dictum. Etiam quis aliquet ligula, gravida mollis urna. Duis in metus vitae augue feugiat viverra. Aenean semper lobortis lectus, venenatis tincidunt dui.</div><div id="afi7"></div></div><a id="z-cred" href="https://zagreus-codes.weebly.com">Zagreus</a></center>

////*--- CSS ---*////
#afi1 {
  width: 750px;
  background: #121212;
  height: 380px;
  position: relative;
margin-left: ; /*modificar según ancho del foro*/
}

#afi2 {
  background: #2c2c2c;
  width: 740px;
  position: absolute;
  left: 5px;
  top: 5px;
}

#afi2 t,
#afi4 t,
#afi5 t {
  display: block;
  font-family: kreon;
  background: #121212;
  width: 150px;
  padding: 5px;
  color: #9E9A68;
  margin: 5px;
  text-align: center;
  font-size: 15px;
}

#afi2 img {
  width: 120px;
  height: 50px;
  margin: 2px;
  border: 2px solid #121212;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: ease 0.8s;
}

#afi2 img:hover {
  border: 2px solid #9E9A68;
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
  transition: ease 0.8s;
}

#afi4 {
  background: #2c2c2c;
  width: 500px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  height: 260px;
}

#afi4 img {
  width: 35px;
  height: 35px;
  margin: 2px;
  border: 1px solid #121212;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#afi5 {
  background: #2c2c2c;
  position: absolute;
  left: 5px;
  width: 230px;
  top: 115px;
}

#afi5 img {
  width: 40px;
  height: 40px;
  margin: 2px;
  border: 2px solid #121212;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#afi6 {
  background: #2c2c2c;
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 220px;
  padding: 5px;
  height: 150px;
  overflow: auto;
  text-align: justify;
  font-family: kreon;
  font-size: 12px;
  color: #e2e2e2;
}

#afi7 {
  width: 500px;
  height: 130px;
  background: url(IMAGEN)center;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

#z-cred {
  font-family: calibri;
  font-size: 10px;
  display: block;
  text-align: right;
  width: 700px;
  text-transform: uppercase;
  margin-top: 0px;
  letter-spacing: 1px;
  text-decoration: none;
}