Submitted 4 months ago

RECIPE PAGE MAIN

Vhiktry•10

@Vhiktry

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

well, I am proud of my progress so far,

I would like to be faster next time when building the landing page

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

The table was a challenge, overcame them using CSS grid at the end centering the element on the desktop page was also a challenge

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

The table and the centering

Please log in to post a comment

Community feedback

hitmorecode•7,240

@hitmorecode

Posted 4 months ago

Nice well done. To center make add these rules:

body {
    background-color: hsl(330, 100%, 98%);
    font-family: "Young Serif", serif;
    font-weight: 400;
    font-style: normal;

    /* add these rules */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
} 


/* remove everything that's commented out */

#first {
    background-color: hsl(0, 0%, 100%);
    height: auto;
    width: 500px;
    padding: 20px;
    border-radius: 20px;

    /* remove this rule */
    /*! margin: 60px 0px 60px 500px; */
}


#second {
    background-color: hsl(30, 54%, 90%);
    /* height: 150px; */
    /* width: 90%; */
    padding: 20px;
    border-radius: 20px;
}

img {
    /* height: 50%; */
    width: 100%;
    place-items: center;
    border-radius: 10px;
}

I hope you find this helpful Keep it up 👍👌

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord