---
myst:
  html_meta:
    "description": "Define what the page you are creating should look like in the end of the training"
    "property=og:description": "Define what the page you are creating should look like in the end of the training"
    "property=og:title": "Project requirements"
    "keywords": "Plone, Volto, Training, Requirements"
---

(voltohandson-customcss-label)=

# Project requirements

Our hands-on exercise is to recreate the current iteration of [plone.org](https://plone.org) or rather a set of parts of the site that are suited different ways you can use volto.
The screenshot below shows the current (2022 just before Plone conf) frontpage of `plone.org`. The red markings indicate the different sections of the website that we will be creating or customizing including the header, navigation, highlight element, downlodad teaser and news listing:

```{image} _static/ploneorg-frontpage.png
:align: center
:alt: plone.com theme
```

## Tasks

These are the tasks we will go through:

- Set up CSS basics
- Create the header and the footer
- Create a prominent highlight element that links to the Plone conf website
- Create a block that links to the plone download page
- Create new listing block template to show event items in a grid like view with buttons on the side

## Training ressources and assets

There are a few files, mostly images, that you will need to recreate for the `plone.org` page.
They are currently available from this [Google Drive folder](https://drive.google.com/drive/folders/19nQkPiiwY5lhBNiTTZJaV-kpQ9rkYqiO?usp=sharing).