What you’re getting into: 18 minute read, but probably much shorter in actuality, can be skimmed. A detailed breakdown of making a landing page header with a cool effect produced by using gradients and a triangle.

Who this is for: This is more aimed at those who have a basic understanding of HTML and CSS, but want to start upgrading their skills. If this information is very obvious to you, please understand the aim for others who it may not be so obvious to. Feel free to share with those who would benefit if it is not advanced enough for your skill-set.

Affiliate Links: Nope. I have external resources I link to because I genuinely use them myself. I am not opposed to affiliate links, but only when I see fit, which is not the case for this article.

How to spread the word: Recommend this article by hitting the heart. Additionally, share on social media if you find it beneficial. At the end, there is a link to my email list if you want notifications of future posts.

Introduction

Even if you wouldn’t exactly call yourself a beginner, I am sure there are times where you have been learning about development, following along with a blog post, completing a tutorial, etc., and you wonder, “How does this person know all this?!” Suddenly, you will the rush of a feeling that there is a lot of catch up you have to do to get to the level of the instructor.

Well, in my blogging, I always want to communicate that I am not an expert just giving you steps to accomplish, but I want to share new things I learn on my journey to a full-stack developer.

In this article, I am going to be covering one of those “a-ha!” moments I recently had in my front-end development practice…gradients + triangles = a pretty sweet modern landing page.

How It Clicked

In November, I spent a ton of time working on making pure CSS images. As you can read about in a previous blog, this has taught me a lot about how to use only shapes to compose an image.

This “a-ha!” moment clicked when browsing Dribbble, a common routine of mine which I highly recommend.

I came across the image above and immediately I loved how it came off as simple, elegant, and modern. I have literally always seen headers of landing pages like this one and thought to myself, “That is so cool! I wish I could make that…”.

Then it dawned on me, all I would have to do to make an image like this would be to have:

  1. A header box with a black, gradient background with low enough opacity to show an underlying image.

  2. A right triangle over the header box on the right-hand side, with a white, gradient background also with low enough opacity to show an underlying image.

Here’s a visual just in case you aren’t seeing it.

With this sudden rush of excitement, I decided to go ahead and make a landing page header inspired by this image.

In the rest of this post, I will show how you how I coded this landing page header, and hopefully it will provide both inspiration and a nice template for future projects of your own.

The Setup

Open a new pen.

Once you have a new pen open, switch the CSS preprocessor to SCSS. You can see how to do this below.

This will help organize our code by using variables (here’s a recent post I wrote about this).

Here’s the final pen of what we will be making.

See the Pen Modern Landing Page by Mike Mangialardi (@mikemang) on CodePen.

The HTML

  <body>
<div class="webpage">
<div class="right-triangle">
   </div>
<div class="red-brand-box">
     <div class="white-brand-box"></div>
   </div>

   <h3 class="presents-text">Square Labs presents</h3>

   <h1 class="title">Developer <br/> Course</h1>

   <button class="cta-button">Register today</button>

 </div>
</body>

As you can see, the code is fairly simple. Here’s a list of all the components that can be seen in our HTML:

  1. webpage, the black, gradient landing page header box
  2. red-brand-box and white-brand-box, a red and white square that will be the branding
  3. presents-text, smaller text just above our title
  4. title, a title (shocking, I know)
  5. cta-button, a “call to action” button
  6. right-triangle, the white, gradient right triangle

All components following webpage will be nested within it. I recommend my pure CSS post where I describe this at length, which you can open in a new tab and come back to this post.

In short, we do this as every component after webpage will be given a fixed position on top of it. By nesting the components that follow under webpage, our position and size (width and height) values will be based according to webpage and not the body.

The same is also true for white-brand-box which is nested under red-brand-box.

The HTML can be simply copied and pasted at this point. For an additional challenge, you can try typing it out yourself to practice proper nesting, but I will leave that up to you.

For the CSS that follows, I will add the complete code at the beginning and end, but will break it down step by step. I encourage for your to guess each section and check back with the article if you have the time.

The CSS

  @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Ubuntu');
//colors
//black for background
$primary: rgba(15%, 15%, 17%, 0.85), rgba(15%, 15%, 17%, 0.95);
//red for branding box
$accent: #EF4135;
//white for right triangle
$neutral-white-background: rgba(100%, 100%, 100%, 0.8), rgba(100%, 100%, 100%, 0.9);
$neutral-white: #ffffff;
//gray for presents-text
$neutral-gray: #A19E9F;
//pink
$background-color: #D3DBF2;
//fonts
$primary-font: "Ubuntu";
$secondary-font: "Open Sans Condensed";
$large-font-size: 48px;
$small-font-size: 16px;
$mobile-large-font-size: 24px;
$mobile-small-font-size: 8px;
$mobile-extra-small-font-size: 6px;
$thick-font-weight: 700;
$medium-font-weight: 300;
$uppercase-transform: uppercase;
//shapes
$triangle: polygon(100% 0, 0% 100%, 100% 100%);
//start
html,body{
  height: 100%;
  background: $background-color;
}
.webpage{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 1%;
  width: 600px;
  height: 420px;
  background: linear-gradient(
      $primary
    ),  url("https://images.pexels.com/photos/70232/pexels-photo-70232.jpeg?h=350&auto=compress");
  z-index: 1;
  -webkit-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
}
.right-triangle{
  position: absolute;
  bottom: 0%;
  right: 0%;
  height: 100%;
  width: 50%;
  background: linear-gradient(
      $neutral-white-background
    ),  url("https://images.pexels.com/photos/114907/pexels-photo-114907.jpeg?h=350&auto=compress");
  -webkit-clip-path: $triangle;
clip-path: $triangle;

}
.red-brand-box{
  position: absolute;
  width: 8%;
  height: 10%;
  top: 10%;
  left: 10%;
  background: $accent;
  z-index: 1;

}
.white-brand-box{
  position: absolute;
  width: 80%;
  height: 80%;
  top: 15%;
  left: 15%;
  border: solid 6px $neutral-white;
  z-index: 2;
}
.presents-text{
  position: absolute;
  top: 25%;
  left: 10%;
  color: $neutral-gray;
  font-family: $secondary-font;
  font-size: $small-font-size;
  font-weight: $medium-font-weight;
}
.title{
  position: absolute;
  top: 25%;
  left: 10%;
  font-family: $primary-font;
  font-size: $large-font-size;
  font-weight: $thick-font-weight;
  color: $neutral-white;
  text-transform: $uppercase-transform;
}
.cta-button{
  position: absolute;
  width: 25%;
  height: 10%;
  bottom: 25%;
  left: 10%;
  background: $accent;
  border-radius: 0%;
  border: none;
  padding: 10;
  font-family: $primary-font;
  font-size: $small-font-size;
  font-weight: $thick-font-weight;
  color: $neutral-white;
  text-transform: $uppercase-transform;
}
//mobile responsive
@media all and (max-width: 600px) {
 .webpage{
    margin-top: 3%;
    width: 300px;
    height: 200px;
    z-index: 1;
  }
  .white-brand-box{
  border: solid 3px $neutral-white;
}
  .presents-text{
    font-size: $mobile-small-font-size;
  }
    .title{
    font-size: $mobile-large-font-size;
  }
  .cta-button{
    font-size: $mobile-extra-small-font-size;
  }
}

Hopefully, this doesn’t look too overwhelming, but don’t worry we will break this down piece by piece.

The first piece is importing our primary and secondary fonts from Google’s Font API.

  @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Ubuntu');

Here we are importing Open Sans Condensed with a weight/thickness of 300, and we also import Ubuntu (…the font).

The next few sections are SCSS variables. The purpose of this is too make our CSS code more organized and readable. Also it will make it much easier if you use this code as a template.

CSS Variables

  //colors
//black for background
$primary: rgba(15%, 15%, 17%, 0.85), rgba(15%, 15%, 17%, 0.95);
//red for branding box
$accent: #EF4135;
//white for right triangle
$neutral-white-background: rgba(100%, 100%, 100%, 0.8), rgba(100%, 100%, 100%, 0.9);
$neutral-white: #ffffff;
//gray for presents-text
$neutral-gray: #A19E9F;
//body background
$background-color: #D3DBF2;

The first block of variables are for our colors.

$primary is going to be our black, gradient background.

The primary variable is assigned two rgba values that specify each gradient that will be used with background: linear-gradient (which we will get to later).

The syntax for the rgba values is (percent, percent, percent, opacity). I personally use a Chrome plug-in called Colorzilla to easily get a rgb value which I slightly tweak for our rgba value.

Here’s an example rgb that you can get using Colorzilla:

  rgb(19%, 19%, 19%)

To tweak this we just add the “a” after “rgb” and add the opacity, like so: ~~~~ rgba(19%, 19%, 19%, 0.8) ~~~~

To make a linear-gradient background, will just add a second rgba like we do for our primary color variable.

  $primary: rgba(15%, 15%, 17%, 0.85), rgba(15%, 15%, 17%, 0.95);

The red color is going to be our accent color, so we assisgn a red hex code to an $accent variable.

  //red for branding box
$accent: #EF4135;

Next, we will set a $neutral-white-background variable which will be used for the white, gradient right triangle background. We do this just like our $primary variable.

  //white for right triangle
$neutral-white-background: rgba(100%, 100%, 100%, 0.8), rgba(100%, 100%, 100%, 0.9);

Next, we add a $neutral-white variable and $neutral-gray. Our $neutral-white won’t be used, but I like to always organize my CSS with a neutral white and gray. $neutral-gray will be used for our small text above our title.

  $neutral-white: #ffffff;
//gray for presents-text
$neutral-gray: #A19E9F;

Last from our color variables is the background-color which will be applied to the body.

  //body backgorund
$background-color: #D3DBF2;

Next, we have the font variables. Since we walked through the color variables, I won’t go into too much detail with our font variables. The same concept applies, we assign a primary and secondary font, different font weights/thickness, different font-sizes (including for when we make this mobile responsive), and $uppercase-transform which will be used to our title all uppercase letters.

  //fonts
$primary-font: "Ubuntu";
$secondary-font: "Open Sans Condensed";
$large-font-size: 48px;
$small-font-size: 16px;
$mobile-large-font-size: 24px;
$mobile-small-font-size: 8px;
$mobile-extra-small-font-size: 6px;
$thick-font-weight: 700;
$medium-font-weight: 300;
$uppercase-transform: uppercase;

The next variable section I like to use is for shapes. In this case, we will only use a triangle value that will be applied to clip-path, which essentially transforms a square into polygon. The polygon value for our triangle can be found using a nice tool called Clippy.

Here’s a video showing how to get the polygon value for a right triangle we need:

  polygon(100% 0, 0% 100%, 100% 100%);

Now that we have our variables set, let’s begin to style!

Styling

Background The first piece of styling is a simple setting our height to 100% and adding the background color with our $background-color variable.

  html,body{
  height: 100%;
  background: $background-color;
}

Webpage Now, I personally decided to showcase my landing page header as a card, similar to as you would see on Dribbble.

Therefore, we are going to create and center our webpage which will be the rectangular box that will serve as our landing page header container.

  .webpage{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 3%;
  width: 600px;
  height: 420px;
  //rest of code will be here
}

We set the position to relative and use margin:auto and display:block which will center the box. We add a width of 600px and a height of 420px. We also add a margin of 3% from the top.

Now the fun part! We are going to add a linear-gradient and an image from Pexels to be the background. This will give us a black background which has a light enough opacity to see the underlying image which makes for very cool effect.

Here’s the code:

  .webpage{
  //code from previous
  background: linear-gradient(
      $primary
    ),  url("https://images.pexels.com/photos/70232/pexels-photo-70232.jpeg?h=350&auto=compress");
  z-index: 1;
  -webkit-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
}

In order to create a linear gradient with an image, we use the following syntax:

  background: linear-gradient(rgba value1, rgba value2),
            url("[image_address]");

As we went over earlier, we already stored two rgba values with an opacity of 0.85 and 0.95, respectively, into out $primary variable. Therefore, we just do:

  background: linear-gradient(
      $primary
    ),  url("https://images.pexels.com/photos/70232/pexels-photo-70232.jpeg?h=350&auto=compress");

If this was not already obvious, we can grab an image address from Pexels, a site for stock photos, as so:

Now for the rest of the webpage styling, we will just add a z-index: 1, indicating that this is our bottom layer.

  z-index: 1;

Additionally, we add some box-shadow values which I generated using this Box Shadow Generator.

  -webkit-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);

In total, you should have this:

  .webpage{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 3%;
  width: 600px;
  height: 420px;
  background: linear-gradient(
      $primary
    ),  url("https://images.pexels.com/photos/70232/pexels-photo-70232.jpeg?h=350&auto=compress");
  z-index: 1;
  -webkit-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.75);
}

The result should look like this:

Before I move on, I do want to point out that our background image does not cover the full box. Normally, we would add the following to resolve this:

  background-size: cover;

However, since we are going to be adding the white triangle on that side of the screen, it will actually look better in the end to leave it as it is.

Right Triangle Next, we are going to add our white right triangle that will have a linear-gradient background with an underlying image from Pexels, just like in the previous step.

  .right-triangle{
  //more code here
  background: linear-gradient(
      $neutral-white-background
    ),  url("https://images.pexels.com/photos/114907/pexels-photo-114907.jpeg?h=350&auto=compress");
  //more code here
}

The difference with our triangle is that the right-triangle div is nested under our webpage div. Because of this, we are going to use position: absolute and position the triangle in the bottom right corner like so:

  position: absolute;
bottom: 0%;
right: 0%;

We want the top point of the triangle to be at the top of the box, and we want the left point of the triangle to be at 50% of the box. Therefore we add the following width and height:

  height: 100%;
width: 50%;

At this point, we would have a rectangle and not a triangle, that is because we need to add what I like to call the “transformer” (clever, I know). What I mean by “transformer” is that we need to add something that will transform the rectangle into a right triangle.

This is where we add a clip-path value using the $triangle variable we created using the Clippy tool we used earlier.

  -webkit-clip-path: $triangle;
clip-path: $triangle;

At this point our code should look like this:

  .right-triangle{
  position: absolute;
  bottom: 0%;
  right: 0%;
  height: 100%;
  width: 50%;
  background: linear-gradient(
      $neutral-white-background
    ),  url("https://images.pexels.com/photos/114907/pexels-photo-114907.jpeg?h=350&auto=compress");
  -webkit-clip-path: $triangle;
clip-path: $triangle;

}

We should not have the entire background of our landing page header constructed.

Branding

Now the downhill descent begins!

For our branding, we are going to add two square, one red and one white. Both of these will be shapes made from our CSS and not images.

We will have the red square with a solid red background, and the white square will have no background, but a solid white border.

  .red-brand-box{
  position: absolute;
  width: 8%;
  height: 10%;
  top: 10%;
  left: 10%;
  background: $accent;
  z-index: 2; 
}
.white-brand-box{
  position: absolute;
  width: 80%;
  height: 80%;
  top: 15%;
  left: 15%;
  border: solid 6px $neutral-white;
  z-index: 3;
}

The red-brand-box div is nested under webpage. Therefore, our position, width, and height values are going to be based on webpage.

We want it to be positioned based on a percentage so we position: absolute.

  .red-brand-box{
  position: absolute;
  //more code here
}

We also add a height and width, which I usually do trial-and-error, until we get an appropriately sized square.

  width: 8%;
height: 10%;

We want to box to appear slightly to the left and bottom of the background box, so we add a top and left of 10%.

  top: 10%;
left: 10%;

The red branding box is going to be solid red, which is the value of our $accent variable we defined earlier. So, we simply add a background with the value of $accent.

  background: $accent;
z-index: 2;

The z-index, again, is one above our webpage (z-index: 1) since it is a layer just above webpage.

By the end, we should have the following:

  .red-brand-box{
  position: absolute;
  width: 8%;
  height: 10%;
  top: 10%;
  left: 10%;
  background: $accent;
  z-index: 2; 
}

For our white-branding-box, the code will be nearly identical.

The main difference is going to be that our width and height is based off of red-brand-box and not webpage. We are also going to have a border and not a background.

Since the border will add to the size of the square, we can give it a height and width of 80% of the red box.

  .white-brand-box{
  position: absolute;
  width: 80%;
  height: 80%;
  //more code here
}

We want the location of this white box to be just below and to the right of the red box, so we place it 15% below the red box and 15% to the right like so:

  top: 15%;
left: 15%;

Next, we add our border, which will be solid, 6px in thickness, and white ($neutral-white).

  border: solid 6px $neutral-white;
z-index: 3;

Again, we add z-index: 3 to specify the layer of the white box which will be above both the background and red box.

In the end, we should have the following:

  .white-brand-box{
  position: absolute;
  width: 80%;
  height: 80%;
  top: 15%;
  left: 15%;
  border: solid 6px $neutral-white;
  z-index: 3;
}

We both boxes, we should now see:

Text Our second to last step is adding our small text and large text, that is, our presents-text and our title.

  .presents-text{
  position: absolute;
  top: 25%;
  left: 10%;
  font-family: $secondary-font;
  color: $neutral-gray;
  font-size: $small-font-size;
  font-weight: $medium-font-weight;
}
.title{
  position: absolute;
  top: 25%;
  left: 10%;
  font-family: $primary-font;
  font-size: $large-font-size;
  font-weight: $thick-font-weight;
  color: $neutral-white;
  text-transform: $uppercase-transform;
}

The parent div for both of them is webpage. Therefore, we position it absolutely and give a specific location from the top and from the left. For both, adding a top of 25% and left of 10% gives us the look we want.

  .presents-text{
  position: absolute;
  top: 25%;
  left: 10%;
  //more code here
}
.title{
  position: absolute;
  top: 25%;
  left: 10%;
  //more code here
}

The next piece to add to both of these classes is the according font variables we assigned early.

Let’s start with presents-text.

    color: $neutral-gray;
  font-family: $secondary-font;
  font-size: $small-font-size;
  font-weight: $medium-font-weight;

In this code, we assign it a gray color, the secondary font (Open Sans Condensed), a small font size (16px), and a medium weight (300).

We do the same thing with title and adjust the variable accordingly.

    font-family: $primary-font;
  font-size: $large-font-size;
  font-weight: $thick-font-weight;
  color: $neutral-white;
  text-transform: $uppercase-transform;

The only piece added for title that differs from presents-text is adding our $upper-transform variable to text-transform, which will make all the letters uppercase regardless of the text is inputted in your HTML.

By the end we should have the following code:

  .presents-text{
  position: absolute;
  top: 25%;
  left: 10%;
  color: $neutral-gray;
  font-family: $secondary-font;
  font-size: $small-font-size;
  font-weight: $medium-font-weight;
}
.title{
  position: absolute;
  top: 25%;
  left: 10%;
  font-family: $primary-font;
  font-size: $large-font-size;
  font-weight: $thick-font-weight;
  color: $neutral-white;
  text-transform: $uppercase-transform;
}

This result in the following:

Call to Action Button

The final step is here!

  .cta-button{
  position: absolute;
  width: 25%;
  height: 10%;
  bottom: 25%;
  left: 10%;
  background: $accent;
  border: none;
  padding: 10;
  font-family: $primary-font;
  font-size: $small-font-size;
  font-weight: $thick-font-weight;
  color: $neutral-white;
  text-transform: $uppercase-transform;
}

All we have to do is style a rectangular button. We want it the same color as the red box and have it placed slightly below the title.

  .cta-button{
  position: absolute;
  width: 25%;
  height: 10%;
  bottom: 25%;
  left: 10%;
  background: $accent;
  border: none;
  //more code here
}

This should now make sense, but to recap.

  1. We give position: absolute since we want the location and size it based on percentage according to the parent div, webpage.

  2. We give it a width of 25% and height of 10% by guesstimation, or trial-and-error until we get the size and shape we want.

  3. We position it 25% above the bottom of the background box, and 10% from the left of the background box.

  4. We add background to our red accent color stored in $accent.

  5. We add border: none since we don’t want a border.

To give us some space with the text, we add some padding:

  padding: 10;

Since this button has text, we will do the same thing we did in our previous section, add font variables to our styling.

  font-family: $primary-font;
font-size: $small-font-size;
font-weight: $thick-font-weight;
color: $neutral-white;
text-transform: $uppercase-transform;

This should be straight-forward, but again the code above accomplishes the following:

  1. Adds font of value of $primary-font

  2. Adds small font-size

  3. Adds thick font-weight of 700

  4. Makes color white ($neutral-white)

  5. Transforms letters to uppercase ($uppercase-transform)

Our button should now have the following code:

  .cta-button{
  position: absolute;
  width: 25%;
  height: 10%;
  bottom: 25%;
  left: 10%;
  background: $accent;
  border: none;
  padding: 10;
  font-family: $primary-font;
  font-size: $small-font-size;
  font-weight: $thick-font-weight;
  color: $neutral-white;
  text-transform: $uppercase-transform;
}

Our landing page header is now complete with the cool effects of our gradient background and gradient right triangle with an underlying image for both.

Mobile Responsive

This step is optional, but I included a simple media query to adjust the styles for screens smaller than our box.

  //mobile responsive
@media all and (max-width: 600px) {
  .webpage{
    width: 300px;
    height: 200px;
  }
  .white-brand-box{
  border: solid 3px $neutral-white;
}
  .presents-text{
    font-size: $mobile-small-font-size;
  }
  .title{
    font-size: $mobile-large-font-size;
  }
  .cta-button{
    font-size: $mobile-extra-small-font-size;
  }

}

The only thing we include is what will differ on mobile.

For our webpage, we change the width to 300px and the height to 200px.

  .webpage{
    width: 300px;
    height: 200px;
  }

We then change the thickness of the white box.

  .white-brand-box{
  border: solid 3px $neutral-white;
}

Lastly, we can set our text to appropriate mobile size variables we defined earlier.

  .presents-text{
    font-size: $mobile-small-font-size;
 }
.title{
    font-size: $mobile-large-font-size;
 }
.cta-button{
    font-size: $mobile-extra-small-font-size;
 }

Additional Practice

You should now have a nice template to make similar landing page headers.

I went ahead and created a Codepen collection of similar landing page headers I made.

Modern Landing Page UI Cards Collection

You can practice by either trying to replicate mine without looking or by using my collection as inspiration to create your own!

Help Spread The Information

Writing up a post like this can be time-consuming, but I really hope it is beneficial to those learning front-end development.

If you found this article to be helpful, please hit the heart and share with someone who could benefit from this.

Additionally, you can sign up for my email list to get notifications of future posts.

Cheers! Mike Mangialardi


1,841 3 46