This commit is contained in:
2026-05-17 21:09:32 +08:00
commit 1870400c47
1564 changed files with 544713 additions and 0 deletions

View File

@@ -0,0 +1,89 @@
<section class="py-5" aria-label="how-it-works-1">
<div class="container">
<div class="row justify-content-center text-center mb-4">
<div class="col-lg-8 col-xxl-7">
<span class="text-muted">Steps</span>
<h2 class="display-5 fw-bold">How it Works</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width:120px;height:120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#fff" fill="#999" viewBox="0 0 512 512">
<circle cx="176" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<circle cx="400" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M48 80h64l48 272h256" />
<path d="M160 288h249.44a8 8 0 007.85-6.43l28.8-144a8 8 0 00-7.85-9.57H128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 1</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="position-absolute d-none d-lg-block" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#fff" fill="#999" viewBox="0 0 512 512">
<path d="M320 96H88a40 40 0 00-40 40v240a40 40 0 0040 40h334.73a40 40 0 0040-40V239" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 160l144 112 87-65.67" />
<circle cx="431.95" cy="128.05" r="47.95" />
<path d="M432 192a63.95 63.95 0 1163.95-63.95A64 64 0 01432 192zm0-95.9a32 32 0 1031.95 32 32 32 0 00-31.95-32z" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 2</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="d-none d-lg-block position-absolute" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#fff" fill="#999" viewBox="0 0 512 512">
<rect x="336" y="336" width="80" height="80" rx="8" ry="8" />
<rect x="272" y="272" width="48" height="64" rx="8" ry="8" />
<rect x="416" y="416" width="48" height="64" rx="8" ry="8" />
<rect x="432" y="272" width="48" height="48" rx="8" ry="8" />
<rect x="272" y="432" width="48" height="48" rx="8" ry="8" />
<rect x="336" y="96" width="80" height="80" rx="8" ry="8" />
<rect x="288" y="48" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<rect x="96" y="96" width="80" height="80" rx="8" ry="8" />
<rect x="48" y="48" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<rect x="96" y="336" width="80" height="80" rx="8" ry="8" />
<rect x="48" y="288" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 3</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="d-none d-lg-block position-absolute" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#fff" fill="#999" viewBox="0 0 512 512">
<rect x="48" y="96" width="416" height="320" rx="56" ry="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="60" d="M48 192h416M128 300h48v20h-48z" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 4</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,89 @@
<section class="py-5" aria-label="how-it-works-2">
<div class="container">
<div class="row justify-content-center text-center mb-4">
<div class="col-lg-8 col-xxl-7">
<span class="text-muted">Steps</span>
<h2 class="display-5 fw-bold">How it Works</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width:120px;height:120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#333" fill="#999" viewBox="0 0 512 512">
<circle cx="176" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<circle cx="400" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M48 80h64l48 272h256" />
<path d="M160 288h249.44a8 8 0 007.85-6.43l28.8-144a8 8 0 00-7.85-9.57H128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 1</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="position-absolute d-none d-lg-block" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#333" fill="#999" viewBox="0 0 512 512">
<path d="M320 96H88a40 40 0 00-40 40v240a40 40 0 0040 40h334.73a40 40 0 0040-40V239" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 160l144 112 87-65.67" />
<circle cx="431.95" cy="128.05" r="47.95" />
<path d="M432 192a63.95 63.95 0 1163.95-63.95A64 64 0 01432 192zm0-95.9a32 32 0 1031.95 32 32 32 0 00-31.95-32z" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 2</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="d-none d-lg-block position-absolute" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#333" fill="#999" viewBox="0 0 512 512">
<rect x="336" y="336" width="80" height="80" rx="8" ry="8" />
<rect x="272" y="272" width="48" height="64" rx="8" ry="8" />
<rect x="416" y="416" width="48" height="64" rx="8" ry="8" />
<rect x="432" y="272" width="48" height="48" rx="8" ry="8" />
<rect x="272" y="432" width="48" height="48" rx="8" ry="8" />
<rect x="336" y="96" width="80" height="80" rx="8" ry="8" />
<rect x="288" y="48" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<rect x="96" y="96" width="80" height="80" rx="8" ry="8" />
<rect x="48" y="48" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<rect x="96" y="336" width="80" height="80" rx="8" ry="8" />
<rect x="48" y="288" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 3</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="d-none d-lg-block position-absolute" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#333" fill="#999" viewBox="0 0 512 512">
<rect x="48" y="96" width="416" height="320" rx="56" ry="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="60" d="M48 192h416M128 300h48v20h-48z" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 4</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,44 @@
<section class="py-5" aria-label="how-it-works-3">
<div class="container">
<div class="row text-center mb-4">
<div class="col-12 col-lg-10 col-xl-8 mx-auto text-center">
<p class="text-muted mb-0 fw-light">Steps</p>
<h2>How It Works</h2>
<p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4">
<div class="card rounded-0 text-center p-3 px-5 mb-5 mb-lg-0">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top:-3.5rem;">
1
</div>
<h5 class="mt-3 mb-4">Step 1</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-lg-4">
<div class="card rounded-0 text-center p-3 px-5 mb-5 mb-lg-0">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3.5rem;">
2
</div>
<h5 class="mt-3 mb-4">Step 2</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-lg-4">
<div class="card rounded-0 text-center p-3 px-5 mb-5 mb-lg-0">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3.5rem;">
3
</div>
<h5 class="mt-3 mb-4">Step 3</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,42 @@
<section class="py-5" aria-label="how-it-works-4">
<div class="container">
<div class="row text-center mb-4">
<div class="col-12 col-lg-10 col-xl-8 mx-auto text-center">
<p class="text-muted mb-0 fw-light">Steps</p>
<h2>How It Works</h2>
<p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col-lg-9">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card rounded-0 text-center p-3 px-5 mb-5">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top:-3.5rem;">
1
</div>
<h5 class="mt-3 mb-4">Step 1</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card rounded-0 text-center p-3 px-5 mb-5">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3.5rem;">
2
</div>
<h5 class="mt-3 mb-4">Step 2</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card rounded-0 text-center p-3 px-5 mb-5">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3.5rem;">
3
</div>
<h5 class="mt-3 mb-4">Step 3</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,63 @@
<section class="py-5" aria-label="how-it-works-5">
<div class="container">
<div class="row justify-content-center text-center mb-4">
<div class="col-lg-8 col-xxl-7">
<span class="text-muted">Steps</span>
<h2 class="display-5 fw-bold">How it Works</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="row">
<div class="col-auto text-center">
<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
1
</div>
<div class="text-muted fw-light mt-1">
Step
</div>
</div>
<div class="col">
<div class="card rounded-0 py-4 px-5 mb-5">
<h5>Headline</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing .</p>
</div>
</div>
</div>
<div class="row">
<div class="col-auto text-center">
<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
2
</div>
<div class="text-muted fw-light mt-1">
Step
</div>
</div>
<div class="col">
<div class="card rounded-0 py-4 px-5 mb-5">
<h5>Headline</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing .</p>
</div>
</div>
</div>
<div class="row">
<div class="col-auto text-center">
<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
3
</div>
<div class="text-muted fw-light mt-1">
Step
</div>
</div>
<div class="col">
<div class="card rounded-0 py-4 px-5 mb-5">
<h5>Headline</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing .</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>