Submitted 5 months ago

Four card feature

Snigdha Sukun•550

@snigdha-sukun

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of using :nth-child() to access & style each class element individually instead of creating id just to style each element:

.card:nth-child(1) {
    border-top: 0.3em solid var(--cyan);
}

.card:nth-child(2) {
    border-top: 0.3em solid var(--red);
}

.card:nth-child(3) {
    border-top: 0.3em solid var(--orange);
}

.card:nth-child(4) {
    border-top: 0.3em solid var(--blue);
}

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

I faced challenge to create layout according to the design for the desktop. I practiced the CSS Grid Fundamentals using the Grid Garden game.

main {
    display: grid;
}

@media (min-width: 28em) {
    main {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 5% 35% 5% 35% 5%;
    }

    .card {
        width: 22em;
    }

    .card:nth-child(1) {
    grid-column-start: 2;
    grid-row-start: 3;
    align-self: center;
}

 .card:nth-child(2) {
    grid-column-start: 3;
    grid-row-start: 2;
    align-self: end;
}
.card:nth-child(3) {
    grid-column-start: 3;
    grid-row-start: 4;
    align-self: start;
}
.card:nth-child(4) {
    grid-column-start: 4;
    grid-row-start: 3;
    align-self: center;
}
}

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

Responsive CSS techniques

Community feedback

Adriano•42,820
@AdrianoEscarabotePosted 5 months ago
Hi Snigdha Sukun, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

<h1>Reliable, efficient delivery</h1> <h1>Powered by Technology</h1>

The most appropriate in this case would be just an h1 tag! containing the two contents, to make them break a line, we can use a max-width, and for the styling we can use a span element with the content that will be changed!

The main tag must be present in every HTML document so that we can recognize the main content. To fix this, wrap the main content in the main tag. Users of assistive technology will have a better navigation experience on your site thanks to the use of HTML5 landmark elements.

The rest is excellent.

I hope you find it useful. 👍
Marked as helpful
1
P
Khalid Anejjar•180
@khalidanejjarPosted 5 months ago
Hi! I like the way you solve this problem. Thanks for sharing your approach and the source of practicing your CSS Grid. Just a small remarque, I heard that it is better to use classes for accessing and styling elements and an id for js. Good luck in your learning journey.
Marked as helpful
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord