-
-
+
+
+
+
+
How to cook Abobo?
+
+
+
+
+
Step 1
Step 2
Step 3
-
-
-
+ Step 4
+
+
-
Step 1
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum sint cumque quasi, amet impedit tempore necessitatibus iste. Ratione possimus perspiciatis sapiente, ex alias, ipsam sint beatae vel repellat aperiam corrupti porro et molestiae nobis itaque recusandae vitae atque! Reiciendis voluptatum molestiae autem consectetur corporis libero itaque quo mollitia quod! Corrupti doloribus veniam iusto soluta laborum saepe debitis reiciendis atque nihil eaque ducimus quo ullam ipsum, laboriosam velit vitae sint, eius molestiae unde, tempora hic ipsam? Cupiditate, beatae. Nostrum eos, id velit nisi libero exercitationem, et fugiat assumenda mollitia debitis deleniti, illum iusto. Officiis, ratione ex? Magni, impedit vel. Quam, eaque.
+
Step 1
+
Lorem ipsum dolor sit amet...
-
-
-
Step 2
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci molestiae doloremque enim deleniti voluptatum necessitatibus, facilis et quas, quasi magni obcaecati iusto ipsam ipsum amet autem labore dignissimos accusantium dolorem perspiciatis non harum, alias vel a asperiores? Qui amet tempora mollitia quos, facilis debitis nemo praesentium, optio facere nostrum, eum totam magnam quasi laborum sint repellendus quibusdam vero? Ipsum explicabo officiis culpa delectus quasi cumque saepe voluptates accusantium voluptatem omnis iste, sequi beatae quae dolor vero nostrum at amet eum dolores ut. Autem velit eius, libero adipisci dolore harum accusantium ipsum, voluptate ad recusandae vitae blanditiis? Harum nihil molestiae cum!
-
-
+
Step 2
+
Lorem ipsum dolor sit amet...
-
-
-
Step 3
-
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat, asperiores magnam? In expedita laudantium magnam ratione alias minus nemo incidunt, dignissimos architecto placeat corporis molestiae labore vitae ullam laborum ut culpa eaque officiis, blanditiis sunt fugit ex? Neque quod mollitia delectus ipsa? Dolore veritatis, tenetur laudantium possimus unde debitis enim est illum, ea distinctio quod itaque quaerat ex sint eum optio in saepe labore sunt odit? Dolore, iusto! Ducimus sint laudantium consectetur. Velit facere culpa excepturi ad, quae distinctio iure incidunt. Odio alias laboriosam unde quo repudiandae corporis laborum quaerat asperiores minima quis in nam maxime recusandae iure, provident a?
-
+
Step 3
+
Lorem ipsum dolor sit amet...
-
+
+
Step 4
+
Lorem ipsum dolor sit amet...
-
-
-
-
-
+
+
+
+
diff --git a/projects/tabs/styles.css b/projects/tabs/styles.css
index 770fe79..fafab93 100644
--- a/projects/tabs/styles.css
+++ b/projects/tabs/styles.css
@@ -1,82 +1,93 @@
body {
margin: 0;
padding: 0;
- font-family: sans-serif;
- background: #f5abc9;
- color: grey;
-}
-
-img {
- display: block;
- width: 100%;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: #f0f2f5;
+ color: #333;
}
.section-center {
- width: 90vw;
- margin: 0 auto;
+ width: 80vw;
+ margin: 2rem auto;
max-width: 1170px;
- min-width: 340px;
- padding: 5rem 0;
+ padding: 2rem;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ border-radius: 8px;
+ background: #fff;
}
-.image {
- margin-bottom: 2rem;
-}
-img {
- border-radius: 0.5rem;
+.image img {
+ width: 100%;
+ border-radius: 8px 8px 0 0;
object-fit: cover;
- height: 30rem;
+ height: 200px;
}
+
.tabs {
- background: #ffe5e2;
- border-radius: 0.5rem;
- grid-template-rows: auto 1fr;
+ background: #ffffff;
}
+
.btn-container {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
-}
-.button:nth-child(1) {
- border-top-left-radius: 0.5rem;
-}
-.button:nth-child(3) {
- border-top-right-radius: 0.5rem;
+ display: flex;
+ justify-content: center;
+ padding: 1rem;
}
+
.button {
- padding: 1rem 0;
+ padding: 0.75rem 1.5rem;
border: none;
font-size: 1rem;
- background: #b6c9f0;
+ background: #e4e6eb;
+ color: #050505;
cursor: pointer;
- transition: all 0.3s linear;
- letter-spacing: 0.25rem;
+ transition: background-color 0.3s ease;
+ margin: 0 10px;
+ border-radius: 20px;
}
+
.button:hover:not(.live) {
- background: #e93b81;
- color: white;
+ background: #d1d8e0;
}
+
.tabs-content {
- padding: 2rem 1.5rem;
+ padding: 1rem;
+ transition: all 0.5s ease-in-out;
}
-/* hide content */
+
.content {
display: none;
+ animation: fadeIn 0.5s ease-in-out;
}
-.button.live {
- background: #ffe5e2;
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
+
+.button.live, .button.live:hover {
+ background: #007bff;
+ color: #ffffff;
+}
+
.content.live {
display: block;
}
@media (min-width: 992px) {
- .image {
- margin-bottom: 0;
+ .section-center {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 20px;
}
- .section-center {
- display: grid;
- grid-template-columns: 1fr 1fr;
- column-gap: 2rem;
+ .image img {
+ height: auto;
+ border-radius: 8px;
}
}
diff --git a/projects/testimonial-slider/index.html b/projects/testimonial-slider/index.html
index 3d387be..498e6a8 100644
--- a/projects/testimonial-slider/index.html
+++ b/projects/testimonial-slider/index.html
@@ -1,24 +1,21 @@
-
-
-
-
+
+
+
Testimonial Slider
-
-
-
+
+
+
-
-
- This is simply unbelievable! I would be lost without Apple. The very
- best. Not able to tell you how happy I am with Apple.
-
-
Cherise G
+
+
+
+
+
❮
+
+
❯
-
+
diff --git a/projects/testimonial-slider/index.js b/projects/testimonial-slider/index.js
index 620a584..6bdefe1 100644
--- a/projects/testimonial-slider/index.js
+++ b/projects/testimonial-slider/index.js
@@ -1,21 +1,24 @@
const testimonials = [
{
- name: "Cherise G",
+ name: "Marcus Lee",
photoUrl:
- "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
- text: "This is simply unbelievable! I would be lost without Apple. The very best. Not able to tell you how happy I am with Apple.",
+ "https://img.freepik.com/free-photo/smiling-man-with-arms-crossed_1149-1711.jpg?size=626&ext=jpg&ga=GA1.1.1700460183.1712188800&semt=ais",
+ text: "While the idea behind the service is promising, my experience was underwhelming. The recommendations felt generic, and the customer support was less responsive than I had hoped for. It has potential but needs improvement.",
+ rating: 1,
},
{
- name: "Rosetta Q",
+ name: "Sofia Alvarez",
photoUrl:
- "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
- text: "I would also like to say thank you to all your staff. Wow what great service, I love it! Apple impressed me on multiple levels.",
+ "https://media.istockphoto.com/id/1389348844/photo/studio-shot-of-a-beautiful-young-woman-smiling-while-standing-against-a-grey-background.jpg?s=612x612&w=0&k=20&c=anRTfD_CkOxRdyFtvsiPopOluzKbhBNEQdh4okZImQc=",
+ text: "The level of personalization and attention to detail in their travel recommendations is phenomenal. Each journey planned using their insights has been a unique and unforgettable experience. Truly a top-notch service for travelers.",
+ rating: 4,
},
{
- name: "Constantine V",
+ name: "Raj Patel",
photoUrl:
"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
- text: "Thank you for making it painless, pleasant and most of all hassle free! I wish I would have thought of it first. The very best.",
+ text: "This platform changed my travel planning game! The hidden gems and detailed guides provided have made every trip unforgettable. The attention to detail in their recommendations is unmatched. A game-changer for explorers at heart!",
+ rating: 5,
},
];
@@ -28,15 +31,27 @@ let idx = 0;
updateTestimonial();
function updateTestimonial() {
- const { name, photoUrl, text } = testimonials[idx];
+ const { name, photoUrl, text, rating } = testimonials[idx];
imgEl.src = photoUrl;
textEl.innerText = text;
usernameEl.innerText = name;
+
+ const ratingEl = document.querySelector('.rating');
+ ratingEl.innerHTML = '★'.repeat(rating) + '☆'.repeat(5 - rating);
+}
+
+function nextTestimonial() {
idx++;
- if (idx === testimonials.length) {
+ if (idx >= testimonials.length) {
idx = 0;
}
- setTimeout(() => {
- updateTestimonial();
- }, 10000);
+ updateTestimonial();
+}
+
+function prevTestimonial() {
+ idx--;
+ if (idx < 0) {
+ idx = testimonials.length - 1;
+ }
+ updateTestimonial();
}
diff --git a/projects/testimonial-slider/style.css b/projects/testimonial-slider/style.css
index 09aae35..1f42724 100644
--- a/projects/testimonial-slider/style.css
+++ b/projects/testimonial-slider/style.css
@@ -2,35 +2,79 @@ body {
margin: 0;
display: flex;
justify-content: center;
- height: 100vh;
align-items: center;
- font-family: cursive;
+ height: 100vh;
+ background-color: #f4f4f4;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.testimonial-container {
- width: 500px;
- height: 100px;
- background-color: slateblue;
- border-radius: 10px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
- min-width: 400px;
- padding: 70px 20px;
- margin: 5px;
- color: white;
position: relative;
+ width: 350px;
+ min-height: 150px;
+ background: linear-gradient(135deg, #6dd5ed, #2193b0);
+ border-radius: 15px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ padding: 30px 15px 15px;
+ text-align: center;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
img {
- width: 100px;
- height: 100px;
+ width: 80px;
+ height: 80px;
border-radius: 50%;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- top: -50px;
+ border: 3px solid white;
+ margin-bottom: 10px;
+}
+
+.text {
+ margin: 10px 0;
+ font-size: 14px;
+ line-height: 1.4;
}
.username {
font-size: 13px;
- font-weight: 100;
+ font-weight: 500;
+ margin-bottom: 5px;
+}
+
+.rating {
+ color: #ffd700;
+ font-size: 18px;
+ margin-bottom: 10px;
+}
+
+.arrow {
+ background-color: #ffffff40;
+ border: none;
+ border-radius: 100%;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ padding: 5px;
+ margin: 0 5px;
+ transition: background-color 0.3s ease;
+}
+
+.arrow:hover {
+ background-color: #ffffff80;
+}
+
+.arrow.prev {
+ position: absolute;
+ left: -10px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.arrow.next {
+ position: absolute;
+ right: -10px;
+ top: 50%;
+ transform: translateY(-50%);
}
- 
+ 
-