Skip to content
OverviewSolutions
22
Comments
7
omar saleh
@omarsaleh11

All comments

  • omar saleh•150
    @omarsaleh11Posted about 2 years ago

    congratulation on your attempt it's a really nice one, my advice is to use variables to change from light mode to dark mode,

    if you don't know how,

    try to look at this solution

    I hope that will help you, happy coding

    Marked as helpful
    0
  • omar saleh•150
    @omarsaleh11Submitted about 2 years ago

    this is the first time I do a challenge with HTML, CSS, and JS. and I put my first logo model

    I think nothing complicated in this challenge but I think I wrote a lot of not necessary code.

    and I may need help in the side of the animation, I think the animations are not good enough

    I make a job for the Learn More button I hope u like it

    3-column preview card component

    1
    omar saleh•150
    @omarsaleh11Posted about 2 years ago

    I added EventListener that when u click on the background it will remove any button action u click ( like the Learn More button or Logo Button )

    0
  • blahblah•240
    @blahkingSubmitted about 2 years ago

    It always takes me some time to choose a proper font-size, especially when I use rem to set element's width. I write css according to "mobile first". I want just to rewrite the html's font-size to change others width. It looks fine on the phone, however it looks not perfect on the desktop. So that I have to rewrite margin or padding on the desktop. Can you give me some tips to choose font-size between different devices? Thanks very much!

    practice 10

    2
    omar saleh•150
    @omarsaleh11Posted about 2 years ago

    I use the sass function to divide the px /16 so it returns as rem like that : rem(1200) == 31.25rem I write the first syntax and its returns to my CSS file as the second syntax, happy coding

    0
  • omar saleh•150
    @omarsaleh11Posted about 2 years ago

    I have done the same challenge a moment ago, nice job @blahking

    just some changes are needed as the background put the same as the design, and try to put max-width to the paragraphs = 21.5ch.

    I think those will help u enough happy coding

    1
  • Ebere Ndukwu•180
    @eby-coderSubmitted about 2 years ago

    I hope you like my solution. Is there a more effective way of setting different images for different displays and how do I use the picture element? Also, please what is linear gradient is and how do I set it for image overlay?

    Stats Preview Card with CSS Flex

    2
    omar saleh•150
    @omarsaleh11Posted about 2 years ago

    **congratulation on finishing this challenge **

    and look at this site if u wanna know about [picture tag] (https://www.w3schools.com/tags/tag_picture.asp)

    if u wanna make the img like the design make the background the color that u want then

    img {
   opacity: 0.75;
   mix-blend-mode: multiply;
}

    and this site can help with making [linaer gradient colors] (https://cssgradient.io/)

    Marked as helpful
    0
  • omar saleh•150
    @omarsaleh11Posted about 2 years ago

    I think I made it

    0
  • Taro Chilongoshi•40
    @TchiloSubmitted about 2 years ago

    Putting the cards in the center was a challenge for some reason I don't know the margin: 0 auto did not work.

    I am not sure why the vertical space between the two cards in the center has that big space as compared to the original design. Any pointers will highly be appreciated.

    Enjoyed solving the challenge with tailwind I have learned a lot....any feedback as to how I can improve my work will highly be appreciated..... Many thanks

    four-card-feature-section

    1
    omar saleh•150
    @omarsaleh11Posted about 2 years ago

    you did a nice job, bro!

    but I think if you delete this line, will reduce the margin between them

    .lg:grid-rows-5 { grid-template-rows: repeat(5,minmax(0,125px));

    and make the p element on the header in CSS like that p { max-width: 34ch; margin-inline: auto; } that will make the words on the header the same as the design and change the color too

    0