Greetings Olusegun
- the hamburger has to be an button element, use the anchor element for navigating to other pages or sections of the page. Click events are associated with buttons as in this case - this is for hiding and showing the nav items.
- I see you pipe symbol
|
between your classes in your html , eg<div class="pst-abs | center-div ">
, is that for styling purposes. That's something new to me. - use css to transform text to uppercase, eg the h1 has the following text
WE ARE CREATIVES
. I have heard that text written in uppercase can be read letter by letter by some screen readers. - for displaying different images between screen sizes, eg the following
<div class="img-trans">
<img class="img-mobile" src="./images/mobile/image-transform.jpg" alt="transform-image">
<img class="img-desktop" src="./images/desktop/image-transform.jpg" alt="transform-image">
</div>
Look into responsive images methods such as the picture element and the srcset.
- generally , do not set the width of the body - the only thing you can set is the
min-height: 100vh
. Some devices are smaller than 375px, the site cannot be viewed properly below the 375px mark.
Happy coding
Marked as helpful
@elaineleung
Posted
@ChamuMutezva Hi Chamu, the pipe symbol is something I've seen Kevin Powell use in his tutorials where he's employing CUBE CSS, and he's using the symbol to separate different groups of classes. Kevin mentioned that it's a technique he picked up from Andy Bell I believe, except Andy uses square brackets.
Marked as helpful