How to Make Portfolio Website (WordPress & Elementor Tutorial for Beginners)

2.1KSHARES

Hide horizontal overflow for the entire page CSS

Marquee Conten Style CSS

.marquee-content {
  animation: marquee-right 20s linear infinite;
}

@keyframes marquee-right {
  from {
    transform: translateX(-70%); /* Start off-screen on the left */
  }
  to {
    transform: translateX(-10%); /* Move off-screen to the right */
  }
}

&nbsp

Marquee Conten Style CSS Classes

marquee-content

&nbsp

Service Image Hover Style CSS

.service-img{
    opacity: 0;
    transition: opacity .3s ease;
}
.service-box:hover .service-img {
    opacity: 1;
}

Service Image Hover Style CSS Classes

service-img
service-box

Testimonial Widget Style CSS

.reviews .row {
    flex-direction: row-reverse;
}
 .reviews .elementskit-profile-image-card {
    width: 256px !important;
    max-height: 328px;
}
  .reviews .elementskit-commentor-content {
    margin-left: -50px;
    margin-top: 20px;
}
 .reviews p {
     display: none;
 }
  .reviews h3 {
      margin: 20 0 12 0 !important;
  }
  .reviews .elementskit-profile-info{
      padding-top: 12px;
      margin-top: 32px;
      border-top: 1px solid #E7E7E7;
  }
  .reviews .ekit-wid-con .elementskit-commentor-content .elementskit-profile-info {
    display: flex;
    align-items: center;
    gap: 6px;
}


@media (max-width: 1070px){
    .reviews .elementskit-commentor-content {
    margin-left: 0px;
}
}

@media (max-width: 1024px){
    
    .reviews .elementskit-commentor-content {
        margin-left: 0px;
    }
    
     .reviews .elementskit-profile-image-card {
        width: 200px !important;
        max-height: 328px;
    }
    
    .reviews .elementskit-profile-image-card {
        width: 200px !important;
        max-height: 250px;
    }

}

@media (max-width: 767px){
    .reviews .elementskit-profile-image-card {
        width: 150px !important;
        max-height: 180px;
    }
}

Testimonial Widget Style CSS Class

reviews

Project Box Style CSS

 .projects-box {
     max-height: 660px;
 }
 .projects-box::-webkit-scrollbar {
  display: none;
}

.project:hover h5, .project:hover .project-date p{
    color: #242424 !important;
}
.project:hover p{
    color: #747474 !important;
}
.project:hover a{
    color: #5840BA !important;
    border-color: #5840BA !important;
}

.project:hover svg {
    color: #5840BA !important;
    fill: #5840BA !important;
    fill-opacity: 1;
}

Project Box Style CSS Classes

projects-box
project
project-date

Project Box Style CSS Classes

projects-box
project
project-date

Blog Section Style CSS

.blog article{
    display: flex;
    gap: 24px;
    flex-direction: column-reverse;
}
.blog .jkit-post-meta-bottom {
    position: absolute;
    right: 16px;
    top: 336px;
}


@media (max-width: 1024px){
    .blog .jkit-post-meta-bottom {
        position: absolute;
        right: 10PX;
        top: 285PX;
    }

}

Blog Section Style CSS Class

blog

FAQ Section Style CSS

.faq .faq-list {
    margin-right: 40px;
    color: #747474;
}

.faq .e-n-accordion-item[open]>.e-n-accordion-item-title .faq-list{
 color:#5840BA !Important;
}
.faq .e-n-accordion-item .e-n-accordion-item-title:hover .faq-list{
 color:#5840BA !Important;
}


@media (max-width: 767px){
    .faq .faq-list {
        margin-right: 12px;
    }
}

FAQ Section Style CSS Classes

faq
faq-list

Header Menu Style CSS

.jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li.current-menu-item > a, .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li:hover > a {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(88, 64, 186, 1) 50%, rgba(255, 255, 255, 0.12) 100%);
    border-image-slice: 1;
}