All solutions

What are you most proud of, and what would you do differently next time?

I am happy that I was able to finish this design and also able to use grid layout. Haven't really did much projects in Grid Layouts so it was really nice to be able to do so.

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

Initially, I did have a small problem with the sizing of the card when it comes to grid. However, I learned that you don't have to add any widths or height to cards inside of grid-containers, as they are automatically sized.

Especially when you're using grid-row and grid-column for assigning specific positions and sizes for the divs.

#cyan {
    border-top: 4px solid var(--Cyan);
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* very useful */
    align-self: center;
}

#red {
    border-top: 4px solid var(--Red);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#orange {
    border-top: 4px solid var(--Orange);
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

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

Always room for improvement. Let me know what I can do to make this more optimal :)

What are you most proud of, and what would you do differently next time?

Being able to finish the solution to the best of my ability. I feel that i am starting to solidify my understanding of Flexbox. For next time, I would want to use grid layout to do this design.

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

One of the major challenges that I had in this solution, was changing the color on the black and white picture. I initially tried using hue(), greyscale() and saturation() but I couldn't get the expected color.

To overcome this, I did some research on CSS color blending and was eventually able to figure it out. I implemented the pseudo element ::after and utilized mix-blend-mode and opacity.

.image-container {
    position: relative;
}

.image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--Soft-violet);
    mix-blend-mode: multiply;
    opacity: 1;
}

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

I would love help to make this solution more optimal. Theres always room for improvement!

What are you most proud of, and what would you do differently next time?

I'm proud that I was able to finish this solution at a time shorter than expected. Even though this is not part of the solution, it would be cool to add animations around the card that displays all the information. Maybe something that shines the container or a light that traverses around it.

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

Honestly, didn't have much problems with this one but feedback is always welcome. There is always a more optimal solution and if anyone can find one, please send!

What are you most proud of, and what would you do differently next time?

I am most proud of completing this solution. It was really fun and it is evident that I have work to do. Next time I'd like to get the layout on point .

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

I had some problems with gradient colors. I saw the colors that I was supposed to use for the solution and I remembered using linear-gradient() for the results div and I wasn't getting the color that I anticipated. I realized that there is a 4th parameter that depicts the opacity of the color. Knowing this helped me move forward.

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

I would like help on the layout part of this project. They're not the same and I would like feedback to know what to do next time.

What are you most proud of, and what would you do differently next time?

I'm mostly proud of finishing the whole entire design and also incorporating the mobile perspective as well. For next time, I would want to do this solution using the grid layout.

.all-content {
    width: 100%;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.container {
    width: 300px;
    height: 500px;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: space-around;
    padding: 40px;
}

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

Challenges that I encountered was fitting all of the containers in a column structure, while still showing all of the contents. I realized that for the @media query, I had to put the height on auto so everything shows and there is space between everything.

@media only screen and (max-width: 600px) {
    .all-content {
        margin: 40px 0 40px 0;
        flex-direction: column;
        height: auto;
    }

    .container {
        border-radius: 0 !important;
        height: 400px !important;
    }

    .container p {
        line-height: 1.5rem;
    }
}

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

Finding a more optimal way to do this. If there is anything that I could've done to make my code shorter, i'd appreciate the help.

What are you most proud of, and what would you do differently next time?

Proud that I was able to replicate the entire design!

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

I was working on this project on my PC and then finished it on my laptop. I realized that sizes were different. I was able to fix the problem and acknowledged the significance between using absolute units and relative units.

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

Working on the media part. I have to keep practicing when it comes to the media part.

What are you most proud of, and what would you do differently next time?

For being able to replicate this the best i can.

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

I would like help with understanding other ways I can do this and even more optimal.