Facebook
From Jdkd, 4 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 245
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.         <head>
  5.                 <title>XXX</title>
  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.0">
  9.                 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  10.                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  11.                 <link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">
  12.                 <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
  13.                 <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  14.                 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  15.                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16.                 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  17.                 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  18.                 <style type="text/css">
  19.                 html, body {
  20.                         height: 100%;
  21.                         margin: 0;
  22.                         padding: 0;
  23.                         width: 100%;
  24.                 }
  25.                
  26.                 /*STAFF*/
  27.                 .staff-page {
  28.                         padding: 10px;
  29.                         background: #2c2f33;
  30.                 }
  31.                
  32.                 .avatar {
  33.                         height: 115px;
  34.                         width: 115px;
  35.                         border-radius: 100px;
  36.                         border: 2px solid white;
  37.                 }
  38.                
  39.                 .staff-member {
  40.                         padding: 1px;
  41.                         width: 30%;
  42.                         border-radius: 10px;
  43.                 }
  44.                
  45.                 .staff-member:hover {
  46.                         background: #800909;
  47.                         transition: 0.7s;
  48.                 }
  49.                
  50.                 .staff-baslik {
  51.                         text-align: center;
  52.                 }
  53.                
  54.                 .staff-name {
  55.                         color: white;
  56.                         font-size: 17px;
  57.                         font-family: 'Heebo', sans-serif;
  58.                 }
  59.                
  60.                 .staff-rank {
  61.                         color: #d3d3d3;
  62.                         font-size: 15px;
  63.                         font-family: 'Fira Sans', sans-serif;
  64.                 }
  65.                
  66.                 .staff-media a {
  67.                         text-decoration: none;
  68.                         padding: 4px;
  69.                         color: white;
  70.                         border-radius: 100px;
  71.                 }
  72.                
  73.                 .staff-media a:hover {
  74.                         transition: 0.5s;
  75.                         color: #0e9df5;
  76.                 }
  77.                
  78.                 #staff-profile {
  79.                         text-decoration: none;
  80.                         color: #d3d3d3;
  81.                 }
  82.                
  83.                 #staff-profile:hover {
  84.                         background: white;
  85.                         color: #990000;
  86.                         transition: 0.5s;
  87.                         padding: 5px;
  88.                         border-radius: 25px;
  89.                 }
  90.                
  91.                 .staff-text {
  92.                         color: white;
  93.                         font-size: 35px;
  94.                         text-align: center;
  95.                         font-family: 'Oswald', sans-serif;
  96.                 }
  97.                
  98.                 .hr {
  99.                         border: none;
  100.                         width: 10%;
  101.                         height: 3px;
  102.                         background: #800909;
  103.                 }
  104.                 /*STAFF*/
  105.                
  106.                 /*FOOTER*/
  107.                 footer {
  108.                         padding: 10px;
  109.                         width: 100%;
  110.                         background: #10131a;   
  111.                 }
  112.                
  113.                 .footer-text {
  114.                         position: relative;
  115.                         left: 2%;
  116.                         margin: 26px;
  117.                 }
  118.                
  119.                 .footer-text a {
  120.                         text-decoration: none;
  121.                         color: #d3d3d3;
  122.                 }
  123.                
  124.                 .footer-text a:hover {
  125.                         transition: 0.5s;
  126.                         color: white;
  127.                 }
  128.                
  129.                 .footer-text i {
  130.                         font-size: 17px;
  131.                         padding: 8px;
  132.                         border-radius: 100px;
  133.                 }
  134.                
  135.                 .footer-text h4 {
  136.                         color: white;
  137.                 }
  138.                
  139.                 .footer-text .fa-facebook {
  140.                         color: #fff;
  141.                         background: #3c5a99;
  142.                 }
  143.                
  144.                 .footer-text .fa-twitter {
  145.                         color: #fff;
  146.                         background: #00acee;
  147.                 }
  148.                
  149.                 .footer-text .fa-instagram {
  150.                         color: #fff;
  151.                         background: #dd2a7b;
  152.                 }
  153.                
  154.                 .footer-text .fa-youtube {
  155.                         color: #fff;
  156.                         background: red;
  157.                 }
  158.                
  159.                 .footer-text .fa-rss {
  160.                         color: #fff;
  161.                         background: #eeac00;
  162.                 }
  163.                
  164.                 .footer-text .fa-discord {
  165.                         color: #fff;
  166.                         background: #7289da;
  167.                 }
  168.                
  169.                 .footer-hr {
  170.                         border: none;
  171.                         height: 1px;
  172.                         color: #d3d3d3;
  173.                         background: #d3d3d3;
  174.                 }
  175.                
  176.                 .footer {
  177.                         display: flex;
  178.                         font-family: 'Roboto', sans-serif;
  179.                 }
  180.                
  181.                 .footer-hr {
  182.                         border: none;
  183.                         height: 1px;
  184.                         color: #000;
  185.                         width: 100%;
  186.                 }
  187.                 /*FOOTER*/
  188.                
  189.                 /*MENU*/
  190.                 nav {
  191.                         background: #131c20;
  192.                         padding: 0px;
  193.                         width: 100%;
  194.                         display: flex;
  195.                 }
  196.                
  197.                 nav a {
  198.                         position: relative;
  199.                         left: 50%;
  200.                         text-decoration: none;
  201.                         color: white;
  202.                         padding: 14px;
  203.                         transition: 0.5s;
  204.                         font-family: 'Roboto', sans-serif;
  205.                 }
  206.                
  207.                 nav a:hover {
  208.                         text-decoration: none;
  209.                         color: #800909;
  210.                         border-bottom: 4px solid #800909;
  211.                 }
  212.                
  213.                 #anasayfa {
  214.                         text-decoration: none;
  215.                         color: #800909;
  216.                         border-bottom: 4px solid #800909;
  217.                 }
  218.                
  219.                 .menu-logo {
  220.                         position: relative;
  221.                         left: 15%;
  222.                         height: 5%;
  223.                         width: 5%;
  224.                 }
  225.                 /*MENU*/
  226.                
  227.                 /*TEMA*/
  228.                 .tema {
  229.                         height: 97%;
  230.                         width: 100%;
  231.                         background: url('https://wallpaperplay.com/walls/full/c/4/9/87852.jpg');
  232.                         background-repeat: no-repeat;
  233.                         background-size: cover;
  234.                         color: white;
  235.                 }
  236.                
  237.                 .tema-text {
  238.                         position: relative;
  239.                         top: 43%;
  240.                 }
  241.                
  242.                 .tema a {
  243.                         text-decoration: none;
  244.                         padding: 10px 20px;
  245.                         background: #800909;
  246.                         margin: 10px;
  247.                         color: white;
  248.                         border-radius: 20px;
  249.                 }
  250.                
  251.                 .tema a:hover {
  252.                         transition: 0.5s;
  253.                         color: #800909;
  254.                         background: white;
  255.                 }
  256.                
  257.                 /*TEMA*/
  258.                 </style>
  259.         </head>
  260.         <body>
  261.                 <nav>
  262.                         <img class="menu-logo" src="https://i.ibb.co/hFy0Lhz/Jitemlogo.png"/>
  263.                         <a id="anasayfa" href=""><i class="fas fa-home"></i> Anasayfa</a>
  264.                         <a href=""><i class="fas fa-rss"></i> Forum</a>
  265.                         <a href=""><i class="fab fa-discord"></i> Discord</a>
  266.                         <a href=""><i class="fas fa-lock"></i> Panel</a>
  267.                 </nav>
  268.                
  269.                 <div class="tema">
  270.                         <div class="tema-text">
  271.                         <center><h3>XXX Roleplay</h3>
  272.                         <p>XXX Roleplay websitesine hoş geldin dostum. Aşağıdaki butonlardan birine basarak<br>veyahut menüyü kullanarak istediğin sayfaya ulaşabilirsin.</p>
  273.                         <br>
  274.                         <a href="">Test Button</a>
  275.                         <a href="">Test button</a></center>
  276.                 </div>
  277.                 </div>
  278.                
  279.                 <div class="staff-page"><br>
  280.                         <p class="staff-text">STAFF - TEAM</p>
  281.                         <hr class="hr">
  282.                         <br>
  283.                         <p class="staff-baslik"><font color="white">XXX Roleplay </font><font color="#d3d3d3">projesinde emeği geçen üst yöneticilerin sergilendiği sayfadır. Profile git butonuna basarak<br>detaylı profil sayfasına gidebilirsiniz.</font></p><br><br>
  284.                         <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  285.                                 <div class="carousel-inner">
  286.                                         <div class="carousel-item active">
  287.                                                 <center><div class="staff-member"><br>
  288.                                                         <a href=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRRHVx3rgLMhV1kq8I9Y0PQs7K-q7jpyTQgBIHpTcY8tsc8IkWz" class="avatar"/></a>
  289.                                                         <br>
  290.                                                         <br>
  291.                                                         <p class="staff-name">CerberuS</p>
  292.                                
  293.                                                         <p class="staff-rank">Baş Vekil</p>
  294.                                                         <div class="staff-media">              
  295.                                                                 <a href=""><i class="fab fa-facebook"></i></a>
  296.                                                                 <a href=""><i class="fab fa-discord"></i></a>
  297.                                                                 <a href=""><i class="fab fa-twitter"></i></a>
  298.                                                                 <a href=""><i class="fab fa-instagram"></i></a>
  299.                                                         </div>
  300.                                                         <br>
  301.                                                         <a id="staff-profile" href=""><i class="fas fa-sign-in-alt"></i> Profile Git</a>
  302.                                                 <br><br></div></center>
  303.                                         </div>
  304.                                         <div class="carousel-item">
  305.                                                 <center><div class="staff-member"><br>
  306.                                                         <a href=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRRHVx3rgLMhV1kq8I9Y0PQs7K-q7jpyTQgBIHpTcY8tsc8IkWz" class="avatar"/></a>
  307.                                                         <br>
  308.                                                         <br>
  309.                                                         <p class="staff-name">CerberuS</p>
  310.                                
  311.                                                         <p class="staff-rank">Baş Vekil</p>
  312.                                                         <div class="staff-media">              
  313.                                                                 <a href=""><i class="fab fa-facebook"></i></a>
  314.                                                                 <a href=""><i class="fab fa-discord"></i></a>
  315.                                                                 <a href=""><i class="fab fa-twitter"></i></a>
  316.                                                                 <a href=""><i class="fab fa-instagram"></i></a>
  317.                                                         </div>
  318.                                                         <br>
  319.                                                         <a id="staff-profile" href=""><i class="fas fa-sign-in-alt"></i> Profile Git</a>
  320.                                                 <br><br></div></center>
  321.                                         </div>
  322.                                 <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  323.                                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  324.                                         <span class="sr-only">Previous</span>
  325.                                 </a>
  326.                                 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  327.                                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  328.                                         <span class="sr-only">Next</span>
  329.                                 </a>
  330.                         </div>
  331.                 <br></div>
  332.         </div>
  333.        
  334.                 <footer>
  335.                         <div class="footer-top">
  336.                                 <div class="container">
  337.                                         <div class="row">
  338.                                                 <div class="footer-text">
  339.                                                         <h4>Forum</h4>
  340.                                                         <a href="">Kurallar</a><br>
  341.                                                         <a href="">Öneri/Şikayet</a><br>
  342.                                                         <a href="">Bla bla</a><br>
  343.                                                         <a href="">Bla bla</a>
  344.                                                 </div>
  345.                                                 <div class="footer-text">
  346.                                                         <h4>Bla bla</h4>
  347.                                                         <a href="">bla bla</a><br>
  348.                                                         <a href="">bla bla</a><br>
  349.                                                         <a href="">bla bla</a><br>
  350.                                                         <a href="">bla bla</a>
  351.                                                 </div>
  352.                                                 <div class="footer-text">
  353.                                                         <h4>Bla bla</h4>
  354.                                                         <a href="">bla bla</a><br>
  355.                                                         <a href="">bla bla</a><br>
  356.                                                         <a href="">bla bla</a><br>
  357.                                                         <a href="">bla bla</a>
  358.                                                 </div>
  359.                                                 <div class="footer-text">
  360.                                                         <h4>Sosyal Medya</h4>
  361.                                                         <div class="medya">    
  362.                                                                 <a href=""><i class="fab fa-facebook"></i> Facebook</a><br>
  363.                                                                 <a href=""><i class="fab fa-instagram"></i> Ä°nstagram</a><br>
  364.                                                                 <a href=""><i class="fab fa-twitter"></i> Twitter</a>
  365.                                                         </div>
  366.                                                 </div>
  367.                                                 <div class="footer-text">                      
  368.                                                         <a href=""><i class="fab fa-discord"></i> Discord</a><br>
  369.                                                         <a href=""><i class="fas fa-rss"></i> Forum</a><br>
  370.                                                         <a href=""><i class="fab fa-youtube"></i> Youtube</a>                                  
  371.                                                 </div>
  372.                                         </div>
  373.                                         <center><hr class="footer-hr"></center>
  374.                                         <div class="footer">   
  375.                                                 <p style="color: #d3d3d3;">© 2019 XXX Roleplay</p>
  376.                                                 <div style="display: flex; position: relative; left: 55%;"class="form-group">
  377.                                                         <img src="https://logonoid.com/images/google-translate-logo.png" height="30" width="30"/>
  378.                                                        
  379.                                                         <select class="form-control" id="sel1">
  380.                                                                 <option>Türkçe(Default)</option>
  381.                                                                 <option>Ä°ngilizce</option>
  382.                                                                 <option>Almanca</option>
  383.                                                                 <option>Çince</option>
  384.                                                         </select>                                              
  385.                                                 </div>
  386.                                         </div>
  387.                                 </div>
  388.                         </div>
  389.                 </footer>
  390.         </body>
  391. </html>
  392.