Código! My flip BOOK.
<!DOCTYPE html>
<html lang="en">
<center>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Livro de 6 Páginas</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.css">
<style>
.flipbook {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<h2 style="color:blue;">My flip book HTML</h2>
<div class="flipbook">
<div style="background-image:url(https://avatars.mds.yandex.net/i?id=4678405721d84b2f0e72ddd910fab49c81f30492-12525508-images-thumbs&n=13)"><h1 style="color:white;">Seja feliz por favor!</h1></div>
<div style="background-image:url(https://avatars.mds.yandex.net/i?id=78ae3a9e84eaf31a1a1e31fbc56d687e551f2ed4-9986976-images-thumbs&n=13)"><h1 style="color:white;">Seja feliz por favor!</h1></div>
<div style="background-image:url(https://avatars.mds.yandex.net/i?id=7158cdcdf60786d950e7458dc27f2146f993f7d5-12525791-images-thumbs&n=13)"><h1 style="color:white;">Seja feliz por favor!</h1></div>
<div style="background-image:url(https://avatars.mds.yandex.net/i?id=a192245fd9a50462dba8bc55e019bffaeaed98fd-12209413-images-thumbs&n=13)"><h1 style="color:white;">Seja feliz por favor!</h1></div>
<div style="background-image:url(https://avatars.mds.yandex.net/i?id=5f06961b0590b4af16f4c521263612b36390df19-12515184-images-thumbs&n=13)"><h1 style="color:white;">Seja feliz por favor!</h1></div>
<div style="background-image:url(https://avatars.mds.yandex.net/i?id=da60256f8e6cd641669b9a8cfbcd519bc8210637-12480075-images-thumbs&n=13)"><h1 style="color:white;">Seja feliz por favor!</h1></div>
</div>
<button onclick="$('.flipbook').turn('previous')">Página Anterior</button>
<button onclick="$('.flipbook').turn('next')">Próxima Página</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script>
<script>
$(document).ready(function() {
$('.flipbook').turn({
width: 800,
height: 400,
autoCenter: true
});
});
</script>
</body>
</center>
</html>
Nova maneira de codificar javascript no html!
<html>
<p id="demo"></p>
<script>
function myConta(){
return '<h1 style="color:red;">Poemas espirituais!</h1><img src="https://i.pinimg.com/originals/86/7b/fa/867bfa6860762ed4566765c8891bab4a.gif"width="100%">';
}
function myNumeros(){
return 23*234/23+1234325;
}
function myVideos(){
return '<h2>Seja feliz por favor</h2><iframe width="718" height="404" src="https://www.youtube.com/embed/E8bCwmZp5W8" title="Abba "The Winner Takes It All " (1980) HQ Audio" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>';
}
document.getElementById("demo").innerHTML=myConta() + myNumeros() + myVideos();
</script>
</html>
Código jogo do amor!
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo do amor!</title>
<style>
body {
background-image: url('https://i.pinimg.com/474x/48/7d/e1/487de12991ab170b40b64f5ae1817d5d.jpg');
background-size: cover;
text-align: center;
color: #FF0000;
font-size: 24px;
}
</style>
</head>
<center><h1 style="color:#8A2BE2;">Jogo do amor!Divirta-se.</h1></center>
<body>
<div id="texto">O amor é lindo!<br><img src="https://3.bp.blogspot.com/-OtPuDXBAfUI/VEml_HBNEdI/AAAAAAACB_A/7YjArtltcd0/s1600/el%2Bamor.gif"width="20%"weight="10%"></div>
<button onclick="moveDown()">Baixo</button>
<button onclick="moveUp()">Cima</button>
<button onclick="moveRight()">Direita</button>
<button onclick="moveLeft()">Esquerda</button>
<script>
function moveDown() {
var texto = document.getElementById('texto');
texto.style.marginTop = '150px';
}
function moveUp() {
var texto = document.getElementById('texto');
texto.style.marginTop = '-10px';
}
function moveRight() {
var texto = document.getElementById('texto');
texto.style.marginLeft = '150px';
}
function moveLeft() {
var texto = document.getElementById('texto');
texto.style.marginLeft = '-150px';
}
</script>
</body>
</html>