<p>Text here</p>
<pre><code class="language-python">import os

</code></pre>

tile test

[![My video title](https://res.cloudinary.com/imagesgmzi/image/upload/v1699151528/blog-reflexion/posts/vqij7imaghwtojrvblew.jpg)](https://m.youtube.com/watch?v=z4sGC3M8mec)


![image](https://res.cloudinary.com/imagesgmzi/image/upload/v1699151528/blog-reflexion/posts/vqij7imaghwtojrvblew.jpg)
Figure: 

[![title](https://res.cloudinary.com/imagesgmzi/image/upload/v1699151528/blog-reflexion/posts/vqij7imaghwtojrvblew.jpg)](https://www.youtube.com/embed/tNxUxm3-658?si=_MYzf6ExNMtM4gIY)



<p><a href="https://m.youtube.com/watch?v=z4sGC3M8mec"><img src="https://res.cloudinary.com/imagesgmzi/image/upload/v1699151528/blog-reflexion/posts/vqij7imaghwtojrvblew.jpg" alt="My video title"></a></p>
<p><img src="https://res.cloudinary.com/imagesgmzi/image/upload/v1699151528/blog-reflexion/posts/vqij7imaghwtojrvblew.jpg" alt="image">
Figure:</p>
<p><a href="https://www.youtube.com/embed/tNxUxm3-658?si=_MYzf6ExNMtM4gIY"><img src="https://res.cloudinary.com/imagesgmzi/image/upload/v1699151528/blog-reflexion/posts/vqij7imaghwtojrvblew.jpg" alt="title"></a></p>

Test

Titloe here

Title here

Trying it out

• [Write a new post in the editor](https://blog-gmzi.vercel.app/admin/write-post) or [upload from file](https://blog-gmzi.vercel.app/admin/upload-post).  
• Edit, add or delete posts from the [dashboard](https://blog-gmzi.vercel.app/admin/dashboard).  
• Xml sitemap generated automatically when publishing a new post.  
• Og image generation with dynamic title for every post.   

<p>• <a href="https://blog-gmzi.vercel.app/admin/write-post">Write a new post in the editor</a> or <a href="https://blog-gmzi.vercel.app/admin/upload-post">upload from file</a>.<br>
• Edit, add or delete posts from the <a href="https://blog-gmzi.vercel.app/admin/dashboard">dashboard</a>.<br>
• Xml sitemap generated automatically when publishing a new post.<br>
• Og image generation with dynamic title for every post.</p>

Features

Well done

Setup fast and very nice

1. this
2. that
3. the other
4. 4242


<p>Setup fast and very nice</p>
<ol>
<li>this</li>
<li>that</li>
<li>the other</li>
<li>4242</li>
</ol>

Pretty cool

                
What would be the best way today to protest against a war? How could you influence the largest number of people? In 1937, Picasso expressed his outrage against war with Guernica, his enormous mural-sized painting displayed to millions of visitors at the Paris World’s Fair. It has since become the twentieth century’s most powerful indictment against war, a painting that still feels intensely relevant today.

![guernica](https://upload.wikimedia.org/wikipedia/en/7/74/PicassoGuernica.jpg)

## Antiwar icon

Much of the painting’s emotional power comes from its overwhelming size, approximately eleven feet tall and twenty five feet wide. Guernica is not a painting you observe with spatial detachment; it feels like it wraps around you, immerses you in its larger-than-life figures and action. And although the size and multiple figures reference the long tradition of European history paintings, this painting is different because it challenges rather than accepts the notion of war as heroic. So why did Picasso paint it?

## Comission

In 1936, Picasso (who was Spanish) was asked by the newly elected Spanish Republican government to paint an artwork for the Spanish Pavilion at the 1937 Paris World’s Fair. The official theme of the Exposition was a celebration of modern technology. Yet Picasso painted an overtly political painting, a subject in which he had shown little interest up to that time. What had happened to inspire it?

## Crimes against humanity: an act of war
In 1936, a civil war began in Spain between the democratic Republican government and fascist forces, led by General Francisco Franco, attempting to overthrow them. Picasso’s painting is based on the events of April 27, 1937, when Hitler’s powerful German air force, acting in support of Franco, bombed the village of Guernica in northern Spain, a city of no strategic military value. It was history’s first aerial saturation bombing of a civilian population. It was a cold-blooded training mission designed to test a new bombing tactic to intimidate and terrorize the resistance. For over three hours, twenty five bombers dropped 100,000 pounds of explosive and incendiary bombs on the village, reducing it to rubble. Twenty more fighter planes strafed and killed defenseless civilians trying to flee. The devastation was appalling: fires burned for three days, and seventy percent of the city was destroyed. A third of the population, 1600 civilians, were wounded or killed.

## What can we see?

This painting is not easy to decipher. Everywhere there seems to be death and dying. As our eyes adjust to the frenetic action, figures begin to emerge. On the far left is a woman, head back, screaming in pain and grief, holding the lifeless body of her dead child. This is one of the most devastating and unforgettable images in the painting. To her right is the head and partial body of a large white bull, the only unharmed and calm figure amidst the chaos. Beneath her, a dead or wounded man with a severed arm and mutilated hand clutches a broken sword. Only his head and arms are visible; the rest of his body is obscured by the overlapping and scattered parts of other figures. In the center stands a terrified horse, mouth open screaming in pain, its side pierced by a spear. On the right are three more women. One rushes in, looking up at the stark light bulb at the top of the scene. Another leans out of the window of a burning house, her long extended arm holding a lamp, while the third woman appears trapped in the burning building, screaming in fear and horror. All their faces are distorted in agony. Eyes are dislocated, mouths are open, tongues are shaped like daggers.

## Color

Picasso chose to paint Guernica in a stark monochromatic palette of gray, black and white. This may reflect his initial encounter with the original newspaper reports and photographs in black and white; or perhaps it suggested to Picasso the objective factuality of an eye witness report. A documentary quality is further emphasized by the textured pattern in the center of the painting that creates the illusion of newsprint. The sharp alternation of black and white contrasts across the painting surface also creates dramatic intensity, a visual kinetic energy of jagged movement.

## Visual complexity

On first glance, Guernica’s composition appears confusing and chaotic; the viewer is thrown into the midst of intensely violent action. Everything seems to be in flux. The space is compressed and ambiguous with the shifting perspectives and multiple viewpoints characteristic of Picasso’s earlier Cubist style. Images overlap and intersect, obscuring forms and making it hard to distinguish their boundaries. Bodies are distorted and semi-abstracted, the forms discontinuous and fragmentary. Everything seems jumbled together, while sharp angular lines seem to pierce and splinter the dismembered bodies. However, there is in fact an overriding visual order. Picasso balances the composition by organizing the figures into three vertical groupings moving left to right, while the center figures are stabilized within a large triangle of light.

[source](https://www.khanacademy.org/humanities/art-1010/cubism-early-abstraction/cubism/a/picasso-guernica)

<p>What would be the best way today to protest against a war? How could you influence the largest number of people? In 1937, Picasso expressed his outrage against war with Guernica, his enormous mural-sized painting displayed to millions of visitors at the Paris World’s Fair. It has since become the twentieth century’s most powerful indictment against war, a painting that still feels intensely relevant today.</p>
<p><img src="https://upload.wikimedia.org/wikipedia/en/7/74/PicassoGuernica.jpg" alt="guernica"></p>
<h2>Antiwar icon</h2>
<p>Much of the painting’s emotional power comes from its overwhelming size, approximately eleven feet tall and twenty five feet wide. Guernica is not a painting you observe with spatial detachment; it feels like it wraps around you, immerses you in its larger-than-life figures and action. And although the size and multiple figures reference the long tradition of European history paintings, this painting is different because it challenges rather than accepts the notion of war as heroic. So why did Picasso paint it?</p>
<h2>Comission</h2>
<p>In 1936, Picasso (who was Spanish) was asked by the newly elected Spanish Republican government to paint an artwork for the Spanish Pavilion at the 1937 Paris World’s Fair. The official theme of the Exposition was a celebration of modern technology. Yet Picasso painted an overtly political painting, a subject in which he had shown little interest up to that time. What had happened to inspire it?</p>
<h2>Crimes against humanity: an act of war</h2>
<p>In 1936, a civil war began in Spain between the democratic Republican government and fascist forces, led by General Francisco Franco, attempting to overthrow them. Picasso’s painting is based on the events of April 27, 1937, when Hitler’s powerful German air force, acting in support of Franco, bombed the village of Guernica in northern Spain, a city of no strategic military value. It was history’s first aerial saturation bombing of a civilian population. It was a cold-blooded training mission designed to test a new bombing tactic to intimidate and terrorize the resistance. For over three hours, twenty five bombers dropped 100,000 pounds of explosive and incendiary bombs on the village, reducing it to rubble. Twenty more fighter planes strafed and killed defenseless civilians trying to flee. The devastation was appalling: fires burned for three days, and seventy percent of the city was destroyed. A third of the population, 1600 civilians, were wounded or killed.</p>
<h2>What can we see?</h2>
<p>This painting is not easy to decipher. Everywhere there seems to be death and dying. As our eyes adjust to the frenetic action, figures begin to emerge. On the far left is a woman, head back, screaming in pain and grief, holding the lifeless body of her dead child. This is one of the most devastating and unforgettable images in the painting. To her right is the head and partial body of a large white bull, the only unharmed and calm figure amidst the chaos. Beneath her, a dead or wounded man with a severed arm and mutilated hand clutches a broken sword. Only his head and arms are visible; the rest of his body is obscured by the overlapping and scattered parts of other figures. In the center stands a terrified horse, mouth open screaming in pain, its side pierced by a spear. On the right are three more women. One rushes in, looking up at the stark light bulb at the top of the scene. Another leans out of the window of a burning house, her long extended arm holding a lamp, while the third woman appears trapped in the burning building, screaming in fear and horror. All their faces are distorted in agony. Eyes are dislocated, mouths are open, tongues are shaped like daggers.</p>
<h2>Color</h2>
<p>Picasso chose to paint Guernica in a stark monochromatic palette of gray, black and white. This may reflect his initial encounter with the original newspaper reports and photographs in black and white; or perhaps it suggested to Picasso the objective factuality of an eye witness report. A documentary quality is further emphasized by the textured pattern in the center of the painting that creates the illusion of newsprint. The sharp alternation of black and white contrasts across the painting surface also creates dramatic intensity, a visual kinetic energy of jagged movement.</p>
<h2>Visual complexity</h2>
<p>On first glance, Guernica’s composition appears confusing and chaotic; the viewer is thrown into the midst of intensely violent action. Everything seems to be in flux. The space is compressed and ambiguous with the shifting perspectives and multiple viewpoints characteristic of Picasso’s earlier Cubist style. Images overlap and intersect, obscuring forms and making it hard to distinguish their boundaries. Bodies are distorted and semi-abstracted, the forms discontinuous and fragmentary. Everything seems jumbled together, while sharp angular lines seem to pierce and splinter the dismembered bodies. However, there is in fact an overriding visual order. Picasso balances the composition by organizing the figures into three vertical groupings moving left to right, while the center figures are stabilized within a large triangle of light.</p>
<p><a href="https://www.khanacademy.org/humanities/art-1010/cubism-early-abstraction/cubism/a/picasso-guernica">source</a></p>

Picasso, Guernica

        
This is a post demo, write yours [here](https://blog-gmzi.vercel.app/admin/write-post).

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Nulla aliquet enim tortor at auctor. Malesuada proin libero nunc consequat. Tempor commodo ullamcorper a lacus vestibulum. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Ipsum suspendisse ultrices gravida dictum fusce ut. Nunc scelerisque:  

### This is how images look like 

![buenos aires](https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/ObeliscoBA2017.jpg/1024px-ObeliscoBA2017.jpg)  

### This is how you can embed video:  

[![Picasso at work](https://cdn.sanity.io/images/cxgd3urn/production/2d1ebc4d381e218972f3d2c31ce7c4e7c2b90cf2-960x724.jpg)](https://youtu.be/KdgiYyIAJho)  


### This is how a code sample looks like

This is a code sample:

```javascript
const numbers = [1, 2, 3, 4]

function myNumbers(numbers){
  numbers.map((n) => n)
}
```
Cras sed felis eget velit aliquet sagittis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Id diam vel quam elementum pulvinar etiam non. Leo in vitae turpis massa sed elementum tempus. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Sit amet purus gravida quis blandit turpis. Purus faucibus ornare suspendisse sed. Aenean sed adipiscing diam donec adipiscing tristique. Parturient montes nascetur ridiculus mus. Sagittis eu volutpat odio facilisis mauris. Vitae auctor eu augue ut lectus. Morbi tristique senectus et netus et malesuada fames. Dictum varius duis at consectetur lorem. Sem et tortor consequat id porta. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Odio pellentesque diam volutpat commodo sed.

### This is how footnotes look like

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua[^1]. 
Nulla aliquet enim tortor at auctor. Malesuada proin libero nunc consequat. Tempor commodo ullamcorper a lacus vestibulum. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Ipsum suspendisse ultrices gravida dictum fusce ut. Nunc scelerisque:  

### Line break sample

Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Sed velit dignissim sodales ut eu sem integer. Libero enim sed faucibus turpis in eu. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Maecenas pharetra convallis posuere morbi. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Risus commodo viverra maecenas accumsan lacus vel. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Sed risus pretium quam vulputate dignissim suspendisse in. Donec ac odio tempor orci dapibus. Eu scelerisque felis imperdiet proin fermentum leo vel orci. Habitant morbi tristique senectus et netus et malesuada fames ac. Dolor morbi non arcu risus.
  <br>
  <br>

Tincidunt arcu non sodales neque sodales ut etiam sit. Dui faucibus in ornare quam viverra orci sagittis eu. Velit sed ullamcorper morbi tincidunt ornare. Aenean euismod elementum nisi quis eleifend. Mattis aliquam faucibus purus in massa tempor nec feugiat. Lobortis mattis aliquam faucibus purus in massa tempor. Arcu vitae elementum curabitur vitae nunc. Lectus quam id leo in vitae turpis.


[^1]: This is Foot Note 1.

<p>This is a post demo, write yours <a href="https://blog-gmzi.vercel.app/admin/write-post">here</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Nulla aliquet enim tortor at auctor. Malesuada proin libero nunc consequat. Tempor commodo ullamcorper a lacus vestibulum. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Ipsum suspendisse ultrices gravida dictum fusce ut. Nunc scelerisque:</p>
<h3>This is how images look like</h3>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/ObeliscoBA2017.jpg/1024px-ObeliscoBA2017.jpg" alt="buenos aires"></p>
<h3>This is how you can embed video:</h3>
<p><a href="https://youtu.be/KdgiYyIAJho"><img src="https://cdn.sanity.io/images/cxgd3urn/production/2d1ebc4d381e218972f3d2c31ce7c4e7c2b90cf2-960x724.jpg" alt="Picasso at work"></a></p>
<h3>This is how a code sample looks like</h3>
<p>This is a code sample:</p>
<pre><code class="language-javascript">const numbers = [1, 2, 3, 4]

function myNumbers(numbers){
  numbers.map((n) => n)
}
</code></pre>
<p>Cras sed felis eget velit aliquet sagittis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Id diam vel quam elementum pulvinar etiam non. Leo in vitae turpis massa sed elementum tempus. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Sit amet purus gravida quis blandit turpis. Purus faucibus ornare suspendisse sed. Aenean sed adipiscing diam donec adipiscing tristique. Parturient montes nascetur ridiculus mus. Sagittis eu volutpat odio facilisis mauris. Vitae auctor eu augue ut lectus. Morbi tristique senectus et netus et malesuada fames. Dictum varius duis at consectetur lorem. Sem et tortor consequat id porta. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Odio pellentesque diam volutpat commodo sed.</p>
<h3>This is how footnotes look like</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup>.
Nulla aliquet enim tortor at auctor. Malesuada proin libero nunc consequat. Tempor commodo ullamcorper a lacus vestibulum. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Ipsum suspendisse ultrices gravida dictum fusce ut. Nunc scelerisque:</p>
<h3>Line break sample</h3>
<p>Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Sed velit dignissim sodales ut eu sem integer. Libero enim sed faucibus turpis in eu. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Maecenas pharetra convallis posuere morbi. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Risus commodo viverra maecenas accumsan lacus vel. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Sed risus pretium quam vulputate dignissim suspendisse in. Donec ac odio tempor orci dapibus. Eu scelerisque felis imperdiet proin fermentum leo vel orci. Habitant morbi tristique senectus et netus et malesuada fames ac. Dolor morbi non arcu risus.

</p>
<p>Tincidunt arcu non sodales neque sodales ut etiam sit. Dui faucibus in ornare quam viverra orci sagittis eu. Velit sed ullamcorper morbi tincidunt ornare. Aenean euismod elementum nisi quis eleifend. Mattis aliquam faucibus purus in massa tempor nec feugiat. Lobortis mattis aliquam faucibus purus in massa tempor. Arcu vitae elementum curabitur vitae nunc. Lectus quam id leo in vitae turpis.</p>
<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Notes</h2>
<ol>
<li id="user-content-fn-1">
<p>This is Foot Note 1. <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
</ol>
</section>

blog-demo