Technigo · ElinaEH · Aug 23, 2024 · Aug 23, 2024 · Aug 25, 2024 · Aug 25, 2024
diff --git a/README.md b/README.md
@@ -1,12 +1,10 @@
 # News Site
 
-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.
+The assignment was to create a news site.I've created a news website about a music production software creating music synthesizer plug-ins and named it "Magic Synth".
 
 ## The problem
 
-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?
+When I approached problems I used a combination of methods to try to solve them. I went through the material on disco, used google, chatgpt and the inspector. After many trials and errors I kept moving forward. I tried to do a sketch by pen and paper first but for me it was easier to get the hang of it by going startight into coding. With the new knowledge I have now I think it would be great to plan before I start to code next time. If I had more time I would develop the website more and change some styling elements.
 
 ## 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.
+https://66c918deb3f6bc35c72f6e91--effulgent-empanada-6d5956.netlify.app/
diff --git a/code/assets/headphones.jpg b/code/assets/headphones.jpg
diff --git a/code/assets/monitors.jpg b/code/assets/monitors.jpg
diff --git a/code/assets/soundwave.jpg b/code/assets/soundwave.jpg
diff --git a/code/assets/synth.jpeg b/code/assets/synth.jpeg
diff --git a/code/assets/synth2.jpg b/code/assets/synth2.jpg
diff --git a/code/assets/synthlogo.jpg b/code/assets/synthlogo.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,23 +1,110 @@
 <!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">
+
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Change the title below -->
+  <title>News Site</title>
+  <link rel="stylesheet" href="./style.css" />
+  <!-- dont forget the meta tag for responsiveness -->
+</head>
+
+<body>
+  <header class="header-grid-container ">
+    <div>
+      <h1 id="title">SYNTH MAGIC <img class="synthlogo" src="./assets/synthlogo.jpg" alt="logo"></h1>
+    </div>
+
+    <div class="links-column">
+      <a id="links" href="https://google.com">ABOUT</a>
+      <a id="links" href="https://google.com">LOG IN</a>
+      <a id="links" href="https://google.com">SIGN UP</a>
+      <a id="links" href="https://google.com">CONTACT</a>
+    </div>
+    <!-- Some kind of logo and navbar -->
+  </header>
+
+  <section class="synth-main-article-grid-container">
+    <div>
+      <img class="img" src="./assets/synth.jpeg" alt="synth">
       <!-- The big news content -->
-    </section>
+    </div>
+
+    <div class="main-article-second-column">
+      <!-- MAIN ARTICLE ABOUT NEW PLUG-IN HERE! -->
+      <h3> Synth Magic Hits the Market with New Plug-In "Synth Wizard": A Game-Changer for Music Producers</h3>
+      <p>Synth Magic has just launched Sonic Wizard, a powerful new synthesizer plug-in designed for music producers.
+        Combining analog warmth with digital precision, it features a hybrid synthesis engine that blends subtractive,
+        FM,
+        wavetable, and granular methods. With an intuitive interface, extensive preset library, and advanced modulation
+        capabilities, Sonic Wizard is ideal for both studio production and live performances. Available now on Synth
+        Magic’s website, this plug-in is quickly becoming a must-have for anyone looking to elevate their sound. Music
+        producers around the world are already hailing Sonic Wizard as a must-have tool in their arsenal, praising its
+        rich sound quality, deep functionality, and user-friendly design. As the music production landscape continues to
+        evolve, Sonic Wizard is set to become a cornerstone in the creation of tomorrow's hits.</p>
+      <br>
+      <br>
+      <div>
+        <a href="https://www.google.com">
+          <button class="button" type="button">Download your free trial here</button>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <section class="synth-articles-grid-container">
+    <div id="article1" class="flex-column">
+      <!-- ARTICLE 1 -->
+      <h5>Unlocking the Power of Music Synthesizers</h5>
+      <img class="synth2" src="assets/synth2.jpg" alt="synth">
+      <p>Music synthesizers are versatile instruments that generate
+        sound electronically, allowing musicians to create a vast range of tones. By using oscillators to produce basic
+        waveforms—like sine and square waves—synthesizers can mimic real instruments or craft entirely new sounds.
+        Filters, envelopes, and modulators further shape these waveforms, offering endless creative possibilities.
+        Whether you're into pop, electronic music, or sound design, synthesizers are essential tools for transforming
+        imagination
+        into music.</p>
+    </div>
+
+    <div id="article2" class="flex-column">
+      <!-- ARTICLE 2 -->
+      <h5>Digital Synth Plugins vs. Analog Synths</h5>
+      <img class="monitors" src="assets/monitors.jpg" alt="monitors">
+      <p>In the evolving world of music production, digital synth plugins are increasingly favored over analog synths.
+        Producers are drawn to their cost-effectiveness, offering a vast array of sounds at a fraction of the price.
+        Digital synths also provide convenience, with easy integration into digital audio workstations (DAWs) and the
+        flexibility to recall presets instantly. While analog synths are praised for their warm, organic tones, digital
+        plugins have made significant strides in emulating these characteristics.</p>
+    </div>
+
+    <div id="article3" class="flex-column">
+      <!-- ARTICLE 3 -->
+      <h5>Fitting Synths into Your Mix: Tips for Producers</h5>
+      <img class="soundwave" src="assets/soundwave.jpg" alt="soundwave">
+      <p>Integrating synths into a mix can be challenging, but a few
+        key techniques can help. Start by carving out space
+        in the frequency spectrum—use EQ to cut frequencies that clash with other instruments. Layering synths with
+        complementary sounds adds depth without overcrowding. Applying sidechain compression with kick drums can create
+        rhythmic breathing space, making the mix feel more dynamic. Finally, use panning to separate synths from other
+        elements, ensuring clarity.</p>
+    </div>
+
+    <div id="article4" class="flex-column">
+      <!-- ARTICLE 4, ordered list here-->
+      <h5>Top 5 Tips to Become the Best Music Producer</h5>
+      <img class="headphones" src="assets/headphones.jpg" alt="headphones">
+      <ol class="list">
+        <li>Master Your DAW</li>
+        <li>Develop Your Ear</li>
+        <li>Experiment with Sound Design</li>
+        <li>Learn Music Theory</li>
+        <li>Collaborate and Network</li>
+      </ol>
+    </div>
+  </section>
+  <footer>Copyright © 2024 Elina Eriksson Hult</footer>
+</body>
 
-    <section class="">
-      <!-- The other news  -->
-    </section>
-  </body>
-</html>
+</html>
diff --git a/code/style.css b/code/style.css
@@ -1,4 +1,198 @@
 html {
-  background: #0025ff;
-  color: #fff;
+  background: white;
 }
+
+
+#title {
+  color: black;
+  font-weight: 900;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 30px;
+  padding: 10px 5px 10px 5px;
+}
+
+.synthlogo {
+  width: 100px;
+  height: 40px;
+}
+
+.header-grid-container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  align-items: center;
+  border-bottom: solid 1px;
+  margin-bottom: 5px;
+}
+
+.links-column {
+  justify-self: right;
+}
+
+#links {
+  color: black;
+  font-weight: 200;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 15px;
+  padding: 10px 5px 10px 5px;
+  text-decoration: none;
+}
+
+.synth-main-article-grid-container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 10px;
+}
+
+.main-article-second-column {
+  font-size: 20px;
+  text-align: center;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 8px 8px 8px 8px;
+}
+
+.button {
+  border-color: black;
+  background-color: black;
+  color: white;
+  height: 40px;
+  width: 130px;
+  border-radius: 10px;
+}
+
+.synth-articles-grid-container {
+  display: grid;
+  grid-template-columns: 25% 25% 25% 25%;
+  gap: 10px;
+}
+
+.img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+#article1 {
+  background-color: white;
+  font-size: 14px;
+  text-align: center;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 8px 8px 8px 8px;
+  border-radius: 10px;
+}
+
+h5 {
+  font-size: 16px;
+}
+
+.synth2 {
+  width: 150px;
+  height: 150px;
+  margin: auto;
+  border-radius: 10px;
+}
+
+#article2 {
+  background-color: white;
+  font-size: 14px;
+  text-align: center;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 8px 8px 8px 8px;
+  border-radius: 10px;
+}
+
+.monitors {
+  width: 150px;
+  height: 150px;
+  margin: auto;
+  border-radius: 10px;
+}
+
+#article3 {
+  background-color: white;
+  font-size: 14px;
+  text-align: center;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 8px 8px 8px 8px;
+  border-radius: 10px;
+}
+
+.soundwave {
+  width: 150px;
+  height: 150px;
+  margin: auto;
+  border-radius: 10px;
+
+}
+
+#article4 {
+  background-color: white;
+  font-size: 14px;
+  text-align: center;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 8px 8px 8px 8px;
+  border-radius: 10px;
+}
+
+.list {
+  list-style-position: inside;
+  margin: 0 auto;
+  padding: 0;
+  text-align: 0;
+}
+
+.headphones {
+  width: 150px;
+  height: 150px;
+  margin: auto;
+  padding-bottom: 100px;
+}
+
+.flex-column {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+}
+
+footer {
+  color: black;
+  text-align: center;
+  font-size: 14px;
+  text-align: center;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 16px 16px 16px 16px;
+}
+
+/*mobile, 1 column*/
+@media only screen and (min-width: 320px) and (max-width: 767px) {
+
+  .header-grid-container,
+  .synth-main-article-grid-container,
+  .synth-articles-grid-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/*tablet, 2 columns*/
+@media only screen and (min-width: 768px) and (max-width: 1023px) {
+
+  .header-grid-container,
+  .synth-main-article-grid-container,
+  .synth-articles-grid-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/*desktop, 4 columns*/
+@media only screen and (min-width: 1024px) {
+
+  .header-grid-container,
+  .synth-main-article-grid-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .synth-articles-grid-container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}