Skip to content

Instantly share code, notes, and snippets.

@Ashon-G

Ashon-G/index.html

Created January 12, 2024 02:52
Show Gist options
  • Save Ashon-G/3f92b3d0746caa7a850bd9ad521b99c8 to your computer and use it in GitHub Desktop.
Save Ashon-G/3f92b3d0746caa7a850bd9ad521b99c8 to your computer and use it in GitHub Desktop.
Download ZIP
Snippet from pay-26eb69.webflow.io
Raw
index.html
<!-- Exported with SnipCSS extension (Ver 1.8.4) -->
<section class="hero-fbb">
<div class="container-1d3">
<div class="wrapper-hb6">
<h1>a home for all your net 30 accounts</h1>
<p class="margin-bottom-ooh">Say goodbye to the hassle of dealing with spreadsheets and the tedious search for invoices buried in your spam folder. With Paygeon, streamline your vendor management process effortlessly.</p><a href="#" class="button-49d button-16o">Get Started</a>
<div class="w-9yk">
<meta>
<title>CodePen - A Pen by Vashon Gonzales</title>
<link href="../css/orbit.css">
<link href="https://i.icomoon.io/public/temp/0b1ac9bc57/PartnerIcons/style.css">
<div class="orb-ts4">
<ul class="orbit-prt">
<li class="orbit-w4t">
<img src="https://paygeon.com/website/images/new/Primary%20color.svg" id="mid-ltw" width="78px">
</li>
<li>
<ul class="ring-o5h">
<li>
<img src="https://crownofficesupplies.com/wp-content/uploads/2020/04/fav-02.png" width="54px">
</li>
<li>
<img src="https://cdn.worldvectorlogo.com/logos/76-orange-logo.svg" width="54px">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ49rZNV_pbUBTnzKQ1wsv2lXoe0VECYO1fZlmOeWDE5xN2X4jN4s68Rp67xVeFo-aJYeo&amp;usqp=CAU" width="54px">
</li>
<li>
<img src="https://lh3.googleusercontent.com/proxy/Sk25VAn5wbyMoPSTLHFw2RZ46a70PZah_oewgXfARIUmsJmyAv8yaNMs-FzQ-LXKlz8vj7eZSKHWg9xzLxuBdS2jk5yUxzjebFWSBRJ9ts-eD0KC8oN2xnvB1yFE6Sma" width="54px">
</li>
</ul>
</li>
<li>
<ul class="ring-jsa">
<li>
<img src="https://seekvectorlogo.net/wp-content/uploads/2023/02/quill-com-vector-logo-2023.png" width="54px">
</li>
<li>
<img src="https://creativeanalyticsdc.com/wp-content/uploads/2020/10/CreativeAnalytics_512x512_web-e1669265389350.png">
</li>
</ul>
</li>
<li>
<ul class="ring-39x">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/social-media-2189/48/29-Slack-512.png">
</li>
<li>
<img src="https://i0.wp.com/joinhandshakecom.wpcomstaging.com/wp-content/uploads/2023/03/eta-2023-logo-uline.png?fit=300%2C300&amp;ssl=1">
</li>
</ul>
</li>
<li>
<ul class="ring-4cg">
<li>
<img src="https://pbs.twimg.com/profile_images/1036978663194021889/GArz-7sF_400x400.jpg">
</li>
<li>
<img src="https://static-00.iconduck.com/assets.00/newegg-icon-1024x1024-84a09bof.png">
</li>
<li>
<img src="https://media.designrush.com/inspiration_images/134802/conversions/_1511456315_653_apple-mobile.jpg">
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Raw
style.css
/* Exported with SnipCSS extension (Ver 1.8.4) */
.hero-fbb {
background-color: #f5f7fa;
border-bottom: 1px solid #e4ebf3;
padding: 80px 30px;
position: relative;
}
.container-1d3 {
width: 100%;
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
.wrapper-hb6 {
max-width: 750px;
text-align: center;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-left: auto;
margin-right: auto;
display: flex;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
h1 {
margin-bottom: 10px;
font-weight: bold;
}
h1 {
margin-top: 20px;
font-size: 38px;
line-height: 44px;
}
p {
margin-top: 0;
margin-bottom: 10px;
}
.margin-bottom-ooh {
margin-bottom: 24px;
}
a {
background-color: rgba(0, 0, 0, 0);
}
.button-16o {
color: #fff;
line-height: inherit;
cursor: pointer;
background-color: #3898ec;
border: 0;
border-radius: 0;
padding: 9px 15px;
text-decoration: none;
display: inline-block;
}
.button-49d {
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
background-color: #1a1b1f;
padding: 12px 25px;
font-size: 12px;
line-height: 20px;
transition: all .2s;
}
a:active,a:hover {
outline: 0;
}
.button-49d:hover {
color: #fff;
background-color: #32343a;
}
.w-9yk:before,.w-9yk:after {
content: " ";
grid-area: 1 / 1 / 2 / 2;
display: table;
}
.w-9yk:after {
clear: both;
}
.orb-ts4 {
float: left;
width: 100%;
min-width: 100vw;
min-height: 100vh;
}
ul {
margin-top: 0;
margin-bottom: 10px;
padding-left: 40px;
}
.orbit-prt {
height: 40em;
list-style: none;
font-size: 1.3em;
}
.orbit-w4t {
z-index: 5;
font-size: 2em;
width: 2.8em;
height: 1.8em;
line-height: 1.8em;
text-align: center;
background: clear;
border-radius: 0%;
}
.orbit-prt > li {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
img {
border: 0;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
img {
border-radius: 90px;
width: 44px;
}
#mid-ltw {
width: 120px;
height: auto;
}
.ring-o5h {
width: 25em;
height: 25em;
animation: clockwiseRotate 35s linear infinite;
}
ul[class^="ring"] {
transition: all 300ms ease-in-out;
}
ul[class^="ring"] {
border: solid 1px rgba(33, 150, 243, 0.8);
position: relative;
padding: 0;
border-radius: 50%;
list-style: none;
box-sizing: content-box;
}
.ring-jsa {
width: 20em;
height: 20em;
animation: clockwiseRotate 30s linear infinite;
}
.ring-39x {
width: 15em;
height: 15em;
animation: clockwiseRotate 25s linear infinite;
}
.ring-4cg {
width: 10em;
height: 10em;
animation: clockwiseRotate 20s linear infinite;
}
ul[class^="ring"] li {
transition: all 300ms ease-in-out;
}
ul[class^="ring"] li {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 1.6em;
height: 1.6em;
margin: -0.8em;
}
.ring-o5h > :nth-of-type(1) {
transform: rotate(95deg) translate(12.5em) rotate(-95deg);
}
.ring-o5h > :nth-of-type(2) {
transform: rotate(190deg) translate(12.5em) rotate(-190deg);
}
.ring-o5h > :nth-of-type(3) {
transform: rotate(285deg) translate(12.5em) rotate(-285deg);
}
.ring-o5h > :nth-of-type(4) {
transform: rotate(380deg) translate(12.5em) rotate(-380deg);
}
.ring-jsa > :nth-of-type(1) {
transform: rotate(126.6666666667deg) translate(10em) rotate(-126.6666666667deg);
}
.ring-jsa > :nth-of-type(2) {
transform: rotate(253.3333333333deg) translate(10em) rotate(-253.3333333333deg);
}
.ring-39x > :nth-of-type(1) {
transform: rotate(47.5deg) translate(7.5em) rotate(-47.5deg);
}
.ring-39x > :nth-of-type(2) {
transform: rotate(95deg) translate(7.5em) rotate(-95deg);
}
.ring-4cg > :nth-of-type(1) {
transform: rotate(126.6666666667deg) translate(5em) rotate(-126.6666666667deg);
}
.ring-4cg > :nth-of-type(2) {
transform: rotate(253.3333333333deg) translate(5em) rotate(-253.3333333333deg);
}
.ring-4cg > :nth-of-type(3) {
transform: rotate(380deg) translate(5em) rotate(-380deg);
}
@keyframes clockwiseRotate {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment