Criar histórias com fotos
Código criar texto e páginas;
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<h1><pre style="color:orange;">
Criar frases animadas;
no contexto;
Criar o novo original;
Inserir imagens;
Aprenda a criar
a sua história online;
</pre></h1>
<head>
<title>Páginas com quadrados para frases animadas</title>
<style>
.square {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 2px;
display: inline-block;
text-align: center;
}
.animated {
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<button onclick="criarPagina()">Criar Página</button>
<button onclick="inserirImagem()">Inserir imagem</button>
<script>
function criarPagina() {
var numeroQuadrados = prompt("Quantos quadrados você deseja criar?");
var pagina = document.createElement("div");
for (var i = 0; i < numeroQuadrados; i++) {
var quadrado = document.createElement("div");
quadrado.className = "square";
quadrado.contentEditable = true; // Permite editar o conteúdo do quadrado
pagina.appendChild(quadrado);
}
document.body.appendChild(pagina);
var quadrados = document.getElementsByClassName("square");
for (var i = 0; i < quadrados.length; i++) {
quadrados[i].onclick = function() {
this.classList.add("animated");
};
}
}
function inserirImagem() {
var imagemUrl = prompt("Insira a URL da imagem");
var imagem = document.createElement("img");
imagem.src = imagemUrl;
document.body.appendChild(imagem);
}
</script>
</body>
</html>
Codigo the best create historie;
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<h1><pre style="color:orange;">
Criar frases animadas;
no contexto;
Criar o novo original;
Inserir imagens;
Aprenda a criar
a sua história online;
</pre></h1>
<head>
<title>Páginas com quadrados para frases animadas</title>
<style>
.square {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 2px;
display: inline-block;
text-align: center;
}
.animated {
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<button onclick="criarPagina()">Criar Página</button>
<button onclick="inserirImagem()">Inserir Imagem</button>
<button onclick="abrirSite()">Abrir Site</button>
<input type="file" id="uploadInput" onchange="uploadFile()">
<button onclick="openUploadDialog()">Upload de Arquivos</button>
<script>
function criarPagina() {
var numeroQuadrados = prompt("Quantos quadrados você deseja criar?");
var pagina = document.createElement("div");
for (var i = 0; i < numeroQuadrados; i++) {
var quadrado = document.createElement("div");
quadrado.className = "square";
quadrado.contentEditable = true; // Permite editar o conteúdo do quadrado
pagina.appendChild(quadrado);
}
document.body.appendChild(pagina);
var quadrados = document.getElementsByClassName("square");
for (var i = 0; i < quadrados.length; i++) {
quadrados[i].onclick = function() {
this.classList.add("animated");
};
}
}
function inserirImagem() {
var imagemUrl = prompt("Insira a URL da imagem");
var imagem = document.createElement("img");
imagem.src = imagemUrl;
document.body.appendChild(imagem);
}
function abrirSite() {
window.open("https://livrosmcegonha.blogspot.com/","_blank");
}
function openUploadDialog() {
document.getElementById("uploadInput").click();
}
function uploadFile() {
var file = document.getElementById("uploadInput").files[0];
// Aqui você pode adicionar a lógica para lidar com o arquivo enviado.
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
position: relative;
width: 400px;
height: 300px;
margin: 0 auto;
background-image: url('https://avatars.mds.yandex.net/i?id=0f55ee6cc554516e3f32fca3897820340ff5263d-9148772-images-thumbs&n=13');
background-size: cover;
}
.text-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
opacity: 0;
transition: opacity 0.5s;
}
.image-container:hover .text-overlay {
opacity: 1;
}
</style>
<pre style="color:blue;">
Passe o mouse por cima da imagem;
Disfrute;
</pre>
</head>
<body>
<div class="image-container">
<div class="text-overlay">
<span>A verdade é amor;<br>Descrito em saudade;<brJesus Cristo;<br>Jesus salvação;<br>Divindade;</span>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------
PROGRAMA CRIAR VERSOS EM FOTOS preto e branco
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<pre>
SEJA FELIZ POR FAVOR;
</pre>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adicionar verso em uma foto</title>
<style>
#container {
position: relative;
text-align: center;
color: black;
}
#texto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="container">
<img src="https://i.pinimg.com/736x/64/ea/e0/64eae0a417f51ba3b01dc117123e3966.jpg" alt="Foto em preto e branco" width="800" height="600">
<div id="texto">Minha verdade<br>Continuar<br>No ser acreditar</div>
</div>
<script>
// Adicione o JavaScript aqui
document.addEventListener("DOMContentLoaded", function() {
let textoElement = document.getElementById("texto");
textoElement.innerHTML = "<strong>Minha verdade<br>Continuar<br>No ser acreditar</strong>"; // Texto do verso
});
</script>
</body>
</html>