[Beginner] How to create a landing page with large feature image
Tags: Programming, Web Development, Frontend, CSS, Tutorial

Step by step guide

Step 1: Quick Draft

Let have a quick draft of the image and try to figure out what we need to pay attention

sorry for bad drawing

The first thing I did is to identify the different components of this design. We have the “card” container, which should be on the lowest z-index position (let make it 1).

z-index control the order of html element on screen, it is similar to “layer” in photoshop

Inside the card, we have “header”, which contains “Nav tab” in it. The header is placed at the top of the card and should take the entire width. We also have “content” inside the card, showing the title, description and action card. While on the right-hand side, we have a circle with color, overlapping the card itself and hence should be put in z-index: 2. Similarly, the feature image is above the circle and should be put in z-index: 3. Since both elements are extended outside its parent (card), we would probably use “absolute” position on them for convenience.

Step 2: Prepare resources

With the draft and planning settled, let’s prepare the resources we need to create this UI in code. Obviously, the first thing we need is the feature image, which is the bread and butter of the entire design.

I have used photoshop to crop the image out of the original design. Since it is not a photoshop tutorial, I am not going to go into detail about how I do it. The edge is still a bit rusty (as lack of patient), but I figure it should be good enough for tutorial and practice purposes. I also upload this image to imgur for import later.

image resized for this article, not original size

Next, let figure out the font used in the design. I couldn’t find a 100% match to the font, and end up picking is “Nunito San” in google font. Although “Roboto” and “NotoSan” would be a pretty good choice as well.

Last but not least, let get the color code from the image. (You can check the color palette here: https://coolors.co/f4f9f9-d7f1eb-15c199-f84040-181a1a)

Most element is in the first two colors, the remaining colors are for the button, text or small detail.

Step 3: Setup environment

Let’s set up our environment and get ready for coding. I am using codepen, so the setup will be more codepen-oriented. First, let’s import the font from google to the project, as well as setup some color variable for use later. I have also added some basic styles for the project.

With the environment all set, let get coding.

Step 4: Create the card container and content

The first thing is to create the card container. The card is position at the center of the body, we could use percentage size to roughly mark the card first, as we likely need to adjust it later based on the image. In addition, let add the content as well as they are very straightforward.

HTML:

SCSS:

Again, I roughly layout the element with sizes subject to change later. (As you may see, the content is likely too large for the whole design). We could fine-tune the detail sizing and proportion when the picture is more clear to us. Also, you might notice the button is missing. We will add it in the last step.

Step 5: Create the circle shape and image

Next, let put the circle-shaped color and the feature image into the card. As explained, these two elements should be in absolute position, and should be allowed to “escape” outside the card to the background. The circle-shaped color is semi-transparent, as you can see the color of it changes in the edge of the card. There is also an “inner” circle with same color as the background.

Also, I figure instead of using z-index, which may cause some weird issue from my own experience, I simply make use of the default order of html. (lower code block come first in the hierarchy)

In addition, instead of making two circle shape, I just make one (the inner circle) and then give it a box-shadow with solid (well, transparent) color.

HTML:

SCSS:

Result:

The bottom part of the hand is hardcoded to make it looks like it is “cut” by the card corner, but it is not. As to limit the image to the card, we would need to use overflow: hidden on the card container, which also blocks the top part of the image. An easier way to achieve this is to prepare the image with a sharp and straight bottom, and then use bottom: 0 positioning.

Step 6: Create the header and nav-bar

Now let fill in the header and the nav-bar of the card. The header container an image, a nav-bar, and a button. We could use a flex container in the header to layout these element. Let also update the “content” element to put back the button in there.

There is an indicator for selected nav-item with black color and green dot at the tab, on user select, the tab should get changed and the style as well. We will add it as the final polish. For now, let just add one “active” class for the selected tab.

HTML (with updated action card):

SCSS:

For the “dot” of the active tab item, we use an :after element, which only apply to the tab with “.active” class.

header and nav bar

updated active card with button

Step 7: Make the tab change style on active

In order to change the tab style on select, we need to use a little bit of jquery. Basically, when a user click on the tab, we would add a class “.active” to it, and remove all other “.active” class in the rest of the tabs (if exist).

The code is very simple, after importing jquery to your project, add the following:

We add a click event to add .nav-item class, and then on click, remove all of the .active class, and add it back for the clicked one.

With this last bit of detail, our UI is completed.