<html lang="de" data-lt-installed="true"><head>
<meta charset="utf-8">
<title>Homepage von Basti1012</title>
<base href="https://basti1012.de/">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://basti1012.de/js/index.php?js=3.2.1-jquery.min.js"></script>
<style>
@media only screen and (max-width: 568px) {
main {
font-size:16px;
}
}
/*für den wo bin ich link */
@media only screen and (max-width: 420px) {
.side-navigation li, .side-navigation li a {
font-size: 24px !important;
}
}
@media only screen and (max-width: 499px) {
#oben{
display:none !important;
}
}
* {
padding: 0;
margin: 0;
}
body {
color:#000000;
display:flex;
flex-direction:column;
overflow-x: hidden;
}
main {
background:#ffffff;
color: #000000;
min-height:200px;
padding:5px;
}
ul {
width:100%;
list-style-type:none;
font-size:14px;
}
ul li a {
text-decoration:none;
color:#ffffff;
padding:2px 3px 2px 3px;
background:black;
display:block;
}
ul li a:visited {
color: lightgrey;
}
ul li a:link {
color:blue;
text-align: left;
padding: 5px 15px !important;
}
ul li a:hover {
color:black;
background-color:yellow;
}
form{
text-align:center;
}
#navright{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height:35px;
z-index:999;
background: #4d4d4d;
background-image: linear-gradient(to bottom, #4d4d4d 0%, #1a1a1a 100%);
}
#navright ul{
list-style: none;
display:flex;
height:100%;
}
#navright ul li{
display:block;
flex:1;
}
#navright ul li a {
color:white;
font-family: 'Lucida Console';
font-size: 14px;
text-decoration: none;
display:block;
text-align:center;
line-height:28px;
margin:0 auto;
overflow:hidden;
background: #4d4d4d;
background-image: linear-gradient(to bottom, #4d4d4d 0%, #1a1a1a 100%);
}
@media (min-width: 500px){
#navright{
width:100%;
}
}
@media (max-width: 499px){
#navright{
height:auto;
position: relative;
margin: 0;
padding: 5px 0 5px 0;
}
#navright ul{
flex-direction:column;
}
#navright ul li a {
width:50%;
border-bottom:1px solid grey;
}
}
#blender{
position:absolute;
z-index:999999;
top:0;
left:0;
width:300px;
display:none;
height:auto;
border:2px solid white;
overflow:hidden;
border-radius:10px;
transition:all 300ms;
pointer-events:none;
}
#blender img{
width:100%;
}
#blender:before{
content:attr(data-blendertext);
height:160px;
width:295px;
margin:0 auto;
position:absolute;
font-size:30px;
font-weight:900;
text-align:center;
word-break: break-word;
color:red;
overflow:hidden;
display:block;
}
.search {
height: 34px;
width:100%;
display:flex;
overflow:hidden;
}
#suchfeld{
background-color: #fff;
border: 0;
font-size: 18px;
font-family: 'Muli', sans-serif;
height: 34px;
width:100%;
position:relative;
z-index:0;
left:-100%;
transition: width 0.3s ease;
}
#suchbutton{
background-color: #fff;
border: 0;
cursor: pointer;
font-size: 24px;
position:relative;
z-index:1;
left:0;
height: 34px;
width: 34px;
transition: transform 0.3s ease;
}
#suchfeld:focus {
outline: none;
}
#formsuche{
text-align:left;
display:flex;
width:100%;
}
@media only screen and (max-width: 360px) {
.logo{
display:none;
}
}
#oben{
background:#123456;
display:flex;
flex-direction:column;
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
min-height:200px;
background:#123456;
}
.logounten:after,#chatunten:after{
content: '';
border-bottom: 2px solid red;
width: 0%;
margin-left: -100%;
display: block;
animation: lauf 5s linear infinite;
}
.logo{
width: 38vw;
text-align: center;
background: blue;
padding: 10px 0px;
border-radius: 20px;
border: 3px solid black;
margin-top:20px;
}
.logo>.logooben,#chatoben{
color: white;
Background: blue;
font-size:3vw;
text-shadow: 2px 2px 2px black;
font-weight: bold;
}
.logo>.logounten,#chatunten{
display: inline-block;
background: white;
border-radius: 5px;
border: 1px solid black;
color: blue;
padding: 2px;
overflow: hidden;
font-weight: 900;
font-size:2vw;
text-shadow: 1px 1px 1px black;
cursor:pointer;
}
.logounten:hover,#chatunten:hover{
color:red;
}
#chatsister,#forumsister{
display:none;
position:absolute;
z-index:2;
top:0;
left:0;
width:200px;
height:auto;
border:2px solid grey;
padding:20px;
border-radius:20px;
color:white;
text-align:center;
font-weight:700;
background:#123456;
}
#llooggooss{
display:flex;
align-items:center;
margin-top:20px;
justify-content:space-around;
}
li#navclose {
position: absolute;
margin-top: -30px;
margin-left: 300px;
text-align: center;
line-height: 30px;
width: 30px;
background: black;
height: 30px;
font-size: 25px;
font-weight: 900;
float: right;
}
.side-navigation{
width:300px;
position:fixed;
height:100%;
z-index:999999;
border-top:30px solid transparent;
top:0px;
left:-305px;
background:black;
color:white;
transition:all 300ms;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
.side-navigation:hover{
left:0;
transition:all 300ms;
z-index: 99999;
}
.nav{
padding-left: 0;
margin-bottom: 0;
height: 100%;
overflow-y: scroll;
list-style: none;
}
.side-navigation li,
.side-navigation li a
{
list-style:none;
color:white;
}
.nav::-webkit-scrollbar {
width:13px;
}
.nav::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: blue;
}
.nav::-webkit-scrollbar-thumb {
background: white;
height:100px;
outline: 1px solid slategrey;
}
#corona_box{
display:flex;
flex-direction:column;
align-items: center;
margin: 0 auto;
justify-content: center;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
@charset "UTF-8";
.animated{animation-duration:1s;animation-fill-mode:both}
.pace {
pointer-events: none;
user-select: none;
}
.pace.pace-inactive .pace-progress {
display: none;
}
.pace .pace-progress {
position: fixed;
z-index: 2000;
top: 0;
right: 0;
height: 5rem;
width: 5rem;
color:red;
transform: translate3d(0, 0, 0) !important;
}
.pace .pace-progress:after {
display: block;
position: absolute;
top: 0;
right: .5rem;
content: attr(data-progress-text);
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
font-size: 5rem;
line-height: 1;
text-align: right;
color: rgba(0, 0, 255, 0.99);
}
/*------- cookieconsent.min.css ----- -----------*/
.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-revoke:hover{transform:translateY(0)}
.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-btn,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-bottom{bottom:1em}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1 1 auto;flex:1 1 auto}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}
</style><style></style><style type="text/css" data-fbcssmodules="css:fb.css.base css:fb.css.dialog css:fb.css.iframewidget css:fb.css.customer_chat_plugin_iframe"></style></head><body class=" pace-done"><div class="cc-revoke cc-bottom cc-animate cc-color-override-1553441872" style="">Cookie Policy</div><div role="dialog" aria-live="polite" aria-label="cookieconsent" aria-describedby="cookieconsent:desc" class="cc-window cc-banner cc-type-opt-in cc-theme-classic cc-bottom cc-color-override-1553441872 cc-invisible" style="display: none;"><!--googleoff: all--><span id="cookieconsent:desc" class="cc-message">SORRY der Text muß jetzt sein.<br>Diese Website verwendet Cookies um Ihnen ein besseres Nutzererlebnis zu bieten! <a aria-label="learn more about cookies" role="button" tabindex="0" class="cc-link" href="https://basti1012.de/root/index.php?ordner=root&name=datenschutz.php" rel="noopener noreferrer nofollow" target="_blank">https://basti1012.de/root/index.php?ordner=root&name=datenschutz.php</a></span><div class="cc-compliance cc-highlight"><a aria-label="deny cookies" role="button" tabindex="0" class="cc-btn cc-deny">Decline</a><a aria-label="allow cookies" role="button" tabindex="0" class="cc-btn cc-allow">Ok</a></div><!--googleon: all--></div><div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>
<nav id="navright">
<ul>
<li class="droppable">
<a class="block__link noersatz" data-text="" data-img="/images/neue-vorschau/thumb//-index.png" href="https://basti1012.de/index.php">Home</a>
</li>
<li class="droppable">
<a class="block__link noersatz" data-text="" data-img="images/neue-vorschau/thumb/github/github-index.png" href="https://basti1012.de/github/index.php">Meine Githubs</a>
</li>
<li class="droppable">
<a class="block__link noersatz" data-text="" data-img="images/neue-vorschau/thumb/online/online-index.png" href="https://basti1012.de/online/index.php">Wo Online</a>
</li>
<li class="droppable">
<a class="block__link noersatz" data-text="" data-img="images/neue-vorschau/thumb/my_codepen/my_codepen-index.png" href="https://basti1012.de/my_codepen/index.php">My Codepens</a>
</li>
<li class="droppable">
<div class="search">
<form id="formsuche" action="suche/suche.php">
<button id="suchbutton" type="button">
<i class="fa fa-search"></i>
</button>
<input class="" id="suchfeld" type="text" name="q" placeholder="Suchwort...">
</form>
</div>
</li>
</ul>
</nav><div id="oben">
<div id="llooggooss">
<a href="https://soforthilfe-forum.de/">
<div class="logo logo1">
<span class="logooben">Zum Soforthilfe-Forum</span>
<br>
<span class="logounten">Hilfe bei HTML,CSS,JS und PHP</span>
</div>
</a>
<div id="forumsister"><span>
Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.
Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.
Auf fast allen Fragen haben wir eine Antwort.</span></div>
<a href="https://soforthilfe-chat.de/">
<div class="logo logo2">
<span id="chatoben">Zum Soforthilfe Chat</span><br>
<span id="chatunten">Hilfe bei Web programmieren</span>
</div>
</a>
<div id="chatsister"><span>
Der Soforthilfe-chat verspricht das ,was sein Name sagt.
Hier sind Leute Online die sofort ihre hilfe anbieten.
Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen.
Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung</span>
</div>
</div>
</div>
<div id="wrapper">
<div class="animated" data-blendertext="" id="blender" style="display: none; top: 831px; left: 346px;"><img src="images/neue-vorschau/thumb/api/api-index.png"></div>
<nav class="side-navigation">
<ul class="nav nav-pills nav-stacked level-1 text">
<li id="navclose">X</li>
<li class="mainnav-label">
<a class="block__link" data-img="images/neue-vorschau/thumb//-index.png" href="/index.php">
<i class="fa fa-fw fa-home"></i>
Home
</a>
</li>
<li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/Archiv/Archiv-index.png" href="Archiv/index.php">
<i class="fa fa-fw fa-crop"></i>
Veraltet oder deffekt</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/Handy-Scripte-Tools/Handy-Scripte-Tools-index.png" href="Handy-Scripte-Tools/index.php">
<i class="fa fa-fw fa-mobile"></i>
Handy-Scripte-Tools</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/Kurze-Scripte-und-Codeschnipsel/Kurze-Scripte-und-Codeschnipsel-index.png" href="Kurze-Scripte-und-Codeschnipsel/index.php">
<i class="fa fa-fw fa-code"></i>
Kurze Scripte und Codeschnipsel</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/Lernen-spielen/Lernen-spielen-index.png" href="Lernen-spielen/index.php">
<i class="fa fa-fw fa-gamepad"></i>
Spielerisch lernen</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/Scripte-Download/Scripte-Download-index.png" href="Scripte-Download/index.php">
<i class="fa fa-fw fa-download"></i>
Scripte Downloads</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/andere/andere-index.png" href="andere/index.php">
<i class="fa fa-fw fa-home"></i>
Alles mögliche</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/api/api-index.png" href="api/index.php">
<i class="fa fa-fw fa-home"></i>
Apis</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/corona/corona-index.png" href="corona/index.php">
<i class="fa fa-fw fa-home"></i>
Corona</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/generator/generator-index.png" href="generator/index.php">
<i class="fa fa-fw fa-home"></i>
Generatoren</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/hacks/hacks-index.png" href="hacks/index.php">
<i class="fa fa-fw fa-bug"></i>
Hacks und Bugs</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/hier-gibts-hilfe/hier-gibts-hilfe-index.png" href="hier-gibts-hilfe/index.php">
<i class="fa fa-fw fa-home"></i>
Hier gibt es hilfe</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/javascript-beispiele/javascript-beispiele-index.png" href="javascript-beispiele/index.php">
<i class="fa fa-fw fa-question"></i>
Javascript beisiele</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/loesungen/loesungen-index.png" href="loesungen/index.php">
<i class="fa fa-fw fa-code"></i>
Lösungen</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/myscript/myscript-index.png" href="myscript/index.php">
<i class="fa fa-fw fa-code"></i>
Meine Scripte</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/neuigkeiten/neuigkeiten-index.png" href="neuigkeiten/index.php">
<i class="fa fa-fw fa-home"></i>
News</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/service/service-index.png" href="service/index.php">
<i class="fa fa-fw fa-home"></i>
Service</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/spiele/spiele-index.png" href="spiele/index.php">
<i class="fa fa-fw fa-gamepad"></i>
Javascript Spiele</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/tools/tools-index.png" href="tools/index.php">
<i class="fa fa-fw fa-code"></i>
Tools</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/toolsmitbildern/toolsmitbildern-index.png" href="toolsmitbildern/index.php">
<i class="fa fa-fw fa-picture-o"></i>
Tools mit Bildern</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/was-kann-css/was-kann-css-index.png" href="was-kann-css/index.php">
<i class="fa fa-fw fa-css3"></i>
Was kann Css</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/wetter/wetter-index.png" href="wetter/index.php">
<i class="fa fa-fw fa-home"></i>
wetter</a>
</li><li class="center themen">
<a class="block__link menu-fonts" data-img="images/neue-vorschau/thumb/index1/index1-index.png" href="index1/index.php">
<i class="fa fa-fw fa-home"></i>
Agbs Kontakt</a>
</li></ul></nav><main>
<div id="corona_box">
</div></main>
</div>
<script>
$('.block__link').hover(function(){
var link=$(this).data('img');
$(this).on( "mousemove", function( event ) {
let left=event.pageX;
let top=event.pageY;
//console.log('top='+top+' left= '+left);
$('#blender').css('display','block');
$('#blender').addClass('bounce');
$('#blender').css('top',top);
$('#blender').css('left',left+100);
$('#blender').html('<img src="'+link+'">')
});
}).on('mouseleave',function(){
$('#blender').removeClass('bounce');
$('#blender').css('display','none');
});
$('nav').on('mouseleave',function(){
console.log('themen verlassern')
$('#blender').removeClass('bounce');
$('#blender').css('display','none');
})
</script>
</body></html>