{"id":1,"date":"2019-12-13T18:36:00","date_gmt":"2019-12-13T18:36:00","guid":{"rendered":"https:\/\/jennifercreativestudio.com\/?p=1"},"modified":"2022-07-27T12:57:30","modified_gmt":"2022-07-27T12:57:30","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/jennifercreativestudio.com\/?p=1","title":{"rendered":"HOW TO CREATE AN EASY GRADIENT LANDING PAGE LIKE STRIPE"},"content":{"rendered":"\n<p>Have you ever visited a website and been completely in awe of the elegance and simplicity of its design? For me, that website is Stripe. Every single time I get to open this website, I can\u2019t help but smile a little. There is so much you can learn from this website, and not just as a designer or developer. &nbsp;<\/p>\n\n\n\n<p>To have a better understanding of the online world around us, I recommend to learn some basic HTML and CSS codes. With the help of these two basic programming languages, you can almost build anything you want, at least in terms of design.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Today, In this small project I will show you how to create a simple HTML\/CSS Gradient landing page just like stripe using a small and easy-to-use CSS tricks to create a Stanning website.<\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Video Tutorial<\/h3>\n\n\n\n<iframe loading=\"lazy\" width=\"860\" height=\"515\" src=\"https:\/\/www.youtube.com\/embed\/8BzV5_gQjms\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n\n\n\n<p>If you don\u2019t like the video or need more instructions, then continue reading. So before we begin you can open up your own text editor, but I also created a couple of Codepen for you to follow along without having to touch any code yourself.<\/p>\n                                <p><strong>These are the steps we will be following:<\/strong><\/p>\n                                <ul>\n                                        <li>&#8211; HTML Layout<\/li>\n                                        <li>&#8211; CSS Styling<\/li>\n                                <\/ul>\n\n                                <p><strong>Step 1: HTML Layout<\/strong><\/p>\n\n                                <p class=\"codepen\" data-height=\"465\" data-theme-id=\"dark\" data-default-tab=\"css,result\" data-user=\"owlie\" data-slug-hash=\"ZEYWWVr\" data-preview=\"true\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Gradient Landing Page like Stripe\">\n                                        <span>See the Pen <a href=\"https:\/\/codepen.io\/owlie\/pen\/ZEYWWVr\">\n                                        Gradient Landing Page like Stripe<\/a> by Jennifer (<a href=\"https:\/\/codepen.io\/owlie\">@owlie<\/a>)\n                                        on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n                                      <\/p>\n                                      <script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n                        <br>\n                        <h3>&#8220;My Last Words about this&#8221;<\/h3>\n                        <p>Hopefully this article gave you some insight into how Stripe designs their websites and inspired you to create something of your own! <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever visited a website and been completely in awe of the elegance and simplicity of its design? For me, that website is Stripe. Every single time I get to open this website, I can\u2019t help but smile a little. There is so much you can learn from this website, and not just as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":438,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-topics"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1"}],"version-history":[{"count":2,"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":439,"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions\/439"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=\/wp\/v2\/media\/438"}],"wp:attachment":[{"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jennifercreativestudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}