Skip to content
OverviewSolutions
10
Comments
6
Agelita eMe
@agelitaeme

All comments

  • michaelbulaongdev•170
    @michaelbulaongdevSubmitted about 2 years ago

    i tried not to use bootstrap for the responsive columns to test my knowledge on the use of css grid and @media rule.

    had a hard time manipulating the image to show color accent overlay. i wish i could make the image a bit darker/crisper.

    css grid, image color overlay via position, @media

    1
    Agelita eMe•170
    @agelitaemePosted about 2 years ago

    Hi, @michaelbulaongmusic!

    • In response to your question, you can intensify the color of the image by using:
    background-image: url(./images/image-header-desktop.jpg), hsl(277, 64%, 61%);
background-size: cover;
background-blend-mode: multiply;
    • And I recommend you to center the card with flexbox:
    body {
display: flex;
justify-content: center;
align-item: center;
}

    Good job! Keep it up!

    Marked as helpful
    0
  • Matias gh•40
    @GatiMhersiSubmitted about 2 years ago

    ¿Hay alguna forma de situar la tarjeta en el medio de la pantalla? sin importar el tamaño de dispositivo con el que se este visualizando la pagina web

    Creacion de Tarjeta de NFT

    2
    Agelita eMe•170
    @agelitaemePosted about 2 years ago

    Buenas, Matías!!

    Para centrar tu tarjeta puedes usar flexbox: body {display: flex; justify-content: center; align-item: center}

    Espero haberte servido de ayuda! Ánimo!

    Marked as helpful
    0
  • Agelita eMe•170
    @agelitaemePosted about 2 years ago

    Hi, @sohailebada!

    Good job! But, maybe you could:

    • Center your card by using flexbox (in your body)
    • Use max-width to make your card responsive without having to add a media querie
    • Write down `border-radius: 20px´ to round all the corners of your card with just one line of code

    I hope it helps. Keep it up!

    0
  • Agelita eMe•170
    @agelitaemePosted about 2 years ago

    Hi, @ankit55555!

    Congratulations. You have finished your first challenge. But, from now on I recommend you to take a look at other users' solutions. But doing so you are going to find out that:

    • Maybe, you could separate your html from your css code, by using different documents.
    • How useful it can be flexbox or grid.
    • There are a lot of Youtube tutorials that may help you. Two of my favorite channels are FreeCodeCamp and Kevin Powell.
    • In certain ocassions, if you make your solutions responsive enough, you are not going to need to use any media queries (max-width).

    Good start, keep it up!

    0
  • polukarp•190
    @polukarpSubmitted about 2 years ago

    I couldn't figure out how to put the purple filter on the picture properly, so I left it black&white. What do you think of my solution. I would really like to hear some critic from you guys.

    Responsive Component Using Flexbox

    2
    Agelita eMe•170
    @agelitaemePosted about 2 years ago

    Hi, @polukarp

    Congratulations! You have done a really good job, although there are a few things that you may want to improve, as for example:

    • The "purple filter effect", as you have called it, which is easier than you may think. You'll have it just by writing down the following lines of code: background: url(./images/image-header-desktop.jpg), hsl(277, 64%, 61%); background-size: cover; background-blend-mode: multiply
    • Remember that the desktop design was made to a 1440 pixels width. So you may want to change the dimensions of your card.
    • If you want to take a look to another solution, here you have mine

    Keep it up!

    Marked as helpful
    0
  • Agelita eMe•170
    @agelitaemePosted about 2 years ago

    Hi!

    Here you have some tutorials that may help you:

    Have a nice day!

    0