Merge pull request #37 from Nikolas-vl/covers

Covers

Author: Nikolas-vl

src/css/covers.css

@@ -28,7 +28,6 @@
 }
 .covers-content {
   max-height: 508px;
-  /* overflow: hidden; */
   display: flex;
   align-items: center;
 }
@@ -42,7 +41,6 @@
   align-content: center;
   left: 0;
   transform: rotate(16deg);
-  /* max-width: 320px; */
 }
 .container-covers-list {
   width: 375px;

src/partials/covers.html

@@ -460,6 +460,36 @@ <h2 class="visually-hidden">Covers</h2>
         <!-- end 4 line -->
         <!-- start 5 line -->
         <ul class="container-covers-list">
+          <li class="container-covers-list-item">
+            <picture>
+              <source
+                srcset="
+                  ./img/covers/compresspng-1x/Rectangle-8-min.png 1x,
+                  ./img/covers/compresspng-2x/Rectangle-8-min.png 2x
+                "
+                media="(min-width: 1440px)"
+              />
+              <source
+                srcset="
+                  ./img/covers/compresspng-1x/Rectangle-8-min.png 1x,
+                  ./img/covers/compresspng-2x/Rectangle-8-min.png 2x
+                "
+                media="(min-width: 768px)"
+              />
+              <source
+                srcset="
+                  ./img/covers/mobile-1x/Rectangle-8-mobile.png    1x,
+                  ./img/covers/mobile-2x/Rectangle-8-mobile-2x.png 2x
+                "
+                media="(max-width: 767px)"
+              />
+              <img
+                src="./img/covers/compresspng-1x/Rectangle-8-min.png   "
+                class="portfolio-list-img"
+                alt="Rectangle-8-min"
+              />
+            </picture>
+          </li>
           <li class="container-covers-list-item">
             <picture>
               <source
@@ -517,7 +547,7 @@ <h2 class="visually-hidden">Covers</h2>
             /></picture>
           </li>
         </ul>
-        <!-- end 5 line -->
+        <!-- end 5 line --->
       </div>
     </div>
   </div>