307 lines
14 KiB
HTML
307 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Card Interactions with GSAP</title>
|
|
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css'><link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="w-full h-screen overflow-hidden flex items-center justify-center">
|
|
<div class="mock-window">
|
|
<div class="page overflow-hidden">
|
|
<div class="device-top hidden sm:block"></div>
|
|
<div class="nav overflow-hidden mt-6 sm:mt-0">
|
|
<div class="title-sets">
|
|
<div class="title-set-1">
|
|
<div class="titles">
|
|
<div class="uppercase px-6 text-secondary">
|
|
Sunday, September 7
|
|
</div>
|
|
<div class="px-6 font-bold" style="font-size: 30px">
|
|
For You
|
|
</div>
|
|
</div>
|
|
<div class="tabs flex px-6 justify-between">
|
|
<button class="tab-selected px-5 rounded-full">Nature</button>
|
|
<button class="px-5 rounded-full text-secondary">City</button>
|
|
<button class="px-5 rounded-full text-secondary">
|
|
People
|
|
</button>
|
|
<button class="px-5 rounded-full text-secondary">
|
|
Animals
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="title-set-2">
|
|
<div class="titles flex items-center justify-between">
|
|
<div class="">
|
|
<div class="uppercase px-6 text-secondary">Collections</div>
|
|
<div class="px-6 font-bold" style="font-size: 30px">
|
|
Plants
|
|
</div>
|
|
</div>
|
|
<div class="pr-6 h-full flex items-center">
|
|
<div class="rounded-full p-2 flex items-center justify-center" style="
|
|
height: 50px;
|
|
width: 50px;
|
|
background-color: #424446;
|
|
">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-list.svg" alt="" class="w-full h-full" />
|
|
</div>
|
|
<div class="
|
|
rounded-full
|
|
ml-4
|
|
p-2
|
|
flex
|
|
items-center
|
|
justify-center
|
|
" style="
|
|
height: 50px;
|
|
width: 50px;
|
|
background-color: #1e1e20;
|
|
">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-grid.svg" alt="" class="w-full h-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 section-1 overflow-hidden" style="height: 414px" id="section-1">
|
|
<div class="card-set relative" style="border-radius: 24px; height: 366px; width: 366px">
|
|
<div class="card card-3 absolute inset-0 flex items-end">
|
|
<div class="p-6">
|
|
<div class="flex items-center user-details">
|
|
<div class="avatar-border rounded-full" style="width: 64px; height: 64px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar3.jpg" alt="" class="w-full rounded-full" />
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="font-bold" style="font-size: 21px">
|
|
Emma Wallace
|
|
</div>
|
|
<div class="">13 Photos</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card card-2 absolute inset-0 flex items-end">
|
|
<div class="p-6">
|
|
<div class="flex items-center user-details">
|
|
<div class="avatar-border rounded-full" style="width: 64px; height: 64px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar2.jpg" alt="" class="w-full rounded-full" />
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="font-bold" style="font-size: 21px">
|
|
Harry Sans
|
|
</div>
|
|
<div class="">16 Photos</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card card-1 absolute inset-0 flex items-end">
|
|
<div class="p-6">
|
|
<div class="flex items-center user-details">
|
|
<div class="avatar-border rounded-full" style="width: 64px; height: 64px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar1.jpg" alt="" class="w-full rounded-full" />
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="font-bold" style="font-size: 21px">
|
|
Emma Wallace
|
|
</div>
|
|
<div class="">13 Photos</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-6 gallery">
|
|
<div class="flex items-center mt-6">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-pin.svg" alt="" style="height: 16px" />
|
|
<div class="ml-1 font-semibold">New Zeland</div>
|
|
</div>
|
|
<div class="py-4 text-secondary" style="font-size: 18px">
|
|
A New Zeland based product designer who specializes in
|
|
interaction design
|
|
</div>
|
|
<div class="flex mt-2">
|
|
<div class="w-1/2 pr-3">
|
|
<div class="py-3 w-full" style="height: 190px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-1.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
|
|
</div>
|
|
<div class="py-3 w-full" style="height: 270px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-2.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 pl-3">
|
|
<div class="py-3 w-full" style="height: 130px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-3.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
|
|
</div>
|
|
<div class="py-3 w-full" style="height: 200px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-4.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
|
|
</div>
|
|
<div class="py-3 w-full" style="height: 130px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-gallery-image-5.jpg" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 section-2" style="height: 414px">
|
|
<div class="h-full overflow-hidden" style="border-radius: 24px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-image4.jpg" alt="" class="w-full h-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="backdrop" style="transform: translate(0px)"></div>
|
|
|
|
<div class="device-details text-white px-6 pt-3 hidden sm:block" style="transform: translate(0px)">
|
|
<div class="flex items-center justify-between">
|
|
<div class="">9:41</div>
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-device.svg" alt="" style="height: 26px" />
|
|
</div>
|
|
</div>
|
|
<div class="bottom-nav px-6 pt-3" style="transform: translate(0px)">
|
|
<div class="relative w-full" style="height: 64px">
|
|
<div class="
|
|
absolute
|
|
inset-0
|
|
rounded-full
|
|
flex
|
|
items-center
|
|
justify-between
|
|
px-3
|
|
nav-bottom-back
|
|
" style="background: #c0c0c0cc">
|
|
<div class="rounded-full relative btn-home" style="height: 48px; width: 48px; background-color: #f8f8f8">
|
|
<div class="
|
|
absolute
|
|
inset-0
|
|
flex
|
|
items-center
|
|
justify-center
|
|
icon-home
|
|
">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-home.svg" alt="" />
|
|
</div>
|
|
<div class="
|
|
absolute
|
|
inset-0
|
|
flex
|
|
items-center
|
|
justify-center
|
|
icon-arrow-down
|
|
">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-arrow-down.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="rounded-full flex items-center justify-center" style="height: 48px; width: 48px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-search.svg" alt="" />
|
|
</div>
|
|
<div class="
|
|
bg-pink-500
|
|
rounded-full
|
|
flex
|
|
items-center
|
|
justify-center
|
|
" style="height: 48px; width: 48px"></div>
|
|
<div class="rounded-full flex items-center justify-center" style="height: 48px; width: 48px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-bell.svg" alt="" />
|
|
</div>
|
|
<div class="
|
|
bg-white
|
|
p-0.5
|
|
rounded-full
|
|
flex
|
|
items-center
|
|
justify-center
|
|
" style="height: 48px; width: 48px">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-avatar4.jpg" alt="" class="w-full h-full rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute absolute-center bg-white rounded-full btn-options" style="width: 74px; height: 74px">
|
|
<div class="w-full h-full relative">
|
|
<div class="absolute inset-0 rounded-full plus-btn-bg" style="background: #6469e3"></div>
|
|
|
|
<div class="
|
|
absolute
|
|
inset-0
|
|
flex
|
|
items-center
|
|
justify-center
|
|
plus-icon
|
|
" style="color: #39414d">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<g filter="url(#filter0_d)">
|
|
<path d="M22.1523 15.125H16.875V9.84766C16.875 9.36641 16.4812 8.97266 16 8.97266C15.5188 8.97266 15.125 9.36641 15.125 9.84766V15.125H9.84766C9.36641 15.125 8.97266 15.5188 8.97266 16C8.97266 16.2406 9.07109 16.4594 9.22969 16.618C9.38828 16.7766 9.60703 16.875 9.84766 16.875H15.125V22.1523C15.125 22.393 15.2234 22.6117 15.382 22.7703C15.5406 22.9289 15.7594 23.0273 16 23.0273C16.4812 23.0273 16.875 22.6336 16.875 22.1523V16.875H22.1523C22.6336 16.875 23.0273 16.4812 23.0273 16C23.0273 15.5188 22.6336 15.125 22.1523 15.125Z" />
|
|
</g>
|
|
<defs>
|
|
<filter id="filter0_d" x="6.97266" y="6.97266" width="22.0547" height="22.0547" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
|
<feOffset dx="2" dy="2" />
|
|
<feGaussianBlur stdDeviation="2" />
|
|
<feComposite in2="hardAlpha" operator="out" />
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="
|
|
absolute
|
|
inset-0
|
|
flex
|
|
items-center
|
|
justify-center
|
|
btn-folders
|
|
">
|
|
<div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-folders.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="
|
|
absolute
|
|
inset-0
|
|
flex
|
|
items-center
|
|
justify-center
|
|
btn-camera
|
|
">
|
|
<div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-camera.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="
|
|
absolute
|
|
inset-0
|
|
flex
|
|
items-center
|
|
justify-center
|
|
btn-play
|
|
">
|
|
<div class="rounded-full" style="width: 60px; height: 60px; background-color: #dddddd">
|
|
<img src="https://assets.codepen.io/3685267/card-interactions-gsap-play.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script><script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|