{"id":123,"date":"2015-10-21T08:11:23","date_gmt":"2015-10-21T08:11:23","guid":{"rendered":"http:\/\/codemyui.com\/qlocktwo-a-clock-concept-using-html3-css-and\/"},"modified":"2018-05-17T12:52:12","modified_gmt":"2018-05-17T02:52:12","slug":"qlocktwo-a-clock-concept-using-html3-css-and","status":"publish","type":"post","link":"https:\/\/codemyui.com\/qlocktwo-a-clock-concept-using-html3-css-and\/","title":{"rendered":"QLOCKTWO &#8211; A Clock Concept Using HTML3, CSS And JavaScript"},"content":{"rendered":"<p>Recreate the QLOCKTWO interface using HTML3, CSS and JS. With the option of changing the languages and colors used. Designed by <a href=\"https:\/\/twitter.com\/FWeinb\" target=\"_blank\" rel=\"noopener\">Fabrice Weinberg<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/4a7e0da60ad741b7b7fe\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='620' data-theme-id='0' data-slug-hash='oyACz' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Creating the QLOCKTWO in HTML5, CSS and Javascript by Fabrice Weinberg (@FWeinb) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Recreate the QLOCKTWO interface using HTML3, CSS and JS. With the option of changing the languages and colors used. Designed by Fabrice Weinberg.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/qlocktwo-a-clock-concept-using-html3-css-and\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":702,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[124955],"class_list":["post-123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-clock","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/qlocktwo-e28093-a-clock-concept-using-html3-css-and-javascript.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":28894,"url":"https:\/\/codemyui.com\/vanilla-javascript-and-css-sticky-floating-video-on-page-scroll\/","url_meta":{"origin":123,"position":0},"title":"Vanilla Javascript and CSS Sticky Floating Video on Page Scroll","author":"Saijo George","date":"November 13, 2019","format":false,"excerpt":"Have you seen those sites where you play a video and scroll down and there is a video thumbnail like sticky floating videos pops up on the screen? Think it was facebook that introduced this feature and now you can add it to your websites tool thanks to the snippet\u2026","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"Vanilla Javascript and CSS Sticky Floating Video on Page Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Vanilla-Javascript-and-CSS-Sticky-Floating-Video-on-Page-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Vanilla-Javascript-and-CSS-Sticky-Floating-Video-on-Page-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Vanilla-Javascript-and-CSS-Sticky-Floating-Video-on-Page-Scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Vanilla-Javascript-and-CSS-Sticky-Floating-Video-on-Page-Scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":286,"url":"https:\/\/codemyui.com\/css-only-material-design-tabs\/","url_meta":{"origin":123,"position":1},"title":"CSS Only Material Design Tabs","author":"Saijo George","date":"May 27, 2015","format":false,"excerpt":"Check out this\u00a0Material Design inspired Tabs using CSS, no Javascript required. It\u2019s great if you want to work with lot of content in a limited space.Designed by Ben Mildren. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"CSS Only Material Design Tabs","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/css-only-material-design-tabs.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/css-only-material-design-tabs.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/css-only-material-design-tabs.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/css-only-material-design-tabs.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":218,"url":"https:\/\/codemyui.com\/css-button-border-hover-effects\/","url_meta":{"origin":123,"position":2},"title":"CSS Button Border Hover Effects","author":"Hima Vincent","date":"July 19, 2015","format":false,"excerpt":"This uses transform on before and after pseudo elements to create border effects on button hover with no javascript. By Les Moffat If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"CSS Button Border Hover Effects","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/css-button-border-hover-effects.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/css-button-border-hover-effects.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/css-button-border-hover-effects.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/css-button-border-hover-effects.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":276,"url":"https:\/\/codemyui.com\/rounded-corner-social-buttons-in-css\/","url_meta":{"origin":123,"position":3},"title":"Rounded Corner Social Buttons in CSS","author":"Saijo George","date":"May 28, 2015","format":false,"excerpt":"Social icons for facebook, twitter, google, dribbble, skype with rounded off corners and hover animation in pure CSS and no JavaScript. By Chris Deacy. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Rounded Corner Social Buttons in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/rounded-corner-social-buttons-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/rounded-corner-social-buttons-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/rounded-corner-social-buttons-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/rounded-corner-social-buttons-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":7582,"url":"https:\/\/codemyui.com\/laser-text-animation-css\/","url_meta":{"origin":123,"position":4},"title":"Laser Text Animation in CSS and Javascript","author":"Hima Vincent","date":"November 27, 2019","format":false,"excerpt":"JS Laser Text Engraving In this text animation by Martin Pitt, we have a really smooth text laser engraving effect using splitting.js If you are having trouble with the pen, try the archived copy on GitHub We judge ourselves by our intentions and\u00a0others by their\u00a0behaviourPablo Picasso Laser Engraving Text Animation\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"We judge ourselves by our intentions and\u00a0others by their\u00a0behaviour","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":908,"url":"https:\/\/codemyui.com\/octagram-star-loading-animation\/","url_meta":{"origin":123,"position":5},"title":"Octagram Star and Other Loading Animations","author":"Hima Vincent","date":"June 24, 2016","format":false,"excerpt":"A bunch of preloaders that you can use on pages that need to show a loading animation to visitors while the content loads in the background. All these are in pure CSS no javascript required!! The various options include a spinning octagram star, 3 dot loader, 3 line wave, an\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Octagram Star and Other Loading Animations","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/octagram-star-and-other-loading-animations.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/octagram-star-and-other-loading-animations.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/octagram-star-and-other-loading-animations.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/octagram-star-and-other-loading-animations.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":26229,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/123\/revisions\/26229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}