Mohamed Abdi-London9-Lovelace-HTML-CSS-Coursework-Week3-Cakes Co webpage - #420
Mohamed Abdi-London9-Lovelace-HTML-CSS-Coursework-Week3-Cakes Co webpage#420MohamedAbdi114 wants to merge 1 commit into
Conversation
JDysiewicz
left a comment
JDysiewicz
left a comment
There was a problem hiding this comment.
pretty solid, nice @MohamedAbdi114! Good to see you using more relative units, the HTML and CSS are organised really nicely too which makes it pretty easy to review 👍
| <section class="hero"> | ||
| <article class="article"> | ||
| <h1 class="welcome">Welcome</h1> | ||
| <p class="text_content"> | ||
| Cakes are the inseparable parts of birthdays! | ||
| Such a sweet delicacy enhances the joy of the celebration | ||
| and makes the birthday girl or boy feel extra special and loved! | ||
| Birthday cakes and the short wordings on birthday cake | ||
| go hand in hand. A lovely birthday cake message is enough to cheer someone up | ||
| and boost their mood. | ||
| </article> | ||
| <img class="hero_img" src="image/image2.png" alt="" /> | ||
| </section> |
| <img src="image/image3.png" alt="" class="thumbnail" /> | ||
| <img src="image/image4.png" alt="" class="thumbnail" /> | ||
| <img src="image/image5.png" alt="" class="thumbnail" /> | ||
| <img src="image/image6.png" alt="" class="thumbnail" /> |
There was a problem hiding this comment.
good to see you applying stuff from our talk earlier this week - as a slight note, you could rename the images to be more descriptive of what they are (e.g. cake-1.png). Something slightly bigger is that the alt text property should be completed with a brief description of the image in text, as this is what will be read out for those browsing the web via screen-reader
| width: 12rem; | ||
| height: 12rem; | ||
| background-color:lightgray; | ||
| margin-left: 1rem; |
There was a problem hiding this comment.
nice to see you using more relative units!
| @media screen and (min-width: 540px) { | ||
| .hero_img { | ||
| height: fit-content; | ||
| } | ||
| .thumbnail { | ||
| height: 18rem; | ||
| } | ||
| } |
There was a problem hiding this comment.
media queries look clean, nice
| .footer_links { | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 1.5rem; | ||
| } |
There was a problem hiding this comment.
I would move this outside the media query, that way the footer elements are nicely centered on the mobile versions too
2 participants
Volunteers: Are you marking this coursework? You can find a guide on how to mark this coursework in
HOW_TO_MARK.mdin the root of this repositoryYour Details
Homework Details
Notes
What did you find easy?
What did you find hard?
What do you still not understand?
Any other notes?
@JDysiewicz