-
Notifications
You must be signed in to change notification settings - Fork 0
/
credits.html
88 lines (84 loc) · 9.95 KB
/
credits.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./assets/media/vector/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Banner | Elora</title>
<link rel="stylesheet" href="./src/css/base.css" />
</head>
<body class="h-full flex flex-col justify-between">
<header class="px-5 md:px-12 py-6 flex justify-between">
<a href="./">
<div class="w-8 group hover:text-red transition-colors">
<svg class="w-full h-full" viewBox="0 0 25 24">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.6044 0.493307C13.8221 0.498685 14.0216 0.503611 14.1951 0.503611H15.8023C16.1746 0.503611 16.5084 0.545387 16.7728 0.582302C16.839 0.591538 16.8993 0.600195 16.9554 0.60825C17.1447 0.635414 17.2862 0.655726 17.4426 0.668236C18.318 0.738268 19.0548 0.873118 19.8641 1.07546C20.947 1.34617 21.5868 2.09454 21.8766 2.43354C21.9263 2.49167 21.9657 2.53776 21.9953 2.56734C22.1907 2.76274 22.3414 2.97808 22.4109 3.0773C22.4187 3.08841 22.4254 3.09806 22.4311 3.10607C22.4826 3.17861 22.5032 3.20321 22.5081 3.20884C23.0282 3.67269 23.116 4.27203 23.1418 4.44772L23.1423 4.45158C23.1481 4.49085 23.153 4.52927 23.1565 4.55756C23.2882 4.87305 23.4034 5.21838 23.4931 5.56505C23.5519 5.7112 23.5884 5.86876 23.5984 6.03349C23.6133 6.11228 23.6269 6.1916 23.639 6.2711C23.657 6.32463 23.6806 6.3855 23.7117 6.45975C23.7148 6.46258 23.7178 6.4654 23.7208 6.46822C23.8162 6.5576 23.9958 6.73544 24.1414 7.00259C24.2984 7.29078 24.3787 7.61168 24.3787 7.94821V8.61352C24.3787 8.7715 24.3846 8.90997 24.3918 9.078C24.3965 9.18919 24.4018 9.31333 24.4063 9.46462C24.416 9.7899 24.4187 10.1987 24.3593 10.6142C24.3318 10.807 24.2847 10.9705 24.2455 11.0899C24.2165 11.1783 24.1803 11.2746 24.1605 11.3275C24.1564 11.3383 24.153 11.3474 24.1505 11.3541C24.148 11.3608 24.1458 11.3669 24.1438 11.3725C24.1374 11.5853 24.1146 11.78 24.0994 11.9106C24.0984 11.919 24.0974 11.9272 24.0965 11.935C24.0756 12.1143 24.0677 12.1975 24.0677 12.2684V14.4847C24.0677 15.1071 23.9752 15.6895 23.9017 16.1514L23.9014 16.153C23.8228 16.6476 23.7644 17.0145 23.7563 17.3823C23.7491 17.7059 23.685 18.001 23.6509 18.1581C23.6489 18.1675 23.647 18.1763 23.6452 18.1846C23.6254 18.2765 23.6147 18.3273 23.6072 18.3725C23.6004 18.4134 23.6006 18.425 23.6007 18.4191C23.5884 18.9721 23.4954 19.5347 23.3374 20.0538C23.3291 20.0809 23.3187 20.1168 23.3063 20.1594C23.2543 20.3379 23.1683 20.6332 23.0677 20.8888C22.9447 21.2013 22.7068 21.7186 22.2301 22.1086C22.0607 22.2472 21.9396 22.3767 21.7707 22.5572C21.6577 22.678 21.5233 22.8217 21.3386 23.0063C20.9614 23.3836 20.5268 23.568 20.0927 23.6263C19.9132 23.6504 19.7542 23.65 19.6584 23.6487C19.5893 23.6477 19.5558 23.6466 19.5298 23.6458C19.5024 23.645 19.4834 23.6444 19.4399 23.6444H9.10163C8.41302 23.6444 7.7275 23.6187 7.07201 23.5941C6.79869 23.5839 6.53059 23.5738 6.26967 23.5659C5.97663 23.557 5.73399 23.4871 5.56897 23.4279C5.42693 23.377 5.29277 23.3147 5.2238 23.2827C5.21732 23.2797 5.21141 23.277 5.20613 23.2745C5.17839 23.2617 5.15854 23.2527 5.1424 23.2455C5.01045 23.231 4.87844 23.201 4.74912 23.154C4.58604 23.0948 4.4496 23.0168 4.33871 22.937C4.18621 22.8991 4.02705 22.8459 3.86263 22.7712C3.86263 22.7712 3.85898 22.7686 3.72036 22.7265L3.71433 22.7247C3.60196 22.6905 3.38674 22.6251 3.15584 22.5096C2.77416 22.3188 2.52305 22.0452 2.39962 21.9034C2.34472 21.8403 2.29041 21.7734 2.25712 21.7324C2.25144 21.7254 2.24637 21.7191 2.24201 21.7138C2.20307 21.666 2.19182 21.6536 2.19182 21.6536C2.0071 21.458 1.84594 21.2188 1.73285 21.0295C1.62193 20.8439 1.47746 20.5734 1.39071 20.2915C1.32389 20.0743 1.30061 19.8781 1.28938 19.7534C1.28357 19.6888 1.27988 19.6287 1.27734 19.5856C1.27677 19.576 1.27626 19.5673 1.27579 19.5593C0.984347 19.0331 0.923808 18.4963 0.909614 18.1281C0.901265 17.9115 0.908174 17.7052 0.914439 17.547C0.915846 17.5115 0.917189 17.4789 0.918437 17.4485C0.923434 17.3271 0.926921 17.2423 0.926921 17.1589V9.00233C0.926921 8.54855 1.0117 8.13055 1.06617 7.86202C1.06861 7.85 1.07098 7.83827 1.07329 7.82685C1.13681 7.51254 1.16021 7.3727 1.16021 7.25265C1.16021 7.11903 1.16034 6.8673 1.18221 6.60745C1.19841 6.41498 1.24165 5.95199 1.45982 5.53989C1.46499 5.53012 1.46983 5.52098 1.47442 5.51232C1.48814 5.48643 1.49963 5.46476 1.51116 5.44274C1.52585 5.41468 1.53685 5.39319 1.54574 5.37524C1.54725 5.37219 1.54866 5.36931 1.54998 5.36661C1.56227 4.9866 1.69258 4.68108 1.83061 4.46326C1.86484 4.40925 1.89897 4.36145 1.93013 4.32067C2.03396 3.9588 2.22727 3.70914 2.32793 3.59149C2.51427 3.15603 2.80174 2.81009 3.00263 2.59194C3.27798 2.29293 3.57684 2.03867 3.80004 1.86507C4.59356 1.24788 5.58155 1.29864 6.00232 1.3208C6.13239 1.32764 6.26068 1.33728 6.36938 1.34544L6.37829 1.34611C6.49514 1.35488 6.58961 1.36188 6.678 1.36639C6.85216 1.37527 6.91798 1.36861 6.92621 1.36778C7.01467 1.35109 7.1038 1.33437 7.19213 1.3177C8.46468 1.07755 9.72373 0.839955 10.9891 0.60989C11.8664 0.450376 12.8461 0.474576 13.6044 0.493307Z"
fill="currentColor"
/>
</svg>
</div>
</a>
</header>
<div id="app" class="px-5 md:px-12 pt-16 h-full">
<h1 class="font-semibold max-w-xs">
This is a simple banner concept I found on the Dior website.
<span class="w-3.5 inline-block align-middle"><img class="w-full h-full" src="./assets/media/images/hehe.png" alt="" /></span>
</h1>
<div class="grid gap-10 mt-14">
<div>
<div class="w-[78px] h-4">
<svg class="w-full h-full">
<use xlink:href="./assets/media/vector/symbols.svg#illustration"></use>
</svg>
</div>
<h4 class="font-bold mt-2">
<span class="font-normal">by</span> <a href="https://dribbble.com/_neon" rel="norefferer" target="_blank">Me</a>
<span class="w-3.5 inline-block"><img class="w-full h-full" src="./assets/media/images/sad.png" alt="" /></span>
</h4>
</div>
<div>
<div class="w-[98px] h-4">
<svg class="w-full h-full">
<use xlink:href="./assets/media/vector/symbols.svg#development"></use>
</svg>
</div>
<h4 class="font-bold mt-2"><span class="font-normal">by</span> <a href="https://github.com/eloraa" rel="norefferer" target="_blank">Neon</a>
<span class="w-3.5 inline-block"><img class="w-full h-full" src="./assets/media/images/flower.png" alt="" /></span></h4>
</div>
</div>
<div class="mt-8">
<a href="https://github.com/eloraa/immersive-banner">
<div class="w-40 h-5">
<svg class="w-full h-full">
<use xlink:href="./assets/media/vector/symbols.svg#download"></use>
</svg>
</div>
</a>
</div>
</div>
<footer class="px-5 md:px-12 py-4">
<a href="https://github.com/eloraa" rel="norefferer" target="_blank" class="group inline-block">
<div class="w-12">
<svg class="w-full h-full" viewBox="0 0 39 28">
<foreignObject x="5" y="0" width="28" height="28">
<div class="w-full h-full">
<div
class="scale-110 w-full h-full bg-[url('../../assets/media/images/sprites/heart.png')] bg-no-repeat bg-[length:2900%] bg-left group-hover:bg-right transition-none group-hover:[transition:background-position_800ms_steps(28)]"
></div>
</div>
</foreignObject>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.0156 7.64771C10.0156 7.27437 10.2023 7.08771 10.5756 7.08771H10.9756C11.3489 7.08771 11.5356 7.27437 11.5356 7.64771V18.3677C11.5356 18.741 11.3489 18.9277 10.9756 18.9277H10.5756C10.2023 18.9277 10.0156 18.741 10.0156 18.3677V7.64771ZM4.319 19.0877C3.11367 19.0877 2.16967 18.709 1.487 17.9517C0.815004 17.1837 0.479004 16.069 0.479004 14.6077C0.479004 13.157 0.815004 12.0477 1.487 11.2797C2.159 10.5117 3.09234 10.1277 4.287 10.1277C5.46034 10.1277 6.383 10.501 7.055 11.2477C7.727 11.9837 8.07367 13.061 8.095 14.4797C8.095 14.853 7.903 15.0397 7.519 15.0397H1.999C1.999 15.893 2.207 16.5543 2.623 17.0237C3.04967 17.493 3.615 17.7277 4.319 17.7277C5.03367 17.7277 5.62034 17.4717 6.079 16.9597C6.303 16.7143 6.56434 16.613 6.863 16.6557C7.183 16.6983 7.391 16.8157 7.487 17.0077C7.583 17.1997 7.54567 17.4184 7.375 17.6637C6.735 18.613 5.71634 19.0877 4.319 19.0877ZM26.3438 10.8477C26.3438 10.4744 26.5305 10.2877 26.9038 10.2877H27.3038C27.6772 10.2877 27.8638 10.4744 27.8638 10.8477V11.2957C28.3438 10.6237 29.1171 10.2397 30.1838 10.1437C30.5571 10.1117 30.7438 10.2931 30.7438 10.6877V10.9277C30.7438 11.2691 30.5571 11.4664 30.1838 11.5197C28.6371 11.7224 27.8638 12.6717 27.8638 14.3677V18.3677C27.8638 18.741 27.6772 18.9277 27.3038 18.9277H26.9038C26.5305 18.9277 26.3438 18.741 26.3438 18.3677V10.8477ZM34.9386 19.0877C33.936 19.0877 33.168 18.8477 32.6346 18.3677C32.112 17.8877 31.8506 17.1677 31.8506 16.2077C31.8506 15.2477 32.112 14.5277 32.6346 14.0477C33.168 13.5677 33.936 13.3277 34.9386 13.3277C35.3013 13.3277 35.664 13.4023 36.0266 13.5517C36.4 13.6903 36.6986 13.8877 36.9226 14.1437V13.0717C36.9226 12.5703 36.72 12.181 36.3146 11.9037C35.9093 11.6263 35.4826 11.4877 35.0346 11.4877C34.4373 11.4877 33.8293 11.6317 33.2106 11.9197C33.0826 11.973 32.976 11.9997 32.8906 11.9997C32.7306 11.9997 32.5973 11.8983 32.4906 11.6957L32.4106 11.5357C32.24 11.173 32.3093 10.901 32.6186 10.7197C33.312 10.325 34.1013 10.1277 34.9866 10.1277C35.6266 10.1277 36.1813 10.2183 36.6506 10.3997C37.1306 10.5703 37.4933 10.805 37.7386 11.1037C37.984 11.3917 38.16 11.6903 38.2666 11.9997C38.384 12.309 38.4426 12.629 38.4426 12.9597V17.3277C38.4426 17.669 38.464 18.0157 38.5066 18.3677C38.56 18.741 38.4 18.9277 38.0266 18.9277H37.5146C37.1946 18.9277 36.9973 18.7144 36.9226 18.2877C36.4533 18.821 35.792 19.0877 34.9386 19.0877Z"
fill="black"
/>
</svg>
</div>
</a>
</footer>
</body>
</html>