Landing-page project with complete responsiveness for desktop, tablets and phone size

Code Feedback
1

Hi good folks.

I have also done the landing-page now, I have used vanilla CSS though out the hall project except the nav in the header area where choose intentionally to use bootstrap just to give the project a little bit variety. I have seen some projects online and got my inspiration.

hope you guys like it and I’m more than glad for feedbacks whether they are positive or negative.

best regards.
Omar.

link to the codepen.io

3 Likes
2

@omar-hama-33, I looked at it on my cellphone and it looks good. I like the animation for the brand. One thing I noticed is that the placeholder text in the contact form doesn’t have much contrast with the background and may not be readable for some users.

1 Like
3

I have notice that one two, gonna fiks the placeholder color. Good observation Peter🙂

So your overall personally impression is good?

1 Like
4

@omar-hama-33, yeah I like it so far. I took a look at it on my PC and noticed a few things that I would recommend to change:

  • Darken the hero image
  • Capitalization needs to be consistent (e.g. change pricing to Pricing)
  • ‘Contact us for further help’ is hard to read with the background image
1 Like
5

I’m impressed. Its beautiful.

1 Like
6

I have now removed the opacity from the hero image and added some opacity to the side image for the contact form so the description is better readable.

I’m going to give you a headache :slight_smile: could you please take a look at it and tell me if you think that we have to change something else? :slight_smile:

7

thanks a lot Oraclle :slight_smile:

8

I have just updated the pen and forked it so maybe the original pen doesn’t work. here is the link for the pen anyway :slight_smile:

Omar.

9

Alright, will check it out. :wave:

10

I like it a lot. It looks pretty profession. I really like the menu. Is that a bootstrap feature? Did you create your own video?

I believe you went to school for this kind of work.

1 Like
11

I suggest replacing the background-image with background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(https://i.postimg.cc/xT87bVc6/landing.jpg);.

1 Like
12

Thank you @helen1 the navbar is actually bootstrap, the rest is pure CSS. and Helen, no I started just like everyone else here, online documentation and video tutorials… you will also get there very soon :slight_smile:

13

@peterharmazinskiI like your suggestions, I will actually do it right now, been working on the technical documentation page, that’s why I’m answering a little late :slight_smile:

Peter, have you landed a job yet, i resume that you have done all this projects :slight_smile: