Skip to content

Instantly share code, notes, and snippets.

@Ashon-G

Ashon-G/index.html

Created January 10, 2024 17:57
Show Gist options
  • Save Ashon-G/e446220eda13ac593f34ecbf648b44f8 to your computer and use it in GitHub Desktop.
Save Ashon-G/e446220eda13ac593f34ecbf648b44f8 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Material Cards with Bootstrap
Raw
index.html
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,900" rel="stylesheet">
<div class="fullHeightContentContainer-0-4-5jy fullHeightContentContaine-d7-0-4-2x3">
<div>
</div>
<div class="pageContentContaine-0-4-gsr pageContentContaine-d10-0-4-war" style="">
<div class="pageContent-0-4-29j pageContent-d13-0-4-fpw">
<div class="main-oc4">
<div class="productTabContent-0-4-myc">
<ul data-rbd-droppable-context-id="8" class="containe-hhj">
<div>
<div class="container-b4j">
<div>
<div class="containe-qsa">
<div class="containe-j5w style-JUwFG" id="style-JUwFG">
</div>
<div class="header-9aj">
<div class="header-4x8">
<div class="header-a2l">
<span class="MuiTypography-root-no3 root-d36-0-4-see root-d36-0-4-q42 body-3pg MuiTypography-overline-8n4">
Welcome to Paygeon
</span>
<h4 class="MuiTypography-root-no3 root-d37-0-4-d9g root-d37-0-4-b87 h4-0-4-84p MuiTypography-h4-kvr">
Getting Started!
</h4>
</div>
</div>
<div class="editor-d1-0-4-6lm">
<div class="content-nom">
<div class="content-bvv content-oi8 root-0-4-8ho style-Ic4WF" id="edi-t5r">
<p class="editor-set" dir="ltr">
<span id="style-nNBjn" class="style-nNBjn">
My name is Vashon Gonzales, founder and CEO of Paygeon.
</span>
</p>
<p class="editor-set" dir="ltr">
<span id="style-qetDl" class="style-qetDl">
Building a startup, especially in the fintech sector, is laden with challenges. From navigating regulatory landscapes to addressing market fluctuations, Paygeon has demonstrated exceptional resilience in the face of adversity. We've weathered storms, adapted to changing circumstances, and not only survived but thrived. Our ability to overcome hurdles showcases the strength and determination embedded in the core of Paygeon.
</span>
</p>
<p class="editor-set style-RAYZL" dir="ltr" id="style-RAYZL">
<span>
Through Paygeon, we aim to create a secure ecosystem where entrepreneurs can focus on growing their businesses without the constant worry of falling victim to invoice fraud. It's not merely a tool; it's a proactive solution that aligns with the evolving needs of the modern business landscape, ensuring that financial transactions are not just efficient but also safeguarded against potential threats.
</span>
</p>
<p class="editor-set style-jsZGw" dir="ltr" id="style-jsZGw">
<span>
Ultimately, by mitigating the risks associated with fraudulent invoices, Paygeon stands as a testament to our dedication to providing a robust and trustworthy platform for startup founders navigating the intricacies of financial management.
</span>
</p>
<p class="editor-set" dir="ltr">
<span>
Thank you for joining us in our early stages, your support and feedback is what will drive this company forward. Don't hesitate to leave us feedback, comments, or concerns. We read and listen to every single request and actively do everything we can to make a product tailored to you and solving your problems.
</span>
</p>
<p class="editor-set" dir="ltr">
<span>
Without further delay, please enjoy the platform and reach out if you have any questions!
</span>
</p>
<p class="editor-set">
<br>
</p>
<p class="editor-set" dir="ltr">
<span>
Yours Truly,
</span>
</p>
<div>
<div class="containe-vy9 container-vg7">
<img src="https://cdn.disco.co/media/signature_5fadf324-9345-48a8-9921-6335f8a27d23.png" class="img-0-4-78v image-e7b">
</div>
</div>
<p class="editor-set">
<br>
</p>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card card-1">
<h3>Unlock Payments</h3>
<p>Verify your business and your citizenship to access payments and receivables features.</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-2">
<h3>1-Click Vendor Import</h3>
<p>Migrate your vendors from one payables platform to Paygeon using our templates</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<h3>Connect Pay Method</h3>
<p>Choose between debit card or credit card or link your bank for ach transactions</p>
</div>
</div><br>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card card-4">
<h3>Get Credit</h3>
<p>Coming soon...</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-5">
<h3>Automate Invoices</h3>
<p>Subscribe to Vualapp to automate invoice collections and distribution to your Paygeon account</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-6">
<h3>Explore the Market</h3>
<p>Explore vendor offerings and open accounts easily to accumulate large credit limits.</p>
</div>
</div><br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
<aside class="aside-0-4-2jo">
<ul data-rbd-droppable-context-id="8" class="container-jyw">
</ul>
</aside>
</div>
</div>
</div>
<section>
</section>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
body{
font-family: 'Nunito', sans-serif;
padding: 50px;
}
.card{
border-radius: 4px;
background: #fff;
box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
padding: 14px 80px 18px 36px;
cursor: pointer;
margin-bottom: 20px;
}
.card:hover{
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}
.card h3{
font-weight: 600;
}
.card img{
position: absolute;
top: 20px;
right: 15px;
max-height: 120px;
}
.card-1{
background-image: url(https://cdn-icons-png.flaticon.com/512/13039/13039861.png?ga=GA1.1.40122530.1703820003&);
background-repeat: no-repeat;
background-position: right;
background-size: 80px;
}
.card-2{
background-image: url(https://cdn-icons-png.flaticon.com/512/13039/13039402.png?ga=GA1.1.40122530.1703820003&);
background-repeat: no-repeat;
background-position: right;
background-size: 80px;
}
.card-3{
background-image: url(https://cdn-icons-png.flaticon.com/512/13039/13039554.png?ga=GA1.1.40122530.1703820003&);
background-repeat: no-repeat;
background-position: right;
background-size: 80px;
}
.card-4{
background-image: url(https://cdn-icons-png.flaticon.com/512/10194/10194952.png?ga=GA1.1.40122530.1703820003&);
background-repeat: no-repeat;
background-position: right;
background-size: 80px;
background-color: #f0f0f0;
}
.card-5{
background-image: url(https://cdn-icons-png.flaticon.com/512/12962/12962143.png?ga=GA1.1.40122530.1703820003&);
background-repeat: no-repeat;
background-position: right;
background-size: 80px;
}
.card-6{
background-image: url(https://cdn-icons-png.flaticon.com/512/12463/12463937.png?ga=GA1.1.40122530.1703820003&);
background-repeat: no-repeat;
background-position: right;
background-size: 80px;
}
@media(max-width: 990px){
.card{
margin: 20px;
}
}
.main-oc4 {
width: 100%;
height: 100%;
display: flex;
min-width: 0px;
flex-direction: column;
}
}
.containe-qsa {
border-radius: 12px;
background-color: #FFFFFF;
}
.containe-j5w {
position: relative;
padding-top: 50%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
border-radius: 12px 12px 0px 0px;
}
/* These were inline style tags. Uses id+class to override almost everything */
#style-JUwFG.style-JUwFG {
background-image: url("https://cdn.disco.co/media/medium-shot-woman-working-bakery_23-2150273243_4164ee0f-d08a-4570-96c2-07035df4966d.jpeg");
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment