{"id":18,"date":"2026-10-10T11:14:23","date_gmt":"2026-10-10T11:14:23","guid":{"rendered":"https:\/\/xsurve.com\/?page_id=18"},"modified":"2026-10-10T18:37:35","modified_gmt":"2026-10-10T18:37:35","slug":"page-buy","status":"publish","type":"page","link":"https:\/\/xsurve.com\/","title":{"rendered":"page-buy"},"content":{"rendered":"<div id=\"cs-content\" class=\"cs-content\"><section class=\"x-section e18-e10 mi-0 mi-2\" data-module=\"1\"><div class=\"x-grid e18-e11 mi-y mi-z mi-10 mi-11 mi-13\"><div class=\"x-cell e18-e12 mi-17 mi-18 mi-1a mi-1b mi-1c\"><div class=\"x-text x-text-headline e18-e14 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-1v mi-6 mi-7 is-course-copy is-grande  x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p><strong>software built<\/strong> \n  <strong>for real<\/strong>\n  <strong>business<\/strong>\n<span>Practical software for real business operations<\/span> <\/p><\/div>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e18-e15 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p>(And we can show you how).<\/p>\n\n<p>CSS Grid is <em>so<\/em> forward thinking and <em>so<\/em> incredibly powerful that the sites and layouts and heck, even <em>the clients<\/em> of tomorrow will be <strong>demanding it to stay relevant.<\/strong> You really don't have a choice.<\/p>\n\n<p>This got us thinking...<\/p>\n\n<p>What if there was <em>one place<\/em> you could go that taught <strong>everything you need to know<\/strong> about CSS Grid...from the ground up...so you or your team can go from zero to hero in as little as a day?<\/p>\n\n<p>And what if you were given some of the best examples of CSS Grid on the market today. <strong>Yes, given!<\/strong> Designs you could use right away on personal or client sites.<\/p>\n\n<p>And imagine, if in addition to all of that&mdash;we created a <strong>powerful visual editor<\/strong> that lets you customize those CSS Grid layouts (or build your own) without having to mess with any fussy code?<\/p>\n\n<p><em>Well that would be pretty darn awesome!<\/em><\/p><\/div>\n<\/div><\/div><\/div><a class=\"x-div e18-e16 mi-b mi-c mi-d mi-h mi-j mi-l mi-n mi-o mi-p mi-6 mi-7 mi-8 is-next-module x-effect-exit\" href=\"#module-2\" data-x-effect-provider=\"colors particles effects\" data-x-effect=\"{&quot;durationBase&quot;:&quot;300ms&quot;,&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\" data-next-module=\"2\"><div class=\"x-text x-text-headline e18-e17 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1k mi-1w\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">Say Hello to Gridorama<\/span>\n<\/div><\/div><\/div><\/a><\/div><\/div><div class=\"x-div e18-e18 mi-b mi-c mi-d mi-e mi-f mi-g mi-h mi-i mi-j mi-k mi-l mi-m\"><div class=\"x-grid e18-e19 mi-y mi-10 mi-11 mi-12 is-guide-grid\"><div class=\"x-cell e18-e20 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e20 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e20 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e20 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e20 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e20 mi-16 mi-17 mi-19 mi-1a\"><\/div><\/div><\/div><\/section><section class=\"x-section e18-e21 mi-0 mi-2\" data-module=\"2\"><div class=\"x-grid e18-e22 mi-y mi-z mi-11 mi-13 mi-14\" id=\"module-2\"><div class=\"x-cell e18-e23 mi-17 mi-18 mi-1a mi-1c mi-1d\"><div class=\"x-text x-text-headline e18-e24 mi-1g mi-1h mi-1i mi-1k mi-1o mi-1p mi-1t mi-1x mi-1y mi-1z mi-20 mi-6 mi-7 is-course-h x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h2 class=\"x-text-content-text-primary\">Nice To Meet You.<\/h2>\n<\/div><\/div><\/div><\/div><div class=\"x-cell e18-e25 mi-17 mi-18 mi-1a mi-1c mi-1e\"><div class=\"x-text x-text-headline e18-e26 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p>From training to templates and from tech to tools, <strong>Gridorama has everything you need to start using CSS Grid like the big boys.<\/strong><\/p>\n\n<p>And it doesn't matter whether you're a one-man band or a large web agency&mdash;a new beginner or a seasoned pro. Gridorama will take you by the hand and teach you everything you need to know.<\/p><\/div>\n<\/div><\/div><\/div><ul class=\"x-row e18-e27 mi-2j mi-2k mi-2l mi-2o mi-2p mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-row-inner\"><li class=\"x-col e18-e28 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e29 mi-30 mi-31 mi-9\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e30 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><em>Tired of all your layouts looking the same?<\/em><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e28 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e29 mi-30 mi-31 mi-9\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e30 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><em>Looking to broaden your design portfolio?<\/em><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e28 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e29 mi-30 mi-31 mi-9\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e30 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><em>Want to attract higher value clients?<\/em><\/div>\n<\/div><\/div><\/div><\/li><\/div><\/ul><div class=\"x-text x-text-headline e18-e31 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p><strong>Gridorama is the answer!<\/strong> Join us for a quick tour of all that we have in store for you.<\/p><\/div>\n<\/div><\/div><\/div><a class=\"x-div e18-e32 mi-b mi-c mi-d mi-h mi-j mi-l mi-n mi-o mi-p mi-6 mi-7 mi-8 is-next-module x-effect-exit\" href=\"#module-3\" data-x-effect-provider=\"colors particles effects\" data-x-effect=\"{&quot;durationBase&quot;:&quot;300ms&quot;,&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\" data-next-module=\"3\"><div class=\"x-text x-text-headline e18-e33 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1k mi-1w\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">Show Me the Goods<\/span>\n<\/div><\/div><\/div><\/a><\/div><\/div><div class=\"x-div e18-e34 mi-b mi-c mi-d mi-e mi-f mi-g mi-h mi-i mi-j mi-k mi-l mi-m\"><div class=\"x-grid e18-e35 mi-y mi-10 mi-11 mi-12 is-guide-grid\"><div class=\"x-cell e18-e36 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e36 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e36 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e36 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e36 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e36 mi-16 mi-17 mi-19 mi-1a\"><\/div><\/div><\/div><\/section><section class=\"x-section e18-e37 mi-0 mi-2 mi-3\" data-module=\"3\"><div class=\"x-grid e18-e38 mi-y mi-z mi-11 mi-13 mi-14\" id=\"module-3\"><div class=\"x-cell e18-e39 mi-17 mi-18 mi-1a mi-1c mi-1d\"><div class=\"x-text x-text-headline e18-e40 mi-1g mi-1h mi-1i mi-1k mi-1o mi-1p mi-1t mi-1y mi-1z mi-20 mi-6 mi-7 is-course-h x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h2 class=\"x-text-content-text-primary\">Done For You Designs.<\/h2>\n<\/div><\/div><\/div><\/div><div class=\"x-cell e18-e41 mi-17 mi-18 mi-1a mi-1c mi-1e\"><div class=\"x-text x-text-headline e18-e42 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p>Sometimes the best way to learn is to start with the end in mind. This is certainly true in the design world, and this is even <em>more true<\/em> when learning something like CSS Grid.<\/p>\n\n<p>In light of this, we've put together an <strong>amazing collection of tantalizing templates<\/strong> to help you both learn and use CSS Grid...the right way.<\/p>\n\n<p>From sections to sliders, many of these designs are inspired from leading brands...those billion and trillion dollar companies who are <em>constantly testing<\/em> engagement and conversion and who keep their websites on the <strong>cutting edge of what is possible.<\/strong><\/p>\n\n<p>We not only <em>give you the layouts,<\/em> we're going to teach you how they were put together then let you use them as you see fit...all built into our visual grid editor! Check out just a few of our favorites.<\/p><\/div>\n<\/div><\/div><\/div><\/div><div class=\"x-cell e18-e43 mi-17 mi-18 mi-1a mi-1c mi-1e\"><figure class=\"x-div e18-e44 mi-b mi-d mi-e mi-f mi-g mi-h mi-q mi-r mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><span class=\"x-image e18-e45 mi-33\"><img decoding=\"async\" src=\"https:\/\/demo.theme.co\/gridorama\/wp-content\/uploads\/sites\/124\/2022\/02\/example-01.jpg\" alt=\"Gridorama Example\" loading=\"lazy\"><\/span><div class=\"x-text x-text-headline e18-e46 mi-1g mi-1i mi-1k mi-1m mi-1o mi-1t mi-1u mi-1v mi-21 mi-22 mi-23 mi-24\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">Really creative layout inspired by Netflix.<\/p>\n<\/div><\/div><\/div><\/figure><figure class=\"x-div e18-e44 mi-b mi-d mi-e mi-f mi-g mi-h mi-q mi-r mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><span class=\"x-image e18-e45 mi-33\"><img decoding=\"async\" src=\"https:\/\/demo.theme.co\/gridorama\/wp-content\/uploads\/sites\/124\/2022\/02\/example-02.jpg\" alt=\"Gridorama Example\" loading=\"lazy\"><\/span><div class=\"x-text x-text-headline e18-e46 mi-1g mi-1i mi-1k mi-1m mi-1o mi-1t mi-1u mi-1v mi-21 mi-22 mi-23 mi-24\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">We call this the &ldquo;Sweet Grid&rdquo; and it's a fun one to work with!<\/p>\n<\/div><\/div><\/div><\/figure><figure class=\"x-div e18-e44 mi-b mi-d mi-e mi-f mi-g mi-h mi-q mi-r mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><span class=\"x-image e18-e45 mi-33\"><img decoding=\"async\" src=\"https:\/\/demo.theme.co\/gridorama\/wp-content\/uploads\/sites\/124\/2022\/02\/example-03.jpg\" alt=\"Gridorama Example\" loading=\"lazy\"><\/span><div class=\"x-text x-text-headline e18-e46 mi-1g mi-1i mi-1k mi-1m mi-1o mi-1t mi-1u mi-1v mi-21 mi-22 mi-23 mi-24\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">Grids within grids? Yes, please! Learn how Microsoft does it.<\/p>\n<\/div><\/div><\/div><\/figure><figure class=\"x-div e18-e44 mi-b mi-d mi-e mi-f mi-g mi-h mi-q mi-r mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><span class=\"x-image e18-e45 mi-33\"><img decoding=\"async\" src=\"https:\/\/demo.theme.co\/gridorama\/wp-content\/uploads\/sites\/124\/2022\/02\/example-04.jpg\" alt=\"Gridorama Example\" loading=\"lazy\"><\/span><div class=\"x-text x-text-headline e18-e46 mi-1g mi-1i mi-1k mi-1m mi-1o mi-1t mi-1u mi-1v mi-21 mi-22 mi-23 mi-24\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">No that's not one big image...there's more than meets the eye with these donuts.<\/p>\n<\/div><\/div><\/div><\/figure><figure class=\"x-div e18-e44 mi-b mi-d mi-e mi-f mi-g mi-h mi-q mi-r mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><span class=\"x-image e18-e45 mi-33\"><img decoding=\"async\" src=\"https:\/\/demo.theme.co\/gridorama\/wp-content\/uploads\/sites\/124\/2022\/02\/example-05.jpg\" alt=\"Gridorama Example\" loading=\"lazy\"><\/span><div class=\"x-text x-text-headline e18-e46 mi-1g mi-1i mi-1k mi-1m mi-1o mi-1t mi-1u mi-1v mi-21 mi-22 mi-23 mi-24\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">A fun, modern grid-based layout inspired by Slack.<\/p>\n<\/div><\/div><\/div><\/figure><figure class=\"x-div e18-e44 mi-b mi-d mi-e mi-f mi-g mi-h mi-q mi-r mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><span class=\"x-image e18-e45 mi-33\"><img decoding=\"async\" src=\"https:\/\/demo.theme.co\/gridorama\/wp-content\/uploads\/sites\/124\/2022\/02\/example-06.jpg\" alt=\"Gridorama Example\" loading=\"lazy\"><\/span><div class=\"x-text x-text-headline e18-e46 mi-1g mi-1i mi-1k mi-1m mi-1o mi-1t mi-1u mi-1v mi-21 mi-22 mi-23 mi-24\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">This is not only a grid, it's also a slider! We're pushing the boundaries of what is possible here.<\/p>\n<\/div><\/div><\/div><\/figure><\/div><div class=\"x-cell e18-e47 mi-17 mi-18 mi-1a mi-1c mi-1e\"><div class=\"x-text x-text-headline e18-e48 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p>We want CSS Grid to be simple and approachable for <strong>all skill levels.<\/strong> These ready-made designs will supercharge your Grid journey with an incredible collection of assets!<\/p><\/div>\n<\/div><\/div><\/div><a class=\"x-div e18-e49 mi-b mi-c mi-d mi-h mi-j mi-l mi-n mi-o mi-p mi-6 mi-7 mi-8 is-next-module x-effect-exit\" href=\"#module-4\" data-x-effect-provider=\"colors particles effects\" data-x-effect=\"{&quot;durationBase&quot;:&quot;300ms&quot;,&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\" data-next-module=\"4\"><div class=\"x-text x-text-headline e18-e50 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1k mi-1w\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">But Wait, There's More \ud83d\ude42<\/span>\n<\/div><\/div><\/div><\/a><\/div><\/div><div class=\"x-div e18-e51 mi-b mi-c mi-d mi-e mi-f mi-g mi-h mi-i mi-j mi-k mi-l mi-m\"><div class=\"x-grid e18-e52 mi-y mi-10 mi-11 mi-12 is-guide-grid\"><div class=\"x-cell e18-e53 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e53 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e53 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e53 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e53 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e53 mi-16 mi-17 mi-19 mi-1a\"><\/div><\/div><\/div><\/section><section class=\"x-section e18-e54 mi-0 mi-2\" data-module=\"4\"><div class=\"x-grid e18-e55 mi-y mi-z mi-11 mi-13 mi-14\" id=\"module-4\"><div class=\"x-cell e18-e56 mi-17 mi-18 mi-1a mi-1c mi-1d\"><div class=\"x-text x-text-headline e18-e57 mi-1g mi-1h mi-1i mi-1k mi-1o mi-1p mi-1t mi-1z mi-20 mi-25 mi-6 mi-7 is-course-h has-mobile-tweak x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h2 class=\"x-text-content-text-primary\">The Grid Masterclass.<\/h2>\n<\/div><\/div><\/div><\/div><div class=\"x-cell e18-e58 mi-17 mi-18 mi-1a mi-1c mi-1e\"><div class=\"x-text x-text-headline e18-e59 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p>To know Grid is to love Grid, but to know Grid...<em>you first need to know Grid!<\/em><\/p>\n\n<p>And that's why we've put together <strong>the most comprehensive course about CSS Grid<\/strong> on the market today.<\/p>\n\n<p>You will not only learn the <em>ins<\/em> and <em>outs<\/em> to this powerful layout engine, we'll teach you how to incorporate it into designs starting today!<\/p>\n\n<p>As a matter of fact, your guide for this journey is none other than our very own <em>Kory Wakefield<\/em>&mdash;Themeco's lead developer extraordinaire.<\/p>\n\n<p>Kory is a <strong>top expert on all things CSS Grid<\/strong> and has been on the cutting edge of this technology from the very beginning. Follow along as Kory teaches you about:<\/p><\/div>\n<\/div><\/div><\/div><ul class=\"x-row e18-e60 mi-2j mi-2k mi-2l mi-2o mi-2q mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-row-inner\"><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>The Power of CSS Grid<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Grid Jargon 101<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>The 2nd Dimension<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Content Considerations<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Building Your First Template<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Percentages Simplified<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>AI Grids<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Minmax Magic<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Alignment & Justification<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Sizing & Placement<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Grid in Cornerstone<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Auto Responsive Layouts<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>The Gap Trick<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Thinking in Two Dimensions<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Content Duplets<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>The Secret Power of Auto<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Creative Templating<\/strong><\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e61 mi-2v mi-2w mi-2x\"><i class=\"x-icon e18-e62 mi-30 mi-31\" aria-hidden=\"true\" data-x-icon-l=\"&#xf058;\"><\/i><div class=\"x-text x-text-headline e18-e63 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1s mi-1t mi-1u is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><strong>Grid Can Do That?<\/strong><\/div>\n<\/div><\/div><\/div><\/li><\/div><\/ul><div class=\"x-text x-text-headline e18-e64 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p>And those are just the high level topics! Look at some of the <em>actual things<\/em> you'll learn how to do. Remember, this is just a small sample.<\/p><\/div>\n<\/div><\/div><\/div><ul class=\"x-row e18-e65 mi-2j mi-2k mi-2m mi-2o mi-2r mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-row-inner\"><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">Implement <strong>&ldquo;artificial intelligence&rdquo;<\/strong> grids in your designs that can adapt to layouts without responsive styling.<\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">Learn how to <strong>create organic grid canvases<\/strong> by sizing row tracks intrinsically based off the Elements in your layout.<\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">Discover how <strong>section transitions are your new best friend<\/strong> and can be very, very forgiving when you need it the most.<\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">See how you can <strong>break CSS Grid out of the box<\/strong> to create some truly advanced layouts.<\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">Learn how to <strong>create densely packed grids<\/strong> using an example from a big time eCommerce player (and get the template to boot).<\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">Leverage the <strong>auto keyword<\/strong> in unique and out-of-the-box ways that can unlock all sorts of layout potential.<\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">Combine grids with <strong>creative interaction and scroll<\/strong> effects to create unique experiences for your users.<\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">See how CSS Grid can be used in <strong>unlikely places<\/strong> like background designs, megamenus, sliders, and more.<\/div>\n<\/div><\/div><\/div><\/li><li class=\"x-col e18-e66 mi-2v mi-2w mi-2y\"><i class=\"x-icon e18-e67 mi-30 mi-32 mi-a\" aria-hidden=\"true\" data-x-icon-s=\"&#xf111;\"><\/i><div class=\"x-text x-text-headline e18-e68 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1o mi-1r mi-1t mi-1u mi-26 is-course-copy\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\">Unlock the power of <strong>source order independence<\/strong> with CSS Grid to create layouts that break out of their natural flow.<\/div>\n<\/div><\/div><\/div><\/li><\/div><\/ul><a class=\"x-div e18-e69 mi-b mi-c mi-d mi-h mi-j mi-l mi-n mi-o mi-p mi-6 mi-7 mi-8 is-next-module x-effect-exit\" href=\"#module-5\" data-x-effect-provider=\"colors particles effects\" data-x-effect=\"{&quot;durationBase&quot;:&quot;300ms&quot;,&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\" data-next-module=\"5\"><div class=\"x-text x-text-headline e18-e70 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1k mi-1w\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">Sold! How Do I Get Started?<\/span>\n<\/div><\/div><\/div><\/a><\/div><\/div><div class=\"x-div e18-e71 mi-b mi-c mi-d mi-e mi-f mi-g mi-h mi-i mi-j mi-k mi-l mi-m\"><div class=\"x-grid e18-e72 mi-y mi-10 mi-11 mi-12 is-guide-grid\"><div class=\"x-cell e18-e73 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e73 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e73 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e73 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e73 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e73 mi-16 mi-17 mi-19 mi-1a\"><\/div><\/div><\/div><\/section><section class=\"x-section e18-e74 mi-0 mi-2 mi-3\" data-module=\"5\"><div class=\"x-grid e18-e75 mi-y mi-z mi-11 mi-13 mi-14\" id=\"module-5\"><div class=\"x-cell e18-e76 mi-17 mi-18 mi-1a mi-1c mi-1d\"><div class=\"x-text x-text-headline e18-e77 mi-1g mi-1h mi-1i mi-1k mi-1o mi-1p mi-1t mi-1y mi-1z mi-20 mi-27 mi-6 mi-7 is-course-h x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h2 class=\"x-text-content-text-primary\">Become a Grid Master.<\/h2>\n<\/div><\/div><\/div><\/div><div class=\"x-cell e18-e78 mi-17 mi-18 mi-1a mi-1c mi-1e\"><div class=\"x-row e18-e79 mi-2j mi-2n mi-2s mi-2t\"><div class=\"x-row-inner\"><div class=\"x-col e18-e80 mi-2v mi-2x mi-2z mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text x-text-headline e18-e81 mi-1g mi-1j mi-1k mi-1n mi-1o mi-1u mi-22 mi-24 mi-28 mi-29 mi-2a\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Introductory Offer<\/h3>\n<\/div><\/div><\/div><div class=\"x-div e18-e82 mi-b mi-d mi-e mi-f mi-g mi-h mi-r mi-s\"><div class=\"x-div e18-e83 mi-d mi-e mi-g mi-h mi-j mi-l mi-n mi-t is-plan-box\"><div class=\"x-text x-text-headline e18-e84 mi-1g mi-1h mi-1j mi-1k mi-1m mi-1o mi-1t mi-20 mi-22 mi-28 mi-2b mi-2c mi-2d\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">Regular: $97<\/span>\n<\/div><\/div><\/div><div class=\"x-div e18-e85 mi-b mi-c mi-d mi-e mi-f mi-h mi-j mi-k mi-u\"><div class=\"x-text x-text-headline e18-e86 mi-1g mi-1h mi-1j mi-1k mi-1m mi-1o mi-1t mi-20 mi-22 mi-23 mi-2d mi-2e\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">$<\/span>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e18-e87 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1k mi-1o mi-1t mi-20 mi-2d mi-2f\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">77<\/span>\n<\/div><\/div><\/div><\/div><div class=\"x-text x-text-headline e18-e88 mi-1g mi-1h mi-1j mi-1k mi-1m mi-1o mi-1u mi-22 mi-29 mi-2g mi-2h\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">Get instant access to all Gridorama training & templates!<\/p>\n<\/div><\/div><\/div><a class=\"x-div e18-e89 mi-b mi-c mi-d mi-h mi-j mi-l mi-n mi-o mi-v mi-8\" href=\"https:\/\/theme.co\/checkout\/gridorama\" data-x-effect-provider=\"colors particles effects\" data-x-effect=\"{&quot;durationBase&quot;:&quot;300ms&quot;}\"><div class=\"x-text x-text-headline e18-e90 mi-1f mi-1g mi-1h mi-1j mi-1w mi-2c mi-2i\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">Get Gridorama<\/span>\n<\/div><\/div><\/div><\/a><div class=\"x-div e18-e91 mi-b mi-c mi-e mi-f mi-g mi-h mi-m mi-w\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"x-cell e18-e92 mi-17 mi-18 mi-1a mi-1c mi-1e\"><div class=\"x-text x-text-headline e18-e93 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p>New Themeco customer? The visual grid editor is included for <strong>free<\/strong> with every Pro Theme purchase. Get Pro + Gridorama and save even more!<\/p><\/div>\n<\/div><\/div><\/div><\/div><div class=\"x-cell e18-e94 mi-17 mi-18 mi-1a mi-1c mi-1e\"><div class=\"x-row e18-e95 mi-2j mi-2n mi-2s mi-2u\"><div class=\"x-row-inner\"><div class=\"x-col e18-e96 mi-2v mi-2x mi-2z mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text x-text-headline e18-e97 mi-1g mi-1j mi-1k mi-1n mi-1o mi-1u mi-22 mi-24 mi-28 mi-29 mi-2a\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Bundle & Save $49<\/h3>\n<\/div><\/div><\/div><div class=\"x-div e18-e98 mi-b mi-d mi-e mi-f mi-g mi-h mi-r mi-s\"><div class=\"x-div e18-e99 mi-d mi-e mi-g mi-h mi-j mi-l mi-n mi-t is-plan-box\"><div class=\"x-div e18-e100 mi-b mi-c mi-d mi-e mi-f mi-h mi-j mi-k mi-u\"><div class=\"x-text x-text-headline e18-e101 mi-1g mi-1h mi-1j mi-1k mi-1m mi-1o mi-1t mi-20 mi-22 mi-23 mi-2d mi-2e\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">$<\/span>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e18-e102 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1k mi-1o mi-1t mi-20 mi-2d mi-2f\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">127<\/span>\n<\/div><\/div><\/div><\/div><div class=\"x-text x-text-headline e18-e103 mi-1g mi-1h mi-1j mi-1k mi-1m mi-1o mi-1t mi-1u mi-22 mi-29 mi-2g\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">Gridorama +<br\/>Pro Single License<\/p>\n<\/div><\/div><\/div><a class=\"x-div e18-e104 mi-b mi-c mi-d mi-h mi-j mi-l mi-n mi-o mi-v mi-8\" href=\"https:\/\/theme.co\/checkout\/gridorama-bundle-single\" data-x-effect-provider=\"colors particles effects\" data-x-effect=\"{&quot;durationBase&quot;:&quot;300ms&quot;}\"><div class=\"x-text x-text-headline e18-e105 mi-1f mi-1g mi-1h mi-1j mi-1w mi-2c mi-2i\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">Purchase<\/span>\n<\/div><\/div><\/div><\/a><\/div><\/div><\/div><div class=\"x-col e18-e96 mi-2v mi-2x mi-2z mi-6 mi-7 x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text x-text-headline e18-e97 mi-1g mi-1j mi-1k mi-1n mi-1o mi-1u mi-22 mi-24 mi-28 mi-29 mi-2a\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h3 class=\"x-text-content-text-primary\">Bundle & Save $129<\/h3>\n<\/div><\/div><\/div><div class=\"x-div e18-e98 mi-b mi-d mi-e mi-f mi-g mi-h mi-r mi-s\"><div class=\"x-div e18-e99 mi-d mi-e mi-g mi-h mi-j mi-l mi-n mi-t is-plan-box\"><div class=\"x-div e18-e100 mi-b mi-c mi-d mi-e mi-f mi-h mi-j mi-k mi-u\"><div class=\"x-text x-text-headline e18-e101 mi-1g mi-1h mi-1j mi-1k mi-1m mi-1o mi-1t mi-20 mi-22 mi-23 mi-2d mi-2e\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">$<\/span>\n<\/div><\/div><\/div><div class=\"x-text x-text-headline e18-e102 mi-1f mi-1g mi-1h mi-1i mi-1j mi-1k mi-1o mi-1t mi-20 mi-2d mi-2f\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">447<\/span>\n<\/div><\/div><\/div><\/div><div class=\"x-text x-text-headline e18-e103 mi-1g mi-1h mi-1j mi-1k mi-1m mi-1o mi-1t mi-1u mi-22 mi-29 mi-2g\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><p class=\"x-text-content-text-primary\">Gridorama +<br\/>Pro Unlimited License<\/p>\n<\/div><\/div><\/div><a class=\"x-div e18-e104 mi-b mi-c mi-d mi-h mi-j mi-l mi-n mi-o mi-v mi-8\" href=\"https:\/\/theme.co\/checkout\/gridorama-bundle-unlimited\" data-x-effect-provider=\"colors particles effects\" data-x-effect=\"{&quot;durationBase&quot;:&quot;300ms&quot;}\"><div class=\"x-text x-text-headline e18-e105 mi-1f mi-1g mi-1h mi-1j mi-1w mi-2c mi-2i\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><span class=\"x-text-content-text-primary\">Purchase<\/span>\n<\/div><\/div><\/div><\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"x-div e18-e106 mi-b mi-c mi-d mi-e mi-f mi-g mi-h mi-i mi-j mi-k mi-l mi-m\"><div class=\"x-grid e18-e107 mi-y mi-10 mi-11 mi-12 is-guide-grid\"><div class=\"x-cell e18-e108 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e108 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e108 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e108 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e108 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e108 mi-16 mi-17 mi-19 mi-1a\"><\/div><\/div><\/div><\/section><section class=\"x-section e18-e109 mi-0 mi-2 mi-3\" data-module=\"6\"><div class=\"x-grid e18-e110 mi-y mi-z mi-11 mi-13 mi-14\" id=\"module-6\"><div class=\"x-cell e18-e111 mi-17 mi-18 mi-1a mi-1c mi-1d\"><div class=\"x-text x-text-headline e18-e112 mi-1g mi-1h mi-1i mi-1k mi-1o mi-1p mi-1t mi-1y mi-1z mi-20 mi-6 mi-7 is-course-h has-mobile-tweak x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><h2 class=\"x-text-content-text-primary\">Questions &amp; Answers.<\/h2>\n<\/div><\/div><\/div><\/div><div class=\"x-cell e18-e113 mi-17 mi-18 mi-1a mi-1c mi-1e\"><div class=\"x-text x-text-headline e18-e114 mi-1g mi-1h mi-1j mi-1o mi-1p mi-1q mi-1r mi-1s mi-1t mi-1u mi-6 mi-7 is-course-copy x-effect-exit\" data-x-effect=\"{&quot;scroll&quot;:true,&quot;offsetTop&quot;:&quot;10%&quot;,&quot;offsetBottom&quot;:&quot;10%&quot;,&quot;behaviorScroll&quot;:&quot;fire-once&quot;}\"><div class=\"x-text-content\"><div class=\"x-text-content-text\"><div class=\"x-text-content-text-primary\"><p><strong>Q: Who should buy Gridorama?<\/strong><br\/>A: If you build or manage websites in any way, Gridorama is for you!<\/p>\n\n<p><strong>Q: Do I need to know coding?<\/strong><br\/>A: Having some background will certainly help, but we start you from the ground up. Gridorama is great for beginners and will help professionals level up their skills.<\/p>\n\n<p><strong>Q: Can I use this outside of WordPress?<\/strong><br\/>A: Yes! The first half of the course is teaching and explaining how the CSS Grid spec works. This can be used on any platform from Shopify to Squarespace and from WordPress to Wix. It can also be used if you write your own HTML \/ CSS. The second half of the course and templates use our Cornerstone Website Builder. We focus the training and application on this part specifically to WordPress.<\/p>\n\n<p><strong>Q: How do I access the visual Grid editor?<\/strong><br\/>A: This is built into Cornerstone for our Pro Theme users, so if you have Pro you are good to go. You'll simply need to purchase Gridorama for access to the training and templates. If you do NOT already own Pro, we have a special bundle available that includes Gridorama + Pro for everything you need!<\/p><\/div>\n<\/div><\/div><\/div><\/div><\/div><div class=\"x-div e18-e115 mi-b mi-c mi-d mi-e mi-f mi-g mi-h mi-i mi-j mi-k mi-l mi-m\"><div class=\"x-grid e18-e116 mi-y mi-10 mi-11 mi-12 is-guide-grid\"><div class=\"x-cell e18-e117 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e117 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e117 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e117 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e117 mi-16 mi-17 mi-19 mi-1a\"><\/div><div class=\"x-cell e18-e117 mi-16 mi-17 mi-19 mi-1a\"><\/div><\/div><\/div><\/section><\/div>","protected":false},"excerpt":{"rendered":"<p>software built for real business Practical software for real business operations (And we can show you how). CSS Grid is so forward thinking and so incredibly powerful that the sites and layouts and heck, even the clients of tomorrow will be demanding it to stay relevant. You really don&#8217;t have a choice. This got us thinking&#8230; What if there was &#8230; <\/p>\n<div><a href=\"https:\/\/xsurve.com\/\" class=\"more-link\">Read More<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-blank-4.php","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry","no-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/xsurve.com\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xsurve.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xsurve.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xsurve.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xsurve.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":12,"href":"https:\/\/xsurve.com\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/xsurve.com\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions\/62"}],"wp:attachment":[{"href":"https:\/\/xsurve.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}