muayjtp/awwwards_series
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made change

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-24 12:15:39 -05:00
parent c624d79b32
commit 4319c2cd06
5 changed files with 17 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
awwwards/index.html
View file

@ -117,10 +117,9 @@
</div>
<div class="work-index-item-media">
<h2 class="work-index-item-media-arrow">&rarr;</h2>
<img class="work-index-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="">
<img class="work-index-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="">
<img class="work-index-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="">
<img class="work-index-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-index-item-video" src="./assets/ochi-rebuild-pc.webm" muted loop autoplay></video>
<video class="work-index-item-video" src="./assets/ochi-rebuild-ipad.webm" muted loop autoplay></video>
<video class="work-index-item-video" src="./assets/ochi-rebuild-iphone.webm" muted loop autoplay></video>
</div>
</div>
@ -133,10 +132,9 @@
</div>
<div class="work-index-item-media">
<h2 class="work-index-item-media-arrow">&rarr;</h2>
<img class="work-index-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="">
<img class="work-index-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="">
<img class="work-index-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="">
<img class="work-index-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-index-item-video" src="./assets/sundown-rebuild-pc.webm" muted loop autoplay></video>
<video class="work-index-item-video" src="./assets/sundown-rebuild-ipad.webm" muted loop autoplay></video>
<video class="work-index-item-video" src="./assets/sundown-rebuild-iphone.webm" muted loop autoplay></video>
</div>
</div>
@ -149,10 +147,9 @@
</div>
<div class="work-index-item-media">
<h2 class="work-index-item-media-arrow">&rarr;</h2>
<img class="work-index-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="">
<img class="work-index-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="">
<img class="work-index-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="">
<img class="work-index-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-index-item-video" src="./assets/rejouice-rebuild-pc.webm" muted loop autoplay></video>
<video class="work-index-item-video" src="./assets/rejouice-rebuild-ipad.webm" muted loop autoplay></video>
<video class="work-index-item-video" src="./assets/rejouice-rebuild-iphone.webm" muted loop autoplay></video>
</div>
</div>
@ -165,10 +162,9 @@
</div>
<div class="work-index-item-media">
<h2 class="work-index-item-media-arrow">&rarr;</h2>
<img class="work-index-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="">
<img class="work-index-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="">
<img class="work-index-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="">
<img class="work-index-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-index-item-video" src="./assets/kit-rebuild-pc.webm" muted loop autoplay></video>
<video class="work-index-item-video" src="./assets/kit-rebuild-ipad.webm" muted loop autoplay></video>
<video class="work-index-item-video" src="./assets/kit-rebuild-iphone.webm" muted loop autoplay></video>
</div>
</div>
</div>

4
awwwards/main.js
View file

@ -6,12 +6,12 @@ const view = {
grid: document.querySelector('.work-grid'),
index: document.querySelector('.work-index'),
indexItem: document.querySelectorAll('.work-index-item'),
indexMediaImage: document.querySelectorAll('.work-index-item-img'),
indexMediaImage: document.querySelectorAll('.work-index-item-video'),
indexMediaArrow: document.querySelectorAll('.work-index-item-media-arrow'),
};
const animateIndexItem = (item) =>{
const itemImages = item.querySelectorAll('.work-index-item-img');
const itemImages = item.querySelectorAll('.work-index-item-video');
const itemArrows = item.querySelectorAll('.work-index-item-media-arrow');
const itemTitle = item.querySelectorAll('.work-index-item-title');

2
awwwards/style.css
View file

@ -179,7 +179,7 @@ span{
top: 0;
gap: 1.5rem;
}
.work-index-item-img{
.work-index-item-video{
width: 32rem;
height: 13rem;
object-fit: cover;

2
awwwards_ss1/src/components/Footer.jsx
View file

@ -6,7 +6,7 @@ const Footer = () => {
<p className="feature-text text-[12vw] sm:text-[8.8vw] leading-[9vw]">eye-</p>
<p className="feature-text text-[12vw] sm:text-[8.8vw] leading-[9vw]">opening</p>
</div>
<div className="hidden md:flex mb-10">
<div className="hidden md:flex mb-10 px-[2vw] lg:px-[3.3vw]">
<svg width="72" height="30" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="currentColor"></path>
<path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="currentColor"></path>

2
awwwards_ss4/src/components/NavMenu.jsx
View file

@ -2,7 +2,7 @@
const NavMenu = () => {
return (
<div className='overflow-hidden bg-[#FBF8F4] absolute w-[90.5vw] h-[50vh] rounded-b-3xl -z-10 px-4'>
<div className='overflow-hidden bg-[#FBF8F4] absolute w-[90.5vw] h-[60vh] rounded-b-3xl -z-10 px-4'>
<div className='mt-40 grid grid-cols-2'>
<div className='px-2 flex flex-col'>
<a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Best sellers<span className="text-xs">21</span></a>