Git, Gitflow, HTML/CSS, Flexbox, and Positioning

Hi @Have-Samuel 👋, good job on completing this challenge! 🎉

Here are some suggestions you might consider:

• You could use the CSS backgrounds properties to set the background:

body {
  background-color:  hsl(225deg, 100%, 94%);
  background-image: url(./images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
}

The background property is shorthand for all the properties mentioned above:

background: hsl(225deg, 100%, 94%) url(./images/pattern-background-desktop.svg) no-repeat left top/contain;

References:

• .CSS background Property
• Background property
• Background-repeat (MDN)

.

• Centering the element with position would make your element behave strangely on some mobile devices. - There are two modern CSS techniques to center elements instead of using the position property:

Using flexbox layout:

body {
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

Using grid layout:

body {
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
}

Links with more information:

• The Complete Guide to Centering in CSS.
• A Complete Guide to Flexbox (CSS-Tricks).
• How TO - Center Elements Vertically (W3Schools).
• CSS Layout - Horizontal & Vertical Align (W3Schools).

I hope those tips will help you.

Good job, and happy coding!

Firstly, your solution is very good! My only tip is to use semantic HTML. That way you won't have multiple <div> in your code. This link may help you 😎👍

• https://developer.mozilla.org/en-US/docs/Glossary/Semantics