كيفية إنشاء قسم توصيات العملاء مميز بإستخدام ثيم ديفى

فيديو الدرس

كود عنوان قسم التوصيات

يتم وضع الكود قبل العنوان ” Before ”

/* Main Text Before Code */
content: "";
width: 12px;
  height: 12px;
  background-color: #203db0;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
left: -30px;

يتم وضع الكود قبل العنوان فى حالة الهوفر

/* Main Text Before Code " Hover " */

z-index: -1;
  animation: left-move 0.5s linear forwards;

كود لعنوان القسم

/* Main title Transation */
  transition-delay: 0.5s;

كود لعنوان القسم فى حالة الهوفر

/* Main title hover state */
color: white;
  transition-delay: 0.5s;

يتم وضع الكود بعد العنوان

/* Main Text After Code */

content: "";
  width: 12px;
  height: 12px;
  background-color: #203db0;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
right: -30px;

كود بعد العنوان فى حالة الهوفر

/* Main Text After Code " Hover " */

 z-index: -1;
  animation: right-move 0.5s linear forwards;

كود يتم وضعه فى الصفحة لتحريك العنوان

/* Animation Code */

@keyframes left-move {
  50% {
    left: 0;
    width: 12px;
    height: 12px;
  }
  100% {
    left: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
  }
}
@keyframes right-move {
  50% {
    right: 0;
    width: 12px;
    height: 12px;
  }
  100% {
    right: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
  }
}

الألوان المستخدمة فى الدرس

لون خلفية القسم الرئيسى واطار الصور : رمادى / ececec

لون خلفية عنوان القسم: أزرق / 203db0