Added feedback

public/assets/toggle/Artboard 1 copy 2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.35 40.34"><defs><style>.cls-1{fill:#2e142c;}.cls-2{fill:#e94541;}.cls-3{fill:#a3203d;}</style></defs><path class="cls-3" d="M13.74,39.59c-5.05,0-8.71-1.48-10.85-4.39-3.73-5.07-1.48-12.54-1.38-12.85.1-.31.39-.53.72-.53.01,0,.02,0,.04,0,.34.02.63.26.7.6.12.57.39,1.48.79,2.25-.17-2.61.18-7.08,3.46-11.58.14-.2.37-.31.61-.31.07,0,.14,0,.21.03.3.09.52.35.54.67.11,1.4.54,2.67.83,2.78,0,0,.22-.03.69-.58,2.13-2.57,2.75-8.71,1.41-14-.08-.32.06-.65.34-.83.12-.07.25-.11.39-.11.18,0,.36.06.5.19,7.04,6.27,7.66,12.19,7.92,14.72,0,.08.02.16.02.24.33-.69.45-1.9.39-2.8-.02-.35.2-.67.54-.77.07-.02.14-.03.21-.03.27,0,.52.14.66.39,2.04,3.7,2,7.25,1.53,9.74.27-.84.33-1.56.33-1.58.03-.36.31-.65.67-.69.03,0,.05,0,.08,0,.33,0,.63.22.72.54.11.37,2.57,9.04-1.57,14.57-2.16,2.88-5.68,4.33-10.47,4.33Z"/><path class="cls-1" d="M12.22,1.5c9.25,8.23,7.04,15.64,8.09,15.64.03,0,.05,0,.08-.01,1.63-.49,1.4-4.08,1.4-4.08,3.57,6.47.38,12.53.38,12.53,2.59-.75,2.88-4.67,2.88-4.67,0,0,5.24,17.94-11.32,17.94S2.22,22.58,2.22,22.58c0,0,.76,3.71,2.59,4.21,0,0-1.83-6.62,3-13.25,0,0,.26,3.48,1.57,3.48.35,0,.77-.24,1.28-.85,2.44-2.93,2.86-9.53,1.56-14.66M12.22,0c-.27,0-.54.07-.78.22-.56.34-.84,1.01-.68,1.65,1.24,4.9.72,10.76-1.16,13.21-.14-.46-.25-1.09-.3-1.65-.05-.63-.48-1.16-1.09-1.33-.14-.04-.27-.06-.41-.06-.47,0-.93.22-1.21.62-2.25,3.09-3.17,6.18-3.49,8.71-.23-.17-.51-.27-.81-.29-.03,0-.05,0-.08,0-.65,0-1.24.43-1.43,1.06-.1.33-2.46,8.15,1.49,13.52,2.29,3.11,6.15,4.69,11.45,4.69s8.76-1.56,11.07-4.63c4.37-5.82,1.8-14.85,1.69-15.23-.19-.65-.78-1.08-1.44-1.08-.02,0-.04,0-.06,0-.03-2.13-.5-4.57-1.88-7.09-.27-.49-.78-.78-1.31-.78-.14,0-.28.02-.42.06-.23.07-.44.19-.61.35-.8-3.07-2.69-7.25-7.55-11.57-.28-.25-.64-.38-1-.38h0Z"/><path class="cls-2" d="M12.93,18.87c4.85,4.31,3.54,8.19,4.18,8,.84-.25.72-2.09.72-2.09,1.83,3.31.2,6.41.2,6.41,1.33-.38,1.47-2.39,1.47-2.39,0,0,2.68,9.18-5.79,9.18s-5.89-8.32-5.89-8.32c0,0,.39,1.9,1.32,2.15,0,0-.94-3.39,1.53-6.78,0,0,.21,2.84,1.46,1.34s1.47-4.88.8-7.5Z"/></svg>

public/assets/toggle/Artboard 10.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.76 9.76"><defs><style>.cls-1{fill:#e41f1a;}.cls-2{fill:#a61916;}</style></defs><circle class="cls-1" cx="4.88" cy="4.88" r="4.88"/><path class="cls-2" d="M8.34,1.44c.2,2.89-1.56,5.95-5.3,5.95-1.05,0-1.94-.25-2.68-.66.73,1.78,2.47,3.03,4.51,3.03,2.7,0,4.88-2.18,4.88-4.88,0-1.34-.54-2.56-1.42-3.44Z"/></svg>

public/assets/toggle/Artboard 11.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 35.79 11.54"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f0d6b8;}.cls-3{fill:#e41f1a;}.cls-4{fill:#a61916;}.cls-5{fill:#e1bd88;}.cls-6{clip-path:url(#clippath);}</style><clipPath id="clippath"><rect class="cls-1" x="1.08" y="-6.78" width="58.11" height="24.74" rx="12" ry="12"/></clipPath></defs><g class="cls-6"><rect class="cls-2" x="-36.56" y="3.72" width="48.56" height="4.96"/><path class="cls-5" d="M9.57,6.59c-4,.26-8.03.05-12.04.06-3.88,0-7.77.03-11.65.02-7.5-.03-15.01.21-22.43-.9v2.91H12.01v-2.62c-.78.29-1.61.47-2.44.53Z"/></g><path class="cls-3" d="M30.14.71c-1.73,0-3.24.91-4.11,2.27-.01.01-.02.02-.03.04-.97,1.19-2.13,1.06-3.27.41-.18-.15-.38-.27-.59-.38,0,0,0,0-.01,0,0,0,0,0,0,0-3.32-1.7-10.11.69-10.11.69v4.96s6.8,2.32,10.12.62h0s.01,0,.02-.01c.07-.03.13-.07.19-.11.65-.34,2.32-2.37,4.93.35.07.07.16.12.24.17.03.02.05.04.08.06.24.18.43.28.6.31.59.26,1.25.41,1.94.41,2.7,0,4.88-2.19,4.88-4.88s-2.19-4.88-4.88-4.88Z"/><path class="cls-4" d="M34.95,4.93c-.83,1.48-2.35,2.56-4.57,2.56-1.42,0-2.56-.44-3.41-1.15-.09-.04-.18-.07-.26-.11-.12-.06-.2-.11-.27-.15-.31-.1-.63-.19-.95-.27-.15-.04-1.17-.18-1.48-.24-.45.21-.93.35-1.42.43-.9.64-1.88,1.13-3.07,1.37-1.9.38-3.75.24-5.66.21-.67,0-1.28-.15-1.86-.36v1.47s6.8,2.32,10.12.62h0s.01,0,.02-.01c.07-.03.13-.07.19-.11.65-.34,2.32-2.37,4.93.35.07.07.16.12.24.17.03.02.05.04.08.06.24.18.43.28.6.31.59.26,1.25.41,1.94.41,2.7,0,4.88-2.19,4.88-4.88,0-.23-.04-.45-.07-.67Z"/></svg>

public/assets/toggle/Artboard 23.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.27 26.9"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><path class="cls-1" d="M47.19,26.9H13.08C5.87,26.9,0,21.03,0,13.82v-.74C0,5.87,5.87,0,13.08,0h34.11c7.21,0,13.08,5.87,13.08,13.08v.74c0,7.21-5.87,13.08-13.08,13.08ZM13.08,2.16C7.06,2.16,2.16,7.06,2.16,13.08v.74c0,6.02,4.9,10.92,10.92,10.92h34.11c6.02,0,10.92-4.9,10.92-10.92v-.74c0-6.02-4.9-10.92-10.92-10.92H13.08Z"/></svg>

public/assets/toggle/Artboard 24.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.27 26.9"><defs><style>.cls-1{fill:#ee7262;}</style></defs><path class="cls-1" d="M47.19,26.9H13.08C5.87,26.9,0,21.03,0,13.82v-.74C0,5.87,5.87,0,13.08,0h34.11c7.21,0,13.08,5.87,13.08,13.08v.74c0,7.21-5.87,13.08-13.08,13.08ZM13.08,2.16C7.06,2.16,2.16,7.06,2.16,13.08v.74c0,6.02,4.9,10.92,10.92,10.92h34.11c6.02,0,10.92-4.9,10.92-10.92v-.74c0-6.02-4.9-10.92-10.92-10.92H13.08Z"/></svg>

public/assets/toggle/Artboard 6.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.34 36.47"><defs><style>.cls-1{fill:#2e142c;}.cls-2{fill:#e94541;}.cls-3{fill:#a3203d;}</style></defs><path class="cls-3" d="M18.59,13.73c-1.55-3.95-4.2-6.69-9.83-12.98,1.3,5.13-.88,11.29-3,14.45-13.8,20.51,5.29,20.4,5.29,20.4,0,0,17.33,3.03,7.55-21.87Z"/><path class="cls-1" d="M12.73,36.47c-.88,0-1.53-.09-1.74-.12-.79,0-7.55-.2-10.07-4.9-2.06-3.83-.64-9.44,4.22-16.66,1.87-2.78,4.19-8.77,2.9-13.85-.08-.33.07-.68.37-.85.31-.16.68-.1.91.16l1.35,1.51c4.76,5.3,7.15,7.96,8.62,11.7h0c3.71,9.44,4.03,16.12.97,19.88-2.18,2.67-5.49,3.14-7.53,3.14ZM11.04,34.85s.09,0,.13.01c.05,0,5.21.85,7.93-2.48,2.65-3.26,2.24-9.61-1.21-18.37-1.34-3.41-3.59-5.96-8.02-10.89.29,4.88-1.77,9.96-3.49,12.51C1.86,22.34.46,27.43,2.23,30.73c2.18,4.08,8.68,4.12,8.81,4.12h0Z"/><path class="cls-2" d="M14.82,23.89c-.76-1.94-2.06-3.29-4.83-6.38.64,2.52-.43,5.55-1.48,7.1-6.78,10.08,2.6,10.02,2.6,10.02,0,0,8.52,1.49,3.71-10.75Z"/></svg>

public/assets/toggle/Artboard 7.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.32 31.41"><defs><style>.cls-1{fill:#2e142c;}.cls-2{fill:#e94541;}.cls-3{fill:#a3203d;}</style></defs><path class="cls-3" d="M16.01,11.85c-1.33-3.38-3.59-5.72-8.41-11.1,1.11,4.39-.75,9.66-2.57,12.36-11.8,17.55,4.52,17.45,4.52,17.45,0,0,14.82,2.59,6.45-18.7Z"/><path class="cls-1" d="M10.99,31.41c-.75,0-1.3-.07-1.5-.1-.72,0-6.52-.19-8.7-4.25-1.78-3.32-.56-8.15,3.62-14.36,1.59-2.36,3.56-7.44,2.46-11.76-.08-.33.07-.68.37-.85.31-.16.68-.1.91.16l1.16,1.29c4.08,4.54,6.13,6.82,7.39,10.04,3.19,8.11,3.46,13.86.81,17.11-1.89,2.32-4.76,2.72-6.53,2.72ZM9.55,29.81s.09,0,.13.01c.04,0,4.4.72,6.68-2.09,2.24-2.75,1.88-8.15-1.05-15.6h0c-1.12-2.85-2.99-5-6.64-9.06.15,4.11-1.58,8.32-3.02,10.46-3.79,5.63-5.01,10.06-3.54,12.81,1.84,3.43,7.33,3.47,7.44,3.47h0Z"/><circle class="cls-2" cx="9.66" cy="22.13" r="5.08"/></svg>

public/assets/toggle/Artboard 8.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.47 21.47"><defs><style>.cls-1{fill:#2e142c;}.cls-2{fill:#e94541;}.cls-3{fill:#a3203d;}</style></defs><circle class="cls-3" cx="10.73" cy="10.73" r="9.98"/><path class="cls-1" d="M10.73,21.47C4.81,21.47,0,16.65,0,10.73S4.81,0,10.73,0s10.73,4.81,10.73,10.73-4.81,10.73-10.73,10.73ZM10.73,1.5C5.64,1.5,1.5,5.64,1.5,10.73s4.14,9.23,9.23,9.23,9.23-4.14,9.23-9.23S15.82,1.5,10.73,1.5Z"/><circle class="cls-2" cx="10.73" cy="10.73" r="4.7"/></svg>

public/assets/toggle/Artboard 9.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24.99 9.74"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f0d6b8;}.cls-3{fill:#e41f1a;}.cls-4{fill:#a61916;}.cls-5{fill:#e1bd88;}.cls-6{clip-path:url(#clippath);}</style><clipPath id="clippath"><rect class="cls-1" x="1.08" y="-8.11" width="58.11" height="24.74" rx="12" ry="12"/></clipPath></defs><g class="cls-6"><rect class="cls-2" x="-36.56" y="2.39" width="48.56" height="4.96"/><path class="cls-3" d="M12.01,2.39s11.85-4.18,11.9,2.43c.06,6.61-11.9,2.53-11.9,2.53V2.39Z"/><path class="cls-5" d="M9.57,5.26c-4,.26-8.03.05-12.04.06-3.88,0-7.77.03-11.65.02-7.5-.03-15.01.21-22.43-.9v2.91H12.01v-2.62c-.78.29-1.61.47-2.44.53Z"/><path class="cls-4" d="M20.94,6.06c-1.05.56-2.23.88-3.42.88-.02,0-.04,0-.06,0-.02,0-.04,0-.05,0-2.11,0-3.95-.87-5.27-2.26-.04.02-.09.04-.13.05v2.62s11.96,4.08,11.9-2.53c0-.4-.05-.75-.13-1.08-.74.98-1.73,1.78-2.84,2.32Z"/></g></svg>

src/app/about/about.component.html

@@ -1,13 +1,30 @@
 <div class="contents">
-  <p>Ingrediënten voor 10 jaar ervaring</p>
+  <div>
+    <p>Ingrediënten<span>Projecten</span></p>
+    <ul>
+      <li>Indesign</li>
+      <li class="indent">educatief zetwerk<span>20+</span></li>
+      <li class="indent">catalogi<span>10+</span></li>
+      <li class="indent">magazines<span>5+</span></li>
+    </ul>
+  </div>
+ <div>
+  <p>Ingrediënten<span>Projecten</span></p>
   <ul>
-    <li>Indesign<span>10 kg</span></li>
-    <li class="indent">educatief zetwerk<span>85dl</span></li>
-    <li class="indent">catalogi<span>1 cup</span></li>
-    <li class="indent">magazines<span>27 tbsp</span></li>
-    <li>Illustrator<span>500ml</span></li>
-    <li class="indent">verpakkingen<span>14 oz</span></li>
-    <li>een scheut UX en UI<span>1/2 cup</span></li>
-    <li>een mespuntje video<span>2 inch</span></li>
+    <li>Illustrator</li>
+    <li class="indent">verpakkingen<span>20+</span></li>
+    <li>een scheut UX en UI<span>10+</span></li>
+    <li>een mespuntje video<span>5+</span></li>
   </ul>
+ </div>
+</div>
+
+<div class="recipe">
+  <p>Bereiding voor een grafisch vormgever</p>
+  <ol>
+    <li>Begin met een scheutje experimenteren met het Adobe-pakket. Laat dit langzaam sudderen tot het begint te borrelen van inspiratie.</li>
+    <li>Voeg vervolgens een flinke portie passie toe. Roer goed door, zodat het niet meer loslaat.</li>
+    <li>Laat het geheel een decennium rijpen. Hierdoor ontwikkelt het zich tot een volle, rijke vormgevingservaring.</li>
+    <li>Serveer met trots en geniet van de smaakvolle creaties die volgen!</li>
+  </ol>
 </div>

src/app/about/about.component.scss

@@ -2,10 +2,19 @@
   padding: 2rem 0;
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 
-.contents {
+.contents, .recipe {
   width: 100%;
+  display: flex;
+  gap: 3rem;
+  justify-content: space-between;
+
+
+  div {
+    width: calc(50% - 2.5rem);
+  }
 
   p {
     background-color: var(--text-color);
@@ -14,27 +23,22 @@
     height: 3rem;
     display: flex;
     align-items: center;
-    padding: 0 2rem;
+    padding: 0 1rem;
     margin: 0;
   }
 
-  ul {
-    columns: 2;
+  ul, ol {
     list-style: none;
     padding: 0;
     margin: 0;
     column-gap: 5rem;
 
     li {
-      height: 3rem;
-      padding: 0 1rem;
+      min-height: 1.5rem;
+      padding: 0.5rem 1rem;
       border-bottom: 0.1rem solid var(--text-color);
       display: flex;
       align-items: center;
-
-      span {
-        margin-left: auto;
-      }
     }
 
     .indent:before {
@@ -43,4 +47,31 @@
     }
 
   }
+
+  span {
+    margin-left: auto;
+  }
+}
+
+.recipe {
+  margin-top: 2rem;
+  display: inline;
+
+  ol {
+    list-style: none;
+    counter-reset: item;
+  }
+
+  li {
+    counter-increment: item;
+  }
+
+  li:before {
+    margin-right: 2rem;
+    content: counter(item);
+    width: 1.2em;
+    text-align: center;
+    display: inline-block;
+  }
+
 }

src/app/app.component.html

@@ -1,4 +1,5 @@
 <div class="wrapper">
+  <!-- <app-toggle></app-toggle> -->
   <app-header></app-header>
   <app-hero></app-hero>
   <app-services id="services"></app-services>

src/app/app.component.ts

@@ -6,11 +6,12 @@ import { ServicesComponent } from "./services/services.component";
 import { FooterComponent } from "./footer/footer.component";
 import { PortfolioComponent } from "./portfolio/portfolio.component";
 import { AboutComponent } from "./about/about.component";
+import { ToggleComponent } from "./toggle/toggle.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent],
+  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent, ToggleComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

src/app/hero/hero.component.html

@@ -1,3 +1,4 @@
-<img src="assets/logo.svg" alt="logo"/>
+<img src="assets/logo-dark.svg" alt="Logo dark" class="only-on-dark" />
+<img src="assets/logo-dark.svg" alt="Logo light" class="only-on-light" />
 <h1>Ontvlambaar</h1>
 <span class="slogan">Jullie het vuur, wij de branding</span>

src/app/hero/hero.component.scss

@@ -5,10 +5,26 @@
   padding: 3rem 0;
 }
 
+@font-face {
+  font-family: Phospate;
+  src: url("../../../public/assets/Phosphate/Phosphate-Solid-02.woff2");
+}
+
+h1 {
+  font-family: Phospate;
+  font-weight: 300;
+  font-size: 4rem;
+  margin: 0;
+  letter-spacing: .1rem;
+
+  color: var(--logo-color);
+}
+
 .slogan {
   font-size: 3.5rem;
 }
 
 img {
-  height: 8rem;
+  height: 5rem;
+  margin-bottom: 0.5rem;
 }

src/app/portfolio/portfolio.component.html

@@ -1,21 +1,21 @@
 <div class="left">
   <div>
     <h2>Zetwerk van boeken</h2>
-    <p>Educatieve uitgaven, waar het allemaal begonnen is. Via VrijdagGrafis de nodige ervaring opgedaanom educatieve uitgaven vorm tegeven en het zetwerk te verzorgen.</p>
+    <p>Voor educatieve uitgaven, catalogi en proefschriften zorg ik voor een helder en toegankelijk ontwerp dat de inhoud optimaal tot zijn recht laat komen. Educatieve boeken voor leerlingen vragen om een overzichtelijke indeling die het leren stimuleert, terwijl catalogi de producten gestructureerd en visueel aantrekkelijk moeten presenteren. Proefschriften vereisen dan weer een professionele en verzorgde uitstraling die past bij academisch werk. Met aandacht voor detail en leesbaarheid zet ik jouw project om in een professioneel en aantrekkelijk eindresultaat, van eerste pagina tot laatste bladzijde.</p>
   </div>
   <img src="assets/Educatief-zetwerk.webp" alt="Zetwerk voorbeeld">
 </div>
 <div class="right">
   <div>
     <h2>Logo’s, huisstijlen & verpakkingen</h2>
-    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,</p>
+    <p>Een sterke huisstijl en een herkenbaar logo vormen het hart van elk merk. Ik ontwerp de visuele kant van je merkverhaal en zorg voor een blijvende indruk. Van het logo tot de banners, ik creëer een unieke uitstraling die jouw merk laat opvallen en de juiste boodschap overbrengt.</p>
   </div>
   <img src="assets/Branding.webp" alt="Zetwerk voorbeeld">
 </div>
 <div class="left">
   <div>
     <h2>UX/UI</h2>
-    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,</p>
+    <p>Een goede vormgeving gaat verder dan alleen mooi zijn; het moet ook gebruiksvriendelijk zijn. Met een sterk ontwerp voor jouw website zorg ik ervoor dat gebruikers moeiteloos hun weg vinden. Door een combinatie van esthetiek en functionaliteit creëer ik een intuïtieve ervaring die aansluit bij de behoeften van de gebruiker en het doel van jouw project.</p>
   </div>
   <img src="assets/UX-UI.webp" alt="Zetwerk voorbeeld">
 </div>

src/app/services/services.component.html

@@ -11,7 +11,7 @@
 <div class="service">
   <img src="assets/logos-dark.svg" alt="Logos" class="only-on-dark" />
   <img src="assets/logos-light.svg" alt="Logos" class="only-on-light" />
-  <h2>logo's en huisstijlen</h2>
+  <h2>Logo's en huisstijlen</h2>
 </div>
 <div class="service">
   <img src="assets/ui-ux-dark.svg" alt="UX/UI" class="only-on-dark" />

src/app/toggle/toggle.component.html

@@ -0,0 +1,9 @@
+<div class="background">
+  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.27 26.9"><path class="cls-1" d="M47.19,26.9H13.08C5.87,26.9,0,21.03,0,13.82v-.74C0,5.87,5.87,0,13.08,0h34.11c7.21,0,13.08,5.87,13.08,13.08v.74c0,7.21-5.87,13.08-13.08,13.08ZM13.08,2.16C7.06,2.16,2.16,7.06,2.16,13.08v.74c0,6.02,4.9,10.92,10.92,10.92h34.11c6.02,0,10.92-4.9,10.92-10.92v-.74c0-6.02-4.9-10.92-10.92-10.92H13.08Z"/></svg>
+ </div>
+<span class="elements">
+  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.47 21.47"><circle class="cls-3" cx="10.73" cy="10.73" r="9.98"/><path class="cls-1" d="M10.73,21.47C4.81,21.47,0,16.65,0,10.73S4.81,0,10.73,0s10.73,4.81,10.73,10.73-4.81,10.73-10.73,10.73ZM10.73,1.5C5.64,1.5,1.5,5.64,1.5,10.73s4.14,9.23,9.23,9.23,9.23-4.14,9.23-9.23S15.82,1.5,10.73,1.5Z"/><circle class="cls-2" cx="10.73" cy="10.73" r="4.7"/></svg>
+  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.32 31.41"><path class="cls-3" d="M16.01,11.85c-1.33-3.38-3.59-5.72-8.41-11.1,1.11,4.39-.75,9.66-2.57,12.36-11.8,17.55,4.52,17.45,4.52,17.45,0,0,14.82,2.59,6.45-18.7Z"/><path class="cls-1" d="M10.99,31.41c-.75,0-1.3-.07-1.5-.1-.72,0-6.52-.19-8.7-4.25-1.78-3.32-.56-8.15,3.62-14.36,1.59-2.36,3.56-7.44,2.46-11.76-.08-.33.07-.68.37-.85.31-.16.68-.1.91.16l1.16,1.29c4.08,4.54,6.13,6.82,7.39,10.04,3.19,8.11,3.46,13.86.81,17.11-1.89,2.32-4.76,2.72-6.53,2.72ZM9.55,29.81s.09,0,.13.01c.04,0,4.4.72,6.68-2.09,2.24-2.75,1.88-8.15-1.05-15.6h0c-1.12-2.85-2.99-5-6.64-9.06.15,4.11-1.58,8.32-3.02,10.46-3.79,5.63-5.01,10.06-3.54,12.81,1.84,3.43,7.33,3.47,7.44,3.47h0Z"/><circle class="cls-2" cx="9.66" cy="22.13" r="5.08"/></svg>
+  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.34 36.47"><path class="cls-3" d="M18.59,13.73c-1.55-3.95-4.2-6.69-9.83-12.98,1.3,5.13-.88,11.29-3,14.45-13.8,20.51,5.29,20.4,5.29,20.4,0,0,17.33,3.03,7.55-21.87Z"/><path class="cls-1" d="M12.73,36.47c-.88,0-1.53-.09-1.74-.12-.79,0-7.55-.2-10.07-4.9-2.06-3.83-.64-9.44,4.22-16.66,1.87-2.78,4.19-8.77,2.9-13.85-.08-.33.07-.68.37-.85.31-.16.68-.1.91.16l1.35,1.51c4.76,5.3,7.15,7.96,8.62,11.7h0c3.71,9.44,4.03,16.12.97,19.88-2.18,2.67-5.49,3.14-7.53,3.14ZM11.04,34.85s.09,0,.13.01c.05,0,5.21.85,7.93-2.48,2.65-3.26,2.24-9.61-1.21-18.37-1.34-3.41-3.59-5.96-8.02-10.89.29,4.88-1.77,9.96-3.49,12.51C1.86,22.34.46,27.43,2.23,30.73c2.18,4.08,8.68,4.12,8.81,4.12h0Z"/><path class="cls-2" d="M14.82,23.89c-.76-1.94-2.06-3.29-4.83-6.38.64,2.52-.43,5.55-1.48,7.1-6.78,10.08,2.6,10.02,2.6,10.02,0,0,8.52,1.49,3.71-10.75Z"/></svg>
+  <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.35 40.34"><path class="cls-3" d="M13.74,39.59c-5.05,0-8.71-1.48-10.85-4.39-3.73-5.07-1.48-12.54-1.38-12.85.1-.31.39-.53.72-.53.01,0,.02,0,.04,0,.34.02.63.26.7.6.12.57.39,1.48.79,2.25-.17-2.61.18-7.08,3.46-11.58.14-.2.37-.31.61-.31.07,0,.14,0,.21.03.3.09.52.35.54.67.11,1.4.54,2.67.83,2.78,0,0,.22-.03.69-.58,2.13-2.57,2.75-8.71,1.41-14-.08-.32.06-.65.34-.83.12-.07.25-.11.39-.11.18,0,.36.06.5.19,7.04,6.27,7.66,12.19,7.92,14.72,0,.08.02.16.02.24.33-.69.45-1.9.39-2.8-.02-.35.2-.67.54-.77.07-.02.14-.03.21-.03.27,0,.52.14.66.39,2.04,3.7,2,7.25,1.53,9.74.27-.84.33-1.56.33-1.58.03-.36.31-.65.67-.69.03,0,.05,0,.08,0,.33,0,.63.22.72.54.11.37,2.57,9.04-1.57,14.57-2.16,2.88-5.68,4.33-10.47,4.33Z"/><path class="cls-1" d="M12.22,1.5c9.25,8.23,7.04,15.64,8.09,15.64.03,0,.05,0,.08-.01,1.63-.49,1.4-4.08,1.4-4.08,3.57,6.47.38,12.53.38,12.53,2.59-.75,2.88-4.67,2.88-4.67,0,0,5.24,17.94-11.32,17.94S2.22,22.58,2.22,22.58c0,0,.76,3.71,2.59,4.21,0,0-1.83-6.62,3-13.25,0,0,.26,3.48,1.57,3.48.35,0,.77-.24,1.28-.85,2.44-2.93,2.86-9.53,1.56-14.66M12.22,0c-.27,0-.54.07-.78.22-.56.34-.84,1.01-.68,1.65,1.24,4.9.72,10.76-1.16,13.21-.14-.46-.25-1.09-.3-1.65-.05-.63-.48-1.16-1.09-1.33-.14-.04-.27-.06-.41-.06-.47,0-.93.22-1.21.62-2.25,3.09-3.17,6.18-3.49,8.71-.23-.17-.51-.27-.81-.29-.03,0-.05,0-.08,0-.65,0-1.24.43-1.43,1.06-.1.33-2.46,8.15,1.49,13.52,2.29,3.11,6.15,4.69,11.45,4.69s8.76-1.56,11.07-4.63c4.37-5.82,1.8-14.85,1.69-15.23-.19-.65-.78-1.08-1.44-1.08-.02,0-.04,0-.06,0-.03-2.13-.5-4.57-1.88-7.09-.27-.49-.78-.78-1.31-.78-.14,0-.28.02-.42.06-.23.07-.44.19-.61.35-.8-3.07-2.69-7.25-7.55-11.57-.28-.25-.64-.38-1-.38h0Z"/><path class="cls-2" d="M12.93,18.87c4.85,4.31,3.54,8.19,4.18,8,.84-.25.72-2.09.72-2.09,1.83,3.31.2,6.41.2,6.41,1.33-.38,1.47-2.39,1.47-2.39,0,0,2.68,9.18-5.79,9.18s-5.89-8.32-5.89-8.32c0,0,.39,1.9,1.32,2.15,0,0-.94-3.39,1.53-6.78,0,0,.21,2.84,1.46,1.34s1.47-4.88.8-7.5Z"/></svg>
+</span>

src/app/toggle/toggle.component.scss

@@ -0,0 +1,38 @@
+:host {
+  height: 4rem;
+  width: 8rem;
+  position: relative;
+}
+
+.background {
+  width: 8rem;
+  height: 2rem;
+
+  .cls-1{fill:#ee7262;}
+}
+
+.elements {
+  width: 10rem;
+  height: 2rem;
+
+  svg {
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    left: 1rem;
+    // left: 5rem;
+    top: 0.75rem;
+  }
+
+  .cls-1 {
+    fill: #2e142c;
+  }
+
+  .cls-2 {
+    fill: #e94541;
+  }
+
+  .cls-3 {
+    fill: #a3203d;
+  }
+}

src/app/toggle/toggle.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToggleComponent } from './toggle.component';
+
+describe('ToggleComponent', () => {
+  let component: ToggleComponent;
+  let fixture: ComponentFixture<ToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ToggleComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/toggle/toggle.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-toggle',
+  standalone: true,
+  imports: [],
+  templateUrl: './toggle.component.html',
+  styleUrl: './toggle.component.scss'
+})
+export class ToggleComponent {
+
+}

src/styles.scss

@@ -7,7 +7,8 @@ body {
   @media (prefers-color-scheme: dark) {
     --text-color: rgb(222, 112, 108);
     --background-color: rgb(41, 23, 44);
-    --accent-color: rgb(222, 112, 108);
+    --accent-color: #E94541;
+    --logo-color: #a11f40;
 
     .only-on-dark {
       display: inline-block;
@@ -23,6 +24,7 @@ body {
   --text-color: rgb(29, 29, 29);
   --background-color: rgb(255, 255, 255);
   --accent-color: rgb(211, 55, 38);
+  --logo-color: var(--text-color);
 
   font-family: Fredoka;
   font-weight: 300;