From c624d79b32bf27825dbadcca25ce3b8abd28b6a9 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Tue, 23 Apr 2024 18:51:48 -0500
Subject: [PATCH] made change

---
 awwwards/.gitignore     |  1 +
 awwwards/index.html     | 10 +++++-----
 awwwards/style.css      | 32 +++++++++-----------------------
 awwwards_ss2/index.html |  4 ----
 awwwards_ss2/style.css  |  3 ---
 5 files changed, 15 insertions(+), 35 deletions(-)
 create mode 100644 awwwards/.gitignore

diff --git a/awwwards/.gitignore b/awwwards/.gitignore
new file mode 100644
index 0000000..f40fe05
--- /dev/null
+++ b/awwwards/.gitignore
@@ -0,0 +1 @@
+assets
\ No newline at end of file
diff --git a/awwwards/index.html b/awwwards/index.html
index 5a6686f..d83428e 100644
--- a/awwwards/index.html
+++ b/awwwards/index.html
@@ -11,7 +11,7 @@
     <main class="app">
         <div class="nav">
             <div class="nav-container">
-                <p class="nav-logo">JtpMcDevitt</p>
+                <p class="nav-logo">Awwwards Rebuild by JTP</p>
                 <div class="nav-select">
                     <p>Grid</p>
                     <div class="nav-select-toggle">
@@ -29,7 +29,7 @@
                 <div class="work-selector">
                     <div class="work-grid">
                         <div class="work-grid-item">
-                            <img class="work-grid-item-img" src="https://images.unsplash.com/photo-1678933632171-f730be1aa086?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+                            <video class="work-grid-item-video" src="./assets/ochi-rebuild.webm" autoplay loop muted></video>
                             <div class="work-grid-item-title">
                                 <h3>Ochi Design Rebuild</h3>
                             </div>
@@ -49,7 +49,7 @@
                         </div>
 
                         <div class="work-grid-item --item-left">
-                            <img class="work-grid-item-img" src="https://images.unsplash.com/photo-1713609917082-030afbbfb0a3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+                            <video class="work-grid-item-video" src="./assets/sundown-rebuild.webm" autoplay loop muted></video>
                             <div class="work-grid-item-title">
                                 <h3>Sundown Studio Rebuild</h3>
                             </div>
@@ -68,7 +68,7 @@
                         </div>
 
                         <div class="work-grid-item">
-                            <img class="work-grid-item-img" src="https://images.unsplash.com/photo-1713707131810-d53b3b1ecced?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+                            <video class="work-grid-item-video" src="./assets/rejouice-rebuild.webm" autoplay loop muted></video>
                             <div class="work-grid-item-title">
                                 <h3>REJOUICE Rebuild</h3>
                             </div>
@@ -88,7 +88,7 @@
                         </div>
 
                         <div class="work-grid-item --item-left">
-                            <img class="work-grid-item-img" src="https://images.unsplash.com/photo-1710505904400-fd061f3c9ff5?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+                            <video class="work-grid-item-video" src="./assets/kit-rebuild.webm" autoplay loop muted></video>
                             <div class="work-grid-item-title">
                                 <h3>Kit: Rebuild</h3>
                             </div>
diff --git a/awwwards/style.css b/awwwards/style.css
index ff92563..eb0130b 100644
--- a/awwwards/style.css
+++ b/awwwards/style.css
@@ -93,7 +93,7 @@ span{
     border-bottom: 1px solid var(--secondary);
 }
 .work-title h1{
-    font-size: 12rem;
+    font-size: 8rem;
 }
 .work-selector{
     position: relative;
@@ -105,17 +105,17 @@ span{
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 1.5rem;
     grid-row-gap: 1.5rem;
-    grid-template-areas: 'grid-img grid-info' 'grid-title .';
+    grid-template-areas: 'grid-video grid-info' 'grid-title .';
     margin-bottom: 12.8rem;
 }
 .--item-left{
-    grid-template-areas: 'grid-info grid-img ' '. grid-title';
+    grid-template-areas: 'grid-info grid-video ' '. grid-title';
 }
-.work-grid-item-img{
-    grid-area: grid-img;
+.work-grid-item-video{
+    grid-area: grid-video;
     width: 96rem;
     height: 64rem;
-    object-fit: cover;
+    background-color: #181818;
 }
 .work-grid-item-info{
     grid-area: grid-info;
@@ -189,20 +189,7 @@ span{
 @media screen and (min-width: 768px){
     .--item-left .work-grid-item-info{
         justify-self: right;
-    } 
-    .work-grid-item:nth-child(2) .work-grid-item-img{
-        width: 90rem;
-        height: 96rem;
     }
-    .work-grid-item:nth-child(3) .work-grid-item-img{
-        width: 120rem;
-        height: 90rem;
-    }
-    .work-grid-item:nth-child(4) .work-grid-item-img{
-        width: 140rem;
-        height: 90rem;
-    }
-
 }
 /*=== index responsive ===*/
 @media screen and (max-width: 768px){
@@ -229,15 +216,14 @@ span{
     }
     .work-grid-item, .work-grid-item.--item-left{
         grid-template-columns: 1fr;
-        grid-template-areas: 'grid-img' 'grid-title' 'grid-info';
+        grid-template-areas: 'grid-video' 'grid-title' 'grid-info';
     }
-    .work-grid-item-img{
+    .work-grid-item-video{
         width: 100%;
         height: 64rem;
-        object-fit: cover;
     }
     .work-title h1{
-        font-size: 7rem;
+        font-size: 5rem;
     }
     .work-index-item-flex{
         flex-direction: column;
diff --git a/awwwards_ss2/index.html b/awwwards_ss2/index.html
index 32eb46e..c9b448a 100644
--- a/awwwards_ss2/index.html
+++ b/awwwards_ss2/index.html
@@ -76,10 +76,6 @@
             </div>
 
             <div id="section-3" class="section-3">
-                <div class="section3-topic">
-                    <i class='bx bxs-circle'></i>
-                    <p>featured projects</p>
-                </div>
                 <div class="container">
                     <div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1694_Copy%2520of%2520211023_NikeCHI_PlayNewKids_Beauty-26-p-1080.webp">
                         <div class="overlay"></div>
diff --git a/awwwards_ss2/style.css b/awwwards_ss2/style.css
index 8864867..53be9bf 100644
--- a/awwwards_ss2/style.css
+++ b/awwwards_ss2/style.css
@@ -315,9 +315,6 @@ nav h3{
     padding: 4vw 0;
     background-color: #EFEAE3;
 }
-.section3-topic{
-    padding: 0 2.4rem;
-}
 .topic{
     height: 150px;
     width: 100%;