Facebook
From Jdkdjfk, 5 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 251
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5.         <head>
  6.                 <meta charset="utf-8">
  7.                 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.                 <meta name="viewport" content="width=device-width, initial-scale=1">
  9.                 <title>Zenia Community - Homie</title>
  10.                 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  11.                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  12.                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  13.                 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  14.                 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  15.                 <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">
  16.                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17.                 <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
  18.                 <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
  19.                 <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
  20.                 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  21.                 <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
  22.                 <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  23.                 <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
  24.                 <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  25.                 <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
  26.                 <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
  27.                 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  28.                 <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  29.                 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
  30.                 <link href="https://fonts.googleapis.com/css?family=Signika" rel="stylesheet">
  31.                 <style type="text/css">
  32.                 * {
  33.                         margin: 0;
  34.                         padding: 0;
  35.                         border: 0;
  36.                 }
  37.                 html, body {
  38.                         height: 100%;
  39.                         width: 100%;
  40.                         padding: 0;
  41.                         margin: 0;
  42.                         margin-top: -10px;
  43.                 }      
  44.                
  45.                 .two {
  46.                         background-image: url("https://i.hizliresim.com/nQkm2V.jpg");
  47.                         background-size: cover;
  48.                         width: 100%;
  49.                         height: 100%;
  50.                 }
  51.                
  52.                 .button {
  53.                         padding: 10px 33px;
  54.                         border-radius: 25px;
  55.                         margin: 15px;
  56.                 }
  57.                
  58.                 .staff-t {
  59.                         font-size: 25px;
  60.                         font-family: 'Arimo', sans-serif;
  61.                 }
  62.                 .staff-b {
  63.                         font-size: 15px;
  64.                         font-family: 'PT Sans Narrow', sans-serif;
  65.                 }
  66.                 .staff-img:hover {
  67.                         border: 5px solid #A31111;
  68.                 }
  69.                
  70.                 .menu a { display: inline-block; padding-bottom: 3px; margin-right: 5px; text-decoration: none; color: black; font-family: 'PT Sans', sans-serif; }    
  71.                 .menu a:last-child { margin-right: 0; }
  72.                 .menu a:after { content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width .4s ease, background-color .5s ease; }
  73.                 .menu a:hover:after { width: 100%; background: #A31111; }
  74.                
  75.                 .back-to-top { top: 90%; left: 85%; }
  76.                 .back-to-top a { display: none; border-radius: 5px; text-decoration: none; padding: 10px 14px; background: #FFBF00; color: black; font-size: 30px; transition: 0.4s; }
  77.                 .back-to-top a:hover { color: #FFBF00; background: black; }
  78.                
  79.                 .top { position: relative; top: 85%; text-align: center; font-size: 40px; }
  80.                 .top a { transition: 0.4s; padding: 15px; color: #FFBF00; text-decoration: none;
  81.                 -webkit-animation: sdb04 2s infinite;
  82.                 animation: sdb04 2s infinite;
  83.                 box-sizing: border-box; }
  84.                 .top a:hover { font-size: 50px; }
  85.                 @-webkit-keyframes sdb04 {
  86.                 0% {
  87.                 -webkit-transform: translate(0, 0);
  88.                 }
  89.                 20% {
  90.                 -webkit-transform: translate(-10px, -10px);
  91.                 }
  92.                 40% {
  93.                 -webkit-transform: translate(0, 0);
  94.                 }
  95.                 }
  96.                 @keyframes sdb04 {
  97.                 0% {
  98.                 transform: translate(0, 0);
  99.                 }
  100.                 20% {
  101.                 transform: translate(-10px, -10px);
  102.                 }
  103.                 40% {
  104.                 transform: translate(0, 0);
  105.                 }
  106.                 }
  107.                
  108.                 .brand img {
  109.                         position: fixed;
  110.                         top: 5px;
  111.                         left: 7%;
  112.                 }
  113.                
  114.                 .character-1 {
  115.                         position: relative;
  116.                         top: 110px;
  117.                 }
  118.                
  119.                 .brand-text {
  120.                         position: fixed;
  121.                         top: 26px;
  122.                         left: 15%;
  123.                 }
  124.                
  125.                  .c-img-1:hover {
  126.                         height: 180px;
  127.                         width: 180px;
  128.                         transition: 0.4s;
  129.                  }
  130.                  
  131.                  .s-media a { border-radius: 100px; text-decoration: none; padding: 10px; transition: 0.4s; }
  132.                  
  133.                  .fa-facebook { color: #3b5998; }
  134.                  .fa-facebook:hover { border: solid 2px #3b5998; background: #3b5998; color: white; }
  135.                  
  136.                  
  137.                  .fa-instagram { color: #c32aa3; }
  138.                  .fa-instagram:hover { border: solid 2px #c32aa3; color: white; background: #c32aa3; }
  139.                  
  140.                  .fa-steam { color: #2d89ef; }
  141.                  .fa-steam:hover { border: solid 2px #2d89ef; background: #2d89ef; color: white; }
  142.                  
  143.                  .fa-youtube { color: #ff0000; }
  144.                  .fa-youtube:hover { border: solid 2px #ff0000; background: #ff0000; color: white; }
  145.                  .fa-angle-up { font-size: 25px; background: black; color: white; padding: 11px; border-radius: 100px; transition: 0.4s; }
  146.                  .fa-angle-up:hover { background: white; color: black; }
  147.                
  148.                  /*mobil sürüm*/
  149.                  @media only screen and (max-width: 767px) {
  150.                          #none {
  151.                                 display: none;
  152.                          }
  153.                          
  154.                          #menu-bg {
  155.                                 height: 100px;
  156.                                 width: 160px;
  157.                          }
  158.                          
  159.                          .menu-a {
  160.                                 left: 1%;
  161.                          }
  162.                          
  163.                          #m-logo {
  164.                                 height: 80px;
  165.                                 width: 80px;
  166.                          }
  167.                          
  168.                          .menu-b {
  169.                                 right: 1%;
  170.                          }
  171.                  }
  172.                 </style>
  173.         </head>
  174.        
  175.         <body>
  176.                
  177.                 <section class="two">
  178.                         <div class="fixed-top" style="background: #131c20; width: 100%; height: 46px;">
  179.                                 <div class="text-center">
  180.                                         <img id="menu-bg" src="https://i.ibb.co/jRdkXqh/index2.png" height="120" width="220"/>
  181.                                         <div class="logo">
  182.                                                 <div class="text-center fixex-top m-logo" style="position: fixed; top: 50px; left: 49%; transform: translate(-50%, -50%);">
  183.                                                         <img id="m-logo" src="https://i.ibb.co/QDs1vxq/index1-1.png" height="140" width="140"/>
  184.                                                 </div>
  185.                                         </div>
  186.                                 </div>
  187.                         </div>
  188.                         <div class="fixed-top menu" style="font-family: 'Signika', sans-serif; font-size: 17px; position: fixed; top: 10px;">
  189.                                 <div class="menu-a" style="position: fixed; left: 1%;">
  190.                                         <a href="https://www.z-roleplay.com/forum" class="px-4 text-white">Forum</a>
  191.                                         <a href="" id="none" class="px-4 text-white">Portal</a>
  192.                                 </div>
  193.                                 <div class="menu-b" style="position: fixed; right: 1%;">
  194.                                         <a href="https://www.discord.me/zeniarpg" id="none" class="px-4 text-white">Discord</a>
  195.                                         <a href="https://www.z-roleplay.com/panel" class="px-4 text-white">Karakter Paneli</a>
  196.                                 </div>
  197.                         </div>
  198.                         <div class="container mt-3 text-center" style="position: relative; top: 200px;">
  199.                                 <div id="myCarousel" class="animated zoomInUp carousel slide" data-ride="carousel">
  200.                                         <div class="carousel-inner text-center">
  201.                                                 <div class="carousel-item active">
  202.                                                         <p class="display-2" style="font-size: 40px; font-family: 'Fira Sans', sans-serif;">Panel</p>
  203.                                                         <br>
  204.                                                         <p class="display-2" style="font-size: 25px;">Panelimizi ziyaret ederek <br>karakter başvurunuzu yapabilirsiniz !</p>
  205.                                                         <br>
  206.                                                         <a href="https://z-roleplay.com/panel/" class="button btn btn-outline-warning">Karakter Paneli</a>
  207.                                                 </div>
  208.                                                 <div class="carousel-item">
  209.                                                         <p class="display-2 slide-text" style="font-size: 40px; font-family: 'Fira Sans', sans-serif;">Forum</p>
  210.                                                         <br>
  211.                                                         <p class="display-2 slide-text-2" style="font-size: 25px;">Forumumuzda hala kayıtlı<br> değilmisiniz?</p>
  212.                                                         <br>
  213.                                                         <a href="https://z-roleplay.com/forum/index.php?/login" class="button btn btn-outline-warning">Kayıt Ol</a>
  214.                                                         <a href="https://z-roleplay.com/forum/index.php?/login" class="button btn btn-outline-warning">Giriş yap</a>
  215.                                                 </div>
  216.                                                 <div class="carousel-item">
  217.                                                         <p class="display-2" style="font-family: 'Fira Sans', sans-serif; font-size: 40px;">Discord</p>
  218.                                                         <br>
  219.                                                         <p class="display-2" style="font-size: 25px;">Discord sunucumuza aşağıdan<br>katılabilirsiniz.</p>
  220.                                                         <br>
  221.                                                         <a href="https://www.discord.me/zeniarpg" class="button btn btn-outline-warning">Discord Sunucusu</a>
  222.                                                 </div>
  223.                                         </div>
  224.                                         <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
  225.                                                 <span class="carousel-control-prev-icon"></span>
  226.                                         </a>
  227.                                         <a class="carousel-control-next" href="#myCarousel" data-slide="next">
  228.                                                 <span class="carousel-control-next-icon"></span>
  229.                                         </a>
  230.                                 </div>
  231.                         </div> 
  232.                         <div class="back-to-top fixed-top">
  233.                                 <a href="#" id="brt" class="fas fa-angle-double-up"></a>
  234.                         </div>
  235.                 </section>
  236.                
  237.                 <section class="staff" style="background: #131c20; width: 100%; height: 73%;">
  238.                         <div class="body-2" style="width: 100%; padding: 15px;">
  239.                         <div class="animated zoomInRight staff-text text-center">
  240.                         <br><br><br><p style="font-size: 30px; font-family: 'Quicksand', sans-serif;"><font color="gray">STAFF </font><font color="white">TEAM</font></p>
  241.                         </div>
  242.                        
  243.                         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  244.                                 <ol class="carousel-indicators" style="position: relative; top: 5%;">
  245.                                         <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  246.                                         <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  247.                                         <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  248.                                         <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  249.                                 </ol>
  250.                         <div class="animated zoomInRight carousel-inner text-center">
  251.                                 <br><div class="carousel-item active">
  252.                                         <a href=""><img class="staff-img" src="https://z-roleplay.com/forum/uploads/monthly_2018_12/5c023f37327d3_Kcuf2.thumb.png.63d1069a606708bed70163fcbf3abd72.png" height="100" width="100" style="border-radius: 100px; transition: 0.4s;"></a>
  253.                                         <br>
  254.                                         <br>
  255.                                         <br>
  256.                                         <p class="staff-t"><font color="white">Kcuf</font></p>
  257.                                         <p class="staff-b"><font color="gray">Director Management</font></p>
  258.                                 </div>
  259.                                 <div class="carousel-item">
  260.                                         <a href=""><img class="staff-img" src="https://z-roleplay.com/forum/uploads/monthly_2018_12/avatarss.thumb.jpg.13af705542996c3ce2b54febff0684f2.jpg" height="100" width="100" style="border-radius: 100px; transition: 0.4s;"></a>
  261.                                         <br>
  262.                                         <br>
  263.                                         <br>
  264.                                         <p class="staff-t"><font color="white">Zeta</font></p>
  265.                                         <p class="staff-b"><font color="gray">Lead Manager</font></p>
  266.                                 </div>
  267.                                 <div class="carousel-item">
  268.                                         <a href=""><img class="staff-img" src="https://z-roleplay.com/forum/uploads/monthly_2018_12/5c0abbf57291c_AVATARYENGG.thumb.png.cdfae6263e7d6b4e05f042dcee1ab0dc.png" height="100" width="100" style="border-radius: 100px; transition: 0.4s;"></a>
  269.                                         <br>
  270.                                         <br>
  271.                                         <br>
  272.                                         <p class="staff-t"><font color="white">Silver</font></p>
  273.                                         <p class="staff-b"><font color="gray">Developer Designer</font></p>
  274.                                 </div>
  275.                                 <div class="carousel-item">
  276.                                         <a href=""><img class="staff-img" src="https://z-roleplay.com/forum/uploads/monthly_2018_12/5c0abc0ab4125_AVATARFORUMGG.thumb.jpg.a9b956993dd9c54cc451a704bedd25f3.jpg" height="100" width="100" style="border-radius: 100px; transition: 0.4s;"></a>
  277.                                         <br>
  278.                                         <br>
  279.                                         <br>
  280.                                         <p class="staff-t"><font color="white">Armen</font></p>
  281.                                         <p class="staff-b"><font color="gray">Senior Admin</font></p>
  282.                                 </div>
  283.                         </div>
  284.                         </div>
  285.                 </section>
  286.                
  287.                 <section id="character" class="character" style="width: 100%; height: 92%; background: black;">
  288.                                 <div class="body-3" style="width: 100%; padding: 15px;">
  289.                                 <div class="container">
  290.                                 <div id="crac" class="character-1 text-center" style="position: relative; top: 10%;">
  291.                                         <p class="c-text-1" style="width: 100%; background: #941108; height: 45px; color: white; font-family: 'Signika', sans-serif; font-size: 30px;">ᴋᴇʟʟʏ ғʀᴇᴅᴇʀɪᴄᴋ</p>
  292.                                         <br>
  293.                                         <a href="" style="transition: 0.4s;"><img class="c-img-1" src="https://i.ibb.co/sVgK2Mv/avukat.png" height="220" width="210"/></a>
  294.                                         <br>
  295.                                         <br>
  296.                                         <br>
  297.                                         <p class="text-white" style="font-family: 'Poppins', sans-serif; font-size: 18px;">Hikaye hikaye hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye hikaye hikaye
  298.                                         Hikaye hikaye hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye hikaye hikaye
  299.                                         </p>
  300.                                 </div>
  301.                                 </div>
  302.                                 </div>
  303.                                         <!--<img class="c-img-2" src="https://i.ibb.co/hDwgMMB/ilindex.png" height="150" width="150"/>-->
  304.                                         <!--<img class="c-img-3" src="https://i.ibb.co/KwLzgcx/pdindex.png" height="150" width="150"/>-->
  305.                 </section>
  306.                
  307.                 <section id="character-2" class="character-2" style="width: 100%; height: 92%; background: black;">
  308.                         <div class="container">
  309.                         <div id="crac" class="character-2 text-center" style="position: relative; top: 10%;">
  310.                                 <p class="c-text-2" style="width: 100%; background: #941108; height: 45px; color: white; font-family: 'Signika', sans-serif; font-size: 30px;">ɢᴀᴛᴛᴜsᴏ ᴅᴇɴᴀʀᴏ</p>
  311.                                 <br>
  312.                                 <a href="" style="transition: 0.4s;"><img class="c-img-1" src="https://i.ibb.co/hDwgMMB/ilindex.png" height="220" width="210"/></a>
  313.                                 <br>
  314.                                 <br>
  315.                                 <br>
  316.                                 <p class="text-white" style="font-family: 'Poppins', sans-serif; font-size: 18px;">Hikaye hikaye hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye hikaye hikaye
  317.                                 Hikaye hikaye hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye hikaye hikaye
  318.                                 </p>
  319.                         </div>
  320.                         </div>
  321.                 <!--<img class="c-img-2" src="https://i.ibb.co/hDwgMMB/ilindex.png" height="150" width="150"/>-->
  322.                 <!--<img class="c-img-3" src="https://i.ibb.co/KwLzgcx/pdindex.png" height="150" width="150"/>-->
  323.                 </section>
  324.                
  325.                 <section id="character-3" class="character-3" style="width: 100%; height: 92%; background: black;">
  326.                 <div class="container">
  327.                 <div id="crac" class="character-1 text-center" style="position: relative; top: 10%;">
  328.                 <p class="c-text-3" style="width: 100%; background: #941108; height: 45px; color: white; font-family: 'Signika', sans-serif; font-size: 30px;">Mᴀᴛᴛʜᴇᴡ Bᴀᴋᴇʀ</p>
  329.                 <br>
  330.                 <a href="" style="transition: 0.4s;"><img class="c-img-1" src="https://i.ibb.co/KwLzgcx/pdindex.png" height="220" width="210"/></a>
  331.                 <br>
  332.                 <br>
  333.                 <br>
  334.                 <p class="text-white" style="font-family: 'Poppins', sans-serif; font-size: 18px;">Hikaye hikaye hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye hikaye hikaye
  335.                 Hikaye hikaye hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye <br> hikaye hikaye hikaye hikaye hikaye hikaye hikaye
  336.                 </p>
  337.                 </div>
  338.                 <!--<img class="c-img-2" src="https://i.ibb.co/hDwgMMB/ilindex.png" height="150" width="150"/>-->
  339.                 <!--<img class="c-img-3" src="https://i.ibb.co/KwLzgcx/pdindex.png" height="150" width="150"/>-->
  340.                 </div>
  341.                 </section>
  342.                
  343.                 <section class="text-center footer" style="background: #131c20; width: 100%; height: 36%;">
  344.                         <div class="body-x" style="width: 100%;">
  345.                         <div class="footer-size">
  346.                                 <img height="100" width="100" src="https://i.ibb.co/QDs1vxq/index1-1.png"/>
  347.                                 <hr class="col-xs-12">
  348.                                 <div class="s-media" style="font-size: 25px;">
  349.                                         <a href="https://www.facebook.com/zeniaroleplay" class="fab fa-facebook"></a>
  350.                                         <a href="https://www.instagram.com/zeniaroleplay" class="fab fa-instagram"></a>
  351.                                         <a href="https://steamcommunity.com/groups/ZeniaRPG" class="fab fa-steam"></a>
  352.                                         <a href="https://www.youtube.com/ZeniaRPG" class="fab fa-youtube"></a>
  353.                                 </div>
  354.                                 <br>
  355.                                 <a href="#" id="brt-son" class="fas fa-angle-up" style="position: relative; text-decoration: none;"></a>
  356.                         </div>
  357.                         </div>
  358.                 </section>
  359.                
  360.                 <nav class="py-2 text-center text-white" style="width: 100%; background: black; font-size: 15px;">
  361.                 Zenia Roleplay - 2019 ©
  362.                 </nav>
  363.        
  364.         <script>
  365.         $(window).on("scroll",function() {
  366.                 if ($(this).scrollTop() > 50 ) {
  367.                         $('#brt').fadeIn(500);
  368.                         } else {
  369.                         $('#brt').fadeOut(300);
  370.                 }
  371.         });
  372.        
  373.         $("#brt").on("click",function() {
  374.                 $("html, body").animate({scrollTop: 0}, 800);
  375.         });
  376.        
  377.         $("#brt-3").on("click",function() {
  378.                 $("html, body").animate({scrollTop: 0}, 800);
  379.         });
  380.                
  381.         $("#brt-2").on("click",function() {
  382.                 $("html, body").animate({scrollTop: 0}, 800);
  383.         });
  384.        
  385.         $("#brt-son").on("click",function() {
  386.                 $("html, body").animate({scrollTop: 0}, 800);
  387.         });
  388.        
  389.         </script>
  390.        
  391.         </body>
  392.  
  393. </html>