PLEASE help me with this CHALLENGE!

HTML-CSS
#1

Please help me find what i can do to turn the ul element from this website( https://codepen.io/pen/?editors=1100 ) to this website( https://codepen.io/freeCodeCamp/full/RKRbwL ) using media queries :slight_smile:

Please DONT help me make the whole website responsive, just help me with the ul(unordored list) element in css!
Thank you very much!

#2

Some things;

  1. This link https://codepen.io/pen/?editors=1100 does not go anywhere. If it were a link to a pen you’re working on your userid would be in the URL.
  2. Maybe when you supply the code it will be obvious but for now there are two ul elements in the FCC sample you link.
  3. If you’re working on the projects you shouldn’t try and replicate them. The instructions say to make yours “functionally similar” and to “give it your own personal style”.
#3

Hi Roma, here is the link: https://codepen.io/HELLOGUYSANDWELCOME/pen/zYNzNZY

and i want the ul to look like this and be responsive like this: https://codepen.io/freeCodeCamp/full/RKRbwL

#4

About the style thing, I think it would be better for me to replicate the project like they coded it. I think if i replicate it then it would make it a challenge for me. If i give it my own personal style, then it wont be that challenging for me to code it.

#5

So to get the nav to be beside the logo, the sample page made the parent container of the two a flexbox container, then justified the two items using justify-content: space-around. The parent flexbox also has the position:fixed property to make sure it is always on the screen.
After a quick look at the relevant part in your code, I’ve found that you did not close the img-div, also you included the email submission form in the header. So if you use the same flexbox idea, your header would be the logo, the nav, and the email submission form side by side.

While complete replication may be technically challenging, building a website from your own inspirations shows creativity and ability to actually make something from nothing but a few simple requirements. This is often much more important to employers and clients. Moreover showcasing a clone on your personal portfolio leaves people questioning whether or not you’ve simply copy/pasted the entire project to pass the test.

#6

Thank you! I have found another way to solve that problem myself. I will make my own after i learn web development and i wont replicate other websites but rather design my own. Thank you very much for telling me :slight_smile: