Skip to content

Instantly share code, notes, and snippets.

@fayazara

fayazara/index.html

Created June 14, 2022 07:41
Show Gist options
  • Save fayazara/2342389352e45865a7d3d31b5b8c91ed to your computer and use it in GitHub Desktop.
Save fayazara/2342389352e45865a7d3d31b5b8c91ed to your computer and use it in GitHub Desktop.
Download ZIP
Octopus Saas Connection Illustration
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<style>
* {
box-sizing: border-box;
font-family: "Avenir Next", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.bg-grid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.04)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}
.mask {
background: linear-gradient(0deg, white, transparent);
}
.box-shadow {
box-shadow: 0px 4px 24px -1px rgba(0, 0, 0, 0.2);
}
.social-card {
backdrop-filter: blur(12px);
}
.animate-stroke {
animation: dash 45s linear infinite forwards;
}
.tail-animation {
animation: dash 45s linear infinite;
animation-direction: reverse;
left: 50%;
position: absolute;
bottom: 30%;
z-index: 20;
transform: translateX(-50%);
}
@keyframes dash {
0% {
stroke-dashoffset: 8;
}
100% {
stroke-dashoffset: 1000;
}
}
.woot::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
border-radius: 2.3rem;
transform: scale(0.9) translateZ(0);
filter: blur(15px);
background: linear-gradient(to right,
#56B9FC,
#47ACDF,
#327AFF,
#F85D76,
#3BE676,
#F12E45,
#4285F4,
#EA4335,
#FBBC06);
background-size: 200% 200%;
animation: animateGlow 1.75s linear infinite;
}
@keyframes animateGlow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.super-shadow {
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
</style>
<div class="min-h-screen bg-white grid place-items-center p-16">
<div class="bg-slate-50 w-full rounded-3xl super-shadow bg-grid max-w-6xl mx-auto relative overflow-hidden">
<div class="h-full w-full absolute top-0 left-0 mask z-10"></div>
<!-- Text Content -->
<h1 class="text-center text-3xl absolute w-full text-slate-500 font-bold tracking-wide z-40 top-12">
Communicate with your customers, <br>
easier than ever
</h1>
<!-- Text Content -->
<!-- live Chat -->
<div class="z-30 absolute top-[58px] left-[48px] h-[86px] w-[86px]">
<div class="h-[86px] w-[86px] relative flex items-center justify-center">
<img src="/livechat.svg" alt="livechat" class="h-10 w-10 absolute z-10" />
<span class="h-[86px] w-[86px] rounded-2xl box-shadow absolute z-20 social-card border"></span>
<img src="/livechat.svg" alt="livechat" class="h-12 w-12 absolute z-30" />
</div>
</div>
<!-- live Chat -->
<!-- twitter -->
<div class="z-30 absolute top-[228px] left-[300px] h-[64px] w-[64px]">
<div class="h-[64px] w-[64px] relative flex items-center justify-center">
<img src="/twitter.svg" alt="twitter" class="h-8 w-8 absolute z-10" />
<span class="h-[64px] w-[64px] rounded-2xl box-shadow absolute z-20 social-card border"></span>
<img src="/twitter.svg" alt="twitter" class="h-8 w-8 absolute z-30" />
</div>
</div>
<!-- twitter -->
<!-- whatsapp -->
<div class="z-30 absolute top-[228px] right-[300px] h-[64px] w-[64px]">
<div class="h-[64px] w-[64px] relative flex items-center justify-center">
<img src="/whatsapp.svg" alt="whatsapp" class="h-8 w-8 absolute z-10" />
<span class="h-[64px] w-[64px] rounded-2xl box-shadow absolute z-20 social-card border"></span>
<img src="/whatsapp.svg" alt="whatsapp" class="h-8 w-8 absolute z-30" />
</div>
</div>
<!-- whatsapp -->
<!-- instagram -->
<div class="z-30 absolute top-[58px] right-[30px] h-[86px] w-[86px]">
<div class="h-[86px] w-[86px] relative flex items-center justify-center">
<img src="/instagram.svg" alt="instagram" class="h-12 w-12 absolute z-10" />
<span class="h-[86px] w-[86px] rounded-3xl box-shadow absolute z-20 social-card border"></span>
<img src="/instagram.svg" alt="instagram" class="h-10 w-10 absolute z-30" />
</div>
</div>
<!-- instagram -->
<!-- fbmessenger -->
<div class="z-30 absolute bottom-[55px] left-[65px] h-[100px] w-[100px]">
<div class="h-[100px] w-[100px] relative flex items-center justify-center">
<img src="/fbmessenger.svg" alt="fbmessenger" class="h-14 w-14 absolute z-10" />
<span class="h-[100px] w-[100px] rounded-3xl box-shadow absolute z-20 social-card border"></span>
<img src="/fbmessenger.svg" alt="fbmessenger" class="h-12 w-12 absolute z-30" />
</div>
</div>
<!-- fbmessenger -->
<!-- email -->
<div class="z-30 absolute bottom-[55px] right-[110px] h-[100px] w-[100px]">
<div class="h-[100px] w-[100px] relative flex items-center justify-center">
<img src="/email.svg" alt="email" class="h-14 w-14 absolute z-10" />
<span class="h-[100px] w-[100px] rounded-3xl box-shadow absolute z-20 social-card border"></span>
<img src="/email.svg" alt="email" class="h-12 w-12 absolute z-30" />
</div>
</div>
<!-- email -->
<!-- twillio -->
<div class="z-30 absolute bottom-[161px] right-[29px] h-[60px] w-[60px]">
<div class="h-[60px] w-[60px] relative flex items-center justify-center">
<img src="/twillio.svg" alt="twillio" class="h-6 w-6 absolute z-10" />
<span class="h-[60px] w-[60px] rounded-2xl box-shadow absolute z-20 social-card border"></span>
<img src="/twillio.svg" alt="twillio" class="h-8 w-8 absolute z-30" />
</div>
</div>
<!-- twillio -->
<!-- chatwoot -->
<div class="z-30 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[70%] h-[175px] w-[175px] woot">
<div class="h-[175px] w-[175px] relative flex items-center justify-center">
<img src="/chatwoot.svg" alt="chatwoot" class="h-24 w-24 absolute z-10" />
<span class="h-[175px] w-[175px] rounded-[2.3rem] box-shadow absolute z-20 bg-white border"></span>
<img src="/chatwoot.svg" alt="chatwoot" class="h-24 w-24 absolute z-30" />
</div>
</div>
<!-- chatwoot -->
<svg class="w-full h-auto relative z-20" viewBox="0 0 1300 660" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M658.5 262H796.379C804.73 262 811.5 255.23 811.5 246.879C811.5 238.528 818.27 231.758 826.621 231.758H894H1019C1041.09 231.758 1059 213.849 1059 191.758V152C1059 129.909 1076.91 112 1099 112H1298M658.5 294H1019C1041.09 294 1059 311.909 1059 334V405C1059 427.091 1076.91 445 1099 445H1298M658.5 326H791.354C804.689 326 815.5 336.811 815.5 350.146C815.5 363.482 826.311 374.293 839.646 374.293H859.209H949.419C971.51 374.293 989.419 392.201 989.419 414.293V502C989.419 524.091 1007.33 542 1029.42 542H1300M649 262H515.25C506.828 262 500 255.172 500 246.75C500 238.328 493.172 231.5 484.75 231.5H281.028C259.138 231.5 241.314 213.904 241.032 192.016L240.509 151.484C240.227 129.596 222.403 112 200.512 112H2M649 294H463.5H276C256.67 294 241 309.67 241 329C241 348.33 225.33 364 206 364H2M649 326H522.976C516.618 326.001 510.52 328.527 506.024 333.024C501.527 337.52 499.001 343.618 499 349.976C498.999 356.334 496.472 362.432 491.976 366.928C487.48 371.424 481.382 373.95 475.024 373.951H350.581C328.49 373.951 310.581 391.86 310.581 413.951V502C310.581 524.091 292.673 542 270.581 542H0"
stroke="#696767" stroke-opacity="0.24" stroke-width="2" stroke-miterlimit="3.62796"
stroke-dasharray="8 4" class="animate-stroke" />
</svg>
<svg class="tail-animation" width="2" height="67" viewBox="0 0 2 67" fill="none"
xmlns="http://www.w3.org/2000/svg" class="absolute top-[57%] left-1/2">
<line x1="1" y1="1" x2="0.999997" y2="66" stroke="#696767" stroke-opacity="0.24" stroke-width="2"
stroke-linecap="round" stroke-dasharray="8 4" />
</svg>
<!-- user -->
<div class="z-30 absolute bottom-[22%] left-1/2 -translate-x-1/2 h-[60px] w-[60px]">
<div class="h-[60px] w-[60px] relative flex items-center justify-center">
<img src="/user.svg" alt="user" class="h-6 w-6 absolute z-10" />
<span class="h-[60px] w-[60px] rounded-2xl box-shadow absolute z-20 social-card border"></span>
<img src="/user.svg" alt="user" class="h-8 w-8 absolute z-30" />
</div>
</div>
<p class="absolute left-1/2 bottom-[15%] -translate-x-1/2 z-40 font-semibold text-slate-400 uppercase">Your
Team</p>
<!-- user -->
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment