Restaurant Landing Page - Looking for feedback's

Code Feedback
21

Like a pro! :muscle: :smirk_cat:

1 Like
22

@Marcella I’m not a pro :sweat_smile: anyways thank you :grin:

23

Hey @iamjoydey!

Dude…

This project in my opinion is one of the best ones that I have ever seen here.

Congrats for the awesome job! :facepunch: :facepunch:

Looking at your code I have some comments:

  1. About the FCC CDN link, you can put it in other place:

    image
    image748×581 18.2 KB

  2. There are a missing vertical bar on your showcase in the responsive layout, I solved it using this code :sweat_smile: :

  #showcase div div:nth-child(3){
      border-right: 1px solid rgba(255, 255, 255, 0.349);
  }

//on your:

@media (max-width: 767px) {}
  1. In my opinion, the video on a full screen resolution occupy a lot of space on the screen, I would put something like this on your code:
#video{
/*360p 16:9 resolution*/
  max-width: 640px;
  max-height: 360px;
  margin-left: auto;
  margin-right: auto;
}

But just small things dude, great job and keep going! :facepunch: :facepunch:

1 Like
24

@julio-pinheiroo thanks a lot mate! I’m not used to codepen, thanks for letting me know about the option to put it into head section of html :grin: and regarding the vertical bar on the showcase section on the last item I purposely removed it as it seemed to me that it was not looking good :sweat_smile:, again thanks for the video fix :pray::innocent:

1 Like
25

Amazinng design. You seem to be very knowledgeble about CSS. Good work!

1 Like
26

Just a note @julio-pinheiroo and @iamjoydey . The FCC CDN link is JavaScript and will not work if it’s in the head element. It will with codepen because codepen is forgiving.

The problem will be if you export the pen and then try and use it elsewhere. Since the script is in the head element it wouldn’t work.

If you want to add it somewhere else in codepen it belongs in the JS section of the pen setting as shown below.

Screen Shot 2020-10-23 at 19.59.57
Screen Shot 2020-10-23 at 19.59.57696×469 41.1 KB

2 Likes
27

@Roma hey thanks for letting me know about this but when I added the script url in the js section the script wasn’t working :frowning:

28

@iamjoydey,

  1. did you add it in the box as shown?
  2. did you remove the script tags as shown?
  3. did you remove the quotes as shown?
  4. did you refresh the browser page/tab?

When you say “the script wasn’t working” what does that mean? Please expand.

1 Like
29

a. I removed the script tag from the html section in codepen
b. I grabbed the script source and pasted it in the js section
c. I saved the pen and codepen reloaded the pen but after reloading the Hamburger menu disappeared from the page

30

Can you attach a screenshot of that pen settings please.

1 Like
31

@Roma nvm I fixed the issue. I had a typo in the link

1 Like
32

Good to hear. Typo’s are the bane of coder’s

1 Like
33

Hi! I like your landing page! It’s awesome! I changed the animation on the food cards. like this.

#menu .card img {
    transition: transform .6s ease-in-out;
}

#menu .card:hover img {
    transform: scale(1.3) rotate(15deg);
}

That way, the transition do an effect forward-backwards. I did the same on services. It’s only a suggestion.

#services .card {
    transition: all .3s ease-in-out;
}


#services .card:hover {
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(141, 141, 141, 0.212);
    transform: scale(1.1);
    -webkit-tap-highlight-color: transparent;
}
1 Like
34

yes ; you are good but, keep going?.