+ 
+
+
+
+
diff --git a/projectfolder/06-Components/01-accordion/02-carousel/carousel.css b/projectfolder/06-Components/01-accordion/02-carousel/carousel.css
new file mode 100644
index 000000000..8ad88f363
--- /dev/null
+++ b/projectfolder/06-Components/01-accordion/02-carousel/carousel.css
@@ -0,0 +1,133 @@
+/*
+SPACING SYSTEM (px)
+2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+(rems) (divide by 10)
+.2/.4/.8./1.2/1.6 ....
+
+FONT SIZE SYSTEM (px)
+10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+(rems) divide by 10
+1 / 1.2 / 1.4/ 1.6 ...
+*/
+
+/* Main Color: #087f5b
+ Grey Color: #343a40
+
+*/
+:root {
+ --MainColor: #087f5b;
+ --SecondaryColor: #343a40;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* ------------------------ */
+/* GENERAL STYLES */
+/* ------------------------ */
+body {
+ /* font-family: sans-serif; */
+
+ font-family: 'Poppins' sans-serif;
+ color: var(--SecondaryColor);
+
+ font-size: 10px;
+ line-height: 1px;
+}
+
+img {
+ height: 20rem;
+ border-radius: 0.8rem;
+ transform: scale(1.5);
+ box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.25);
+}
+
+.btn {
+ position: absolute;
+ background-color: #fff;
+ border: none;
+ height: 4rem;
+ width: 4rem;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+}
+
+.btn-icon {
+ stroke: var(--MainColor);
+ height: 2.4rem;
+ width: 2.4rem;
+}
+.btn-right {
+ /* In relation to parent element */
+ right: 0%;
+ top: 50%;
+ /* In relation to element itself */
+ transform: translate(50%, -50%);
+}
+
+.btn-left {
+ left: 0%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.btn:active {
+ background-color: #087f5b;
+}
+.carousel {
+ position: relative;
+ background-color: var(--MainColor);
+ width: 80rem;
+ margin: 10rem auto;
+ border-radius: 0.8rem;
+ padding: 3.2rem 4.8rem 3.2rem 8.6rem;
+ display: flex;
+ align-items: center;
+ gap: 8.6rem;
+}
+
+.testimonial-text {
+ font-size: 1.8rem;
+ font-weight: 500;
+ line-height: 1.5;
+ margin-bottom: 3.2rem;
+ color: #e6fcf5;
+}
+.testimonial-author {
+ font-size: 1.4rem;
+ margin-bottom: 1.5rem;
+ color: #c3fae8;
+}
+.testimonial-job {
+ font-size: 1.2rem;
+ color: #c3fae8;
+}
+
+.dots {
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ transform: translate(-50%, 3.2rem);
+ display: flex;
+ gap: 1.2rem;
+}
+
+.dot {
+ height: 1.2rem;
+ width: 1.2rem;
+ background-color: #fff;
+ border: 0.2rem solid #087f5b;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.dot--fill {
+ background-color: #087f5b;
+}
diff --git a/projectfolder/06-Components/01-accordion/02-carousel/carousel.js b/projectfolder/06-Components/01-accordion/02-carousel/carousel.js
new file mode 100644
index 000000000..6e235b716
--- /dev/null
+++ b/projectfolder/06-Components/01-accordion/02-carousel/carousel.js
@@ -0,0 +1,10 @@
+var item = document.getElementsByClassName('item')
+var i
+
+// So yea, classlist.toggle("open") will add or remove "open" from the class name
+
+for (i = 0; i < item.length; i++) {
+ item[i].addEventListener('click', function () {
+ this.classList.toggle('open')
+ })
+}
diff --git a/projectfolder/06-Components/01-accordion/02-carousel/component.html b/projectfolder/06-Components/01-accordion/02-carousel/component.html
new file mode 100644
index 000000000..5bec1cfc2
--- /dev/null
+++ b/projectfolder/06-Components/01-accordion/02-carousel/component.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+ ++ + ++ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Temporibus, maiores! Delectus ipsa iste corrupti vero culpa unde + vel sed illum, +
+ ++ Senior Product Manager at EDP Commercial +
+
+
+
+
+
+
+