Esercizio 13: Recreating Layouts

Layouts

For the Web Technologies exam, it is required to study, imitate and provide a CSS design based on the history of graphic design.

In this lesson, we will try to recreate the design of a page given an example.

We will use "Arrest dv Grand Conseil donné sur la reformation de l’imprimerie, le vnziéme septembre 1544. [Lyon, 1548]".

First of all, we notice that the page has a certain padding around. It seems to be 5% on the left, top, and bottom, and 10% on the right.

We need to re-create the one-column layout. We can use flexbox or any other layout class. For the margin, we can use margin-top, margin-right, margin-bottom, margin-left or use the short-hand margin property, which works like this:

margin: top right bottom left

margin: top left-right bottom

margin: topbottom rightleft

We can also use auto to ensure vertical or horizontal alignment.

For the indent of the first letter, we can use the ::first-letter pseudo-selector:

.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin: 5% 10% 5% 5%;
}

p {
flex: 1 300px 100px;
text-align: justify;
text-indent: 0;
}
p::first-letter {
    padding-left: 2vw; /* You can also use margin-left instead of padding-left */
    }

For the decoration, we can search an image (or extract it from the reference) and embed it in the style.

Also, for the font, we can search one on Google Fonts or any other resource. For this exercise, I used Medieval Sharp.

What about the first word of each paragraph? They are all uppercase. For that, we can wrap the first word of each paragraph with a span, give it a class like "first-word", and then add this in CSS:

.first-word {
text-transform: uppercase;
}