begin838
Sure! Here’s the HTML code for your document:
php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bitcoin and Ethereum logos</title>
<style>
@keyframes balance {
0% {
transform: translateY(-50%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(-50%);
}
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: balance 5s linear infinite;
}
</style>
</head>
<body>
<img src="bitcoin.png" alt="Bitcoin logo" width="65px">
<img src="ethereum.png" alt="Ethereum logo" width="65px">
</body>
</html>
Make sure to replace the src attribute of the img elements with the path to the actual images on your server.
The CSS code defines a keyframe animation called balance that moves the images up and down in a continuous loop. The img elements are positioned in the center of the page and have a width of 65 pixels, as requested.
I hope this helps! Let me know if you have any questions.
end838
<p>begin838</p><p>Sure! Here's the HTML code for your document:</p><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><span class="">php</span><button class="flex ml-auto gap-2"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php-template"><span class="xml"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Bitcoin and Ethereum logos<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
<span class="hljs-keyword">@keyframes</span> balance {
<span class="hljs-number">0%</span> {
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(-<span class="hljs-number">50%</span>);
}
<span class="hljs-number">50%</span> {
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(<span class="hljs-number">50%</span>);
}
<span class="hljs-number">100%</span> {
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(-<span class="hljs-number">50%</span>);
}
}
<span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">position</span>: absolute;
<span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-<span class="hljs-number">50%</span>, -<span class="hljs-number">50%</span>);
<span class="hljs-attribute">animation</span>: balance <span class="hljs-number">5s</span> linear infinite;
}
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"bitcoin.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Bitcoin logo"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"65px"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"ethereum.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Ethereum logo"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"65px"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</span></code></div></div></pre><p>Make sure to replace the <code>src</code> attribute of the <code>img</code> elements with the path to the actual images on your server.</p><p>The CSS code defines a keyframe animation called <code>balance</code> that moves the images up and down in a continuous loop. The <code>img</code> elements are positioned in the center of the page and have a width of 65 pixels, as requested.</p><p>I hope this helps! Let me know if you have any questions.</p><p>end838
