{"id":10203,"date":"2024-01-10T18:17:00","date_gmt":"2024-01-10T18:17:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10203"},"modified":"2024-01-22T16:18:04","modified_gmt":"2024-01-22T11:18:04","slug":"3d-image-slideshow-using-html-and-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/","title":{"rendered":"3D Image Slideshow Using HTML and CSS"},"content":{"rendered":"

This code creates a 3D image slideshow using HTML and CSS. It arranges images in a rotating manner to create a slideshow effect. The JavaScript helps in cycling through the images continuously. It helps display images dynamically in a visually appealing manner.<\/p>\n

You can use this code on websites or projects needing a visually engaging image slideshow. It’s great for showcasing products or creating captivating image galleries<\/a> that grab attention. The benefit? It offers an interactive way to display multiple images seamlessly.<\/p>\n

How to Create a 3D Image Slideshow Using HTML and CSS<\/h2>\n

1. Create a container <div><\/code> in your HTML file and add multiple <div><\/code> elements with the class “box” inside it. Each “box” will hold an image. Replace the placeholder image URLs in the HTML with the URLs of your own images.<\/p>\n

<div class=\"img-container\">\r\n      <div class=\"box\">\r\n        <img\r\n          src=\"https:\/\/img.freepik.com\/free-photo\/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=740&t=st=1692617800~exp=1692618400~hmac=da967fd7227c9ad38cd8a070b995acb5f4bb6c2185c6a20bd2e90c60e2abf6ab\"\r\n          alt=\"\"\r\n        \/>\r\n      <\/div>\r\n      <div class=\"box\">\r\n        <img\r\n          src=\"https:\/\/img.freepik.com\/free-photo\/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=740&t=st=1692617800~exp=1692618400~hmac=da967fd7227c9ad38cd8a070b995acb5f4bb6c2185c6a20bd2e90c60e2abf6ab\"\r\n          alt=\"\"\r\n        \/>\r\n      <\/div>\r\n      <div class=\"box\">\r\n        <img\r\n          src=\"https:\/\/img.freepik.com\/free-photo\/beautiful-view-greenery-bridge-forest-perfect-background_181624-17827.jpg?w=740&t=st=1692619142~exp=1692619742~hmac=cbfd96c2635889371b9d74ff41432f9944fadfef177e121f43cf9f2f94b2fd6a\"\r\n          alt=\"\"\r\n        \/>\r\n      <\/div>\r\n      <div class=\"box\">\r\n        <img\r\n          src=\"https:\/\/img.freepik.com\/free-photo\/seljalandsfoss-waterfall-during-sunset-beautiful-waterfall-iceland_335224-596.jpg?w=740&t=st=1692619874~exp=1692620474~hmac=c48ffd5f0d2418bb4600d98ac64f3f61a0ed9e2090751ac7fa32bff35687ee17\"\r\n          alt=\"\"\r\n        \/>\r\n      <\/div>\r\n      <div class=\"box\">\r\n        <img\r\n          src=\"https:\/\/img.freepik.com\/free-photo\/landscape-morning-fog-mountains-with-hot-air-balloons-sunrise_335224-794.jpg?w=740&t=st=1692619958~exp=1692620558~hmac=d2e0e7c3c55857d0bb617b4b5b4deb0c7c67c6677c1eaa8b4c73d50445ece5bf\"\r\n          alt=\"\"\r\n        \/>\r\n      <\/div>\r\n      <div class=\"box\">\r\n        <img\r\n          src=\"https:\/\/img.freepik.com\/free-photo\/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=740&t=st=1692617800~exp=1692618400~hmac=da967fd7227c9ad38cd8a070b995acb5f4bb6c2185c6a20bd2e90c60e2abf6ab\"\r\n          alt=\"\"\r\n        \/>\r\n      <\/div>\r\n    <\/div><\/pre>\n
2. Use CSS to style the image container and boxes to achieve the 3D effect and positioning. Adjust the CSS properties like size, positioning, transitions, and rotations to fit your design preferences.<\/p>\n
* {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  user-select: none;\r\n}\r\n\r\n\r\nbody {\r\n  height: 100vh;\r\n  background-color: #f5f5f5;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.img-container {\r\n  position: relative;\r\n  height: 500px;\r\n  width: 700px;\r\n  perspective: 500px;\r\n  transform-style: preserve-3d;\r\n}\r\n.box {\r\n  box-shadow: 0 0 10px rgb(0 0 0 \/ 30%);\r\n  width: 600px;\r\n  height: 440px;\r\n  border-radius: 25px;\r\n  overflow: hidden;\r\n  border: 1px solid #bbb;\r\n  position: absolute;\r\n  top: 50%;\r\n  transition: 800ms ease-in-out;\r\n}\r\n\r\n.box img {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.box:first-of-type {\r\n  z-index: 5;\r\n  opacity: 0;\r\n  left: 15%;\r\n  transform: translate(-50%, -50%) rotateY(-10deg);\r\n}\r\n\r\n.box:nth-of-type(2) {\r\n  opacity: 1;\r\n  left: 20%;\r\n  transform: translate(-50%, -50%) rotateY(-10deg);\r\n  z-index: 5;\r\n\r\n}\r\n.box:nth-of-type(3) {\r\n  left: 25%;\r\n  opacity: 0.75;\r\n  color: #eee;\r\n  z-index: 10;\r\n  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-50px);\r\n}\r\n\r\n.box:nth-of-type(4) {\r\n  z-index: 5;\r\n  opacity: 0.5;\r\n  left:30%;\r\n  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-100px);\r\n}\r\n.box:nth-of-type(5) {\r\n  z-index: 2;\r\n  opacity: 0.25;\r\n  left: 35%;\r\n  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-150px);\r\n}\r\n\r\n.box:nth-of-type(6) {\r\n  z-index: 2;\r\n  opacity: 0.0;\r\n  left: 40%;\r\n  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-200px);\r\n}<\/pre>\n
3. Finally, include the JavaScript code to enable the slideshow functionality.<\/p>\n
let imgContainer = document.querySelector(\".img-container\");\r\n \r\nsetInterval(() => {\r\n        let last = imgContainer.firstElementChild;\r\n        last.remove();\r\n        imgContainer.appendChild(last);\r\n      }, 2500);<\/pre>\n
That’s all! hopefully, you have successfully created a 3D Image Slideshow on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a 3D image slideshow using HTML and CSS. It arranges images in a rotating manner to create…<\/p>\n","protected":false},"author":1,"featured_media":10207,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59],"tags":[66],"class_list":["post-10203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carousel","tag-slideshow"],"acf":[],"yoast_head":"\n3D Image Slideshow Using HTML and CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a 3D Image Slideshow Using HTML and 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\/carousel\/3d-image-slideshow-using-html-and-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3D Image Slideshow Using HTML and CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a 3D Image Slideshow Using HTML and CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-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-10T18:17:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:18:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"3D Image Slideshow Using HTML and CSS\",\"datePublished\":\"2024-01-10T18:17:00+00:00\",\"dateModified\":\"2024-01-22T11:18:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/\"},\"wordCount\":207,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png\",\"keywords\":[\"Slideshow\"],\"articleSection\":[\"Carousel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/\",\"url\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/\",\"name\":\"3D Image Slideshow Using HTML and CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png\",\"datePublished\":\"2024-01-10T18:17:00+00:00\",\"dateModified\":\"2024-01-22T11:18:04+00:00\",\"description\":\"Here is a free code snippet to create a 3D Image Slideshow Using HTML and CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"3D Image Slideshow Using HTML and CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carousel\",\"item\":\"https:\/\/codehim.com\/category\/carousel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"3D Image Slideshow Using HTML and 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":"3D Image Slideshow Using HTML and CSS — CodeHim","description":"Here is a free code snippet to create a 3D Image Slideshow Using HTML and 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\/carousel\/3d-image-slideshow-using-html-and-css\/","og_locale":"en_US","og_type":"article","og_title":"3D Image Slideshow Using HTML and CSS — CodeHim","og_description":"Here is a free code snippet to create a 3D Image Slideshow Using HTML and CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T18:17:00+00:00","article_modified_time":"2024-01-22T11:18:04+00:00","og_image":[{"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png","width":1200,"height":900,"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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"3D Image Slideshow Using HTML and CSS","datePublished":"2024-01-10T18:17:00+00:00","dateModified":"2024-01-22T11:18:04+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/"},"wordCount":207,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png","keywords":["Slideshow"],"articleSection":["Carousel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/","url":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/","name":"3D Image Slideshow Using HTML and CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png","datePublished":"2024-01-10T18:17:00+00:00","dateModified":"2024-01-22T11:18:04+00:00","description":"Here is a free code snippet to create a 3D Image Slideshow Using HTML and CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/3D-Image-Slideshow-Using-HTML-and-CSS.png","width":1280,"height":960,"caption":"3D Image Slideshow Using HTML and CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/carousel\/3d-image-slideshow-using-html-and-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Carousel","item":"https:\/\/codehim.com\/category\/carousel\/"},{"@type":"ListItem","position":3,"name":"3D Image Slideshow Using HTML and 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":2346,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10203","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=10203"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10203\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10207"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}