@olenahelena
Submitted
Somehow when I click on question, previous item doesn't hide properly, I don't know how to fix it.
@semperprimum
@olenahelena
Submitted
Somehow when I click on question, previous item doesn't hide properly, I don't know how to fix it.
@semperprimum
Posted
Heya there 🙌
Some of the issues i noticed:
JS:
setTimeout()
functions. Why have you added them in first place? Also, if you open and then close one section, you won't be able to open the same section again without toggling one of the other sections.CSS:
body
's min-height is already at 100vh, so why don't we use 2 lines of grid to center the .container
, instead of positioning it absolutely and using translate
properties?body {
display: grid;
place-items: center;
}
rem
in CSS is recommended over absolute units like pixels
because rem
allows for scalability and responsiveness, ensuring consistent and accessible designs across different devices and font size preferences. There are lots of articles and videos on the web that explain it in depth. Check them out :)max-width
property so the card shrinks before going into a mobile version. For the mobile design, just set a margin for the component so it doesn't touch the borders of the screen and let it stretch. You can manage to get it done without using width properties.HTML:
<ul>
, <ol>
), instead of multiple sections. You may also wrap answers with a <p>
tag, instead of using a <div>
.alt
text. You should leave it empty. Go from this: <img src="..." alt="women and phone" class="desktop__image">
to this: <img src="..." alt="" class="desktop__image">
Hope that you find this helpful! Happy coding!
Marked as helpful
@Belly606
Submitted
@semperprimum
Posted
Heya there 🙌
alt="Profile picture of Victor Crest"
.background
properties instead of having two random images hanging in your HTML.
Here's how i did it:body {
background-color: hsl(185, 75%, 39%);
background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
background-position: right 42vw bottom 41vh, left 31vw top 47vh;
background-repeat: no-repeat, no-repeat;
}
In this example i used a background-color
property to set an overall color for the background.
background-image
adds two images for the background.
background-position
positions both images. I used viewport units to move it. Using viewport units in this way allows the background image to adjust based on the size of the viewport. So, if the browser window is resized or viewed on different devices with varying screen sizes, the background image will still maintain a similar position relative to the element.
background-repeat: no-repeat
means that the background image will only appear once and will not repeat horizontally or vertically.
The attribution part should be surrounded by a <footer>
element. You also can use position: fixed
on it and stick it to the bottom of the document.
To center the .card
, you could've used grid or flex instead of positioning it absolutely, here's an example of using display: grid;
:
body {
min-height: 100vh;
display: grid;
place-items: center;
}
.txt
you could've used flexbox and negative margins. Here's the video that shows how it could be done.em
and rem
. There're a lot of articles and videos on the web explaining why you shouldn't use pixels. Definitely check them out.Here's my submission for this challenge. All of the things I talked about here could be found in my code.
I hope you find this helpful 😁. Happy coding!
Marked as helpful