Modèles de fonctionnalités
1°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container">
<h2 class="title has-text-centered">Some of our awesome features</h2>
<div class="columns">
<div class="column is-3">
<h4 class="title is-spaced is-4">Decentralized</h4>
<p class="subtitle is-6">Your data is stored in many places at once. Awesome, right?</p>
<a href="#">Read more</a>
</div>
<div class="column is-3">
<h4 class="title is-spaced is-4">Secure</h4>
<p class="subtitle is-6">Nobody will be able to use your data without your consent.</p>
<a href="#">Read more</a>
</div>
<div class="column is-3">
<h4 class="title is-spaced is-4">Private</h4>
<p class="subtitle is-6">Your online activity is only yours to know. Always.</p>
<a href="#">Read more</a>
</div>
<div class="column is-3">
<h4 class="title is-spaced is-4">Speed</h4>
<p class="subtitle is-6">Unimaginable transfer speed thanks to middle-out compression.</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</section>
</div>
2°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container has-text-centered">
<h2 class="title">Some of our awesome features</h2>
<div class="block"><img class="is-16by9" src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?
primary=00d1b2" alt=""></div>
<div class="columns has-text-left">
<div class="column is-4">
<div class="columns">
<div class="column is-2"><img src="../../all-css/placeholder/icons/check.svg" alt=""></div>
<div class="column is-10">
<h4 class="title is-spaced is-4">Security</h4>
<p class="subtitle is-6">Your data is virtually unhackable compared to traditional net</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="columns">
<div class="column is-2"><img src="../../all-css/placeholder/icons/check.svg" alt=""></div>
<div class="column is-10">
<h4 class="title is-spaced is-4">Privacy</h4>
<p class="subtitle is-6">Nobody is tracking you when your activity when you use Piper Net
</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="columns">
<div class="column is-2"><img src="../../all-css/placeholder/icons/check.svg" alt=""></div>
<div class="column is-10">
<h4 class="title is-spaced is-4">Speed</h4>
<p class="subtitle is-6">Previously unimaginable transfer speed thanks to middle-out
compression</p>
</div>
</div>
</div>
</div>
<div class="buttons is-centered"><a class="button is-primary" href="#">Read more</a></div>
</div>
</section>
</div>
3°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container">
<h2 class="title has-text-centered">Some of our awesome features</h2>
<div class="columns">
<div class="column is-4">
<div class="card">
<div class="card-image">
<figure class="image is-4by3"><img
src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
</figure>
</div>
<div class="card-content">
<h4 class="title is-spaced is-4">Decentralized</h4>
<p class="subtitle is-6">Your data is stored in many places at once. Awesome, right?</p>
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="column is-4">
<div class="card">
<div class="card-image">
<figure class="image is-4by3"><img
src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
</figure>
</div>
<div class="card-content">
<h4 class="title is-spaced is-4">Secure</h4>
<p class="subtitle is-6">Nobody will be able to use your data without your consent.</p>
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="column is-4">
<div class="card">
<div class="card-image">
<figure class="image is-4by3"><img
src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
</figure>
</div>
<div class="card-content">
<h4 class="title is-spaced is-4">Private</h4>
<p class="subtitle is-6">Your online activity is only yours to know. Always.</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
4°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container">
<h2 class="title has-text-centered">Some of our awesome features</h2>
<div class="columns">
<div class="column is-4">
<h4 class="title is-4">Safety</h4>
<p class="block">Have you ever heard about "not putting all of your eggs in one basket"? Well,
with PiperNet you can actually put all your eggs in millions of baskets and every one of them
guarantees safety for your data.</p><a class="button is-primary" href="#">Read more</a>
</div>
<div class="column is-4">
<h4 class="title is-4">Speed</h4>
<p class="block">"Loading data" will soon be forgotten same way as floppy discs. With PiperNet
algorithm, every data could travel faster than it was ever imaginable. Everything on demand.
Always for free.</p><a class="button is-primary" href="#">Read more</a>
</div>
<div class="column is-4">
<h4 class="title is-4">Accessibility</h4>
<p class="block">Ever worried that you won't be able to access your data in some places?
Nevermore. With PiperNet your connection has no borders. No corporations, no governments
lurking to your private matters.
</p><a class="button is-primary" href="#">Read more</a>
</div>
</div>
</div>
</section>
</div>
5°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container has-text-centered">
<h2 class="title">Some of our awesome features</h2>
<div class="columns is-centered">
<div class="column is-4">
<div class="card">
<div class="card-image">
<figure class="image is-4by3"><img
src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt="">
</figure>
</div>
<div class="card-content">
<h4 class="title is-spaced is-4">Decentralized</h4>
<p class="subtitle is-6">Your data is stored in many places at once. Awesome, right?</p>
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="column is-4">
<div class="card">
<div class="card-image">
<figure class="image is-4by3"><img
src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></figure>
</div>
<div class="card-content">
<h4 class="title is-spaced is-4">Secure</h4>
<p class="subtitle is-6">Nobody will be able to use your data without your consent.</p>
<a href="#">Read more </a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
6°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container has-text-centered">
<h2 class="title">Some of our awesome features</h2>
<div class="columns">
<div class="column is-4">
<div class="block"><span class="number has-background-primary" style="margin-right: 0;">1
</span></div>
<h3 class="title">Security</h3>
<p>Your data is virtually unhackable compared to traditional net</p>
</div>
<div class="column is-4">
<div class="block"><span class="number has-background-primary" style="margin-right: 0;">2
</span></div>
<h3 class="title">Privacy</h3>
<p>Nobody is tracking you when your activity when you use Piper Net</p>
</div>
<div class="column is-4">
<div class="block"><span class="number has-background-primary" style="margin-right: 0;">3
</span></div>
<h3 class="title">Speed</h3>
<p>Previously unimaginable transfer speed thanks to middle-out compression</p>
</div>
</div>
<div class="buttons is-centered"><a class="button is-primary" href="#">Read more</a></div>
</div>
</section>
</div>
7°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container has-text-centered">
<h2 class="title">Some of our awesome features</h2>
<p class="subtitle">Here is a cross of sections what we do:</p>
<div class="columns is-multiline">
<div class="column is-6 is-4-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Security</h4>
</div>
<div class="column is-6 is-4-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Privacy</h4>
</div>
<div class="column is-6 is-4-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Speed</h4>
</div>
<div class="column is-6 is-4-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Decentralization</h4>
</div>
<div class="column is-6 is-4-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Infrastructureless</h4>
</div>
<div class="column is-6 is-4-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Storage</h4>
</div>
</div>
<div class="buttons is-centered"><a class="button is-primary" href="#">Read more</a></div>
</div>
</section>
</div>
8°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container has-text-centered">
<h2 class="title">Some of our awesome features</h2>
<div class="columns">
<div class="column is-4"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Security</h4>
<p>Your data is virtually unhackable compared to traditional net</p>
</div>
<div class="column is-4"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Privacy</h4>
<p>Nobody is tracking you when your activity when you use Piper Net</p>
</div>
<div class="column is-4"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Speed</h4>
<p>Previously unimaginable transfer speed thanks to middle-out compression</p>
</div>
</div>
</div>
</section>
</div>
9°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container has-text-centered">
<h2 class="title">Some of our awesome features</h2>
<div class="columns is-multiline">
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Security</h4>
<p>Your data is virtually unhackable compared to traditional net</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Privacy</h4>
<p>Nobody is tracking you when your activity when you use Piper Net</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Speed</h4>
<p>Previously unimaginable transfer speed thanks to middle-out compression</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Decentralization</h4>
<p>Decentralized design allows data to flow freely and efficiently</p>
</div>
</div>
</div>
</section>
</div>
10°
Code :
<div class="container is-fluid">
<section class="section">
<div class="container has-text-centered">
<h2 class="title">Some of our awesome features</h2>
<div class="columns is-multiline">
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Security</h4>
<p>Your data is virtually unhackable compared to traditional net</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Privacy</h4>
<p>Nobody is tracking you when your activity when you use Piper Net</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Speed</h4>
<p>Previously unimaginable transfer speed thanks to middle-out compression</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Storage</h4>
<p>Decentralized design allows data to flow freely and efficiently</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Privacy</h4>
<p>Gather computing power from idle machines in your network to act as a decentralized server
</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Storage</h4>
<p>Store your data safely, and access it faster than ever</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Speed</h4>
<p>Previously unimaginable transfer speed thanks to middle-out compression</p>
</div>
<div class="column is-6 is-3-desktop"><img src="../../all-css/placeholder/icons/check.svg" alt="">
<h4 class="title is-4">Privacy</h4>
<p>Decentralized design allows data to flow freely and efficiently</p>
</div>
</div>
</div>
</section>
</div>