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-23 18:51:48 -05:00
parent bdaa6b64c5
commit c624d79b32
5 changed files with 15 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
awwwards/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
assets

10
awwwards/index.html
View file

@ -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>

32
awwwards/style.css
View file

@ -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;

4
awwwards_ss2/index.html
View file

@ -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>

3
awwwards_ss2/style.css
View file

@ -315,9 +315,6 @@ nav h3{
padding: 4vw 0;
background-color: #EFEAE3;
}
.section3-topic{
padding: 0 2.4rem;
}
.topic{
height: 150px;
width: 100%;