Paper Flowers Landing Page

Hello Everyone,

I hope everyone is keeping safe and healthy.
I would really like some feedback on this project please.

https://codepen.io/Olittlun/pen/WNQXYYG?editors=1100

Thank You :smile:

It’s a really nice design! But the navbar content is off-center compared to the main page and it trips my OCD :sweat_smile:

:joy:Sorry about the OCD. Thank you. I’m still fairly new to this so a long way to go yet.

@Olittlun Nice color combination!

  1. The background image is blurry. I recommend a higher resolution image. You can shrink the image size down on the tinypng website.
  2. The video should be bigger.
  3. Your links are not working.
    The three flower image tiles look fabulous!

Hey, very nice idea.
You could add some so called white space to each of the sections. You can set the min-height of each section to 80vh for example and then make some padding at the bottom and at the top of it.
Now they are too close on to another.

Hi there,

Thank you. I think the links are working but there’s not enough spacing between the tutorial and services on a full page. As @maknetaRo has said below I have changed the height but I am problems with the responsive when I go below 600px.
I’ve tried a number of ways but nothing is working.

Help please!! :confused:

Hi,

Thank you for the suggestion. I have changed but I am having responsive issues below 600px as I have said to @brandon_wallace.

:confused:More help needed please.

Sorry @brandon_wallace, also, I changed the size of my background image on tinypng. So easy but as I can only download it how do I put it in codepen.

I don’t understand why you have something like this:

<div class="services">
      <section id="services">

You created a box in a box. And inside you have small boxes. If you want to give id and class to the same part of you website, you don’t need to create two boxes.
Think about website like about a textbook.
A textbook is divided into chapters. And your website should be divided into sections.
Each chapter of a textbook can be divided into subchapters and we call them articles or use simply divs.
Each subchapter in a book is usually divided into paragraphs. You can each article or div divide into smaller divs and paragraphs.

So you can write:

<section class="services" id="services">

</section>
1 Like

I mean you can write

<section class="services" id="services">
<div class="grid">
......

</section>

And then style your section with min-height: 80vh (for example).
If you give min-width it will look decent on all devices and you will be able to add additional padding on the top and the bottom to make more space.

And somewhere in your code you gave all sections other then showcase the width of 1000px

@Olittlun Hi! Here are some suggestions.

  • When you go below 600px width you just need to decrease the margin and padding. The text in the .services div is getting squashed.
  • You can upload your images to postimage . org. Then you add the link to your project.
  • Remove max-width from the .container. The div is not centered on wide screens.
    Nice project.

@brandon_wallace @maknetaRo

I know it’s been a while but I have tweaked it all and hope it is much better.

it will not work becauase some browers don’t support it