diff --git a/README.md b/README.md index 54ce3414a..64d9100c5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # News Site -Replace this readme with your own information about your project. +Replace this readme with your own information about your project. Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. @@ -9,4 +9,13 @@ Start by briefly describing the assignment in a sentence or two. Keep it short a Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? ## View it live + Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. + + - News Site - - - - -
- -
- -
- -
- -
- -
- - + + + + + + Viny-fy + + + + +
+
+ +
+

Viny-fy

+

Your Music Magazine

+
+
+
+ + +
+
+
+ +

Selection for your musical soul

+

You won't believe the crazy news of the day! +
Introducing a selection of Soulful Divas: Sade, Danitsa, NNAVY, and Laufey. These four talented + women are + making waves in the music industry with their captivating voices, diverse backgrounds, and + innovative sound. + From the soulful melodies of Sade to the modern R&B vibes of Danitsa, NNAVY's jazz-infused vocals, + and + Laufey's pop-inspired soul, these artists are redefining the genre and inspiring a new generation of + music + lovers. +

+ + Vinyl Art + +
+ +

Artist of the Week

+
+ +

Laufey - With Icelandic and Chinese roots...

+
+
+ +

NNAVY - A true revelation on the Swiss soul scene...

+
+
+ +

Sade - The British-Nigerian queen of smooth jazz and soul...

+
+
+ +

Danitsa - Born in Switzerland to Serbian and Congolese parents...

+
+
+
+

Festival of the Week

+

+ Montreux Jazz Festival: A Legendary Musical Gathering +
+ Held annually on the shores of Lake Geneva, the Montreux Jazz Festival is one of the world’s most + prestigious music events. Since its 1967 debut, it has evolved from a jazz-focused festival into a + celebration of diverse genres, hosting legends like Miles Davis and Prince. With its stunning lakeside + backdrop and iconic performances, Montreux remains a must-visit for music lovers. +

+ +
+ + +
+ + + \ No newline at end of file diff --git a/code/style.css b/code/style.css index d6be16468..4bb3d40d7 100644 --- a/code/style.css +++ b/code/style.css @@ -1,4 +1,137 @@ -html { - background: #0025ff; +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; color: #fff; + background-color: #000; /* Fond noir */ } + +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.body { + font-family: 'Arial', sans-serif; + line-height: 1.6; + color: #fff; /* Définir la couleur du texte à blanc pour un contraste élevé avec le fond noir */ + background-color: #000; /* Arrière-plan noir */ +} +.festival iframe, +footer iframe { + width: 100%; + aspect-ratio: 16 / 9; + height: auto; +} + + +img, iframe { + max-width: 100%; + height: auto; +} + +a { + color: #007bff; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} +.header-content { + display: flex; + align-items: center; /* Centre les éléments verticalement */ + justify-content: space-between; /* Espacement entre le logo et le texte */ + padding: 20px; /* Ajoute un peu d'espace autour des éléments internes */ +} + +#logo img { + width: 100px; /* Taille du logo */ + height: auto; /* Maintient les proportions */ +} + +header h1, header h2 { + margin: 0; /* Enlève la marge par défaut des titres */ + padding-left: 20px; /* Ajoute un peu d'espace à gauche des titres pour les séparer du logo */ +} + +header { + background-color: #378d20; + color: white; +} + +#main { + padding: 20px; + background-color: #f8f9fa; +} + +h3 { + color: #a233d1; +} + +p { + margin-bottom: 15px; +} +#artists { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + padding: 20px; +} + +article { + background-color: #220404; + padding: 20px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} +.festival { + display: flex; + flex-direction: column; + align-items: center; /* Centre les éléments horizontalement */ + background-color: #1e0303; + padding: 30px; + margin-top: 30px; + border-radius: 26px; +} + + +footer { + background-color: #343a40; + color: #fff; + text-align: center; + padding: 20px; + margin-top: 20px; +} + +footer h3 { + color: #f8f9fa; +} + +footer ul { + list-style-type: none; + padding: 0; +} + +footer li { + padding: 10px 0; +} + +footer a { + color: lightblue; +} +@media (max-width: 768px) { + body { + padding: 10px; + } + + .header-content, .festival, footer { + padding: 15px; + } + + h1, h2, h3 { + font-size: smaller; /* Réduit la taille des titres sur les petits écrans */ + } +} + +