1. In the container of “Main Section” we will put a height of 50vh: With this, we are creating a basic height container that is 50% visible from the user perspective, that’s what vh means, viewer height.

2. On that “Main Container” we will add some top padding (50 pixels) so the heading is not so next to the top: Adding padding is a good way to move content inside a container/div. You can also alter the margin of the component you want to move but I rather this approach.

3. Now in “Testimonials Section” we will name the columns container “Testimonial Columns” and add a height of 40vh to each column and the Section: With this height we will see how well integrates with the navbar and the main section so when the user lands to the website, what will see is only this 3 parts perfectly align.

4. Let’s add some content inside those columns: First, you need to add an image, heading and a text block inside each column, then click on the column and change the display from display:block to display:flex and then change the align. We will add some more style in the next part when we get all together but it’s starting to make some sense the layout.

5. Add some padding to the “Slider Section”: Right now the website looks a little cramp so let’s add a 60pixels of padding top and bottom so we can get a better look at the slider in the middle.

6. The “Contact Us Section”: This is the main event, the main part of the layout, at least for me it is, it’s the contact part and the way of the sales funnel beggings! So we are making it look right. Add some padding (30pixels top and bottom).

7. Add a “Message” label and input: We will add on the form container a new label called “Message” and below that a textarea that will act as a “Add your message” or something like that.

8. The “Contact Us Section” looks a little empty, so let’s add a heading and name it “Contact”: After adding it we will make the text go to the middle using the center text button in the styles part. It’s good to have some heading according to each section, at least on the contact part of the website.

Source link https://blog..io/how-to-make-a---on--part-2-df467813418?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here