slices laptop klaar?

lisavanmansom · Jan 20, 2024 · 89c29bb · 89c29bb
1 parent 456d639
commit 89c29bb
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -51,7 +51,7 @@
             <div class="slice-3"></div>
         </div>
 
-        <article class="container-live-radio">
+        <section 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>
@@ -85,26 +85,23 @@ <h1>Napleiten</h1>
                   <span>Kijk live</span></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></section>
 
         <div class="background-container-2">
-            <div class="slice-4"></div>
-        </div>
+          <div class="slice-4"></div>
+          <div class="slice-5"></div>
+          <div class="slice-6"></div>
+      </div>
 
-        <article class="container-promoquote-efficientlistening">
+        <section class="container-promoquote-efficientlistening">
             <h2>Voor mensen die wel wat beters te doen hebben.</h2>
             <h4>Luister efficiënt via</h4>
             <p>FM | DAB+ | Online | App | Podast | BNR.NL</p>
             <a href="https://www.bnr.nl/programmagids">Bekijk programmagids</a>
-        </article>
+        </section>
 
-        <div class="background-container-3">
-            <div class="slice-5"></div>
-        </div>
 
-        <article class="container-promo-app">
+        <section class="container-promo-app">
             <h2>Blijf scherp.</h2>
             <h4>Download nu de gratis app</h4>
             <p>Meteen op de hoogte van het belangrijkste zakelijke,financiële en economische nieuws. Download nu de gratis BNR app en luister nog makkelijker live-radio en podcasts. Wil je liever lezen? Dat kan ook. Altijd en overal.</p>
@@ -163,7 +160,7 @@ <h4>Download nu de gratis app</h4>
                 <li><a href="https://play.google.com/store/apps/details?id=nl.fd.bnr&hl=nl">
                     <xml version="1.0" encoding="UTF-8"?><svg id="artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 40"><defs><style>.cls-1{fill:#fbbc04;}.cls-2{fill:#ea4335;}.cls-3,.cls-4{fill:#fff;}.cls-5{fill:#a6a6a6;}.cls-6{fill:#4285f4;}.cls-7{fill:#34a853;}.cls-4{stroke:#fff;stroke-miterlimit:10;stroke-width:.2px;}</style></defs><rect width="35" height="40" rx="5" ry="5"/><path class="cls-5" d="m130,.8c2.32,0,4.2,1.88,4.2,4.2v30c0,2.32-1.88,4.2-4.2,4.2H5c-2.32,0-4.2-1.88-4.2-4.2V5C.8,2.68,2.68.8,5,.8h125M130,0H5C2.25,0,0,2.25,0,5v30c0,2.75,2.25,5,5,5h125c2.75,0,5-2.25,5-5V5C135,2.25,132.75,0,130,0h0Z"/><path class="cls-4" d="m47.52,10c0,.89-.3,1.63-.89,2.23-.6.6-1.33.9-2.2.9s-1.6-.3-2.2-.9c-.59-.6-.89-1.34-.89-2.23s.3-1.63.89-2.23c.59-.6,1.32-.91,2.2-.91s1.6.3,2.2.91c.59.6.89,1.34.89,2.22Zm-5.38,0c0,.69.22,1.27.65,1.72.44.45.99.68,1.64.68s1.2-.23,1.63-.68c.44-.45.66-1.02.66-1.72s-.22-1.27-.66-1.72c-.44-.45-.98-.68-1.63-.68s-1.2.23-1.64.68c-.44.45-.65,1.03-.65,1.72Z"/><path class="cls-4" d="m49.37,13h-.77v-6h.94l2.92,4.67h.03l-.03-1.16v-3.51h.77v6h-.8l-3.05-4.89h-.03l.03,1.16v3.74Z"/><path class="cls-4" d="m56.64,7.74v5.26h-.77v-5.26h-1.68v-.74h4.12v.74h-1.68Z"/><path class="cls-4" d="m59.29,13v-6h1.83c.92,0,1.65.28,2.21.83s.83,1.28.83,2.17-.28,1.62-.83,2.17c-.56.55-1.29.83-2.21.83h-1.83Zm.77-5.26v4.53h1.06c.7,0,1.25-.2,1.65-.6.4-.4.6-.95.6-1.66s-.2-1.26-.6-1.66c-.4-.4-.95-.6-1.65-.6h-1.06Z"/><path class="cls-4" d="m68.75,7v.74h-2.73v1.9h2.46v.72h-2.46v1.9h2.73v.74h-3.5v-6h3.5Z"/><path class="cls-4" d="m73.4,7h1v.03l-2.23,2.57,2.38,3.36v.03h-.95l-1.95-2.8-.92,1.06v1.73h-.77v-6h.77v3.09h.03l2.64-3.09Z"/><path class="cls-4" d="m78.12,13h-.77v-6h.77v2.57h3v-2.57h.77v6h-.77v-2.71h-3v2.71Z"/><path class="cls-4" d="m86.77,7v.74h-2.73v1.9h2.46v.72h-2.46v1.9h2.73v.74h-3.5v-6h3.5Z"/><path class="cls-4" d="m90.02,7.74v5.26h-.77v-5.26h-1.68v-.74h4.12v.74h-1.68Z"/><path class="cls-4" d="m100.39,10c0,.89-.3,1.63-.89,2.23-.6.6-1.33.9-2.2.9s-1.6-.3-2.2-.9c-.59-.6-.89-1.34-.89-2.23s.3-1.63.89-2.23c.59-.6,1.32-.91,2.2-.91s1.6.3,2.2.91c.59.6.89,1.34.89,2.22Zm-5.38,0c0,.69.22,1.27.65,1.72.44.45.99.68,1.64.68s1.2-.23,1.63-.68c.44-.45.66-1.02.66-1.72s-.22-1.27-.66-1.72c-.44-.45-.98-.68-1.63-.68s-1.2.23-1.64.68c-.44.45-.65,1.03-.65,1.72Z"/><path class="cls-4" d="m102.24,10.57v2.43h-.77v-6h2.04c.52,0,.96.17,1.32.52.37.35.55.77.55,1.27s-.18.93-.55,1.27c-.36.34-.8.51-1.32.51h-1.27Zm0-2.83v2.09h1.29c.31,0,.56-.1.76-.31.21-.21.31-.45.31-.74s-.1-.52-.31-.73c-.2-.21-.46-.32-.76-.32h-1.29Z"/><path class="cls-3" d="m68.14,21.75c-2.35,0-4.27,1.79-4.27,4.25s1.92,4.25,4.27,4.25,4.27-1.8,4.27-4.25-1.92-4.25-4.27-4.25Zm0,6.83c-1.29,0-2.4-1.06-2.4-2.58s1.11-2.58,2.4-2.58,2.4,1.05,2.4,2.58-1.11,2.58-2.4,2.58Zm-9.31-6.83c-2.35,0-4.27,1.79-4.27,4.25s1.92,4.25,4.27,4.25,4.27-1.8,4.27-4.25-1.92-4.25-4.27-4.25Zm0,6.83c-1.29,0-2.4-1.06-2.4-2.58s1.11-2.58,2.4-2.58,2.4,1.05,2.4,2.58-1.11,2.58-2.4,2.58Zm-11.08-5.53v1.8h4.32c-.13,1.01-.47,1.76-.98,2.27-.63.63-1.61,1.32-3.33,1.32-2.66,0-4.74-2.14-4.74-4.8s2.08-4.8,4.74-4.8c1.43,0,2.48.56,3.25,1.29l1.27-1.27c-1.08-1.03-2.51-1.82-4.53-1.82-3.64,0-6.7,2.96-6.7,6.61s3.06,6.61,6.7,6.61c1.97,0,3.45-.64,4.61-1.85,1.19-1.19,1.56-2.87,1.56-4.22,0-.42-.03-.81-.1-1.13h-6.07Zm45.31,1.4c-.35-.95-1.43-2.71-3.64-2.71s-4.01,1.72-4.01,4.25c0,2.38,1.8,4.25,4.22,4.25,1.95,0,3.08-1.19,3.54-1.88l-1.45-.97c-.48.71-1.14,1.18-2.09,1.18s-1.63-.43-2.06-1.29l5.69-2.35-.19-.48Zm-5.8,1.42c-.05-1.64,1.27-2.48,2.22-2.48.74,0,1.37.37,1.58.9l-3.8,1.58Zm-4.62,4.12h1.87v-12.5h-1.87v12.5Zm-3.06-7.3h-.06c-.42-.5-1.22-.95-2.24-.95-2.13,0-4.08,1.87-4.08,4.27s1.95,4.24,4.08,4.24c1.01,0,1.82-.45,2.24-.97h.06v.61c0,1.63-.87,2.5-2.27,2.5-1.14,0-1.85-.82-2.14-1.51l-1.63.68c.47,1.13,1.71,2.51,3.77,2.51,2.19,0,4.04-1.29,4.04-4.43v-7.64h-1.77v.69Zm-2.14,5.88c-1.29,0-2.37-1.08-2.37-2.56s1.08-2.59,2.37-2.59,2.27,1.1,2.27,2.59-1,2.56-2.27,2.56Zm24.38-11.08h-4.47v12.5h1.87v-4.74h2.61c2.07,0,4.1-1.5,4.1-3.88s-2.03-3.88-4.1-3.88Zm.05,6.03h-2.65v-4.29h2.65c1.4,0,2.19,1.16,2.19,2.14s-.79,2.14-2.19,2.14Zm11.53-1.8c-1.35,0-2.75.6-3.33,1.91l1.66.69c.35-.69,1.01-.92,1.7-.92.96,0,1.95.58,1.96,1.61v.13c-.34-.19-1.06-.48-1.95-.48-1.79,0-3.6.98-3.6,2.81,0,1.67,1.46,2.75,3.1,2.75,1.25,0,1.95-.56,2.38-1.22h.06v.96h1.8v-4.79c0-2.22-1.66-3.46-3.8-3.46Zm-.23,6.85c-.61,0-1.46-.31-1.46-1.06,0-.96,1.06-1.33,1.98-1.33.82,0,1.21.18,1.7.42-.14,1.16-1.14,1.98-2.22,1.98Zm10.58-6.58l-2.14,5.42h-.06l-2.22-5.42h-2.01l3.33,7.58-1.9,4.21h1.95l5.13-11.79h-2.07Zm-16.81,8h1.87v-12.5h-1.87v12.5Z"/><path class="cls-2" d="m20.72,19.42l-10.65,11.3s0,0,0,0c.33,1.23,1.45,2.13,2.78,2.13.53,0,1.03-.14,1.46-.4l.03-.02,11.98-6.91-5.61-6.11Z"/><path class="cls-1" d="m31.49,17.5h-.01s-5.17-3.01-5.17-3.01l-5.83,5.19,5.85,5.85,5.15-2.97c.9-.49,1.51-1.44,1.51-2.53s-.6-2.04-1.5-2.52Z"/><path class="cls-6" d="m10.07,9.28c-.06.24-.1.48-.1.74v19.97c0,.26.03.5.1.74l11.01-11.01-11.01-10.44Z"/><path class="cls-7" d="m20.8,20l5.51-5.51-11.97-6.94c-.43-.26-.94-.41-1.49-.41-1.33,0-2.45.91-2.78,2.13,0,0,0,0,0,0l10.73,10.72Z"/></svg></a></li>
             </ul>
-        </article>
+        </section>
 
     </main>
 

diff --git a/styles/styles.css b/styles/styles.css
@@ -30,10 +30,10 @@
  --primair-80: #1F1F1F;
  --primair-80-97: #262520;
  --primair-70: #3a3a3a;
- --primair-50: #777777;
  --primair-40-50: #d6d0c9;
  --primair-30: #D7D2CB;
  --primair-30-40: #E9E6E3;
+ --primair-30-30: #f4f2f0;
  --primair-30-20: #F2F1F0;
  --primair-0: #fff;
 
@@ -229,7 +229,7 @@ audio {
     position: absolute;
     top: 1.1em;
     left: 3.8em;
-    background-color: var(--primair-0);
+    background-color: var(--primair-30-20);
     z-index: 10;
 }
 
@@ -264,18 +264,12 @@ audio {
     transition: 0.4s ease;
 }
 
-/* .play-radio:hover {
-    background-color: var(--primair-30-20);
-    transition: 0.4s ease;
-} */
-
 .background:hover {
     background-color: var(--primair-30-20);
     transition: 0.4s ease;
     }
 
 
-
 .watch-radio:hover {
     background-color: var(--primair-30-20);
     transition: 0.4s ease;
@@ -346,7 +340,7 @@ audio {
     display: flex;
     flex-direction: column;
     z-index: 5;
-    background-color: var(--signal-colour);
+    background-color: var(--primair-30-20);
 }
 
 .container-promo-app h2 {
@@ -730,13 +724,13 @@ nav ul {
         align-items: center;
         justify-content: center;
         display: flex;
-        padding: 5.5em 0 1em 0;
+        padding: 8.5em 0 1em 0;
 }
 
     .container-promo-app h2 {
         display: flexbox;
-        padding: 1.5em 0 .1em 0;
-        font-size: 2.5em;
+        padding: 1.5em 0 0 0;
+        font-size: 3em;
         z-index: 10;
 }
 
@@ -747,9 +741,10 @@ nav ul {
 }
 
     .container-promo-app p {
-        padding: 0 2.5em 2.5em 2.5em;
-        max-width: 67ch;
-        text-align: justify-all;
+        padding: 0.5em 2.5em 1.5em 2.5em;
+        max-width: 60ch;
+        font-size: 1.4em;
+        text-align: justify;
 }
 
 
@@ -793,5 +788,46 @@ nav ul {
     border-bottom: 69px solid transparent;
     border-right: 1792px solid var(--primair-40-50);
 }
+
+.slice-4 { 
+    background-color: var(--primair-30);
+    width: 250px;
+    height: 3200px;
+
+    transform: skew(3deg);
+    rotate: 90deg;
+    z-index: 2;
+
+    position: absolute;
+    top: -942px;
+}
+
+.slice-5 { 
+    width: 0;
+    height: 0;
+
+    position: absolute;
+    top: 596px;
+    left: -23px;
+    z-index: 7;
+    rotate: -177deg;
+
+    border-top: 200px solid transparent;
+    border-bottom: 68px solid transparent;
+    border-right: 1792px solid var(--primair-30-40);
+}
+
+.slice-6 { 
+    background-color: var(--primair-30-30);
+    width: 250px;
+    height: 3200px;
+
+    transform: skew(3deg);
+    rotate: 90deg;
+    z-index: 9;
+
+    position: absolute;
+    top: -742px;
+}
 }