Yeni İndex ve Yeni Uyarı İndexi (1 Viewer)

AtCeenTa · Apr 1, 2019

Merhabalar Spy Halkı İndexi 3 4 saatlik uğraş sonucu az evvel bitirdim.
İndexte typed js ve particles js kullanarak bence iyi iş çıkardım.
Tavsiyem demoya fazla takılmayıp kendinize düzenleyerek bu demodan daha iyi şeyler çıkarabilirsiniz.
İki index'ede sevdiğim ve @Gök-Börü ye armağan ettiğim müzik koydum editlerken değiştirirsiniz.
Beğenirseniz yorum yapın lütfen
Hareketli Bir index her şeyini değiştirebilirsiniz kolayca

Code:

<!DOCTYPE html>
<html>
<head>

    <script src='https://static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script>
    <script src='https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script>
    <meta charset='UTF-8'>
    <meta name="robots" content="noindex">
    <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
    <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
    <link rel="canonical" href="https://codepen.io/merb/pen/yOwJjj" />
 
    <!-- particles.js için -->
    <div id="particles-js"></div>
    <div class="count-particles">
    <span class="js-count-particles"></span>
    </div>
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <title>Hacked By MercilessReaver</title>

    <style type="text/css">
        body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #232741; background-image: url("https://i.imgyukle.com/2019/04/01/wiIuc.jpg"); background-repeat: no-repeat; background-size: 100%; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
    </style>

    <style class="cp-pen-styles">body {
    margin: 0;
    padding: 0;
}

.banner {
    display: block;
    min-height: 200px;
    width: 100%;
    position: relative;
}
.typed_wrap {
    display: block;
    border: 4px solid white;
    width: 290px;
    height: auto;
    padding: 30px;
    position: absolute;
    top: 350%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.typed_wrap h1 {
    display: inline;
    color: white;
}

.typed::after {
    content: '|';
    display: inline;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

.typed-cursor{
   opacity: 0;
    display: none;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.btns {
    display: block;
    width: 400px;
    margin: 0;
    padding: 30px 0 0 30px;
}
.btns a {
    display: inline-block;
    margin-left: 5px;
}
.btns a:first-child{margin-left:0}
.btn {
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}
a .btn {
    cursor: pointer;
    border: 1.5px solid #ffffff;
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    list-style-type: none;
    transition: all .3s;
    color: white;
}

}
</style>
</head>
<body>
<div id="page_wrap">
    <ul class="btns">
    </ul>
    <div class="banner">
        <div class="typed_wrap">
            <h1>Hacked By <span class="typed"></span></h1>
        </div>
    </div>
</div>
<script src='https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js'></script>
        <script id="rendered-js">
          $(function () {
  $(".typed").typed({
    strings: ["MercilessReaver", "MercilessReaver", "MercilessReaver"],
    // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
    stringsElement: null,
    // typing speed
    typeSpeed: 30,
    // time before typing starts
    startDelay: 1200,
    // backspacing speed
    backSpeed: 20,
    // time before backspacing
    backDelay: 500,
    // loop
    loop: true,
    // false = infinite
    loopCount: 5,
    // show cursor
    showCursor: false,
    // character for cursor
    cursorChar: "|",
    // attribute to type (null == text)
    attr: null,
    // either html or text
    contentType: 'html',
    // call when done callback function
    callback: function () {},
    // starting callback function before each string
    preStringTyped: function () {},
    //callback for every typed string
    onStringTyped: function () {},
    // callback for reset
    resetCallback: function () {} });

});
 </script>

 
<script type="text/javascript">
    particlesJS("particles-js", {"particles":{"number":{"value":185,"density":{"enable":true,"value_area":868.0624057955}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":1,"random":true,"anim":{"enable":true,"speed":1,"opacity_min":0,"sync":false}},"size":{"value":5,"random":true,"anim":{"enable":false,"speed":4,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
 </script>
 <iframe width="0" height="0" src="https://www.youtube.com/embed/MdLII-xyLFI?autoplay=1" frameborder="0" allow="autoplay; encrypted-media;" allowfullscreen></iframe>
</body>
</html>

Code:

<!DOCTYPE html><html lang='en' class=''>
<head>
    <script src='https://static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script>
    <script src='https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script>
    <meta charset='UTF-8'>
    <meta name="robots" content="noindex">
    <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
    <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
    <link rel="canonical" href="https://codepen.io/merb/pen/yOwJjj" />
 

    <style class="cp-pen-styles">body {
    margin: 0;
    padding: 0;
}

.banner {
    display: block;
    min-height: 200px;
    width: 100%;
    position: relative;
}
.typed_wrap {
    display: block;
    border: 4px solid #ecf0f1;
    width: 290px;
    height: auto;
    padding: 30px;
 
    /*centers it in the .banner*/
    position: absolute;
    top: 350%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.typed_wrap h1 {
    display: inline;
}

/*Add custom cursor so it auto inherits font styles*/
.typed::after {
    content: '|';
    display: inline;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

/*Removes cursor that comes with typed.js*/
.typed-cursor{
   opacity: 0;
    display: none;
}
/*Custom cursor animation*/
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.btns {
    display: block;
    width: 400px;
    margin: 0;
    padding: 30px 0 0 30px;
}
.btns a {
    display: inline-block;
    margin-left: 5px;
}
.btns a:first-child{margin-left:0}
.btn {
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ecf0f1;
    text-decoration: none;
}
a .btn {
    cursor: pointer;
    border: 1.5px solid #ecf0f1;
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    list-style-type: none;
    transition: all .3s;
}

}</style></head><body>
<!DOCTYPE html>
<html>
<head>

    <script src='https://static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script>
    <script src='https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script>
    <meta charset='UTF-8'>
    <meta name="robots" content="noindex">
    <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
    <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
    <link rel="canonical" href="https://codepen.io/merb/pen/yOwJjj" />
 
    <!-- particles.js için -->
    <div id="particles-js"></div>
    <div class="count-particles">
    <span class="js-count-particles"></span>
    </div>
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <title>Noticed By MercilessReaver</title>

    <style type="text/css">
        body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #232741; background-image: url("https://i.imgyukle.com/2019/04/01/wiIuc.jpg"); background-repeat: no-repeat; background-size: 100%; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
    </style>

    <style class="cp-pen-styles">body {
    margin: 0;
    padding: 0;
}

.banner {
    display: block;
    min-height: 200px;
    width: 100%;
    position: relative;
}
.typed_wrap {
    display: block;
    border: 4px solid white;
    width: 290px;
    height: auto;
    padding: 30px;
    position: absolute;
    top: 350%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.typed_wrap h1 {
    display: inline;
    color: white;
}

.typed::after {
    content: '|';
    display: inline;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

.typed-cursor{
   opacity: 0;
    display: none;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.btns {
    display: block;
    width: 400px;
    margin: 0;
    padding: 30px 0 0 30px;
}
.btns a {
    display: inline-block;
    margin-left: 5px;
}
.btns a:first-child{margin-left:0}
.btn {
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}
a .btn {
    cursor: pointer;
    border: 1.5px solid #ffffff;
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    list-style-type: none;
    transition: all .3s;
    color: white;
}

}
</style>
</head>
<body>
<div id="page_wrap">
    <ul class="btns">
    </ul>
    <div class="banner">
        <div class="typed_wrap">
            <h1>Noticed By <span class="typed"></span></h1>
        </div>
    </div>
</div>
<script src='https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js'></script>
        <script id="rendered-js">
          $(function () {
  $(".typed").typed({
    strings: ["MercilessReaver", "MercilessReaver", "MercilessReaver"],
    // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
    stringsElement: null,
    // typing speed
    typeSpeed: 30,
    // time before typing starts
    startDelay: 1200,
    // backspacing speed
    backSpeed: 20,
    // time before backspacing
    backDelay: 500,
    // loop
    loop: true,
    // false = infinite
    loopCount: 5,
    // show cursor
    showCursor: false,
    // character for cursor
    cursorChar: "|",
    // attribute to type (null == text)
    attr: null,
    // either html or text
    contentType: 'html',
    // call when done callback function
    callback: function () {},
    // starting callback function before each string
    preStringTyped: function () {},
    //callback for every typed string
    onStringTyped: function () {},
    // callback for reset
    resetCallback: function () {} });

});
 </script>

 
<script type="text/javascript">
    particlesJS("particles-js", {"particles":{"number":{"value":185,"density":{"enable":true,"value_area":868.0624057955}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":1,"random":true,"anim":{"enable":true,"speed":1,"opacity_min":0,"sync":false}},"size":{"value":5,"random":true,"anim":{"enable":false,"speed":4,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
 </script>
 <iframe width="0" height="0" src="https://www.youtube.com/embed/MdLII-xyLFI?autoplay=1" frameborder="0" allow="autoplay; encrypted-media;" allowfullscreen></iframe>
</body>
</html>
</body></html>

MercilessReaver Sundu.

by.root · Apr 1, 2019

Güzelmiş ama keşke fotoğraf koysaydınız, ellerine sağlık

AtCeenTa · Apr 1, 2019

by.root said:
Güzelmiş ama keşke fotoğraf koysaydınız, ellerine sağlık

Sayfa hareket halinde diye eklememiştim ekleyim madem eyvallah

by.root · Apr 1, 2019

MercilessReaver said:
Sayfa hareket halinde diye eklememiştim ekleyim madem eyvallah

Çok teşekkür ederim

AtCeenTa · Apr 2, 2019

Sevmediniz mi ? Bakmadınız mı? @Nobody @TolanK1

josephyn · Apr 7, 2022

fweferfkmlwe · Jun 30, 2022

AtCeenTa said:
Sayfa hareket halinde diye eklememiştim ekleyim madem eyvallah

Yeni İndex ve Yeni Uyarı İndexi (1 Viewer)

More options

AtCeenTa

by.root

Defacer değil Lamer

AtCeenTa

by.root

Defacer değil Lamer

AtCeenTa

josephyn

fweferfkmlwe

Users who are viewing this thread