Skip to content
OverviewSolutions
49
Comments
6
Hassan
@hnasser44

All comments

  • Hassan•940
    @hnasser44

    Hello! To achieve a design closer to the desired layout, you can apply the following styles:

    1)For the container, use flexbox to center its contents both horizontally and vertically, and set the margins to auto to keep it centered within its parent container.

    .container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

    2)At larger screen sizes, give the container a minimum height of 100vh to ensure it takes up the full viewport height. You can play with the min-width value to find a perfect match

    @media screen and (min-width: 768px) {
    .container {
        min-height: 100vh;
    }
}

    3)For the sedan, suv, and luxury classes, set the maximum width to 200px to limit their size and keep them uniform.

    .sedan, .suv, .luxury {
    max-width: 200px;
}

    Hope you find this helpful. Happy coding :)

    Marked as helpful
  • Hassan•940
    @hnasser44

    Hello, a typical React project follows a folder structure that helps to keep things organized. A common structure is:

    src/
  |- components/
  |- pages/
  |- utils/
  |- assets/
  |- App.js
  |- index.js
  |- index.css

    components: This folder contains reusable components that can be used across different pages.

    pages: Each page of your application should have its own folder here, containing the components specific to that page.

    utils: Utility functions or helper functions can be placed in this folder.

    assets: Images, fonts, or other static assets can be stored here.

    Component Separation: When deciding whether to separate elements into different components or keep them as one block, consider the reusability and complexity of the component.

    Reusability: If an element is used in multiple places or has the potential to be reused, it's better to create a separate component. This follows the DRY (Don't Repeat Yourself) principle, making your code easier to maintain and reducing duplication.

    Complexity: If a block of HTML and logic becomes too complex, it's a good idea to break it down into smaller components. Smaller components are easier to understand, test, and manage.

    Marked as helpful
  • Hassan•940
    @hnasser44

    Hello, good job on completing the challenge! While your solution works, it's worth noting that using position: absolute on the container might not be the most optimal approach. Instead, you can achieve a similar result by adding the following CSS styles to the body tag:

    body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    This will center the container both horizontally and vertically on the page without the need for absolute positioning. Additionally, you can apply the following styles to the .container class for a clean and modern look:

    .container {
    width: 300px;
    padding: 1rem;
    background-color: hsl(0,0%,100%);
    border-radius: 20px;
}

    Lastly, you can make sure the image inside the container scales properly by using the following style for the .img class:

    .img {
    max-width: 100%;
    border-radius: 10px;
}

    By following these guidelines, you'll have a more responsive and aesthetically pleasing design. Keep up the great work!

    Marked as helpful
  • Hassan•940
    @hnasser44

    Hello! The animation on the button is really nice and neat. I would highly recommend exploring flexbox for creating flexible and responsive layouts and understanding how to position elements using absolute and relative positioning. Also, it's generally best to avoid setting explicit heights for elements unless it's absolutely necessary. Keep up the great work!

    Marked as helpful
  • Hassan•940
    @hnasser44

    One thing to add is that I don't know why the add-ons at step4 are not visible, everything works well locally but on the hosted version they don't show. If someone can help me with it would be greatly helpful. Note: the add-ons appear on the mobile hosted version but not on desktop

  • Hassan•940
    @hnasser44

    The animation on the button is amazing!!