Nav Bar Fixed

css/style1.css → assets/css/style1.css

@@ -326,7 +326,7 @@ h6 {
 #hero {
   width: 100%;
   height: 100vh;
-  background: url("/assets/img/hero-bg.png") top center no-repeat;
+  background: url("../img/hero-bg.png") top center no-repeat;
   background-size: cover;
   position: relative;
   padding-top: 82px;
@@ -406,7 +406,7 @@ h6 {
   #hero {
     text-align: center;
     padding-top: 58px;
-    background: url("/assets/img/picmob.png") top center no-repeat;
+    background: url("../img/picmob.png") top center no-repeat;
   }
   #hero:before {
     content: "";
@@ -435,7 +435,7 @@ h6 {
   }
   #hero {
     height: 120vh;
-    background: url("/assets/img/picmob.png") top center no-repeat;
+    background: url("../img/picmob.png") top center no-repeat;
   }
   #hero:before {
     content: "";
@@ -748,59 +748,59 @@ section {
 }
 
 /*--------------------------------------------------------------
-  # themes
+  # Services
   --------------------------------------------------------------*/
-.themes .icon-box {
+.services .icon-box {
   margin-bottom: 20px;
   padding: 30px;
   border-radius: 6px;
   background: #252525;
   transition: 0.3s;
 }
-.themes .icon-box:hover {
+.services .icon-box:hover {
   background: #2b2b2b;
 }
-.themes .icon-box i {
+.services .icon-box i {
   float: left;
   color: #e03a3c;
   font-size: 40px;
   line-height: 0;
 }
-.themes .icon-box h4 {
+.services .icon-box h4 {
   margin-left: 70px;
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 18px;
 }
-.themes .icon-box h4 a {
+.services .icon-box h4 a {
   color: #fff;
   transition: 0.3s;
 }
-.themes .icon-box h4 a:hover {
+.services .icon-box h4 a:hover {
   text-decoration: underline;
 }
-.themes .icon-box .icon-box:hover h4 a {
+.services .icon-box .icon-box:hover h4 a {
   color: #e03a3c;
 }
-.themes .icon-box p {
+.services .icon-box p {
   margin-left: 70px;
   line-height: 24px;
   font-size: 14px;
 }
 
 /*--------------------------------------------------------------
-  # sponsors
+  # Portfolio
   --------------------------------------------------------------*/
-.sponsors .sponsors-item {
+.portfolio .portfolio-item {
   margin-bottom: 30px;
 }
-.sponsors #sponsors-flters {
+.portfolio #portfolio-flters {
   padding: 0;
   margin: 0 auto 20px auto;
   list-style: none;
   text-align: center;
 }
-.sponsors #sponsors-flters li {
+.portfolio #portfolio-flters li {
   cursor: pointer;
   display: inline-block;
   padding: 8px 15px 10px 15px;
@@ -813,22 +813,22 @@ section {
   transition: all 0.3s ease-in-out;
   border-radius: 3px;
 }
-.sponsors #sponsors-flters li:hover,
-.sponsors #sponsors-flters li.filter-active {
+.portfolio #portfolio-flters li:hover,
+.portfolio #portfolio-flters li.filter-active {
   color: #fff;
   background: #e03a3c;
 }
-.sponsors #sponsors-flters li:last-child {
+.portfolio #portfolio-flters li:last-child {
   margin-right: 0;
 }
-.sponsors .sponsors-wrap {
+.portfolio .portfolio-wrap {
   transition: 0.3s;
   position: relative;
   overflow: hidden;
   z-index: 1;
   background: rgba(17, 17, 17, 0.6);
 }
-.sponsors .sponsors-wrap::before {
+.portfolio .portfolio-wrap::before {
   content: "";
   background: rgba(17, 17, 17, 0.6);
   position: absolute;
@@ -840,10 +840,10 @@ section {
   z-index: 2;
   opacity: 0;
 }
-.sponsors .sponsors-wrap img {
+.portfolio .portfolio-wrap img {
   transition: all ease-in-out 0.3s;
 }
-.sponsors .sponsors-wrap .sponsors-info {
+.portfolio .portfolio-wrap .portfolio-info {
   opacity: 0;
   position: absolute;
   top: 0;
@@ -858,58 +858,58 @@ section {
   align-items: flex-start;
   padding: 20px;
 }
-.sponsors .sponsors-wrap .sponsors-info h4 {
+.portfolio .portfolio-wrap .portfolio-info h4 {
   font-size: 20px;
   color: #fff;
   font-weight: 600;
 }
-.sponsors .sponsors-wrap .sponsors-info p {
+.portfolio .portfolio-wrap .portfolio-info p {
   color: rgba(255, 255, 255, 0.7);
   font-size: 14px;
   text-transform: uppercase;
   padding: 0;
   margin: 0;
   font-style: italic;
 }
-.sponsors .sponsors-wrap .sponsors-links {
+.portfolio .portfolio-wrap .portfolio-links {
   text-align: center;
   z-index: 4;
 }
-.sponsors .sponsors-wrap .sponsors-links a {
+.portfolio .portfolio-wrap .portfolio-links a {
   color: rgba(255, 255, 255, 0.4);
   margin: 0 5px 0 0;
   font-size: 28px;
   display: inline-block;
   transition: 0.3s;
 }
-.sponsors .sponsors-wrap .sponsors-links a:hover {
+.portfolio .portfolio-wrap .portfolio-links a:hover {
   color: #fff;
 }
-.sponsors .sponsors-wrap:hover::before {
+.portfolio .portfolio-wrap:hover::before {
   opacity: 1;
 }
-.sponsors .sponsors-wrap:hover img {
+.portfolio .portfolio-wrap:hover img {
   transform: scale(1.2);
 }
-.sponsors .sponsors-wrap:hover .sponsors-info {
+.portfolio .portfolio-wrap:hover .portfolio-info {
   opacity: 1;
 }
 
 /*--------------------------------------------------------------
-  # sponsors Details
+  # Portfolio Details
   --------------------------------------------------------------*/
-.sponsors-details {
+.portfolio-details {
   padding-top: 40px;
 }
-.sponsors-details .sponsors-details-slider img {
+.portfolio-details .portfolio-details-slider img {
   width: 100%;
 }
-.sponsors-details .sponsors-details-slider .swiper-pagination {
+.portfolio-details .portfolio-details-slider .swiper-pagination {
   margin-top: 20px;
   position: relative;
 }
-.sponsors-details
-  .sponsors-details-slider
+.portfolio-details
+  .portfolio-details-slider
   .swiper-pagination
   .swiper-pagination-bullet {
   width: 12px;
@@ -918,40 +918,40 @@ section {
   opacity: 1;
   border: 1px solid #e03a3c;
 }
-.sponsors-details
-  .sponsors-details-slider
+.portfolio-details
+  .portfolio-details-slider
   .swiper-pagination
   .swiper-pagination-bullet-active {
   background-color: #e03a3c;
 }
-.sponsors-details .sponsors-info {
+.portfolio-details .portfolio-info {
   padding: 30px;
   box-shadow: 0px 0 30px rgba(17, 17, 17, 0.08);
 }
-.sponsors-details .sponsors-info h3 {
+.portfolio-details .portfolio-info h3 {
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #eee;
 }
-.sponsors-details .sponsors-info ul {
+.portfolio-details .portfolio-info ul {
   list-style: none;
   padding: 0;
   font-size: 15px;
 }
-.sponsors-details .sponsors-info ul li + li {
+.portfolio-details .portfolio-info ul li + li {
   margin-top: 10px;
 }
-.sponsors-details .sponsors-description {
+.portfolio-details .portfolio-description {
   padding-top: 30px;
 }
-.sponsors-details .sponsors-description h2 {
+.portfolio-details .portfolio-description h2 {
   font-size: 26px;
   font-weight: 700;
   margin-bottom: 20px;
 }
-.sponsors-details .sponsors-description p {
+.portfolio-details .portfolio-description p {
   padding: 0;
 }
 

js/main.js → assets/js/main.js

@@ -249,7 +249,7 @@
   });
 
   /**
-   * sponsors details slider
+   * Portfolio details slider
    */
   new Swiper(".portfolio-details-slider", {
     speed: 400,
@@ -313,3 +313,18 @@
     });
   });
 })();
+
+
+// selecting elements
+let list = document.querySelectorAll('.nav-link');
+
+for (let i=0; i<list.length; i++){
+  list[i].addEventListener('click', function(){
+    for(let j=0; j<list.length; j++){
+      list[j].classList.remove('active');
+    }
+    list[i].classList.add('active');
+  })
+}
+
+console.log(list);