XF 2.1 Eklenti Duyuru Sistemi

<div class="ortala">
     <a class="mavera" id="mc" href="#" target="_blank"><p id="vips" class="fa fa-star"> MODERATOR</p> <p id="vip">Alımlarımız başlamıştır! </p> </a>
      <a class="cheat" id="cm" href="#" target="_blank"><p id="vips" class="fa fa-diamond"> VİP ÜYELİK</p> <p id="vip"> VIP üyelik hakkında bilgi! </p> </a>
    <a class="maveracheats" id="mu" href="#" target="_blank"><p id="vips" class="fa fa-shield"> MUI LOADER</p> <p id="vip">MUI Loader hakkında bilgi! </p> </a> </div>

.mavera {
  display: inline-block;
  height: 50%;
  text-align: center;
  width: 20%;
  background: linear-gradient(to right, #131111, #4a4a4a);
  color: #06c13d;
  font-family: Arial, sans;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 0.8em;
  border: 1px solid #06c13d;
  text-decoration: none;




}
#vips {

font-size: 15px;
font-weight: bold;
}

#vip {

font-size: 10px;
}
#mc {

color :#06c13d;
text-decoration: none;

}
#cm {

color:#FFEB3B;
font-size: 19px;
text-decoration: none;

}

#mu {

color:#25e4d0;
text-decoration: none;
}

.mavera a {
  color: #ccc;
}

.mavera a:hover {
  color: #06c13d;
}

.mavera p:hover {

  text-decoration: none;
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {
.mavera {
    display: none;
}
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
.mavera {
    display: none;
}
}

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.mavera {
    display: none;
}
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.mavera {
    display: none;
}
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.mavera {
    display: none;
}
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
.mavera {
    display: none;
}
}  

.cheat {
  display: inline-block;
  height: 100%;
  text-align: center;
  width: 20%;
  background: linear-gradient(to right, #131111, #4a4a4a);
  color: #FFEB3B;
  font-family: Arial, sans;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 0.8em;
  border: 1px solid #FFEB3B;
    text-decoration: none;



}

.cheat a {
  color: #ccc;
}

.cheat a:hover {
  color: red;
}

.cheat p:hover {

  text-decoration: none;
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {
.cheat {
    display: none;
}
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
.cheat {
    display: none;
}
}

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.cheat {
    display: none;
}
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.cheat {
    display: none;
}
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.cheat {
    display: none;
}
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
.cheat {
    display: none;
}
}  

.maveracheats {
  display: inline-block;
  height: 100%;
  text-align: center;
  width: 20%;
  background: linear-gradient(to right, #131111, #4a4a4a);
  color: #25e4d0;
  font-family: Arial, sans;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 0.8em;
  border: 1px solid #25e4d0;
    text-decoration: none;



}

.maveracheats a {
  color: #ccc;
}

.maveracheats a:hover {
  color: red;

}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {
.maveracheats {
    display: none;
}
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
.maveracheats {
    display: none;
}
}

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.maveracheats {
    display: none;
}
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.maveracheats {
    display: none;
}
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.maveracheats {
    display: none;
}
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
.maveracheats {
    display: none;
}
}  

.ortala {

  text-align: center;
}