Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Top 10 Bible verses
ID	5213878123675648
Created	2 months ago, 1729100247227
Updated	2 months ago, 1729101129685
Code	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Top 10 Bible verses</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(to right, #74ebd5, #acb6e5); margin: 0; overflow: hidden; transition: background 0.5s ease; } #title { font-size: 32px; font-weight: 700; margin-bottom: 20px; color: #333; } #verseContainer { position: relative; text-align: center; padding: 20px; border-radius: 10px; background-color: white; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); max-width: 600px; opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease; } #verse { font-size: 24px; margin: 0; } #nextVerseButton { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; background-color: #6ab04c; color: white; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; animation: pulse 2s infinite; } #nextVerseButton:hover { background-color: #4a913c; } @keyframes pulse { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } 100% { transform: translateX(-50%) scale(1); } } #avatarLink { position: fixed; top: 20px; /* Adjust this value for vertical placement / right: 20px; / Adjust this value for horizontal placement / cursor: pointer; } #avatarImage { width: 50px; / Set the width of the image / height: auto; / Maintain aspect ratio */ } </style> </head> <body> <div id="title">My Top 10 Favorite Bible Verses</div> <div id="verseContainer"> <div id="verse"></div> </div> <button id="nextVerseButton">Next Verse</button> <a id="avatarLink" href="https://khanacademy.org/computer-programming/xanders-subpage/5052814367047680" target="_blank"> <img id="avatarImage" src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/mr-pants-orange.png" alt="subscribe"> </a> <script> var verses = [ "Romans 1:16: For I am not ashamed of the gospel, for it is the power of God for salvation to everyone who believes.", "Romans 10:9: because, if you confess with your mouth that Jesus is Lord and believe in your heart that God raised him from the dead, you will be saved.", "Ephesians 2:8: For by grace you have been saved through faith, and that not of yourselves; it is the gift of God.", "Jeremiah 29:11: For I know the plans I have for you, declares the LORD, plans for welfare and not for evil, to give you a future and a hope.", "1 Timothy 1:15: The saying is trustworthy and deserving of full acceptance, that Christ Jesus came into the world to save sinners, of whom I am the foremost.", "Psalm 34:9: Oh, fear the LORD, you his saints, for those who fear him have no lack!", "Psalm 23:4: Even though I walk through the valley of the shadow of death, I will fear no evil, for you are with me; your rod and your staff, they comfort me.", "Luke 9:23: And he said to all, “If anyone would come after me, let him deny himself and take up his cross daily and follow me.", "Luke 12:40: You also must be ready, for the Son of Man is coming at an hour you do not expect.", "Philippians 4:6: Do not be anxious about anything, but in everything by prayer and supplication with thanksgiving let your requests be made known to God." ]; var currentVerseIndex = 0; function displayVerse() { var verseContainer = document.getElementById("verseContainer"); // Start with the container fading out and scaling down verseContainer.style.opacity = 0; verseContainer.style.transform = 'scale(0.95)'; setTimeout(function() { // Update verse text document.getElementById("verse").textContent = verses[currentVerseIndex]; currentVerseIndex = (currentVerseIndex + 1) % verses.length; // Fade in and scale up verseContainer.style.opacity = 1; verseContainer.style.transform = 'scale(1)'; }, 300); // Match this to the fade-out duration } document.getElementById("nextVerseButton").addEventListener("click", function() { displayVerse(); }); // Display the first verse at the start displayVerse(); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvL6b-hCQw
Votes	9
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Xander Asensio
Author Name	xandercla
Author ID	kaid_65402754956057834191859
Author Profile Access	PUBLIC

Archive Data

Added	2 months ago, 1729123567038
Updated	2 months ago, 1729123567038
Source Deleted	unknown