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,91 @@
 <!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>
+        <h1>Your Music Magazine</h1>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <div id="main"></div>
+    <!-- Main news article section -->
+    <h2>Selection for your musical soul</h2>
+    <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.
+    </p>
+
+    <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 id="artists">
+      <h3>Artist of the Week</h3>
+      <article>
+        <h3>Laufey</h3>
+        <a href="https://open.spotify.com/track/1Ukxccao1BlWrPhYkcXbwZ" target="_blank">Listen to Laufey on Spotify</a>
+        <p>Laufey - With Icelandic and Chinese roots...</p>
+      </article>
+      <article>
+        <h3>NNAVY</h3>
+        <a href="https://open.spotify.com/track/4exwQETG1yC3KPp8t57C9q" target="_blank">Listen to NNAVY on Spotify</a>
+        <p>NNAVY - A true revelation on the Swiss soul scene...</p>
+      </article>
+      <article>
+        <h3>Sade</h3>
+        <a href="https://open.spotify.com/track/65krtHkaYLPr0mEbjL61UP" target="_blank">Listen to Sade on Spotify</a>
+        <p>Sade - The British-Nigerian queen of smooth jazz and soul...</p>
+      </article>
+      <article>
+        <h3>Danitsa</h3>
+        <a href="https://open.spotify.com/track/4xl1iLPIRfVoceTAUhQJZ2" target="_blank">Listen to Danitsa on Spotify</a>
+        <p>Danitsa - Born in Switzerland to Serbian and Congolese parents...</p>
+      </article>
+    </div>
+
+    <div class="festival">
+      <h1>Festival of the Week</h1>
+      <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.
+      </p>
+      <a href="https://www.youtube.com/watch?v=dsx8RAIuvgc" target="_blank">Watch Montreux Jazz Festival on YouTube</a>
+    </div>
+
+    <footer>
+      <h1>About Them</h1>
+      <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>
+
+      <h1>See you next Week</h1>
+      <img
+        src="https://i1.wp.com/www.cbvinylrecordart.com/blog/wp-content/uploads/2015/06/classic-vinyl.gif?resize=500%2C281"
+        alt="Vinyl Art">
+    </footer>
+  </main>
+</body>
+
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,17 @@
+<script src="https://www.youtube.com/iframe_api"></script>
+
+
+<script>
+  // Charger l'API
+  function onYouTubeIframeAPIReady() {
+    new YT.Player('player', {
+      videoId: 'dsx8RAIuvgc', // ID de la vidéo YouTube
+      width: '800',
+      height: '450',
+      playerVars: {
+        autoplay: 1,
+        controls: 1,
+      }
+    });
+  }
+</script>
diff --git a/code/style.css b/code/style.css
@@ -1,4 +1,148 @@
-html {
-  background: #0025ff;
+body {
+  font-family: 'Arial', sans-serif;
+  line-height: 1.6;
   color: #fff;
+  background-color: #000; /* Black background */
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+img, iframe {
+  max-width: 100%;
+  height: auto; /* Ensure responsive images and iframes */
+}
+
+a {
+  color: #007bff; /* Link color */
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline; /* Underline on hover */
+}
+
+.header-content {
+  display: flex;
+  align-items: center; /* Vertically centers items */
+  justify-content: space-between; /* Space between logo and text */
+  padding: 20px; /* Add padding around header */
+}
+
+#logo img {
+  width: 100px; /* Logo size */
+  height: auto; /* Keep logo proportions */
+}
+
+header h1, header h2 {
+  margin: 0; /* Remove default margin */
+  padding-left: 20px; /* Space between titles and logo */
+}
+
+header {
+  background-color: #378d20; /* Header background color */
+  color: white; /* Header text color */
+}
+
+#main {
+  padding: 20px;
+  background-color: #f8f9fa; /* Main section background */
+}
+
+h3 {
+  color: #a233d1; /* H3 color */
+}
+
+p {
+  margin-bottom: 15px;
+}
+
+#artists {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid layout */
+  gap: 20px;
+  padding: 20px;
+}
+
+article {
+  background-color: #220404; /* Article background */
+  padding: 20px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add subtle shadow */
+}
+
+.festival {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center items horizontally */
+  background-color: #1e0303; /* Festival section background */
+  padding: 30px;
+  margin-top: 30px;
+  border-radius: 26px; /* Rounded corners */
+}
+
+footer {
+  background-color: #343a40; /* Footer background */
+  color: #fff; /* Footer text color */
+  text-align: center; /* Center text */
+  padding: 20px;
+  margin-top: 20px;
+}
+
+footer h3 {
+  color: #f8f9fa;
+}
+
+footer ul {
+  list-style-type: none; /* Remove bullet points */
+  padding: 0;
+}
+
+footer li {
+  padding: 10px 0;
+}
+
+footer a {
+  color: lightblue; /* Link color in footer */
+}
+
+@media (max-width: 768px) {
+  body {
+    padding: 10px;
+  }
+
+  .header-content, .festival, footer {
+    padding: 15px;
+  }
+
+  h1, h2, h3 {
+    font-size: smaller; /* Reduce font size on small screens */
+  }
+}
+
+@media (min-width: 1200px) {
+  .header-content {
+    padding: 40px;
+  }
+
+  #logo img {
+    width: 150px; /* Larger logo on big screens */
+  }
+}
+
+@media (max-width: 480px) {
+  .header-content {
+    flex-direction: column; /* Stack header content vertically on small screens */
+    padding: 10px;
+  }
+
+  h1, h2, h3 {
+    font-size: 1.2rem; /* Smaller text on very small screens */
+  }
+
+  article {
+    padding: 15px; /* Less padding in articles on small screens */
+  }
 }