Submitted 4 months ago

HTML and CSS

#accessibility#pure-css#angular-material

okorieiky•70

@okorieiky

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Am proud of the fact that I was able to complete the work with without any help on the CSS styling.

I will like to improve on the time of delivery next time.

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

I had a little challenge with the table and how to align the data in it and how to remove the table border outside the data.

I got a little help from google and some friends. I used flex in the table to overcome that.

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

The tables, how to align the data in it and how I can achieve this project without the use of flexbox.

Also after making my code go live using github, the Omelet image refuses to displace on the live site, how can I remedy that?

Community feedback

Bassel || باسل•540

@BasselfathyPosted 4 months ago

Hi @okorieiky, good job!

I handled the table section without using flexbox like that:

/* Table Styles */
.recipe__nutrition__table {
	width: 100%;
	border-collapse: collapse;
}

.recipe__nutrition__table tr{
	border-bottom: 1px solid var(--color-stone-150);
}

.recipe__nutrition__table tr:last-child{
	border:0;
}

.recipe__nutrition__table tr:not(:first-child):not(:last-child) td {
    padding-block: var(--spacing-150);
}

.recipe__nutrition__table tr:first-child td {
    padding-block-end: var(--spacing-150);
}

.recipe__nutrition__table tr:last-child td {
    padding-block-start: var(--spacing-150);
}

.recipe__nutrition__table td {
	width: 50%;
	padding-inline: var(--spacing-300);
	text-align: left;

}

.recipe__nutrition__table td:last-child {
	color: var(--color-brown-800);
	font-weight: 700;
	padding-inline-start: var(--spacing-100);
}

You can take a look at the final solution here

Marked as helpful

okorieiky•70

@okorieikyPosted 4 months ago

@Basselfathy thank you very much, that was helpful.

Taophyc•350
@TaophyccPosted 4 months ago
Great job @okorieiky. I think you should add a little bit of padding and margin to the design for mobile devices using media queries. Regarding the image not displaying, you can try uploading the image directly and not in a folder then remove the "images/" in the src.
0
okorieiky•70
@okorieikyPosted 4 months ago
@Taophycc thank you for the feedback, I will make the adjustments.
0
okorieiky•70
@okorieikyPosted 4 months ago
@Taophycc thank you for the feedback, I will make the adjustments.
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