Skip to content
OverviewSolutions
11
Comments
4
KirthGersenClone
@KirthGersenClone

All comments

  • KirthGersenClone•160
    @KirthGersenClonePosted over 1 year ago

    Hey, I just finished this challenge too. I used a grid lay-out for both versions. Following clip from Kevin Powell helped me a lot: Grid Lay-out

    I also noticed that the background color of the right column is black instead of dark-blue.

    Marked as helpful
    0
  • KirthGersenClone•160
    @KirthGersenClonePosted over 1 year ago

    As with all my other projects, I am still struggling to get the main element in the right position on the screen. Honestly, I am getting frustrated about it. Any advice is more than welcome.

    But this challenge give me also great satisfaction and my knowledge on hsla, has improved dramaticly. The use of ::before was a lot easier since the last challenge.

    Thanks to flex zombies the use of flex also got better, but I haven't finished the game yet.

    0
  • KirthGersenClone•160
    @KirthGersenClonePosted almost 2 years ago

    Hi there,

    the first thing that come to mind are the fonts you are using in your solution. Put following lines at the very top of your css: @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap");

    Secondly check out the "Josh Comeau CSS reset" it did wonders for me.

    I am just beginning to get to know flex and grid, but when I look at your solution maybe you could put the two parts of your card as parts of a flexbox or gridbox.

    0
  • KirthGersenClone•160
    @KirthGersenClonePosted almost 2 years ago

    I am a newbie myself, but maybe I can comment on the things I've already learnt:

    To center #imagebody on the page using flexbox:

    • min-height: 100vh;
    • display: flex;
    • align-items: center;
    • justify-content: center;

    round corners

    • border-radius: 1.8rem;

    background colour of the body

    • background-color: hsl(212, 45%, 89%);
    • font-size: 15px;
    Marked as helpful
    0