diff --git a/projectfolder/06-Components/01-accordion/02-carousel/02-carousel.html b/projectfolder/06-Components/01-accordion/02-carousel/02-carousel.html new file mode 100644 index 000000000..c15994d0e --- /dev/null +++ b/projectfolder/06-Components/01-accordion/02-carousel/02-carousel.html @@ -0,0 +1,73 @@ + + + + + + + + + Carousel + + + +
+ Maria de Altmeida +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Temporibus, maiores! Delectus ipsa iste corrupti vero culpa unde + vel sed illum, +

+

Maria De Altmeida

+

+ Senior Product Manager at EDP Commercial +

+
+ + +
+ + + + +
+
+ + + 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 @@ + + + + + + + + + Carousel Component + + + + +