@beowulf1958
Posted
Hello, Grace ! I really like the box-shadow; I will use it in my own design! This project is well on its way; a few more lines of code will make it look like the design.
First, your h3 should be <b></b> (bold) not <em></em> (slanted, italic).
Second, your font-size is too big; the guidelines call for font-size: 15px.
Next, fix the centering: remove position: relative and add flex-direction: column; min-height: 100vh. [This allows your flex container--the body element--to use the entire vertical viewing space to aid in the centering]
To get the box in shape, remove top: 0; bottom: 0; left: 0; right: 0; margin: auto; Add width: 320px; padding 20px; Your stylesheet now looks like:
body{
background-color: rgba(49, 103, 184, 0.469);
font-size: 15px;
font-weight: 400;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
.box-shadow{
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
background-color: rgba(240, 248, 255, 0.949);
width: 320px;
padding: 20px;
}
That should get you pretty close. For extra points you could add:
h3 {
color: hsl(218, 44%, 22%);
font-size: 25px;
font-weight: 700;
}
p {
color: hsl(220, 15%, 55%);
}
Hope this helps. Keep on coding!