QR code page using html and css

Hey Idev congrats on finishing the challenge!

There are some little problems with your App, you are trying to position every element of the layout using position: absolute and position:relative, you should never do that in general and just use it some rare cases!, have you tried using flexbox to position your elements? in this case for example you could do something like this:

• First of all, remove all of your position statements from all the elements, you want to avoid as much as possible using position.

• Now that we have everything reset lets go with the flex!

• Use flex on the body to position your component in the middle of the screen like this:

body {
  margin: 0;
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

With this code we got the body to size the whole screen (100vh means full screen of your webpage), we called flex and used align items and justify content to get the child centered (in this case the child of body is the whole component).

• Ok now we have our component on the middle of the screen, lets position all the elements in the outer-frame div, lets use flex again then!

#outer-frame {
  background-color: hsl(0, 0%, 100%);
  width: 320px;
  height: 500px;
  border-radius: 20px;
  box-shadow: 0px 10px 60px hsl(211, 20%, 79%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

With this we did the same as before, since you have some margins and paddings, using justify-content: center will get all the childs together but will be separated by the margins and paddings that you previously defined!.

Want to learn more about how awesome is flex-box? Play flex-box-froggy When you are done with it, maybe you find more complex layout that can be done with flexbox, go ahead and try CSS grid, you can practice it with grid-garden

Hi! Your page probably isn't showing up because your main html have to be named as "index.html" and not "index1.html"

👾Hello @IDev11, congratulations for your new solution!

Your page is not displaying the correct page, you need to change the settings for Github Pages. I can see that you're having some issues to setup the Github Pages. In my first days I tried to use Github Pages too but was too hard to setup, doesn't helps if you're a beginner like us.

My advice for you is to use vercel.com or netlify.com that are really easier platforms for live sets and totally user-friendly, in a matter of 5min your live site is online. All you need to do is to connect the Github account, import the repository and deploy it. Really fast.

The easy one is Vercel and is the one I use for my solution.

👨‍💻 Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.

👋 I hope this helps you and happy coding!