{"id":11586,"date":"2024-03-31T14:57:55","date_gmt":"2024-03-31T09:57:55","guid":{"rendered":"https:\/\/codehim.com\/?p=11586"},"modified":"2024-03-31T14:57:55","modified_gmt":"2024-03-31T09:57:55","slug":"reveal-secret-code-using-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/","title":{"rendered":"Reveal Secret Code Using CSS"},"content":{"rendered":"<p>This code reveals a secret code using CSS. It creates a sliding effect to unveil the code. The major functionality involves adjusting the appearance of digits based on hover or focus. It helps add interactive features to reveal hidden content.<\/p>\n<p>You can use this code on websites to add interactive elements. It enhances user engagement by revealing hidden content dynamically. This feature is eye-catching and can be applied to various types of content or puzzles.<\/p>\n<h2>How to Create Reveal Secret Code Using CSS<\/h2>\n<p>1. First of all, load the <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener\">Normalize CSS<\/a> into the head tag of your HTML document.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"&gt;<\/pre>\n<p>2. Set up the HTML structure. Create a section element to contain your secret code. Inside the section, add a paragraph to introduce the purpose of the code revealer. Then, use an unordered list with list items for each digit of your secret code. Each list item should contain a span element to represent the digit.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;section&gt;\r\n  &lt;p&gt;Glide To Reveal Secret Code&lt;\/p&gt;\r\n  &lt;ul class=\"code\"&gt;\r\n    &lt;li tabindex=\"0\" class=\"digit\"&gt;\r\n      &lt;span&gt;0&lt;\/span&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li tabindex=\"0\" class=\"digit\"&gt;\r\n      &lt;span&gt;3&lt;\/span&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li tabindex=\"0\" class=\"digit\"&gt;\r\n      &lt;span&gt;4&lt;\/span&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li tabindex=\"0\" class=\"digit\"&gt;\r\n      &lt;span&gt;8&lt;\/span&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li tabindex=\"0\" class=\"digit\"&gt;\r\n      &lt;span&gt;7&lt;\/span&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li tabindex=\"0\" class=\"digit\"&gt;\r\n      &lt;span&gt;2&lt;\/span&gt;\r\n    &lt;\/li&gt;\r\n  &lt;\/ul&gt;\r\n&lt;\/section&gt;<\/pre>\n<p>3. Next, apply CSS styles to achieve the sliding effect for revealing the secret code. Define styles for the section, paragraph, and list elements to enhance their appearance. Utilize CSS properties like background, color, font-size, and box-shadow to make the elements visually appealing.<\/p>\n<pre class=\"prettyprint linenums lang-css\">* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  min-height: 100vh;\r\n  display: grid;\r\n  place-items: center;\r\n  font-family: \"SF Pro Text\", \"SF Pro Icons\", \"AOS Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif, system-ui;\r\n  background: hsl(0 0% 0%) !important; \r\n  gap: 2rem;\r\n}\r\n\r\nbody::before {\r\n\t--line: hsl(0 0% 95% \/ 0.25);\r\n\tcontent: \"\";\r\n\theight: 100vh;\r\n\twidth: 100vw;\r\n\tposition: fixed;\r\n\tbackground:\r\n\t\tlinear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin \/ 10vmin 10vmin,\r\n\t\tlinear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin \/ 10vmin 10vmin;\r\n\t-webkit-mask: linear-gradient(-15deg, transparent 30%, white);\r\n\t        mask: linear-gradient(-15deg, transparent 30%, white);\r\n\ttop: 0;\r\n\tz-index: -1;\r\n}\r\n\r\nsection {\r\n  display: grid;\r\n  gap: 4rem;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\nsection p {\r\n  margin: 0;\r\n  font-size: 2.25rem;\r\n  color: hsl(0 0% 40%);\r\n  text-align: center;\r\n  background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%));\r\n  color: transparent;\r\n  -webkit-background-clip: text;\r\n          background-clip: text;\r\n}\r\n\r\n.code {\r\n  font-size: 3rem;\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  color: hsl(0 0% 100%);\r\n  border-radius: 1rem;\r\n  background: hsl(0 0% 6%);\r\n  justify-content: center;\r\n  box-shadow: 0 1px hsl(0 0% 100% \/ 0.25) inset;\r\n}\r\n\r\n.code:hover {\r\n  cursor: -webkit-grab;\r\n  cursor: grab;\r\n}\r\n\r\n.digit {\r\n  display: flex;\r\n  height: 100%;\r\n  padding: 5.5rem 1rem;\r\n}\r\n\r\n.digit:focus-visible {\r\n  outline-color: hsl(0 0% 50% \/ 0.25);\r\n  outline-offset: 1rem;\r\n}\r\n\r\n.digit span {\r\n  scale: calc(var(--active, 0) + 0.5);\r\n  filter: blur(calc((1 - var(--active, 0)) * 1rem));\r\n  transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);\r\n}\r\n\r\nul {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.digit:first-of-type {\r\n  padding-left: 5rem;\r\n}\r\n.digit:last-of-type {\r\n  padding-right: 5rem;\r\n}\r\n\r\n:root {\r\n  --lerp-0: 1; \/* === sin(90deg) *\/\r\n  --lerp-1: calc(sin(50deg));\r\n  --lerp-2: calc(sin(45deg));\r\n  --lerp-3: calc(sin(35deg));\r\n  --lerp-4: calc(sin(25deg));\r\n  --lerp-5: calc(sin(15deg));\r\n}\r\n\r\n.digit:is(:hover, :focus-visible) {\r\n  --active: var(--lerp-0);\r\n}\r\n.digit:is(:hover, :focus-visible) + .digit,\r\n.digit:has(+ .digit:is(:hover, :focus-visible)) {\r\n  --active: var(--lerp-1);\r\n}\r\n.digit:is(:hover, :focus-visible) + .digit + .digit,\r\n.digit:has(+ .digit + .digit:is(:hover, :focus-visible)) {\r\n  --active: var(--lerp-2);\r\n}\r\n.digit:is(:hover, :focus-visible) + .digit + .digit + .digit,\r\n.digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) {\r\n  --active: var(--lerp-3);\r\n}\r\n.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,\r\n.digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {\r\n  --active: var(--lerp-4);\r\n}\r\n.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,\r\n.digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {\r\n  --active: var(--lerp-5);\r\n}<\/pre>\n<p>Make the secret code revealer interactive by using CSS transitions and hover\/focus effects. Define styles for the digits within the list items to change their appearance when hovered over or focused on. Utilize CSS variables and calculations to create a sliding effect that reveals the digits one by one as they are interacted with.<\/p>\n<p>That&#8217;s all! hopefully, you have successfully created Reveal Secret Code Using CSS. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This code reveals a secret code using CSS. It creates a sliding effect to unveil the code. The major functionality&#8230;<\/p>\n","protected":false},"author":1,"featured_media":11616,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-11586","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Reveal Secret Code Using CSS &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Reveal Secret Code Using 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\/html5-css3\/reveal-secret-code-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reveal Secret Code Using CSS &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Reveal Secret Code Using CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-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-03-31T09:57:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-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\/html5-css3\/reveal-secret-code-using-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Reveal Secret Code Using CSS\",\"datePublished\":\"2024-03-31T09:57:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/\"},\"wordCount\":280,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-CSS.png\",\"articleSection\":[\"HTML5 &amp; CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/\",\"name\":\"Reveal Secret Code Using CSS &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-CSS.png\",\"datePublished\":\"2024-03-31T09:57:55+00:00\",\"description\":\"Here is a free code snippet to create a Reveal Secret Code Using CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Reveal Secret Code Using CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 &amp; CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Reveal Secret Code Using 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":"Reveal Secret Code Using CSS &#8212; CodeHim","description":"Here is a free code snippet to create a Reveal Secret Code Using 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\/html5-css3\/reveal-secret-code-using-css\/","og_locale":"en_US","og_type":"article","og_title":"Reveal Secret Code Using CSS &#8212; CodeHim","og_description":"Here is a free code snippet to create a Reveal Secret Code Using CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-31T09:57:55+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-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\/html5-css3\/reveal-secret-code-using-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Reveal Secret Code Using CSS","datePublished":"2024-03-31T09:57:55+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/"},"wordCount":280,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-CSS.png","articleSection":["HTML5 &amp; CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/","url":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/","name":"Reveal Secret Code Using CSS &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-CSS.png","datePublished":"2024-03-31T09:57:55+00:00","description":"Here is a free code snippet to create a Reveal Secret Code Using CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Reveal-Secret-Code-Using-CSS.png","width":1280,"height":960,"caption":"Reveal Secret Code Using CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/reveal-secret-code-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 &amp; CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Reveal Secret Code Using 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":1863,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11586","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=11586"}],"version-history":[{"count":3,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11586\/revisions"}],"predecessor-version":[{"id":11626,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11586\/revisions\/11626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11616"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}