{"id":163,"date":"2021-12-27T08:54:00","date_gmt":"2021-12-27T08:54:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/index.php\/2021\/12\/27\/responsive-image-gallery-using-html-and-css\/"},"modified":"2023-01-05T12:25:53","modified_gmt":"2023-01-05T12:25:53","slug":"responsive-image-gallery-using-html-and-css","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/responsive-image-gallery-using-html-and-css\/","title":{"rendered":"Responsive Image Gallery using HTML and CSS"},"content":{"rendered":"<style>\n  p{font-size:18.5px;<br \/>\n    color: #292828;<br \/>\n  font-family: sans-serif;<\/p>\n<p>    display: block;<br \/>\n    margin-block-start: 1em;<br \/>\n    margin-block-end: 1em;<br \/>\n    margin-inline-start: 0px;<br \/>\n    margin-inline-end: 0px;<br \/>\n    word-wrap: break-word;<\/p>\n<p>  line-height: 2em;}<\/p>\n<p>  h3{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<br \/>\n    color:#333131;<br \/>\n    font-weight: 520;<\/p>\n<p>    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>   h2{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<\/p>\n<p>    font-weight: 620;<br \/>\n    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>.class {<br \/>\n background:#edf0f2;<br \/>\n font-family: Consolas,Monaco,Lucida Console,monospace;<br \/>\n line-height: 1.65;<br \/>\n word-wrap: break-word;<br \/>\n border-radius: 5px;<br \/>\n color:#001d8f;<br \/>\n font-size:17.1px;<br \/>\n padding-left:10px;<br \/>\n white-space: pre-wrap;}<\/p>\n<p>    button.last-btn{<br \/>\n  padding:14px 29px;<br \/>\n    font-size:17px;<br \/>\n    background-color:#0e87f0;<br \/>\n    border-radius:6px;<br \/>\n    color:white;<br \/>\n      font-family: Open Sans,Arial,sans-serif;<br \/>\n      border:none;<br \/>\n    margin-left:35%;<\/p>\n<p>  }<\/p>\n<p> @media only screen and (max-width: 400px) {<br \/>\n  button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 300px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 600px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 800px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<\/p>\n<p>      @media only screen and (max-width: 400px) {<br \/>\n  .copyButton {<br \/>\n     width: 45%;<br \/>\n  }<\/p>\n<\/style>\n<div class=\"separator\" style=\"clear: both;\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhVnHQGO7mIhI4cEPeOZJSs75v-9oo1jKxu76Em9UaWySQK36mKqdYx4E7L0zXF3Wib09jzWKFz247IOe76GlZkwC-kSDo-ijnR_sUY6gmJ8hV_Y3NaNxri8JGQEtcdxRWM4N7AJ-u8pVxocMiKfXn1ScI3cEp-SyPR3EbZeEnPbsc89KX5NXKR9igbXg\" style=\"display: block; padding: 1em 0px; text-align: center;\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" alt=\"Responsive Image Gallery using HTML and CSS\" border=\"0\" data-original-height=\"499\" data-original-width=\"1000\" src=\"https:\/\/blogger.googleusercontent.com\/img\/a\/AVvXsEhVnHQGO7mIhI4cEPeOZJSs75v-9oo1jKxu76Em9UaWySQK36mKqdYx4E7L0zXF3Wib09jzWKFz247IOe76GlZkwC-kSDo-ijnR_sUY6gmJ8hV_Y3NaNxri8JGQEtcdxRWM4N7AJ-u8pVxocMiKfXn1ScI3cEp-SyPR3EbZeEnPbsc89KX5NXKR9igbXg=s16000\" title=\"If you want to create a Responsive Image Gallery then this tutorial will help you a lot. Here I show step-by-step how you can create a Responsive Image Gallery using only HTML and CSS.\"><\/a><\/div>\n<div><\/div>\n<p style=\"text-align: left;\">If you want to create a Responsive Image Gallery then this tutorial will help you a lot. Here I show step-by-step how you can create a <b>Responsive Image Gallery using only HTML and CSS<\/b>. Image galleries are used on many websites to keep a large number of images neatly arranged in one place.<\/p>\n<p>This <a href=\"https:\/\/foolishdeveloper.com\/2021\/11\/image-lightbox-gallery-using-html-css.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">type of image gallery<\/span><\/a> is used in various image-sharing websites or personal portfolio websites. These are fully responsive so you can definitely use them on any website. Earlier I shared with you the design of many more types of <b>image galleries<\/b> and<a href=\"https:\/\/foolishdeveloper.com\/2021\/09\/automatic-image-slider.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\"> image sliders<\/span><\/a>.&nbsp;<\/p>\n<p style=\"text-align: left;\">This HTML image gallery has been created very easily. First I added the images using some amount of HTML code then I used CSS code and arranged them nicely. Then using some amount of CSS I made it Responsive. Responsiveness makes it easy for any device used to access this <a href=\"https:\/\/foolishdeveloper.com\/2021\/10\/how-to-create-image-slider-in-html.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #2b00fe;\">image gallery<\/span><\/a>.<\/p>\n<h2 style=\"font-size: 28px; text-align: left;\">Responsive Image Gallery&nbsp;<\/h2>\n<p style=\"text-align: left;\">If you want to know how this image gallery works, you can use the demo section below. This demo will help you to know how this Simple Responsive Image Gallery works. Here you will find the required source code. You can copy these codes and use them in your own work.<\/p>\n<p class=\"codepen\" data-height=\"405\" data-theme-id=\"light\" data-default-tab=\"result\" data-slug-hash=\"MWEraNr\" data-preview=\"true\" data-user=\"foolishdevweb\" style=\"height: 405px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/foolishdevweb\/pen\/MWEraNr\" target=\"_blank\" rel=\"noopener\"><br \/>\nUntitled<\/a> by Foolish Developer (<a href=\"https:\/\/codepen.io\/foolishdevweb\" target=\"_blank\" rel=\"noopener\">@foolishdevweb<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<div><\/div>\n<h2 style=\"font-size: 25px; text-align: left;\">How to Create Responsive Image Gallery using HTML and CSS<\/h2>\n<p style=\"text-align: left;\">You can also download the code needed to create this Responsive Image Gallery with the Download button at the bottom of the article. Below I have given the HTML and CSS code. First, you create the HTML and CSS file and add the following HTML and CSS code to that file.&nbsp;<\/p>\n<div><b><span style=\"font-size: 23px;\">HTML Code:<\/span><\/b><\/div>\n<p style=\"text-align: left;\">The following codes have been added to the image using HTML code. First, create an area and then add the required image here. You copy the HTML code then paste it into your HTML file.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;wrap&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp;<\/div>\n<div class=\"class\">&nbsp;&lt;div class=&#8221;box&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;boxInner&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;img src=&#8221;http:\/\/www.dwuser.com\/education\/content\/creating-responsive-tiled-layout-with-pure-css\/images\/demo\/5.jpg&#8221;\/&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;div class=&#8221;titleBox&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp;<span style=\"white-space: pre;\">\t<\/span> Spring daffodils<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp;&lt;div class=&#8221;box&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;boxInner&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;img src=&#8221;http:\/\/www.dwuser.com\/education\/content\/creating-responsive-tiled-layout-with-pure-css\/images\/demo\/6.jpg&#8221;\/&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;div class=&#8221;titleBox&#8221;&gt;<\/div>\n<div class=\"class\"><span style=\"white-space: pre;\">\t<\/span>Iris along the path<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp;&lt;div class=&#8221;box&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;boxInner&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;img src=&#8221;http:\/\/www.dwuser.com\/education\/content\/creating-responsive-tiled-layout-with-pure-css\/images\/demo\/8.jpg&#8221;\/&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;div class=&#8221;titleBox&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; The garden blueprint<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp;&lt;div class=&#8221;box&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;boxInner&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;img src=&#8221;http:\/\/www.dwuser.com\/education\/content\/creating-responsive-tiled-layout-with-pure-css\/images\/demo\/9.jpg&#8221;\/&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;div class=&#8221;titleBox&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; The garden blueprint<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp;&lt;div class=&#8221;box&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;boxInner&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;img src=&#8221;http:\/\/www.dwuser.com\/education\/content\/creating-responsive-tiled-layout-with-pure-css\/images\/demo\/10.jpg&#8221;\/&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;div class=&#8221;titleBox&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; The garden blueprint<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp;&lt;div class=&#8221;box&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;div class=&#8221;boxInner&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp;&lt;img src=&#8221;http:\/\/www.dwuser.com\/education\/content\/creating-responsive-tiled-layout-with-pure-css\/images\/demo\/11.jpg&#8221;\/&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;div class=&#8221;titleBox&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; The garden blueprint<\/div>\n<div class=\"class\">&nbsp; &nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp;&lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&lt;\/div&gt;<\/div>\n<\/div>\n<p><b><span style=\"font-size: 23px;\">CSS Code:<\/span><\/b><\/p>\n<p>The following codes are the CSS code that helped to design it and <b>make it responsive<\/b> from the <b>image gallery<\/b>. First, using some code, I arranged the images neatly in columns and set the width and height of the images. Then using some code I made it Responsive. This can be seen in different ways for different devices.<\/p>\n<p>Copy these codes and paste them into your CSS file. You can also add these CSS codes to your HTML file using style tags.<\/p>\n<div class=\"class\">\n<div class=\"class\">body {<\/div>\n<div class=\"class\">&nbsp; &nbsp; margin: 0;<\/div>\n<div class=\"class\">&nbsp; &nbsp; padding: 0;<\/div>\n<div class=\"class\">&nbsp; &nbsp; background: #EEE;<\/div>\n<div class=\"class\">&nbsp; &nbsp; font: 10px\/13px &#8216;Lucida Sans&#8217;,sans-serif;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.wrap {<\/div>\n<div class=\"class\">&nbsp; &nbsp; overflow: hidden;<\/div>\n<div class=\"class\">&nbsp; &nbsp; margin: 10px;<\/div>\n<div class=\"class\">&nbsp; max-width: 1500px;<\/div>\n<div class=\"class\">&nbsp; margin-left: auto;<\/div>\n<div class=\"class\">&nbsp; margin-right: auto;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.box {<\/div>\n<div class=\"class\">&nbsp; &nbsp; float: left;<\/div>\n<div class=\"class\">&nbsp; &nbsp; position: relative;<\/div>\n<div class=\"class\">&nbsp; &nbsp; width: 20%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; padding-bottom: 20%;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">.boxInner {<\/div>\n<div class=\"class\">&nbsp; &nbsp; position: absolute;<\/div>\n<div class=\"class\">&nbsp; &nbsp; left: 10px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; right: 10px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; top: 10px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; bottom: 10px;<\/div>\n<div class=\"class\">&nbsp; &nbsp; overflow: hidden;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">&nbsp;.boxInner img { width: 100% }<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">@media only screen and (max-width:480px) {&nbsp;<\/div>\n<div class=\"class\">&nbsp; &nbsp; \/* Smartphone view: 1 tile *\/<\/div>\n<div class=\"class\">&nbsp; &nbsp; .box {<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 100%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; }<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">@media only screen and (max-width:650px) and (min-width:481px) {&nbsp;<\/div>\n<div class=\"class\">&nbsp; &nbsp; \/* Tablet view: 2 tiles *\/<\/div>\n<div class=\"class\">&nbsp; &nbsp; .box {<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; width: 50%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 50%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; }<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">@media only screen and (max-width:1050px) and (min-width:651px) {&nbsp;<\/div>\n<div class=\"class\">&nbsp; &nbsp; \/* Small desktop \/ ipad view: 3 tiles *\/<\/div>\n<div class=\"class\">&nbsp; &nbsp; .box {<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; width: 33.3%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 33.3%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; }<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">@media only screen and (max-width:1290px) and (min-width:1051px) {&nbsp;<\/div>\n<div class=\"class\">&nbsp; &nbsp; \/* Medium desktop: 4 tiles *\/<\/div>\n<div class=\"class\">&nbsp; &nbsp; .box {<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; width: 25%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 25%;<\/div>\n<div class=\"class\">&nbsp; &nbsp; }<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<p style=\"text-align: left;\">Hopefully, you have been able to create this <b>Simple Responsive Image Gallery<\/b> using the above codes. If there is any problem then you can take it with the help of the download button below.<\/p>\n<p style=\"text-align: left;\">&nbsp;If you have any problems with creating this Responsive Image Gallery, please let me know in the comments.<\/p>\n<div>\n<script><br \/>\nfunction generate(){var e,n=document.getElementById(\"downloadx\"),t=document.getElementById(\"btnx\"),a=document.getElementById(\"downloadx\").href,l=25,d=document.createElement(\"span\");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display=\"inline\"):(d.innerHTML=\"\n\n\n\n\n\n<p style='text-align: center'>Download will start after \"+l.toString()+\" Seconds<\/p>\n<p>\",t.style.display=\"none\")},1e3)}<br \/>\n<\/script><\/p>\n<p><button class=\"last-btn\" id=\"btnx\" onclick=\"generate()\"><i class=\"fa fa-download\"><\/i> Download Code<\/button><\/p>\n<p><a href=\"https:\/\/drive.google.com\/uc?export=download&amp;id=10libNJEyK1NHdD6XD3Ubb21XuImLunhN\" id=\"downloadx\" style=\"display: none;\" target=\"_blank\" rel=\"noopener\"><i aria-hidden=\"true\" class=\"fa fa-cloud-download fa-fw\"><\/i> <b>The download will start automatically<\/b> <\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you want to create a Responsive Image Gallery then this tutorial will help you a lot. Here I show step-by-step how you can create a Responsive Image Gallery using only HTML and CSS. Image galleries are used on many websites to keep a large number of images neatly arranged in one place. This type [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":621,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[12,14,113,19],"tags":[],"class_list":["post-163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-image_gallery","category-image_slider","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":2,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/163\/revisions\/623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/621"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}