Hello nielzon-t,
Congrats on completing the QR- code challenge 👏
To properly center the outer and inner box on the page , you may do the following changes:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.outerbox {
width: 85%;
background-color: hsl(212, 45%, 89%);
/* margin: auto; */
display: flex;
/* min-width: 300px; */
/* margin-top: 1.5em; */
box-shadow: -5px 10px 10px hsl(220, 15%, 55%);
/* height: 90vh; */
/* min-height: 400px; */
justify-content: center;
padding: 6rem 0;
}
.innerbox {
/* max-width: 30%; */
/* min-width: 275px; */
height: 50vh;
/* min-height: 400px; */
background-color: white;
display: flex;
justify-content: center;
flex-direction: column;
/* margin: auto; */
border-radius: 10px;
box-shadow: -0.5px 1px 3px hsl(220, 15%, 55%);
align-content: center;
align-items: center;
width: 340px;
}
img {
width: 300px;
/* height: 200px; */
/* display: flex; */
/* justify-content: center; */
/* margin: auto; */
border-radius: 10px;
margin-top: 10px;
}
I have added some code to center the elements on the page. I have commented /**/ some of them as they do not seem to be necessary. However you will have to adjust the code as needed to get close to the design.
You should also specify a unit ex: 16px
html { font-size: 16; }
If I may suggest some other improvements :
1. Semantic structure / Using Semantic HTML5
Using the semantic HTML5 in your structure. To improve the document structure and in return improve its accessibility, consider using <header>, <main>, <article>, and <footer> elements where applicable. You may use semantic HTML, instead of <div>. some examples of semantic HTML : <main> , <section> , <header>,<nav>, <footer>
3. Headings
It is also important to always have an h1 heading in a document before any other level headings tag. Use a <h1> tag for title to provide a descriptive title.
Helpful links:
Read more about accessibility here
Read more about semantics here
Using CSS variables
For example, using the style guide provided, you may create your CSS colors variables as follow :
root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
}
Helpful links:
Read more about CSS custom properties here
Read more about CSS Flexbox :
I hope these will be helpful to you 😉
Good luck going forward and happy coding 🙂
Marked as helpful
@nielzon-t
Posted
@NandiniCooppen, thank you SOOOO much for the time you’ve taken to write this wonderful reply!
Is there a way I can get back to you? I’d like to know the rationale behind some of the codes you’ve written…
Again, many thanks! Blessings.
