{"id":237,"date":"2019-11-11T04:34:57","date_gmt":"2019-11-11T04:34:57","guid":{"rendered":"https:\/\/doublejdesign.ca\/?p=237"},"modified":"2023-11-11T19:03:25","modified_gmt":"2023-11-11T19:03:25","slug":"zen-garden","status":"publish","type":"post","link":"https:\/\/doublejdesign.ca\/index.php\/2019\/11\/11\/zen-garden\/","title":{"rendered":"Zen Garden"},"content":{"rendered":"\n<p>2019<\/p>\n\n\n\n<p>Like many web designers and developers before me, I created my own version of the zen garden site. The original can be found <a href=\"https:\/\/www.csszengarden.com\/\">here.<\/a> This was my introduction to intense CSS use.<\/p>\n\n\n\n<p>This is a project based solely on coding in CSS. We are provided with the HTML content and we have to come up with a design and use only CSS to make it work. I challenged myself to stick to only one colour and two images to create this design.<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"835\" height=\"1024\" src=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-835x1024.jpg\" alt=\"\" class=\"wp-image-239 size-full\" srcset=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-835x1024.jpg 835w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-245x300.jpg 245w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-768x942.jpg 768w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg.jpg 1082w\" sizes=\"(max-width: 835px) 100vw, 835px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"144\" height=\"143\" src=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/scanspheregr.png\" alt=\"\" class=\"wp-image-240\" style=\"width:96px;height:auto\"\/><\/figure>\n\n\n\n<p>So with the colour green as well as the background image seen here and the sphere, I came up with the design below.<\/p>\n<\/div><\/div>\n\n\n\n<figure data-wp-context=\"{ &quot;core&quot;:\n\t\t\t\t{ &quot;image&quot;:\n\t\t\t\t\t{   &quot;imageLoaded&quot;: false,\n\t\t\t\t\t\t&quot;initialized&quot;: false,\n\t\t\t\t\t\t&quot;lightboxEnabled&quot;: false,\n\t\t\t\t\t\t&quot;hideAnimationEnabled&quot;: false,\n\t\t\t\t\t\t&quot;preloadInitialized&quot;: false,\n\t\t\t\t\t\t&quot;lightboxAnimation&quot;: &quot;zoom&quot;,\n\t\t\t\t\t\t&quot;imageUploadedSrc&quot;: &quot;https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/full_page-scaled.jpg&quot;,\n\t\t\t\t\t\t&quot;imageCurrentSrc&quot;: &quot;&quot;,\n\t\t\t\t\t\t&quot;targetWidth&quot;: &quot;981&quot;,\n\t\t\t\t\t\t&quot;targetHeight&quot;: &quot;2560&quot;,\n\t\t\t\t\t\t&quot;scaleAttr&quot;: &quot;cover&quot;,\n\t\t\t\t\t\t&quot;dialogLabel&quot;: &quot;Enlarged image&quot;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\" data-wp-interactive class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"981\" height=\"2560\" data-wp-effect--setStylesOnResize=\"effects.core.image.setStylesOnResize\" data-wp-effect=\"effects.core.image.setButtonStyles\" data-wp-init=\"effects.core.image.initOriginImage\" data-wp-on--click=\"actions.core.image.showLightbox\" data-wp-on--load=\"actions.core.image.handleLoad\" src=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/full_page-scaled.jpg\" alt=\"\" class=\"wp-image-238\" style=\"object-fit:cover\" srcset=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/full_page-scaled.jpg 981w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/full_page-115x300.jpg 115w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/full_page-392x1024.jpg 392w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/full_page-768x2005.jpg 768w\" sizes=\"(max-width: 981px) 100vw, 981px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge image\"\n\t\t\tdata-wp-on--click=\"actions.core.image.showLightbox\"\n\t\t\tdata-wp-style--right=\"context.core.image.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"context.core.image.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button>        <div data-wp-body=\"\" class=\"wp-lightbox-overlay zoom\"\n            data-wp-bind--role=\"selectors.core.image.roleAttribute\"\n            data-wp-bind--aria-label=\"selectors.core.image.dialogLabel\"\n            data-wp-class--initialized=\"context.core.image.initialized\"\n            data-wp-class--active=\"context.core.image.lightboxEnabled\"\n            data-wp-class--hideAnimationEnabled=\"context.core.image.hideAnimationEnabled\"\n            data-wp-bind--aria-modal=\"selectors.core.image.ariaModal\"\n            data-wp-effect=\"effects.core.image.initLightbox\"\n            data-wp-on--keydown=\"actions.core.image.handleKeydown\"\n            data-wp-on--touchstart=\"actions.core.image.handleTouchStart\"\n            data-wp-on--touchmove=\"actions.core.image.handleTouchMove\"\n            data-wp-on--touchend=\"actions.core.image.handleTouchEnd\"\n            data-wp-on--click=\"actions.core.image.hideLightbox\"\n            tabindex=\"-1\"\n            >\n                <button type=\"button\" aria-label=\"Close\" style=\"fill: var(--wp--preset--color--body-text)\" class=\"close-button\" data-wp-on--click=\"actions.core.image.hideLightbox\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z\"><\/path><\/svg>\n                <\/button>\n                <div class=\"lightbox-image-container\">\n<figure class=\"wp-block-image aligncenter size-full responsive-image\"><img decoding=\"async\" data-wp-bind--src=\"context.core.image.imageCurrentSrc\" data-wp-style--object-fit=\"selectors.core.image.lightboxObjectFit\" src=\"\" alt=\"\" class=\"wp-image-238\" style=\"object-fit:cover\"\/><\/figure>\n<\/div>\n                <div class=\"lightbox-image-container\">\n<figure class=\"wp-block-image aligncenter size-full enlarged-image\"><img decoding=\"async\" data-wp-bind--src=\"selectors.core.image.enlargedImgSrc\" data-wp-style--object-fit=\"selectors.core.image.lightboxObjectFit\" src=\"\" alt=\"\" class=\"wp-image-238\" style=\"object-fit:cover\"\/><\/figure>\n<\/div>\n                <div class=\"scrim\" style=\"background-color: var(--wp--preset--color--background)\" aria-hidden=\"true\"><\/div>\n        <\/div><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Below is the CSS that makes up this style. Note that is is only made to be viewed at the desktop level.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css?family=Exo+2:300|Wallpoet');\n\n\/*Contents*\/\n\n\/*1. Set defaults*\/\n\/*2. set animations*\/\n\/*3. Header (title of whole page)*\/\n\/*4. Intro*\/\n\/*5. Preamble*\/\n\/*6. Main content*\/\n\/*7. Explanation*\/\n\/*8. Participation*\/\n\/*9. Benefits*\/\n\/*10. Requirements*\/\n\/*11. Footer*\/\n\/*12. Sidebar*\/\n\n\/*1. set defaults*\/\n\nbody {\n\tbackground-image: url(images\/bg.jpg);\n\tbackground-size: 100%;\n\tbackground-attachment: fixed;\n}\n\na {\n\ttext-decoration: none;\n}\n\nabbr&#91;title]{\n\ttext-decoration: none;\n}\n\nh1, h2, h3 {\n\tfont-family: 'Wallpoet', helvetica, sans-serif;\t\n}\n\nh3 {\n\tfont-size: 2em;\n}\n\np {\n\tfont-family: 'Exo 2', helvetica, sans-serif;\n}\n\n.page-wrapper {\n\twidth: 1250px;\n\tmargin: 0 auto;\n\tcolor: white;\n}\n\n\/*2. Animations*\/\n\n\/*page open animation from side*\/\n@keyframes pageopenside {\n\t0% {right:-500px;}\n\t80% {right: 50px;}\n\t100% {right: 0px;}\n}\n\n\/*page open animation from top for header*\/\n@keyframes pageopentop2 {\n\t0% {top:-500px;}\n\t80% {top: 550px;}\n\t100% {top: 450px;}\n}\n\n\/*page open animation from top*\/\n@keyframes pageopentop {\n\t0% {top:-500px;}\n\t80% {top: 50px;}\n\t100% {top: 0px;}\n}\n\n\/*set opacity animation for intro sphere*\/\n@keyframes sphere {\n\tfrom {opacity: 1;}\n\tto {opacity: 0;}\n}\n\n@keyframes greentowhite {\n\tfrom {color: rgb(87, 185, 72);}\n\tto {color: white;}\n}\n\n\/*end defaults*\/\n\n\/*3. Header*\/\n\/*affix title to side of page and apply animation*\/\nheader h1 {\n\tcolor: white;\n\tmargin: 0;\n\tposition: fixed;\n\ttransform: rotate(-90deg);\n\tleft: -375px;\n\ttop: 450px;\n\tfont-size: 5em;\n\tanimation-name: pageopentop2;\n\tanimation-duration: 2s;\n}\n\n\/*4. Begin intro styling*\/\n#zen-intro {\n\tposition: relative;\n}\n\nheader h2{\n\tdisplay: block;\n\tcolor: rgb(87, 185, 72);\n\tfont-size: 4.5em;\n\ttext-align: center;\n\tmargin-bottom: 20px;\n}\n\n\/*Apply animations for other page elements*\/\n#zen-intro {\n\tanimation-name: pageopenside;\n\tanimation-duration: 2s;\n}\n\n.summary {\n\tanimation-name: pageopentop;\n\tanimation-duration: 2s;\n}\n\n\/*\nDisplay summary elements next to each other with plenty of negative space\n*\/\n.summary {\n\tdisplay: flex;\n\tmargin: 50px;\n\tjustify-content: space-around;\n\tposition: relative;\n}\n\n.summary * {\n\twidth: 28%;\n\tfont-size: 20px;\n}\n\n.summary p {\n\tbackground-color: rgba(87, 185, 72, 0.5);\n\tpadding: 10px;\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: rgb(87, 185, 72);\n\ttext-align: center;\n\tfont-family: 'Wallpoet', helvetica, sans-serif;\n\tcolor: white;\n}\n\n\/*add cool image to supplement style*\/\n.summary p:first-of-type::after{\n\tcontent: url(images\/scanspheregr.png);\n\tdisplay: block;\n\tmargin-top: 15px;\n\tanimation-name: sphere;\n\tanimation-duration: 4s;\n\tanimation-iteration-count: infinite;\n\tanimation-direction: alternate\n}\n\n\/*adjust flex-behaviour of second child to have it centered*\/\n.summary p:last-of-type{\n\talign-self: center;\n}\n\n\/*stlye links so that they stand out*\/\n.summary p a {\n\tmargin: 10px auto;\n\tfont-size: 22px;\n\tborder-style: double;\n\tborder-width: 5px;\n\tborder-color: rgb(87, 185, 72);\n\tdisplay: inline-block;\n\tcolor: rgb(87, 185, 72);\n\ttransition: color 2s, background-color 2s;\n}\n\n.summary p a:hover{\n\tbackground-color: rgb(87, 185, 72);\n\tcolor: white;\n}\n\n\/*end intro styling*\/\n\n\/*5. Preamble*\/\n\/*style fluff paragraph*\/\n.preamble {\n\tbackground-color: rgba(87, 185, 72, 0.5);\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: rgb(87, 185, 72);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: stretch;\n}\n\n.preamble h3 {\n\tbackground-image: url(images\/bg.jpg);\n\tbackground-size: 100%;\n\tmargin: 0;\n\tfont-size: 4.8em;\n\twidth: 100%;\n\ttext-align: center;\n\tcolor: rgb(87, 185, 72);\n\tpadding-bottom: 30px;\n\tpadding-top: 20px;\n\tanimation-name: greentowhite;\n\tanimation-duration: 2s;\n\tanimation-iteration-count: infinite;\n\tanimation-direction: alternate\n}\n\n.preamble p {\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: rgb(87, 185, 72);\n\twidth: 28%;\n\tmargin: 10px auto;\n\tpadding: 10px;\n\tfont-size: 1.1em;\n\tline-height: 1.7;\n}\n\/*end styling fluff paragraph*\/\n\n\/*begin main content*\/\n\n\/*6. Main*\/\n\/*give room for sidebar*\/\n.supporting {\n\twidth: 65%;\n\tmargin-top: 100px;\n\tfloat: left;\n\tpadding-left: 10px;\n}\n\n\/*7. Explanation*\/\n#zen-explanation {\n\tdisplay: flex;\n\tjustify-content: space-around;\n\tposition: relative;\n\tflex-wrap: wrap;\n\tjustify-content: space-between;\n}\n\n#zen-explanation h3 {\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n\tbackground: none;\n\tfont-size: 3em;\n\tcolor: rgb(87, 185, 72);\n\ttext-align: center;\n\tpadding: 10px;\n}\n\n\n#zen-explanation p {\n\tbackground-color: rgb(87, 185, 72);\n\tcolor: black;\n\tpadding: 10px;\n\twidth: 40%;\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: black;\n\tfont-size: 1.2em;\n}\n\n#zen-explanation p::before{\n\tcontent: url(images\/scansphere.png);\n\tdisplay: block;\n\ttext-align: center;\n\tpadding-top: 20px;\n\tpadding-bottom: 20px;\n}\n\n\/*apply animations*\/\n#zen-explanation p:first-of-type::before {\n\tanimation-name: sphere;\n\tanimation-duration: 4s;\n\tanimation-iteration-count: infinite;\n\tanimation-direction: alternate;\n}\n\n#zen-explanation p:last-of-type::before {\n\tanimation-name: sphere;\n\tanimation-duration: 4s;\n\tanimation-iteration-count: infinite;\n\tanimation-direction: alternate;\n\tanimation-delay: 4s;\n}\n\/*end zen explanation*\/\n\n\/*8. Participation*\/\n#zen-participation {\n\tbackground-color: black;\n\tpadding: 20px;\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: rgb(87, 185, 72);\n\tcolor: rgb(87, 185, 72);\n}\n\n#zen-participation h3 {\n\tfont-size: 2em;\n\tmargin-top: 15px;\n}\n\n#zen-participation p {\n\tfont-size: 1.1em;\n\tline-height: 1.7;\n}\n\n#zen-participation a {\n\tcolor: rgb(87, 185, 72);\n\ttransition: color 2s, background-color 2s;\n\tfont-size: 1.2em;\n}\n\n#zen-participation a:hover {\n\tcolor: black;\n\tbackground-color: rgb(87, 185, 72);\n}\n\/*end zen participation*\/\n\n\/*9. Benefits*\/\n#zen-benefits {\n\tbackground-image: url(images\/bg.jpg);\n\tbackground-size: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: black;\n\tpadding: 10px;\n\twidth: 42%;\n\tmargin-top: 100px;\n\tfloat: right;\n\tmargin-left: 50px;\n\tmargin-bottom: 50px;\n\n}\n\n#zen-benefits h3 {\n\tcolor: rgb(87, 185, 72);\n\ttext-align: center;\n}\n\n#zen-benefits p {\n\tfont-size: 1.1em;\n\tline-height: 1.7;\n\ttext-align: center;\n\n}\n\/*end zen benefits*\/\n\n\/*10. Requirements*\/\n\/*zen requirements styles*\/\n#zen-requirements {\n\tbackground-color: rgb(87, 185, 72);\n\tcolor: black;\n\tpadding: 10px;\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: black;\n\tmargin-left: 0px;\n\tmargin-top: 50px;\n}\n\n#zen-requirements h3 {\n\tfont-size: 2.5em;\n\tmargin-top: 0;\n}\n\n#zen-requirements p {\n\tfont-size: 1.1em;\n\tline-height: 1.7;\n\tpadding: 10px;\n}\n\n#zen-requirements p:last-of-type {\n\tbackground-image: url(images\/bg.jpg);\n\tbackground-size: 100%;\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: rgb(87, 185, 72);\n\tcolor: white;\n\tfont-size: 1.4em;\n}\n\n#zen-requirements p:last-of-type a{\n\tcolor: white;\n}\n\n#zen-requirements a {\n\tcolor: black;\n\ttransition: color 2s, background-color 2s;\n\tfont-size: 1.2em;\n\tfont-family: 'Wallpoet', helvetica, sans-serif;\n}\n\n#zen-requirements a:hover {\n\tcolor: rgb(87, 185, 72);\n\tbackground-color: black\n}\n\n\/*end zen requirements*\/\n\n\/*11. Footer*\/\nfooter {\n\tbackground-image: url(images\/bg.jpg);\n\tbackground-size: 100%;\n\tbackground-color: rgba(87, 185, 72, 0.5);\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: rgb(87, 185, 72);\n\tclear: both;\n\tdisplay: flex;\n\tmargin-top: 50px;\n}\n\nfooter a {\n\tbackground-color: black;\n\tmargin: 10px auto;\n\tfont-size: 22px;\n\tborder-style: double;\n\tborder-width: 5px;\n\tborder-color: rgb(87, 185, 72);\n\tdisplay: inline-block;\n\tcolor: rgb(87, 185, 72);\n\tpadding: 10px;\n\ttransition: color 2s, background-color 2s;\n\tfont-family: 'Wallpoet', helvetica, sans-serif;\n\tfont-size: 1.3em;\n}\n\nfooter a:hover{\n\tbackground-color: rgb(87, 185, 72);\n\tcolor: white;\n}\n\n\/*12. Sidebar*\/\n\/*set defaults for sidebar*\/\n.sidebar {\n\twidth: 25%;\n\tmargin-top: 100px;\n\tfloat: right;\n\tbackground-color: rgba(87, 185, 72, 0.5);\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: rgb(87, 185, 72);\n}\n\n.sidebar h3 {\n\tbackground-image: url(images\/bg.jpg);\n\tbackground-size: 100%;\n\tbackground-color: black;\n\tcolor: rgb(87, 185, 72);\n\ttext-align: center;\n\tpadding: 10px;\n\tanimation-name: greentowhite;\n\tanimation-duration: 2s;\n\tanimation-iteration-count: infinite;\n\tanimation-direction: alternate\n\n}\n\n.sidebar ul {\n\tlist-style: none;\n\tlist-style-image: url(images\/listicon.png);\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.sidebar ul li {\n\tbackground-image: url(images\/bg.jpg);\n\tbackground-size: 100%;\n\tbackground-color: black;\n\tborder-style: double;\n\tborder-width: 10px;\n\tborder-color: rgb(87, 185, 72);\n\tfloat: left;\n\ttext-align: center;\n\tmargin: 10px;\n\tpadding: 10px;\n}\n\n.sidebar ul li a:hover {\n\tbackground-color: rgb(87, 185, 72);\n\tcolor: white;\n}\n\n.sidebar ul li a {\n\tcolor: rgb(87, 185, 72);\n\ttransition: color 2s, background-color 2s;\n}\n\n\/*Fix fonts for sidebar*\/\n.design-selection ul li {\n\tfont-family: 'Exo 2', helvetica, sans-serif;\n}\n\n.design-name {\n\tfont-family: 'Wallpoet', helvetica, sans-serif;\n\tfont-size: 1.1em;\n\tcolor: white;\t\n}\n\n.design-archives a {\n\tfont-family: 'Wallpoet', helvetica, sans-serif;\n\tfont-size: 1.3em;\n}\n\n.zen-resources a {\n\tfont-family: 'Wallpoet', helvetica, sans-serif;\n\tfont-size: 1.3em;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>2019 Like many web designers and developers before me, I created my own version of the zen garden site. The original can be found here. This was my introduction to intense CSS use. This is a project based solely on coding in CSS. We are provided with the HTML content and we have to come [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":239,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[17,10],"tags":[],"uagb_featured_image_src":{"full":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg.jpg",1082,1327,false],"thumbnail":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-150x150.jpg",150,150,true],"medium":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-245x300.jpg",245,300,true],"medium_large":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-768x942.jpg",768,942,true],"large":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-835x1024.jpg",835,1024,true],"wps_thumbnail_size":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg-360x250.jpg",360,250,true],"1536x1536":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg.jpg",1082,1327,false],"2048x2048":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/bg.jpg",1082,1327,false]},"uagb_author_info":{"display_name":"jessica.jackson","author_link":"https:\/\/doublejdesign.ca\/index.php\/author\/jessica-jackson\/"},"uagb_comment_info":1,"uagb_excerpt":"2019 Like many web designers and developers before me, I created my own version of the zen garden site. The original can be found here. This was my introduction to intense CSS use. This is a project based solely on coding in CSS. We are provided with the HTML content and we have to come&hellip;","_links":{"self":[{"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/237"}],"collection":[{"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":3,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/237\/revisions\/363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/media\/239"}],"wp:attachment":[{"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}