{"id":9204,"date":"2024-01-18T17:59:00","date_gmt":"2024-01-18T17:59:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9204"},"modified":"2024-01-22T16:01:04","modified_gmt":"2024-01-22T11:01:04","slug":"analog-and-digital-clock-design-using-html-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/","title":{"rendered":"Analog And Digital Clock Design Using HTML CSS"},"content":{"rendered":"

This code is a web application that combines HTML, CSS, and JavaScript to create an analog and digital clock. The HTML code structures the clock and its display elements, while the CSS code controls the styling and appearance. The JavaScript code powers the clock’s functionality, allowing it to display real-time data, including the time and date.<\/p>\n

It’s helpful for displaying a stylish, interactive clock on a web page, making it both functional and visually appealing.<\/p>\n

How to Create Analog And Digital Clock Design Using HTML CSS<\/h2>\n

1. First, load the Font Awesome CSS<\/a> (for icons) by adding the following CDN link into the head tag of your HTML document.<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\" \/><\/pre>\n
2. Create the HTML structure for your clock. Here’s a snippet of the essential HTML code, copy it and paste it to your web project where you want to display the clock.<\/p>\n
<section class=\"dark\">\r\n  <button class=\"toggle\"><i class=\"fa-regular fa-lightbulb\"><\/i><\/button>\r\n  <div class=\"clock-container\">\r\n    <div class=\"clock\">\r\n      <div class=\"needle hour\"><\/div>\r\n      <div class=\"needle minute\"><\/div>\r\n      <div class=\"needle second\"><\/div>\r\n      <div class=\"center-point\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"time\"><\/div>\r\n    <div class=\"date\">\r\n      <span class=\"circle\"><\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n<\/pre>\n
In the above HTML code, we have a section for the clock, a button to toggle dark mode<\/a>, and elements for displaying time and date.<\/p>\n
3. Next, apply CSS styles to create the clock’s appearance. You can customize the colors and sizes to match your design preferences. Here’s a simplified CSS snippet to get you started:<\/p>\n
\/*=============== GOOGLE FONTS ===============*\/\r\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat&display=swap\");\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:root {\r\n  --primary-color: #000;\r\n  --secondary-color: #fff;\r\n  --accent-color: #a876aa;\r\n  --main-transition: all 0.5s ease-in;\r\n}\r\n\r\nbody.dark {\r\n  --primary-color: #fff;\r\n  --secondary-color: #181625;\r\n}\r\n\r\nbody.dark {\r\n  background-color: var(--secondary-color);\r\n  color: var(--primary-color);\r\n}\r\n\r\nbody {\r\n  font-family: \"Montserrat\", sans-serif;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  margin: 0;\r\n  transition: var(--main-transition);\r\n}\r\n\r\n.toggle {\r\n  color: var(--primary-color);\r\n  background-color: transparent;\r\n  font-size: 25px;\r\n  border: 0;\r\n  border-radius: 4px;\r\n  padding: 8px 12px;\r\n  cursor: pointer;\r\n  transition: var(--main-transition), scale 0.2s ease;\r\n}\r\n\r\n.toggle:hover {\r\n  scale: 1.2;\r\n}\r\n\r\n.toggle:focus {\r\n  outline: none;\r\n}\r\n\r\n.clock-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.clock {\r\n  position: relative;\r\n  width: 250px;\r\n  height: 250px;\r\n  box-shadow: var(--accent-color) 0px 0px 50px;\r\n  border-radius: 50%;\r\n  margin: 70px 0;\r\n}\r\n\r\n.needle {\r\n  background-color: var(--primary-color);\r\n  box-shadow: var(--accent-color) 0px 0px 10px;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  height: 65px;\r\n  width: 3px;\r\n  transform-origin: bottom center;\r\n  transition: var(--main-transition), transform 0s;\r\n}\r\n\r\n.needle.hour {\r\n  transform: translate(-50%, -100%) rotate(0deg);\r\n}\r\n\r\n.needle.minute {\r\n  transform: translate(-50%, -100%) rotate(0deg);\r\n  height: 100px;\r\n}\r\n\r\n.needle.second {\r\n  transform: translate(-50%, -100%) rotate(0deg);\r\n  height: 100px;\r\n  background-color: var(--accent-color);\r\n}\r\n\r\n.center-point {\r\n  background-color: var(--primary-color);\r\n  width: 10px;\r\n  height: 10px;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  border-radius: 50%;\r\n  transition: var(--main-transition);\r\n}\r\n\r\n.time {\r\n  font-size: 60px;\r\n}\r\n\r\n.date {\r\n  color: #aaa;\r\n  font-size: 14px;\r\n  letter-spacing: 0.3px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.date .circle {\r\n  background-color: var(--primary-color);\r\n  color: var(--secondary-color);\r\n  border-radius: 50%;\r\n  height: 18px;\r\n  width: 18px;\r\n  font-size: 12px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  line-height: 18px;\r\n  transition: var(--main-transition);\r\n}<\/pre>\n
4. Now, let’s make the clock functional with JavaScript. We’ll update the clock’s hands to reflect the current time and display the date and time. Here’s the JavaScript code:<\/p>\n
const hourEl = document.querySelector(\".hour\");\r\nconst minuteEl = document.querySelector(\".minute\");\r\nconst secondEl = document.querySelector(\".second\");\r\nconst timeEl = document.querySelector(\".time\");\r\nconst dateEl = document.querySelector(\".date\");\r\nconst toggle = document.querySelector(\".toggle\");\r\n\r\nconst days = [\r\n  \"Sunday\",\r\n  \"Monday\",\r\n  \"Tuesday\",\r\n  \"Wednesday\",\r\n  \"Thursday\",\r\n  \"Friday\",\r\n  \"Saturday\"\r\n];\r\n\r\nconst months = [\r\n  \"Jan\",\r\n  \"Feb\",\r\n  \"Mar\",\r\n  \"Apr\",\r\n  \"May\",\r\n  \"Jun\",\r\n  \"Jul\",\r\n  \"Aug\",\r\n  \"Sep\",\r\n  \"Oct\",\r\n  \"Nov\",\r\n  \"Dec\"\r\n];\r\n\r\ntoggle.addEventListener(\"click\", (e) => {\r\n  const body = document.querySelector(\"body\");\r\n  if (body.classList.contains(\"dark\")) {\r\n    body.classList.remove(\"dark\");\r\n  } else {\r\n    body.classList.add(\"dark\");\r\n  }\r\n});\r\n\r\nfunction setTime() {\r\n  const time = new Date();\r\n  const month = time.getMonth();\r\n  const day = time.getDay();\r\n  const date = time.getDate();\r\n  const hours = time.getHours();\r\n  const hoursForClock = hours % 12;\r\n  const minutes = time.getMinutes();\r\n  const seconds = time.getSeconds();\r\n\r\n  hourEl.style.transform = `translate(-50%, -100%) rotate(${\r\n    ((hoursForClock \/ 12) * 100 * 360) \/ 100\r\n  }deg)`;\r\n\r\n  minuteEl.style.transform = `translate(-50%, -100%) rotate(${\r\n    ((minutes \/ 60) * 100 * 360) \/ 100\r\n  }deg)`;\r\n\r\n  secondEl.style.transform = `translate(-50%, -100%) rotate(${\r\n    ((seconds \/ 60) * 100 * 360) \/ 100\r\n  }deg)`;\r\n\r\n  timeEl.innerHTML = `${hours}:${minutes < 10 ? `0${minutes}` : minutes}`;\r\n  dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}`;\r\n}\r\n\r\nsetTime();\r\n\r\nsetInterval(setTime, 1000);<\/pre>\n
This JavaScript code sets the clock’s hands based on the current time and displays the time and date. It also includes a dark mode toggle feature.<\/p>\n
That’s all! hopefully, you have successfully created an Analog and Digital Clock design using HTML, CSS, and JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code is a web application that combines HTML, CSS, and JavaScript to create an analog and digital clock. The…<\/p>\n","protected":false},"author":1,"featured_media":9215,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[58],"tags":[87,88],"class_list":["post-9204","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-date-time","tag-analog-clocks","tag-digital-clocks"],"acf":[],"yoast_head":"\nAnalog And Digital Clock Design Using HTML CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Analog And Digital Clock Design Using HTML CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Analog And Digital Clock Design Using HTML CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Analog And Digital Clock Design Using HTML CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-18T17:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:01:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Analog And Digital Clock Design Using HTML CSS\",\"datePublished\":\"2024-01-18T17:59:00+00:00\",\"dateModified\":\"2024-01-22T11:01:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/\"},\"wordCount\":297,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png\",\"keywords\":[\"Analog Clocks\",\"Digital Clocks\"],\"articleSection\":[\"Date & Time\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/\",\"url\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/\",\"name\":\"Analog And Digital Clock Design Using HTML CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png\",\"datePublished\":\"2024-01-18T17:59:00+00:00\",\"dateModified\":\"2024-01-22T11:01:04+00:00\",\"description\":\"Here is a free code snippet to create a Analog And Digital Clock Design Using HTML CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png\",\"width\":1280,\"height\":960,\"caption\":\"Analog And Digital Clock Design Using HTML CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Date & Time\",\"item\":\"https:\/\/codehim.com\/category\/date-time\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Analog And Digital Clock Design Using HTML CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Analog And Digital Clock Design Using HTML CSS — CodeHim","description":"Here is a free code snippet to create a Analog And Digital Clock Design Using HTML CSS. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/","og_locale":"en_US","og_type":"article","og_title":"Analog And Digital Clock Design Using HTML CSS — CodeHim","og_description":"Here is a free code snippet to create a Analog And Digital Clock Design Using HTML CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-18T17:59:00+00:00","article_modified_time":"2024-01-22T11:01:04+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Analog And Digital Clock Design Using HTML CSS","datePublished":"2024-01-18T17:59:00+00:00","dateModified":"2024-01-22T11:01:04+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/"},"wordCount":297,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png","keywords":["Analog Clocks","Digital Clocks"],"articleSection":["Date & Time"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/","url":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/","name":"Analog And Digital Clock Design Using HTML CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png","datePublished":"2024-01-18T17:59:00+00:00","dateModified":"2024-01-22T11:01:04+00:00","description":"Here is a free code snippet to create a Analog And Digital Clock Design Using HTML CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/analog-and-digital-clock-design-using-html-css.png","width":1280,"height":960,"caption":"Analog And Digital Clock Design Using HTML CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/date-time\/analog-and-digital-clock-design-using-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Date & Time","item":"https:\/\/codehim.com\/category\/date-time\/"},{"@type":"ListItem","position":3,"name":"Analog And Digital Clock Design Using HTML CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":4515,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9204"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9204\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9215"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}