Skip to content
OverviewSolutions
16
Comments
11
P
Aminpatra
@Aminpatra

All comments

  • Vasu Vallabh•190
    @coding-vasuSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    • Used SASS for this project & its quite intuitive, I liked it!

    • css filter property to enhance look & feel of the card.

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

    Overwhelmed with Responsiveness, Isolated & took 1 step at a time to solve it

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

    Utopia fluid responsiveness design system implementation.

    SASS, Filter

    2
    Aminpatra•260
    @AminpatraPosted about 2 months ago

    beautiful design bro. Could please tell my from where you learn this ?

    0
  • Aminpatra•260
    @AminpatraPosted about 2 months ago

    Using a lot of techs I don't know yet, looks interesting. Looking forward to learning all of these techs.

    0
  • Quang•350
    @progressive-newbie263Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    find out that i should have used margin: 0 auto earlier

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

    it took me a while to center that header

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

    .

    four card section, learning path

    1
    Aminpatra•260
    @AminpatraPosted 3 months ago

    Beautiful, Just a little tip, put a

    transition: all 0.3s ease-in-out;

    or something on the cards to make the hover effect looks smoother. Have fun.

    1
  • Aminpatra•260
    @AminpatraPosted 7 months ago

    Clean bro.

    Marked as helpful
    0
  • Nur Farah Omar•120
    @NF0marSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I have finished this second project by frontend mentor. I take some CSS lessons so that I could finish the next project in no time.

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

    The challenges that I encountered are that I have problem with layouting and styling the HTML elements, but I overcame with searching in google.

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

    Kindly check out my solution and leave a feedback🙏

    Blog-Preview-Card

    1
    Aminpatra•260
    @AminpatraPosted 8 months ago

    Your solution is very good, but you just have to add height of 100vh to the body and flex or grid to center the card. So it will be like this : body {height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center}

    Marked as helpful
    0
  • Amna Nasir•80
    @amna1526Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the CSS mainly.

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

    I didn't know how to add shadow and so I struggled with that until I figured that values are like that of text-shdow.

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

    How to add border-radius to a svg file??

    Blog-preview-card

    1
    Aminpatra•260
    @AminpatraPosted 8 months ago

    AlSalaam alaikum, So first you can add a border-radius to the svg file like any other image, there is no difference. So the solution in your situation can be like this -> .container > img {border-radius : (and the value here)} , the ">" symbol refers to the direct child or the direct image after the .container class element. Second you can center the card by just adding display grid to the body like this -> body {display : gird; place-content: center; height: 100vh}

    0
  • ivara21•120
    @ivara21Submitted 8 months ago
    What specific areas of your project would you like help with?

    tell me what you think and some advice for me to take note :) all comments will be appreciated thanks :)

    3column preview card component

    1
    Aminpatra•260
    @AminpatraPosted 8 months ago

    Liked your solution a lot , I did this same challenge from an hour ago I think and I see this better than mine . The only two things I can say is : 1- you can add the line-height: 1.5 or 1.6 to paragraphs to make space between lines like in the design , 2- try to learn grid if you don't know it. For example you can place the content in the center like this -> body {display : grid; place-content: center} , but I guess you know it because you did the solution well.

    1
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    • Creating and placing the box shadow according to the design
    • Creating an active state
    • Integrating the box-shadow into that active state
    What challenges did you encounter, and how did you overcome them?
    • Adjusting the spacing between the elements to make it look like the design file - took multiple trials and errors to do it without too many fixed values
    What specific areas of your project would you like help with?
    • Not sure how best to adjust the font for mobile view, without using media query. Tried using vw for font-size, but the result does not seem visible.

    Blog preview card using CSS Flexbox

    2
    Aminpatra•260
    @AminpatraPosted 8 months ago

    Your solution is very good in this one, but here is a tip to save time. Instead of repeating the same color percentages you can define a :root selector, and you can call its elements by typing -> color: var(--"the color name"). So the final result for this project will be like this : ''' :root { --Yellow: hsl(47, 88%, 63%); --White: hsl(0, 0%, 100%); --Grey: hsl(0, 0%, 50%); --Black: hsl(0, 0%, 7%); --font-mid: 500; --font-bold: 800; } ''' Sorry I don't know yet how to format texts in this feedback thing :)

    Marked as helpful
    1
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    • Figured out the layout pretty quickly.
    • Did not use too many fixed values.
    • Would change: trying to write less CSS.
    What challenges did you encounter, and how did you overcome them?
    • Removing the lateral scrollbar, while keeping the container centered vertically.
    • It took several trials and errors with flexbox and grid, eventually I did it by setting .container-wrapper to height: 90vh.
    What specific areas of your project would you like help with?
    • Ways of optimizing the HTML structure (less elements, if possible).
    • Optimizing the CSS classes and code.

    QR code responsive component using HTML and CSS Flex

    3
    Aminpatra•260
    @AminpatraPosted 8 months ago

    You can make the body it self flex to center the card, by giving it height of 100vh or better height : calc(100vh - 1px) -> to not make the shaky feeling in mobile. Instead of defining a container and give it the height of the page so the final result we be like this : body {display: flex; flex-direction: column; justify-content: center; align-items: center; height : calc (100vh - 1px)} or you can just use (display: grid; place-content: center;) instead of flex properties. Hope this helped you.

    Marked as helpful
    1
  • Jordan Davenport•930
    @jjdavenportSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    The overlay on the main background image when hovering.

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

    I needed to learn how to use a hidden wrapper with an image to use when hovering over the main background image.

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

    none.

    NFT Preview card with Flexbox

    1
    Aminpatra•260
    @AminpatraPosted 8 months ago

    I really liked your way to make the hover effect by using display none, then display flex, thank you for that tip.

    Marked as helpful
    1
  • Aminpatra•260
    @AminpatraPosted 8 months ago

    To make the image appear: <img src="assets/images/illustration-article.svg" alt="" /> Instead of: <img src="/illustration-article.svg" alt="" />

    0