往年のHTC時計をBloggerのページに置く

Recreating the HTC clock widget with CSS and Javascript | Seth Stevenson Marketing
https://sethstevenson.net/blog/recreating-the-htc-clock-widget-with-css3/

上でコードが公開されているものを置いてみました(天気は元々フェイクなので動作しません)
https://furiouzps.blogspot.com/p/htc-clock.html
https://tt-order.blogspot.com/p/recreating-htc-clock-widget-with-css3.html (全画面)

背景画像が使える様にHTMLコードだけ修正

<div id="background-wrap" style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6bEStksFOBySXOlz9UKEtY8_aQ2DUikfUjE9AqvK4E3xv4uJiLzzG9OH0jzV0iq4VGycWUNnITe0W_uoMR2x0SH1kyi5Johyg-uWfw43OGjcczB8x58mwHgT__3AVjmng6V66F5B1UxIoT9GOUb5oBbArdCUWILjXcA2q4njnN17anqfQD3OZ-lqYHaYh/s0/background.jpg') no-repeat; background-size: cover; padding: 100px 0; margin-bottom: 30px;">
  
<div id="clock">
    <div id="top-gradient"></div>
    <div id="time"><span id="hour">12</span> <span id="mins">00</span></div>
    <div id="weather">
        <div id="location">Des Moines<br />Mostly cloudy</div>
        <img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqmhqR46AOb2GUvXce2D4238eOtAD1gJYwWBNOlSNJb09D8tIaCs9AkBtiF2z3otVgYj4D9p6TYsWfo0DLr44amZh87vUeOT9POnlUBFtI1-gaRhYGR_DEGKIIjJAD4ZK8HDBOP7y5ojEBIaf-Di22h61knW9BjwGs7H82GM4GvSHP-4VnAV4cL0OnSbwD/s0/sun-and-cloud.png" alt="Mostly cloudy" >
        <div id="temp">61°</div>
        <div id="high-low-temps">H: 63°<br />L: 36°</div>
	</div>
</div>
      
</div>

試したい方は他だけ記述して下さい

• [Blogger]ホームページUrlを除いたページでのスタイル適用など

全画面はChromebookとか、たまに眺めたりするのに使おうと思います。