228 views
owned this note
# Le Journal du Collège Victor Vasarely : <br> Exprimez-vous, Créez, Innovez ! 📰
## Qu'est-ce que c'est ? 🎯
hcu_dshcu_d
## Pourquoi cette aventure est faite pour vous ? 🌈
1. **Maîtrise de la rédaction** : Perfectionnez votre art de l'écriture et découvrez les métiers de l'information.
2. **Technologie à portée de main** : Apprenez à utiliser des outils numériques avancés comme Markdown et le HTML.
3. **Camaraderie et collaboration** : Rejoignez une équipe dynamique et travaillez ensemble pour créer un contenu captivant.
4. **Liberté d'expression** : Utilisez cette plateforme comme une tribune pour partager vos idées, opinions et créativité.
## Comment ça marche ? 🛠️
Deux outils essentiels vont rythmer votre expérience :
1. **`md2html`** : Un convertisseur Markdown vers HTML pour rédiger et publier facilement.
2. **`a4`** : Un générateur de versions PDF pour imprimer votre œuvre.
### Exemples d'articles 🌟
- Numérique et mobile :
- Version papier :
## Critères d'auto-évaluation 🌈
1. La qualité de votre rédaction.
2. Votre aptitude à utiliser efficacement les outils numériques.
3. Votre engagement et contribution au sein de l'équipe.
4. L'impact de votre travail sur la communauté scolaire.
## Quand ça se passe ? 📅
- Première séance : Mardi 19 septembre 2023.
- Réservez votre mardi de 13h à 14h. 😉
<img src="https://minio.apps.education.fr/codimd-prod/uploads/upload_f2887d32b7214130b12e3a3bea46ba80.png" style="width:30%"></img>
<style>
html {
background-color: #f2f2f2; /* Gris clair */
margin: 0;
padding: 0;
}
/* Style pour le corps de la page */
body {
font-family: Arial, sans-serif;
margin: 0 auto;
padding: 0;
max-width: 900px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
/* Style pour le titre principal */
h1 {
color: #003f5c; /* bleu foncé */
position: relative;
font-size: 2.75rem;
text-align: center;
}
h1::before {
content: "";
position: absolute;
bottom: -0.1em;
left: 0;
right: 0;
height: 0.05em;
background-color: #9eb6d7;
}
/* Style pour le titre secondaire */
h2 {
font-size: 2.25rem;
color: #2f4b7c;
position: relative;
}
h2::before {
content: "";
position: absolute;
bottom: -0.1em;
left: 0;
right: 0;
height: 0.025em;
background-color: #a5b6c4;
}
h3 {
font-size: 1.75rem;
color: #665191;
}
h4 {
font-size: 1.5rem;
color: #665191;
}
h5 {
font-size: 1.3rem;
color: #665191;
}
/* Style pour le paragraphe */
p {
font-size: 1.5rem;
line-height: 1.5;
margin-bottom: 1rem;
}
/* Style pour le texte en gras */
strong {
color: #800000;
}
/* Style pour le texte en italique */
i {
font-style: italic;
color: darkblue;
}
/* Style pour les images */
img {
max-width: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: block;
margin: auto;
}
blockquote {
font-style: italic;
font-size: 1.2rem;
margin: 1rem 0;
padding: 1rem;
background-color: #f9f9f9;
border-left: 4px solid #ccc;
border-left: 4px solid #ccc;
}
/* Style pour le code en ligne */
code {
font-family: "Courier New", monospace;
font-size: 1.1rem;
background-color: #f9f9f9;
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
/* Style pour le code en bloc */
pre {
font-family: "Courier New", monospace;
font-size: 1.1rem;
background-color: #f9f9f9;
padding: 1rem;
white-space: pre-wrap;
}
/* Style pour les liens */
a {
color: #007bff;
text-decoration: none;
}
/* Style pour les liens visités */
a:visited {
color: #6610f2;
}
/* Style pour les titres de liens */
a:hover, a:focus {
color: #007bff;
text-decoration: underline;
}
/* Style pour les listes */
ul, ol {
font-size: 1.5rem;
line-height: 1.2;
margin-bottom: 1rem;
}
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Media query pour les téléphones */
@media only screen and (max-width: 600px) {
body {
padding: 0.5rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2.37rem;
}
h4 {
font-size: 2.23rem;
}
h5 {
font-size: 2.10rem;
}
h6 {
font-size: 2rem;
}
p {
font-size: 1.75rem;
}
ul, ol {
font-size: 1.75rem; /* Nouvelle taille de police pour les listes sur les téléphones */
}
img {
max-width: 100%;
}
}
</style>