Kommentar wird nicht geschrieben bearbeitet von liebewinter 06.08.2018 11:29 Vor einiger Tage habe habe einen große Fehler gemacht , habe mein Festplatte gelöscht... , so einiger sache könnte geretten werden... .Ich habe geprüft und meine Kontakt PHP datei ist in Ordnung , aber nicht 100% .... , wenn schreibe E-mail , name und Messagen sie werden nicht geschrieben.. weder auf "test.txt" Datei noch auf Website . > http://localhost/testphp.php Auf dieses Fenster zeigt wie ich PHP Paketen installiert habe . https://imgur.com/a/Umr0djC ~~~PHP <?php ### messages.php ### utf8 ### äöüÄÖÜ ### header('Content-Type: text/html; Charset=utf-8'); mb_internal_encoding('UTF-8'); date_default_timezone_set('Europe/Berlin'); ?> ~~~ ~~~CSS <html> <head> <meta name="viewport" content="initial-scale=1.0"> <title>Kontakt</title> <style> body { background-color: #ebf5d7; grid-gap: 5px; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox linkBox linkBox" "main main main" "infoBox infoBox infoBox" "footer footer footer" ; } @media screen and (min-width: 40em) { body { display: grid; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox main infoBox" "footer footer footer"; } } @media screen and (min-width: 30em) { #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } } body > header { grid-area: header; background-image: url("../f409784856.png"); padding: 60px; } body > nav { grid-area: nav; background-color: #d2f5c4; } body > #externalLinks { grid-area: linkBox; background-color: #d2f3c6; ; } body > main { grid-area: main; background-color: #eaf6e5; } body > #furtherInformation { grid-area: infoBox; background-color: #d2f3c6; } body > footer { grid-area: footer; background-color: #99ee7a; } /* Nav */ nav {background-color: #d2f5c4;} nav a{ color: black; text-decoration: none; display: inline; padding: 0px 8px; font-size: 17px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } nav ul {list-style-type: none;} nav li {display: block;display:inline-block;} /* ExternalLinks */ #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #externalLinks ul { list-style-type: none; margin: 5px; padding: 0; } #externalLinks li{float: left} /* Geben an Link1, link2, link3 ; Farbe , Padding, .... */ li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;} .dropdown-content { display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */ font-size: 12px; position: absolute; /* die stellung folgt der Erste Link(li) */ background-color: #f1f1f1 ; min-width: 160px; /* macht größer die Inneren Links */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */ z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */ } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/ display: block; } .dropdown-content a:hover { background-color: #9f9e9e; } /* Offnen die Innere Links */ .dropdown:hover .dropdown-content { display: block; left: 109px; /* zeigt wo dem innere link fenster gezeigt wird */ top: 214px; /* zeigt wo dem innere link fenster gezeigt wird */ } /* Main */ input, textarea{ background:rgba(220,220,220,0.75); border:1px solid rgba(220,220,220,0.75); font:inherit; border-radius:0.2941em;/*5px;*/ padding:0.4118em;/*7px;*/ /*farbigen Rahmen in Chrome und Safari abschalten.*/ outline:none; } input:focus, textarea:focus{ background:#fff; border:1px solid #000; outline: none; /* einige Browser add line auf input , das verhindert es... */ } input[type=submit]{ background:#be633c; border:none; color:#fff; border-radius:50% 50%; box-shadow:inset 0 0 1em #fb9d23; padding:0.5882em;/*10px*/ } input[type=submit]:focus, input[type=submit]:active{ background-color:#A33202; } /* Footer */ #copry { overflow: auto; font-size: 2px; list-style-type: none; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #img1 {float: left;margin-bottom: 3px;} #copry a {text-decoration: none;margin-bottom: 3px;} #copry p {font-size: 10px;margin-bottom: 0;} /* Komment Button */ #comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);} #comment {font-size: 11px;} /* Button from comment */ #form {font-size: 14px;} /* size from comment window */ </style> </head> ~~~ ~~~HTML <html> <head> <meta name="viewport" content="initial-scale=1.0"> <title>Kontakt</title> <style> body { background-color: #ebf5d7; grid-gap: 5px; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox linkBox linkBox" "main main main" "infoBox infoBox infoBox" "footer footer footer" ; } @media screen and (min-width: 40em) { body { display: grid; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox main infoBox" "footer footer footer"; } } @media screen and (min-width: 30em) { #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } } body > header { grid-area: header; background-image: url("../f409784856.png"); padding: 60px; } body > nav { grid-area: nav; background-color: #d2f5c4; } body > #externalLinks { grid-area: linkBox; background-color: #d2f3c6; ; } body > main { grid-area: main; background-color: #eaf6e5; } body > #furtherInformation { grid-area: infoBox; background-color: #d2f3c6; } body > footer { grid-area: footer; background-color: #99ee7a; } /* Nav */ nav {background-color: #d2f5c4;} nav a{ color: black; text-decoration: none; display: inline; padding: 0px 8px; font-size: 17px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } nav ul {list-style-type: none;} nav li {display: block;display:inline-block;} /* ExternalLinks */ #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #externalLinks ul { list-style-type: none; margin: 5px; padding: 0; } #externalLinks li{float: left} /* Geben an Link1, link2, link3 ; Farbe , Padding, .... */ li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;} .dropdown-content { display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */ font-size: 12px; position: absolute; /* die stellung folgt der Erste Link(li) */ background-color: #f1f1f1 ; min-width: 160px; /* macht größer die Inneren Links */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */ z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */ } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/ display: block; } .dropdown-content a:hover { background-color: #9f9e9e; } /* Offnen die Innere Links */ .dropdown:hover .dropdown-content { display: block; left: 109px; /* zeigt wo dem innere link fenster gezeigt wird */ top: 214px; /* zeigt wo dem innere link fenster gezeigt wird */ } /* Main */ input, textarea{ background:rgba(220,220,220,0.75); border:1px solid rgba(220,220,220,0.75); font:inherit; border-radius:0.2941em;/*5px;*/ padding:0.4118em;/*7px;*/ /*farbigen Rahmen in Chrome und Safari abschalten.*/ outline:none; } input:focus, textarea:focus{ background:#fff; border:1px solid #000; outline: none; /* einige Browser add line auf input , das verhindert es... */ } input[type=submit]{ background:#be633c; border:none; color:#fff; border-radius:50% 50%; box-shadow:inset 0 0 1em #fb9d23; padding:0.5882em;/*10px*/ } input[type=submit]:focus, input[type=submit]:active{ background-color:#A33202; } /* Footer */ #copry { overflow: auto; font-size: 2px; list-style-type: none; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #img1 {float: left;margin-bottom: 3px;} #copry a {text-decoration: none;margin-bottom: 3px;} #copry p {font-size: 10px;margin-bottom: 0;} /* Komment Button */ #comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);} #comment {font-size: 11px;} /* Button from comment */ #form {font-size: 14px;} /* size from comment window */ </style> </head> ~~~ ~~~HTML <body> <header></header> <nav> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/nav">Home</a></li> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung">About Us</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <aside id="externalLinks"> <ul> <li class="dropdown"> <a href="#" class="dropbtn">Computer</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> <li><a href="#">News</a></li> <li><a href="#">Bucher</a></li> </ul> </aside> <main> <br> <br> <form action="" method="post" id="form"> <label>E-Mail: *<br><input placeholder="my e-mail" type="text" name="email"><br></label> <br> <label> Name: *<br><input placeholder="my name" type="text" name="name"><br></label> <br> <label> Message: <br><textarea cols="45" rows="6" name="message"></textarea><br></label> <p> <input type="submit" name="post" value="POST COMMENT" id="comment"> </p> <br> <h2>Comments:</h2> </form> ~~~ ~~~PHP <?php $file = "test.txt"; if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) { echo "<br>" . "<b>" . "<h3>*** Please enter all required fields ***</h3>" . "</b>"; } else { $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; } if(isset($name) && isset($email) && isset($message)){ $data = array("name" => $name, "email" => $email, "message" => $message); $data = serialize($data); file_put_contents($file, $data . "\n", FILE_APPEND|LOCK_EX); } $messages = file($file); foreach ($messages as $line) { $data = unserialize($line); echo "<br>"; echo "<b>" . "From:" . "</b>" . " " . $data["name"] . " "; echo "<b>" . "at:" . "</b>" . " " . $date = date('m/d/Y h:i:s a', time()) . "<br><br>"; echo $data["message"] . "<br><hr>"; } $messages = file($file); ?> ~~~ ~~~HTML </main> <aside id="furtherInformation"></aside> <footer id="copry" > <p>My Website: Linux and More © 2018. All Rights Reserved.</p> <a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" width="120px" height="40px" src="../f409591688.png" ></a> <p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0<br> International License. Content of this site cannot be republished<br> either online or offline without our permissions. </p> </footer> </body> </html> ~~~ oder auch mein Code hier , hier https://codepen.io/mezb/pen/qKjroP
Kommentar wird nicht geschrieben bearbeitet von liebewinter 06.08.2018 11:32 Vor einiger Tage habe habe einen große Fehler gemacht , habe mein Festplatte gelöscht... , so einiger sache könnte geretten werden... .Ich habe geprüft und meine Kontakt PHP datei ist in Ordnung , aber nicht 100% .... , wenn schreibe E-mail , name und Messagen sie werden nicht geschrieben.. weder auf "test.txt" Datei noch auf Website . Auf dieses Fenster zeigt wie ich PHP Paketen installiert habe . > http://localhost/testphp.php https://imgur.com/a/Umr0djC ~~~PHP <?php ### messages.php ### utf8 ### äöüÄÖÜ ### header('Content-Type: text/html; Charset=utf-8'); mb_internal_encoding('UTF-8'); date_default_timezone_set('Europe/Berlin'); ?> ~~~ ~~~CSS <html> <head> <meta name="viewport" content="initial-scale=1.0"> <title>Kontakt</title> <style> body { background-color: #ebf5d7; grid-gap: 5px; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox linkBox linkBox" "main main main" "infoBox infoBox infoBox" "footer footer footer" ; } @media screen and (min-width: 40em) { body { display: grid; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox main infoBox" "footer footer footer"; } } @media screen and (min-width: 30em) { #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } } body > header { grid-area: header; background-image: url("../f409784856.png"); padding: 60px; } body > nav { grid-area: nav; background-color: #d2f5c4; } body > #externalLinks { grid-area: linkBox; background-color: #d2f3c6; ; } body > main { grid-area: main; background-color: #eaf6e5; } body > #furtherInformation { grid-area: infoBox; background-color: #d2f3c6; } body > footer { grid-area: footer; background-color: #99ee7a; } /* Nav */ nav {background-color: #d2f5c4;} nav a{ color: black; text-decoration: none; display: inline; padding: 0px 8px; font-size: 17px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } nav ul {list-style-type: none;} nav li {display: block;display:inline-block;} /* ExternalLinks */ #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #externalLinks ul { list-style-type: none; margin: 5px; padding: 0; } #externalLinks li{float: left} /* Geben an Link1, link2, link3 ; Farbe , Padding, .... */ li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;} .dropdown-content { display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */ font-size: 12px; position: absolute; /* die stellung folgt der Erste Link(li) */ background-color: #f1f1f1 ; min-width: 160px; /* macht größer die Inneren Links */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */ z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */ } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/ display: block; } .dropdown-content a:hover { background-color: #9f9e9e; } /* Offnen die Innere Links */ .dropdown:hover .dropdown-content { display: block; left: 109px; /* zeigt wo dem innere link fenster gezeigt wird */ top: 214px; /* zeigt wo dem innere link fenster gezeigt wird */ } /* Main */ input, textarea{ background:rgba(220,220,220,0.75); border:1px solid rgba(220,220,220,0.75); font:inherit; border-radius:0.2941em;/*5px;*/ padding:0.4118em;/*7px;*/ /*farbigen Rahmen in Chrome und Safari abschalten.*/ outline:none; } input:focus, textarea:focus{ background:#fff; border:1px solid #000; outline: none; /* einige Browser add line auf input , das verhindert es... */ } input[type=submit]{ background:#be633c; border:none; color:#fff; border-radius:50% 50%; box-shadow:inset 0 0 1em #fb9d23; padding:0.5882em;/*10px*/ } input[type=submit]:focus, input[type=submit]:active{ background-color:#A33202; } /* Footer */ #copry { overflow: auto; font-size: 2px; list-style-type: none; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #img1 {float: left;margin-bottom: 3px;} #copry a {text-decoration: none;margin-bottom: 3px;} #copry p {font-size: 10px;margin-bottom: 0;} /* Komment Button */ #comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);} #comment {font-size: 11px;} /* Button from comment */ #form {font-size: 14px;} /* size from comment window */ </style> </head> ~~~ ~~~HTML <html> <head> <meta name="viewport" content="initial-scale=1.0"> <title>Kontakt</title> <style> body { background-color: #ebf5d7; grid-gap: 5px; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox linkBox linkBox" "main main main" "infoBox infoBox infoBox" "footer footer footer" ; } @media screen and (min-width: 40em) { body { display: grid; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox main infoBox" "footer footer footer"; } } @media screen and (min-width: 30em) { #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } } body > header { grid-area: header; background-image: url("../f409784856.png"); padding: 60px; } body > nav { grid-area: nav; background-color: #d2f5c4; } body > #externalLinks { grid-area: linkBox; background-color: #d2f3c6; ; } body > main { grid-area: main; background-color: #eaf6e5; } body > #furtherInformation { grid-area: infoBox; background-color: #d2f3c6; } body > footer { grid-area: footer; background-color: #99ee7a; } /* Nav */ nav {background-color: #d2f5c4;} nav a{ color: black; text-decoration: none; display: inline; padding: 0px 8px; font-size: 17px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } nav ul {list-style-type: none;} nav li {display: block;display:inline-block;} /* ExternalLinks */ #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #externalLinks ul { list-style-type: none; margin: 5px; padding: 0; } #externalLinks li{float: left} /* Geben an Link1, link2, link3 ; Farbe , Padding, .... */ li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;} .dropdown-content { display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */ font-size: 12px; position: absolute; /* die stellung folgt der Erste Link(li) */ background-color: #f1f1f1 ; min-width: 160px; /* macht größer die Inneren Links */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */ z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */ } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/ display: block; } .dropdown-content a:hover { background-color: #9f9e9e; } /* Offnen die Innere Links */ .dropdown:hover .dropdown-content { display: block; left: 109px; /* zeigt wo dem innere link fenster gezeigt wird */ top: 214px; /* zeigt wo dem innere link fenster gezeigt wird */ } /* Main */ input, textarea{ background:rgba(220,220,220,0.75); border:1px solid rgba(220,220,220,0.75); font:inherit; border-radius:0.2941em;/*5px;*/ padding:0.4118em;/*7px;*/ /*farbigen Rahmen in Chrome und Safari abschalten.*/ outline:none; } input:focus, textarea:focus{ background:#fff; border:1px solid #000; outline: none; /* einige Browser add line auf input , das verhindert es... */ } input[type=submit]{ background:#be633c; border:none; color:#fff; border-radius:50% 50%; box-shadow:inset 0 0 1em #fb9d23; padding:0.5882em;/*10px*/ } input[type=submit]:focus, input[type=submit]:active{ background-color:#A33202; } /* Footer */ #copry { overflow: auto; font-size: 2px; list-style-type: none; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #img1 {float: left;margin-bottom: 3px;} #copry a {text-decoration: none;margin-bottom: 3px;} #copry p {font-size: 10px;margin-bottom: 0;} /* Komment Button */ #comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);} #comment {font-size: 11px;} /* Button from comment */ #form {font-size: 14px;} /* size from comment window */ </style> </head> ~~~ ~~~HTML <body> <header></header> <nav> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/nav">Home</a></li> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Seitenstrukturierung">About Us</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <aside id="externalLinks"> <ul> <li class="dropdown"> <a href="#" class="dropbtn">Computer</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> <li><a href="#">News</a></li> <li><a href="#">Bucher</a></li> </ul> </aside> <main> <br> <br> <form action="" method="post" id="form"> <label>E-Mail: *<br><input placeholder="my e-mail" type="text" name="email"><br></label> <br> <label> Name: *<br><input placeholder="my name" type="text" name="name"><br></label> <br> <label> Message: <br><textarea cols="45" rows="6" name="message"></textarea><br></label> <p> <input type="submit" name="post" value="POST COMMENT" id="comment"> </p> <br> <h2>Comments:</h2> </form> ~~~ ~~~PHP <?php $file = "test.txt"; if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) { echo "<br>" . "<b>" . "<h3>*** Please enter all required fields ***</h3>" . "</b>"; } else { $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; } if(isset($name) && isset($email) && isset($message)){ $data = array("name" => $name, "email" => $email, "message" => $message); $data = serialize($data); file_put_contents($file, $data . "\n", FILE_APPEND|LOCK_EX); } $messages = file($file); foreach ($messages as $line) { $data = unserialize($line); echo "<br>"; echo "<b>" . "From:" . "</b>" . " " . $data["name"] . " "; echo "<b>" . "at:" . "</b>" . " " . $date = date('m/d/Y h:i:s a', time()) . "<br><br>"; echo $data["message"] . "<br><hr>"; } $messages = file($file); ?> ~~~ ~~~HTML </main> <aside id="furtherInformation"></aside> <footer id="copry" > <p>My Website: Linux and More © 2018. All Rights Reserved.</p> <a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" width="120px" height="40px" src="../f409591688.png" ></a> <p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0<br> International License. Content of this site cannot be republished<br> either online or offline without our permissions. </p> </footer> </body> </html> ~~~ oder auch mein Code hier , hier https://codepen.io/mezb/pen/qKjroP
nicht angemeldet nicht angemeldet
