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’t help but smile a little. There is so much you can learn from this website, and not just as a designer or developer.  

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.

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.

Video Tutorial

If you don’t 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.

These are the steps we will be following:

• – HTML Layout
• – CSS Styling

Step 1: HTML Layout

See the Pen Gradient Landing Page like Stripe by Jennifer (@owlie) on CodePen.

“My Last Words about this”

Hopefully this article gave you some insight into how Stripe designs their websites and inspired you to create something of your own!