Day # 18: Paellitas Menu

A couple of months ago I came across the menu of a Paellas restaurant that caught my attention. I saved it to try a copy it, which as I have said before, it’s a recommended practice to hone your frontend development skills.

I have to admit that the task was much more difficult than I could have envisaged. There were a lot of details that I found challenging. What follows is a list of them:

- A dotted border: the list of prices is separated by a dotted line that I was able to emulate by styling the border as a dotted one, like so:

.entradas .izquierda ul li .puntos {

    display: inline-block;

    border-bottom: dotted 5px #143556;

    width: 80%;

}

- Containing the content of a paragraph in just one line: If you want to keep all content of 'p' inside in one single line you can use the white-space property and set it to “nowrap”:

p {

    white-space: nowrap;

}

- To make a border with two lines in a simple way, you can set the border-style to double, like this: 

Make a border with two lines

    border-width: 0.32rem;

    border-color: rgb(78, 154, 208);

    border-style: double;

Copying this website ended up being a difficult task that forced me to do lots of research to accomplish certain features. And even when it proved to be challenging, I was able to learn a lot of new concepts. Adversity is something that we as frontend developers need to face often. Exercises like this are helpful to train ourselves at handling complicated tasks.