{"id":9488,"date":"2024-01-09T18:03:00","date_gmt":"2024-01-09T18:03:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9488"},"modified":"2024-01-22T16:05:02","modified_gmt":"2024-01-22T11:05:02","slug":"email-subscription-form-html-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/","title":{"rendered":"Email Subscription Form HTML CSS"},"content":{"rendered":"<p>This code creates an email subscription form with HTML, CSS, and JavaScript. When users click &#8220;Subscribe,&#8221; the form becomes visible, and they can enter their email. Clicking the send button triggers a thank-you message.<\/p>\n<p>The code works by adding and removing CSS classes to control the form&#8217;s visibility and appearance. It&#8217;s helpful for capturing email subscriptions on your website.<\/p>\n<h2>How to Create Email Subscription Form Using HTML and CSS<\/h2>\n<p>1. First of all, load the <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\">Font Awesome CSS<\/a> and <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap CSS<\/a> by adding the following CDN links 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\/font-awesome\/4.7.0\/css\/font-awesome.min.css'&gt;\r\n&lt;link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.1.2\/css\/bootstrap.min.css'&gt;<\/pre>\n<p>2. Copy and paste the HTML code into the section of your web page where you want the subscription form to appear. It is typically placed inside a <code>&lt;div&gt;<\/code> element with a class of &#8220;subscribe-wrapper.&#8221; The form structure consists of a &#8220;Subscribe&#8221; button, an email input field, and a &#8220;Send&#8221; button.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;main&gt;\r\n&lt;div class=\"subscribe-wrapper\"&gt;\r\n    &lt;button class=\"btn subscribe\" id=\"subscribe\" type=\"button\"&gt;Subscribe&lt;\/button&gt;\r\n    &lt;button class=\"btn sending\" id=\"sending\" type=\"button\"&gt;Thank you!&lt;\/button&gt;\r\n    &lt;form id=\"form\" action=\"\"&gt;\r\n      &lt;label id=\"wrapper\"&gt;\r\n        &lt;input class=\"form-control\" type=\"email\" placeholder=\"Email\"\/&gt;\r\n        &lt;button class=\"btn send\" id=\"send\" type=\"submit\"&gt;&lt;i class=\"fa fa-envelope\"&gt;&lt;\/i&gt;&lt;\/button&gt;\r\n      &lt;\/label&gt;\r\n    &lt;\/form&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/main&gt;<\/pre>\n<p>3. Add the following CSS code to your project. This CSS code is essential for styling the form and ensuring it looks appealing. The styles define the appearance of buttons, input fields, and their animations.<\/p>\n<pre class=\"prettyprint linenums lang-css\">@import url(\"https:\/\/fonts.googleapis.com\/css?family=Montserrat:300,400,500,600,700\");\r\nhtml, body {\r\n  width: 100%;\r\n  height: 100%;\r\n  font-family: Montserrat, sans-serif;\r\n  font-size: 14px;\r\n}\r\n\r\nmain{\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background: #333333 !important;\r\n  overflow: hidden;\r\n}\r\n\r\n.subscribe-wrapper {\r\n  position: relative;\r\n  min-width: 400px;\r\n}\r\n.subscribe-wrapper label {\r\n  display: flex;\r\n  background-color: #494949;\r\n  border-radius: 38px;\r\n  margin-bottom: 0;\r\n}\r\n.subscribe-wrapper form {\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transition: all 0.5s ease;\r\n}\r\n.subscribe-wrapper form.active {\r\n  opacity: 1;\r\n  visibility: inherit;\r\n}\r\n\r\n.form-control {\r\n  height: 51px;\r\n  color: #fff;\r\n  background-color: #494949;\r\n  border-radius: 38px;\r\n  border: none;\r\n  padding: 1rem 2rem;\r\n}\r\n.form-control:focus {\r\n  color: #fff;\r\n  background-color: #494949;\r\n  box-shadow: none;\r\n}\r\n\r\n.btn {\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n  color: #fff;\r\n  background-color: #ef4d8a;\r\n  border-radius: 38px;\r\n  padding: 1rem 2rem;\r\n  transform: scale(1);\r\n  transition: all 0.5s ease;\r\n}\r\n.btn:hover {\r\n  transform: scale(1.1);\r\n}\r\n.btn:focus {\r\n  box-shadow: none;\r\n}\r\n.btn.subscribe, .btn.sending {\r\n  position: absolute;\r\n  top: 0;\r\n  z-index: 10;\r\n}\r\n.btn.subscribe {\r\n  left: 50%;\r\n  opacity: 1;\r\n  transform: scale(1) translateX(-50%);\r\n}\r\n.btn.subscribe.active {\r\n  left: 0;\r\n  opacity: 0;\r\n  transform: scale(1) translateX(-100%);\r\n}\r\n.btn.subscribe:hover {\r\n  transform: scale(1.1) translateX(-47%);\r\n}\r\n.btn.sending {\r\n  right: 0;\r\n  opacity: 0;\r\n  transform: scale(1) translateX(100%);\r\n}\r\n.btn.sending.active {\r\n  right: 50%;\r\n  opacity: 1;\r\n  transform: scale(1) translateX(50%);\r\n}\r\n.btn.sending:hover {\r\n  transform: scale(1.1) translateX(47%);\r\n}\r\n.btn.send {\r\n  min-width: 51px;\r\n  height: 51px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 1rem;\r\n}<\/pre>\n<p>4. Finally, add the following JavaScript code to your project. This code handles the functionality of the subscription form. It manages the form&#8217;s visibility and interaction with users. It also includes event listeners for buttons and form submission.<\/p>\n<pre class=\"prettyprint linenums lang-js\">const subscribeBtn = document.getElementById('subscribe');\r\nconst sendingBtn = document.getElementById('sending');\r\nconst subscribeWrapper = document.getElementById('wrapper');\r\nconst btnSend = document.getElementById('send');\r\nconst form = document.getElementById('form');\r\n\r\nconst onClickSubscribeBtn = event =&gt; {\r\n  event.stopPropagation();\r\n  subscribeBtn.classList.add('active');\r\n  form.classList.add('active');\r\n};\r\n\r\nconst onClickDocument = event =&gt; {\r\n  const clickTarget = event.target.parentNode;\r\n\r\n  let botonContainClass = subscribeBtn.classList.contains('active');\r\n\r\n  if(botonContainClass &amp;&amp; clickTarget != subscribeWrapper) {\r\n    subscribeBtn.classList.remove('active');\r\n    form.classList.remove('active');\r\n    form.reset()\r\n    sendingBtn.classList.remove('active');\r\n  }\r\n};\r\n\r\nconst onClickSend = event =&gt; {\r\n  event.preventDefault();\r\n  event.stopPropagation();\r\n  sendingBtn.classList.add('active');\r\n  form.classList.remove('active');\r\n}\r\n\r\nconst init = () =&gt; {\r\n  subscribeBtn.addEventListener('click', onClickSubscribeBtn, false);\r\n  btnSend.addEventListener('click', onClickSend, false);\r\n  document.addEventListener('click', onClickDocument, false);\r\n};\r\n\r\ndocument.addEventListener('DOMContentLoaded', init);<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created an Email Subscription form using HTML, CSS, and JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This code creates an email subscription form with HTML, CSS, and JavaScript. When users click &#8220;Subscribe,&#8221; the form becomes visible,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9501,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[232],"tags":[],"class_list":["post-9488","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-forms"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Email Subscription Form HTML CSS &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Email Subscription Form 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\/forms\/email-subscription-form-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Email Subscription Form HTML CSS &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Email Subscription Form HTML CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/forms\/email-subscription-form-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-09T18:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-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\/forms\/email-subscription-form-html-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Email Subscription Form HTML CSS\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:05:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/\"},\"wordCount\":251,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-HTML-CSS.png\",\"articleSection\":[\"Forms\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/\",\"url\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/\",\"name\":\"Email Subscription Form HTML CSS &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-HTML-CSS.png\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:05:02+00:00\",\"description\":\"Here is a free code snippet to create a Email Subscription Form HTML CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-HTML-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-HTML-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Email Subscription Form HTML CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Forms\",\"item\":\"https:\/\/codehim.com\/category\/forms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Email Subscription Form 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":"Email Subscription Form HTML CSS &#8212; CodeHim","description":"Here is a free code snippet to create a Email Subscription Form 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\/forms\/email-subscription-form-html-css\/","og_locale":"en_US","og_type":"article","og_title":"Email Subscription Form HTML CSS &#8212; CodeHim","og_description":"Here is a free code snippet to create a Email Subscription Form HTML CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-09T18:03:00+00:00","article_modified_time":"2024-01-22T11:05:02+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-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\/forms\/email-subscription-form-html-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Email Subscription Form HTML CSS","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:05:02+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/"},"wordCount":251,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-HTML-CSS.png","articleSection":["Forms"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/","url":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/","name":"Email Subscription Form HTML CSS &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-HTML-CSS.png","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:05:02+00:00","description":"Here is a free code snippet to create a Email Subscription Form HTML CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-HTML-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Email-Subscription-Form-HTML-CSS.png","width":1280,"height":960,"caption":"Email Subscription Form HTML CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/forms\/email-subscription-form-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Forms","item":"https:\/\/codehim.com\/category\/forms\/"},{"@type":"ListItem","position":3,"name":"Email Subscription Form 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":1669,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9488","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=9488"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9488\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9501"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}