achtergrond

lisavanmansom · Jan 16, 2024 · 7c1efc0 · 7c1efc0
1 parent 0f5776d
commit 7c1efc0
Show file tree

Hide file tree

Showing 3 changed files with 200 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -46,22 +46,25 @@
 
         <div class="background-container-1">
             <div class="slice-1"></div>
-            <div class="triangle-1"></div>
             <div class="slice-2"></div>
+            <div class="triangle-1"></div>
+            <div class="slice-3"></div>
         </div>
 
         <article class="container-live-radio">
             <img width="100" src="https://bnr-external-prod.imgix.net/9b2d2e5429adef822cff98e82dcadc2924af4dfe.png?auto=format&ixlib=react-9.8.0" alt="podcastcover napleiten">
             <div class="container-live-text">
             <h1>Napleiten</h1>
             <p>10:00 - 11:00 uur</p>
-            <div class="live-buttons"><button>Luister live</button>
+            <div class="live-buttons"><button class="play-radio">Luister live</button>
             <button>Kijk live</button></div>
             <p>Misdaadjournalist Wouter Laumans en strafpleiter Christian Flokstra praten met advocaten en officieren van justitie over bijzondere zaken die hen altijd zullen bijblijven.</p>
         </div></article>
 
+        <!-- <button class="play-radio">Luister live<audio controls preload="auto" src="https://27823.live.streamtheworld.com/BNR_NIEUWSRADIO.mp3?dist=bnrweb"></audio></button> -->
+
         <div class="background-container-2">
-            <div class="slice-3"></div>
+            <div class="slice-4"></div>
         </div>
 
         <article class="container-promoquote-efficientlistening">
@@ -72,7 +75,7 @@ <h4>Luister efficiënt via</h4>
         </article>
 
         <div class="background-container-3">
-            <div class="slice-4"></div>
+            <div class="slice-5"></div>
         </div>
 
         <article class="container-promo-app">

diff --git a/script.js b/script.js
@@ -0,0 +1,28 @@
+// const playradio = document.getElementsByClassName("play-radio");
+// function playRadio() {
+//     let audio = new Audio ("https://27823.live.streamtheworld.com/BNR_NIEUWSRADIO.mp3?dist=bnrweb");
+//     audio.play()
+// }
+
+// playradio.addEventListener("click", () => {
+//     playRadio("test")
+// });
+
+
+
+
+
+    // 1. Selecteren van element via class
+    const playradio = document.getElementsByClassName('play-radio')
+    const audio = new Audio ("https://27823.live.streamtheworld.com/BNR_NIEUWSRADIO.mp3?dist=bnrweb");
+
+    // 2. Event
+
+    playradio.addEventListener('click', () => {
+        audio.play("test1");
+    });
+
+    playradio.onplay = () => {
+        console.log("test test");
+    };
+
diff --git a/styles/styles.css b/styles/styles.css
@@ -160,10 +160,7 @@ p {
     display: none;
 }
 
-/* main-content styling | background container 1 */
 
-
-
 /* main-content styling | container 1 */
 .container-live-radio {
     align-items: center;
@@ -218,7 +215,7 @@ p {
     display: flex;
     flex-direction: column;
     padding: 2em 0 2.7em 0;
-    margin: 1.6em 0 0 0;
+    margin: 2.6em 0 0 0;
     min-width: 15em;
 }
 
@@ -264,7 +261,7 @@ p {
 .container-promo-app {
     display: flex;
     flex-direction: column;
-
+    z-index: 5;
     background-color: var(--signal-colour);
 }
 
@@ -279,6 +276,7 @@ p {
     display: flex;
     padding: 0 0 0 1.87em;
     max-width: 17ch;
+    z-index: 10;
 }
 
 .container-promo-app p {
@@ -340,6 +338,63 @@ nav ul {
     padding: 0 0 1.4em 0;
 }
 
+/* background elements */
+.background-container-1 {
+    display: block;
+    width: 100%;
+    height: 700px;
+
+    margin: 0 auto;
+    overflow: hidden;
+
+    position: absolute;
+}
+
+.slice-1 { 
+    background-color: var(--signal-colour);
+    width: 280px;
+    height: 2500px;
+    z-index: -9;
+
+    transform: skew(9deg);
+    rotate: 90deg;
+
+    position: absolute; 
+    top: -1265px;
+}
+
+.slice-2 { 
+    background-color: var(--primair-80-97);
+    width: 260px;
+    height: 2500px;
+    z-index: -10;
+
+    transform: skew(-8deg);
+    rotate: 90deg;
+
+    position: absolute; 
+    top: -1425px;
+}
+
+.background-container-2 {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    margin: 0 auto;
+    overflow: hidden;
+    position: absolute;
+}
+
+.background-container-3{
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    margin: 0 auto;
+    overflow: hidden;
+    position: absolute;
+}
 
 /* mediaquery's */
 @media (min-width:600px) {
@@ -376,6 +431,7 @@ nav ul {
         display: flexbox;
         padding: 1.5em 0 .1em 0;
         font-size: 2.5em;
+        z-index: 10;
 }
 
     .container-promo-app h4 {
@@ -423,13 +479,14 @@ nav ul {
     /* container 3 */
     .container-promo-app p {
         max-width: 52ch;
+        z-index: 10;
 }
 }
 
 @media (min-width:800px) { 
         /* container 2 */
         .container-promoquote-efficientlistening {
-            padding: 3em 19em 3em 0;
+            padding: 3em 19em 6em 0;
             align-items: center;
             justify-content: center;
             display: flex;
@@ -449,6 +506,57 @@ nav ul {
     .container-promoquote-efficientlistening a {
         margin: 0 0 0 48.8em;
 }
+
+.container-promo-app {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    padding: 0 0 3em 0;
+}
+
+
+/* achtergrond elementen */
+.slice-3 { 
+    background-color: var(--primair-80);
+    width: 68px;
+    height: 2700px;
+    z-index: -10;
+
+    transform: skew(2deg);
+    rotate: 90deg;
+
+    position: absolute; 
+    top: -815px;
+}
+
+
+.slice-4 { 
+    background-color: var(--primair-30-20);
+    width: 140px;
+    height: 2700px;
+
+    transform: skew(-3deg);
+    rotate: 90deg;
+    z-index: 2;
+
+    position: absolute; 
+    top: -975px;
+}
+
+.slice-5 { 
+    background-color: var(--signal-colour);
+    width: 150px;
+    height: 2700px;
+    z-index: 2;
+
+    transform: skew(2deg);
+    rotate: 90deg;
+
+    position: absolute; 
+    top: -1225px;
+}
+
+
 }
 
 @media (min-width:850px) {
@@ -498,7 +606,7 @@ nav ul {
         display: flex;
         flex-direction: row;
         gap: 3.5em;
-        margin: 4em 0 4em 0;
+        margin: 4em 0 9em 0;
     }
 
     .container-live-text {
@@ -512,10 +620,12 @@ nav ul {
 
     .container-live-radio h1 {
         font-size: 2.2em;
+        max-width: 75ch;
     }
 
     .container-live-text p:nth-of-type(1) {
         font-size: 1.3em;
+        max-width: 75ch;
     }
     .container-live-text p:nth-of-type(2) {
         display: flexbox;
@@ -530,7 +640,8 @@ nav ul {
         justify-content: center;
         display: flex;
         flex-direction: column;
-        padding: 3em 19em 3em 0;
+        padding: 3em 19em 9em 0;
+        margin: 6.6em 0 0 0;
     }
 
     .container-promoquote-efficientlistening h2 {
@@ -542,6 +653,7 @@ nav ul {
     .container-promoquote-efficientlistening h4 {
         padding: 1em 12.5em 0 0;
         font-size: 1.6em;
+        max-width: 75ch;
 }
 
     .container-promoquote-efficientlistening p {
@@ -562,12 +674,14 @@ nav ul {
         align-items: center;
         justify-content: center;
         display: flex;
+        padding: 5.5em 0 1em 0;
 }
 
     .container-promo-app h2 {
         display: flexbox;
         padding: 1.5em 0 .1em 0;
         font-size: 2.5em;
+        z-index: 10;
 }
 
     .container-promo-app h4 {
@@ -581,4 +695,46 @@ nav ul {
         max-width: 67ch;
         text-align: justify-all;
 }
-}
+
+
+
+.slice-3 { 
+    background-color: var(--primair-80);
+    width: 68px;
+    height: 2700px;
+    z-index: -10;
+
+    transform: skew(2deg);
+    rotate: 90deg;
+
+    position: absolute; 
+    top: -855px;
+}
+
+.slice-4 { 
+    background-color: var(--primair-30-20);
+    width: 240px;
+    height: 2700px;
+
+    transform: skew(-3deg);
+    rotate: 90deg;
+    z-index: 2;
+
+    position: absolute; 
+    top: -855px;
+}
+
+.slice-5 { 
+    background-color: var(--signal-colour);
+    width: 150px;
+    height: 2700px;
+    z-index: 2;
+
+    transform: skew(2deg);
+    rotate: 90deg;
+
+    position: absolute; 
+    top: -1175px;
+}
+}
+