Skip to content
OverviewSolutions
7
Comments
7

heffs

@heffs120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Testimonials grid with grid/flexbox

    heffs•120
    Submitted 5 months ago
    1 comment

  • Four card challenge w css grid

    heffs•120
    Submitted 5 months ago
    1 comment

  • Product preview card - flexbox

    heffs•120
    Submitted 5 months ago

    Sizing images properly in flexbox. This works, I think, I'm just not sure what I was doing wrong in previous efforts. Maybe just more experience is the answer.

    1 comment

  • Recipe page using flexbox

    heffs•120
    Submitted 5 months ago
    1 comment

  • Social links profile challenge - flexbox

    heffs•120
    Submitted 5 months ago

    I used an unordered list for the social links list, but I couldn't get the list items to center, so I added buttons. It worked, but there must be a way to center the text in a list item!

                    <ul>
                    <li><button>GitHub</button></li>
                    <li><button>Frontend Mentor</button></li>
                    <li><button>LinkedIn</button></li>
                    <li><button>Twitter</button></li>
                    <li><button>Instagram</button></li>
                </ul>

    css:

    .card li button {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    background-color: var(--grey700);
    color: var(--fgmain);
    border: none;
    transition: color 0.3s, background-color 0.3s;
}
    1 comment

  • Blog preview card w flexbox

    heffs•120
    Submitted 5 months ago

    The challenge asked to change the font sizes without using media queries. I'm not sure how to do that.

    1 comment
View more solutions

Latest comments

  • heffs•120
    @heffs

    Nice collection of challenges you've got there! 10/10 no notes.

  • heffs•120
    @heffs

    Looking good. Nice work! :)

  • heffs•120
    @heffs

    Hey, your fonts aren't loading properly! If you go to the google fonts page for your font, like for Fraunces:

    https://fonts.google.com/specimen/Fraunces

    then click on "Get font" in the top right, and then "Get embed code" it'll take you to a page with links to get the font. To import in css click on @import and you'll see the link to retrieve the font to put in your stylesheet:

    @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

  • heffs•120
    @heffs

    Looks good! Just one thing, you've got a fixed main width of 500px, but the media query threshold is 700px, so for screen widths between 500 and 700 pixels there's a lot of empty white space on the right of the page. Just change the media threshold from 700px to 500px and no more white space!

  • heffs•120
    @heffs

    Looks good to me. Great work!

  • Zdn2000•40
    @Zdn2000
    What are you most proud of, and what would you do differently next time?

    尝试了用列表，发现行不通，重新布局了一个页面，感觉还是比较还原

    What challenges did you encounter, and how did you overcome them?

    字体长度大小的背景标注，不知道怎么设置其宽度，使用width: fit-content;就可以设置跟字体宽度一样大小的盒子

    What specific areas of your project would you like help with?

    响应式布局还是有所欠缺

    博客预览卡

    1
    heffs•120
    @heffs

    Looks good! I just noticed that the background color of the "Learning" label should be the same as the page background. It also needs a bit of padding.

    Marked as helpful
View more comments