Skip to content
OverviewSolutions
8
Comments
9
Samuel M. Setiawan
@samuelms21

All comments

  • Samuel M. Setiawan•200
    @samuelms21Posted about 2 years ago

    Hey there, nice work with your project. There is a tiny improvement that you can do, you can add external fonts to your HTML document from Google Fonts. Here's how:

    • Open Google Fonts and search for Outfit (the font-family attached in style-guide.md
    • You can select the required font weights, and import it to your CSS
    • Copy and paste this code to the top of your CSS document:
    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
    • And then, since all elements will use the same font-family, you can type this code in your CSS:
    * {
   font-family: 'Outfit', sans-serif;
}
    0
  • Draco•160
    @dracowarzSubmitted about 2 years ago

    I have completed the "Order summary component" challenge by learning and practicing using CSS Framework - Bootstrap and have submitted the solution.

    Does anyone have any ideas for learning Bootstrap easier?

    Anyone is welcome to check my solution and leave feedback to see whether there are any parts I need to improve this solution.

    Order Summary Component Using Bootstrap

    1
    Samuel M. Setiawan•200
    @samuelms21Posted about 2 years ago

    Hello there! Good job on making this one. My tips on learning Bootstrap is just to keep making websites and layouts, that's how I got used to it. I would browse on dribbble.com and search for landing page designs, and I try to replicate them using Bootstrap.

    Here are also some improvements you can make to your project:

    • Change your font-family to the specified font family in the style-guide, which is Red Hat Display. You can find this font and import it to your HTML/CSS from Google Fonts. One way to do it, is to copy and paste this following code to the top of your CSS document:
    @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');

    And since this project uses the same font-family for all components you can do this in CSS to apply the font-family change:

    * {
    font-family: 'Red Hat Display', sans-serif;
}
    • You can add more border-radius on your call-to-action button. You can do this with plain CSS, or you can use Bootstrap by adding the "rounded-{num}" class in your HTML element. Here is the link to the documentation page: https://getbootstrap.com/docs/5.2/utilities/borders/#radius
    Marked as helpful
    1
  • Samuel M. Setiawan•200
    @samuelms21Posted about 2 years ago

    Hello there, good job on this one. You are at 90% of your progress to match this project with the desired design. Just one tiny improvement, you can increase the font-size and change the color for the card heading. To match the style guide, change the color to hsl(218, 44%, 22%), which is dark blue.

    0
  • Samuel M. Setiawan•200
    @samuelms21Posted about 2 years ago

    Hello there! Nice work on your first project. Here are some improvements that you can make to this project:

    • Change the font-family to match the style guide (font-family: Outfit), you can find this specific font in Google Fonts
    • Change the card background-color to hsl(216, 50%, 16%), as specified in the style guide
    • Add rounded borders to the NFT image using the border-radius property
    • Reduce the font-size for the NFT price
    • Add the icon-view.svg when you hover over the NFT image

    Stay positive and continue on your journey.

    Marked as helpful
    0
  • Samuel M. Setiawan•200
    @samuelms21Posted over 2 years ago

    Hey there. I have some suggestions for you if you don't mind. Your background color is too dark, you can use the style-guide.md in your starter files to make sure you have the same color pallete. The padding between your text and the QR Code is too small, you might want to make that bigger. Also, you can reduce the padding between the QR Code and the card.

    Marked as helpful
    0
  • Samuel M. Setiawan•200
    @samuelms21Posted over 2 years ago

    Hey there. Well done with the page! You can still improve it by changing your font-family property to 'Outfit', sans-serif; instead of just Outfit. So, if the browser that the user is using does not have the font Outfit, the browser can roll back to sans-serif. In your code, you might have forgotten to import the font from Google Fonts. Here is how you can do it:

    1. You can copy and paste this to your CSS file:

    @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");

    1. Or you can copy and paste this inside the <head></head> element, in your HTML:

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    Marked as helpful
    1
  • Samuel M. Setiawan•200
    @samuelms21Posted over 2 years ago

    Hey there. Well done with the page!

    A small fix you can do is your image's border-radius. You can set it according to your NFT preview card's border-radius, and don't forget to do the same thing to your overlay effect when you hover it. That way, you're more consistent with your card design.

    Also, you can reduce the space between your product name, which is "Equilibrium #3429", and your product description, which is "Our Equilibrium collection promotes balance and calm."

    Marked as helpful
    0
  • Samuel M. Setiawan•200
    @samuelms21Posted over 2 years ago

    Hey there. You might want to add some padding to your columns and customize your right and left padding for your buttons. Here is how you can do it:

    1. Buttons : Instead of writing padding: 17px, you can write padding: 17px 30px. This will expand your x-axis padding (left and right) so your text can stay on the same line!
    2. Columns: You can add padding to your columns (all three of them) by writing
    .card > * {
    padding: 20px;
}

    The code .card > * just means that you are selecting all child elements of the element with the class card.

    Also, I think your understanding of classes and ids might be a little off. You can only have an id for a single element. No other element should have that id. Classes however, you can use it for several elements in your HTML. If you want to have an id for every single column element you have, then you have to put different id names for every one of them.

    Marked as helpful
    0
  • Kristina225•260
    @Kristina225Submitted over 2 years ago

    Hi, everyone. I don't have a specific question about this challenge, but any feedback is appreciated. I learn a lot from people's comments. The most challenging part was setting the body background and fixing the interruption of flow in the 'text-decoration: underline' below the letter 'g' at the anchor element. I fixed it by removing setting 'text-decoration:none' and adding a bottom border on the element, but maybe there's a better way. Thanks again for checking out my solution.

    Order Summary Component with HTML and CSS

    1
    Samuel M. Setiawan•200
    @samuelms21Posted over 2 years ago

    Looks good to me, and yes I also had problems with the body background. It is probably the most time consuming part for me. Thanks to you, I have an idea on how to solve this one.

    0