Technigo · smily342 · Aug 25, 2024 · Aug 25, 2024 · Oct 2, 2024 · Oct 2, 2024
diff --git 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.
+
+<!-- Brian's Commentary>
+This project was about to make a website about something we chose ourselves, for me it was music.
+
+I approached this problem with a paper, I tried to put my "vision" of the website and try to work with it.
+I used flex and grid for the html If I had more time i would have played with the styles.
+But sadly I didn't exactly arrange the way i wanted to.
+https://66cb72a11161220008570bd3--viny-fy.netlify.app/
diff --git a/code/Vinify.png b/code/Vinify.png
diff --git a/code/index.html b/code/index.html
@@ -1,23 +1,104 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <!-- Change the title below -->
-    <title>News Site</title>
-    <link rel="stylesheet" href="./style.css" />
-    <!-- dont forget the meta tag for responsiveness -->
-  </head>
-  <body>
-    <header>
-      <!-- Some kind of logo and navbar -->
-    </header>
-
-    <section class="big-news">
-      <!-- The big news content -->
-    </section>
-
-    <section class="">
-      <!-- The other news  -->
-    </section>
-  </body>
-</html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Viny-fy</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+  <header>
+    <div class="header-content">
+      <div id="logo">
+        <img src="Vinify.png" alt="Logo of Vinify music">
+      </div>
+      <div>
+        <h1>Viny-fy</h1>
+        <h2>Your Music Magazine</h2>
+      </div>
+    </div>
+  </header>
+
+
+  <main>
+    <div id="main">
+    </div>
+    <!-- Main news article section -->
+    <h3>Selection for your musical soul</h3>
+    <p>You won't believe the crazy news of the day!
+      <br>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.
+    </p>
+    </div>
+    <img
+      src="https://i1.wp.com/www.cbvinylrecordart.com/blog/wp-content/uploads/2015/06/classic-vinyl.gif?resize=500%2C281"
+      alt="Vinyl Art">
+    </div>
+    <div id="artists" -- Grid of news articles -->
+
+      <h3>Artist of the Week</h3>
+      <article>
+        <iframe src="https://open.spotify.com/embed/track/1Ukxccao1BlWrPhYkcXbwZ?utm_source=generator" width="600"
+          height="300" frameBorder="0" allowfullscreen="" loading="lazy"></iframe>
+        <p>Laufey - With Icelandic and Chinese roots...</p>
+      </article>
+      <article>
+        <iframe src="https://open.spotify.com/embed/track/4exwQETG1yC3KPp8t57C9q?utm_source=generator" width="600"
+          height="300" frameBorder="0" allowfullscreen="" loading="lazy"></iframe>
+        <p>NNAVY - A true revelation on the Swiss soul scene...</p>
+      </article>
+      <article>
+        <iframe src="https://open.spotify.com/embed/track/65krtHkaYLPr0mEbjL61UP?utm_source=generator" width="600"
+          height="300" frameBorder="0" allowfullscreen="" loading="lazy"></iframe>
+        <p>Sade - The British-Nigerian queen of smooth jazz and soul...</p>
+      </article>
+      <article>
+        <iframe src="https://open.spotify.com/embed/track/4xl1iLPIRfVoceTAUhQJZ2?utm_source=generator" width="600"
+          height="300" frameBorder="0" allowfullscreen="" loading="lazy"></iframe>
+        <p>Danitsa - Born in Switzerland to Serbian and Congolese parents...</p>
+      </article>
+    </div>
+    <div class="festival">
+      <h3>Festival of the Week</h3>
+      <p>
+        Montreux Jazz Festival: A Legendary Musical Gathering
+        <br>
+        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.
+      </p>
+      <iframe width="800" height="450" src="https://www.youtube.com/embed/dsx8RAIuvgc?si=VqVOmrJa7lxNPvy3"
+        title="YouTube video player" frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen></iframe>
+    </div>
+
+    <footer>
+      <h3>About Them</h3>
+      <ul>
+        <li><a href="https://www.laufeymusic.com/" target="_blank">Laufey</a></li>
+        <li><a href="https://danitsa.com/" target="_blank">Danitsa</a></li>
+        <li><a href="https://www.sade.com/" target="_blank">Sade</a></li>
+        <li><a href="https://nnavymusic.com/" target="_blank">NNAVY</a></li>
+      </ul>
+      </section>
+      <h1>See you next Week</h1>
+      <iframe src="https://giphy.com/embed/xUPOqo6E1XvWXwlCyQ" width="480" height="269" frameborder="0"
+        class="giphy-embed" allowfullscreen=""></iframe>
+
+      <p><a href="https://giphy.com/gifs/spacejam-space-jam-movie-xUPOqo6E1XvWXwlCyQ">via GIPHY</a></p>
+    </footer>
+  </main>
+</body>
+
+</html>
diff --git 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 */
+  }
+}
+
+