219 lines
8.2 KiB
HTML
219 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Hover Animated Portfolio</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<!-- ################## Under Grid Start ################# -->
|
|
<div class='under-port-container'>
|
|
<div class='under-portfolio'>
|
|
<!-- A -->
|
|
<div class='under-items large'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/06/13/13/06/monster-4271569_960_720.png'></image>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- B -->
|
|
<div class='under-items medium'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2017/12/28/12/31/desktop-3045123_960_720.jpg'></image>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- C -->
|
|
<div class='under-items medium'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/09/14/09/44/cat-4475583_960_720.png'></image>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- D -->
|
|
<div class='under-items tall'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2014/04/03/00/35/giraffe-308771_960_720.png'></image>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- E -->
|
|
<div class='under-items small'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2018/10/02/15/18/cloud-3719093_960_720.png'></image>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- F -->
|
|
<div class='under-items wide'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2019/08/09/19/22/leaves-4395694_960_720.png'></image>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- G -->
|
|
<div class='under-items wide'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2016/01/02/16/21/girl-1118419_960_720.jpg'></image>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- H -->
|
|
<div class='under-items medium'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' class='under-img' href='https://cdn.pixabay.com/photo/2020/08/02/03/33/red-fox-5456627_960_720.jpg'></image>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- #################### Surface Grid Start #################### -->
|
|
<div class='port-container'>
|
|
<div class='items portfolio'>
|
|
<!-- A -->
|
|
<div class='item large'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<defs>
|
|
<clipPath id='clip-0'>
|
|
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
|
|
</clipPath>
|
|
</defs>
|
|
<text class='svg-text big-box' dy='.3em' x='50%' y='50%'>
|
|
A
|
|
</text>
|
|
<g clip-path='url(#clip-0)'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/06/13/13/06/monster-4271569_960_720.png'></image>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
|
|
<!-- B -->
|
|
<div class='item medium'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<defs>
|
|
<clipPath id='clip-1'>
|
|
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
|
|
</clipPath>
|
|
</defs>
|
|
<text class='svg-text' dy='.3em' x='50%' y='50%'>
|
|
B
|
|
</text>
|
|
<g clip-path='url(#clip-1)'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2017/12/28/12/31/desktop-3045123_960_720.jpg'></image>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- C -->
|
|
<div class='item medium'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<defs>
|
|
<clipPath id='clip-2'>
|
|
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
|
|
</clipPath>
|
|
</defs>
|
|
<text class='svg-text' dy='.3em' x='50%' y='50%'>
|
|
C
|
|
</text>
|
|
<g clip-path='url(#clip-2)'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/09/14/09/44/cat-4475583_960_720.png'></image>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- D -->
|
|
<div class='item tall'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<defs>
|
|
<clipPath id='clip-3'>
|
|
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
|
|
</clipPath>
|
|
</defs>
|
|
<text class='svg-text' dy='.3em' x='50%' y='50%'>
|
|
D
|
|
</text>
|
|
<g clip-path='url(#clip-3)'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2014/04/03/00/35/giraffe-308771_960_720.png'</image>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- E -->
|
|
<div class='item small'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<defs>
|
|
<clipPath id='clip-4'>
|
|
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
|
|
</clipPath>
|
|
</defs>
|
|
<text class='svg-text small-box' dy='.3em' x='50%' y='50%'>
|
|
E
|
|
</text>
|
|
<g clip-path='url(#clip-4)'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2018/10/02/15/18/cloud-3719093_960_720.png'></image>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- F -->
|
|
<div class='item wide'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<defs>
|
|
<clipPath id='clip-5'>
|
|
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
|
|
</clipPath>
|
|
</defs>
|
|
<text class='svg-text' dy='.3em' x='50%' y='50%'>
|
|
F
|
|
</text>
|
|
<g clip-path='url(#clip-5)'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2019/08/09/19/22/leaves-4395694_960_720.png'></image>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- G -->
|
|
<div class='item wide'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<defs>
|
|
<clipPath id='clip-6'>
|
|
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
|
|
</clipPath>
|
|
</defs>
|
|
<text class='svg-text' dy='.3em' x='50%' y='50%'>
|
|
G
|
|
</text>
|
|
<g clip-path='url(#clip-6)'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2016/01/02/16/21/girl-1118419_960_720.jpg'></image>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- H -->
|
|
<div class='item medium'>
|
|
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
|
|
<defs>
|
|
<clipPath id='clip-7'>
|
|
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
|
|
</clipPath>
|
|
</defs>
|
|
<text class='svg-text' dy='.3em' x='50%' y='50%'>
|
|
H
|
|
</text>
|
|
<g clip-path='url(#clip-7)'>
|
|
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' href='https://cdn.pixabay.com/photo/2020/08/02/03/33/red-fox-5456627_960_720.jpg'</image>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|