Canoa Digital - Front-end starter
Canoa Digital - Front-end starter
| # | Car | Color | Top Speed |
|---|---|---|---|
| 1 | Camaro | White | 280 km/h |
| 2 | Ferrari | Red | 320 km/h |
| 3 | Lamborghini | Black | 335 km/h |
| 4 | Beetle | Green | 450 km/h |
<table class="table">
<thead class="table-head">
<tr class="table-row">
<th class="table-cell">#</th>
<th class="table-cell">Car</th>
<th class="table-cell">Color</th>
<th class="table-cell">Top Speed</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-cell">1</td>
<td class="table-cell">Camaro</td>
<td class="table-cell">White</td>
<td class="table-cell">280 km/h</td>
</tr>
<tr class="table-row">
<td class="table-cell">2</td>
<td class="table-cell">Ferrari</td>
<td class="table-cell">Red</td>
<td class="table-cell">320 km/h</td>
</tr>
<tr class="table-row">
<td class="table-cell">3</td>
<td class="table-cell">Lamborghini</td>
<td class="table-cell">Black</td>
<td class="table-cell">335 km/h</td>
</tr>
<tr class="table-row">
<td class="table-cell">4</td>
<td class="table-cell">Beetle</td>
<td class="table-cell">Green</td>
<td class="table-cell">450 km/h</td>
</tr>
</tbody>
</table>
| # | Car | Color | Top Speed |
|---|---|---|---|
| 1 | Camaro | White | 280 km/h |
| 2 | Ferrari | Red | 320 km/h |
| 3 | Lamborghini | Black | 335 km/h |
| 4 | Beetle | Green | 450 km/h |
<table class="table table-small">
<thead class="table-head">
<tr class="table-row">
<th class="table-cell">#</th>
<th class="table-cell">Car</th>
<th class="table-cell">Color</th>
<th class="table-cell">Top Speed</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-cell">1</td>
<td class="table-cell">Camaro</td>
<td class="table-cell">White</td>
<td class="table-cell">280 km/h</td>
</tr>
<tr class="table-row">
<td class="table-cell">2</td>
<td class="table-cell">Ferrari</td>
<td class="table-cell">Red</td>
<td class="table-cell">320 km/h</td>
</tr>
<tr class="table-row">
<td class="table-cell">3</td>
<td class="table-cell">Lamborghini</td>
<td class="table-cell">Black</td>
<td class="table-cell">335 km/h</td>
</tr>
<tr class="table-row">
<td class="table-cell">4</td>
<td class="table-cell">Beetle</td>
<td class="table-cell">Green</td>
<td class="table-cell">450 km/h</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<div class="table-head">
<div class="table-row">
<div class="table-cell">#</div>
<div class="table-cell">Car</div>
<div class="table-cell">Color</div>
<div class="table-cell">Top Speed</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">Camaro</div>
<div class="table-cell">White</div>
<div class="table-cell">280 km/h</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">Ferrari</div>
<div class="table-cell">Red</div>
<div class="table-cell">320 km/h</div>
</div>
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">Lamborghini</div>
<div class="table-cell">Black</div>
<div class="table-cell">335 km/h</div>
</div>
<div class="table-row">
<div class="table-cell">4</div>
<div class="table-cell">Beetle</div>
<div class="table-cell">Green</div>
<div class="table-cell">450 km/h</div>
</div>
</div>
</div>
<div class="table-responsive table-striped">
<div class="table-head">
<div class="table-row">
<div class="table-cell">#</div>
<div class="table-cell">Car</div>
<div class="table-cell">Color</div>
<div class="table-cell">Top Speed</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">Camaro</div>
<div class="table-cell">White</div>
<div class="table-cell">280 km/h</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">Ferrari</div>
<div class="table-cell">Red</div>
<div class="table-cell">320 km/h</div>
</div>
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">Lamborghini</div>
<div class="table-cell">Black</div>
<div class="table-cell">335 km/h</div>
</div>
<div class="table-row">
<div class="table-cell">4</div>
<div class="table-cell">Beetle</div>
<div class="table-cell">Green</div>
<div class="table-cell">450 km/h</div>
</div>
</div>
</div>
h3 - Lorem ipsum dolor sit amet
h4 - Lorem ipsum dolor sit amet
<h1 class="h1">Lorem ipsum dolor sit amet</h1>
<h2 class="h2">Lorem ipsum dolor sit amet</h2>
<p class="h3">Lorem ipsum dolor sit amet</p>
<span class="h4">Lorem ipsum dolor sit amet</span>
<h5 class="h5">Lorem ipsum dolor sit amet</h5>
<h6 class="h6">Lorem ipsum dolor sit amet</h6>
<h3 class="h3">Hello world! This is a title with <span class="sub">subtitle text</span></h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing[ elit, sed do eiusmod</p>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<p class="text-lowercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class="text-uppercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Font Light - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Font Light Italic - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Font Regular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Font Semi Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Font Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<p class="font-light">Font Light - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class="font-light-italic">Font Light Italic - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class="font-regular">Font Regular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class="font-semi-bold">Font Semi Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class="font-bold">Font Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Text Muted - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Text Black 50% - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Text White 50% - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<p class="text-muted">Text Muted - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class=s"text-black-50">Text Black 50% - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p class="text-white-50"Text White 50% - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
For layouts with or without limit use: .container or .container-fuild
<div class="container">
<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-8">col-sm-8</div>
</div>
</div>
<div class="container">
<div class="row justify-content-sm-center">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-2">col-sm-2</div>
<div class="col-sm-10">col-sm-10</div>
</div>
</div>
Hello world! This is a default alert!
Hello world! This is a success alert!
Hello world! This is a danger alert!
Hello world! This is a info alert!
Hello world! This is a warning alert!
<div class="alert-default">
<span class="close">x</span>
<p>Hello world! This is a default alert!</p>
</div>
<div class="alert-success">
<span class="close">x</span>
<p>Hello world! This is a success alert!</p>
</div>
<div class="alert-danger">
<span class="close">x</span>
<p>Hello world! This is a danger alert!</p>
</div>
<div class="alert-info">
<span class="close">x</span>
<p>Hello world! This is a info alert!</p>
</div>
<div class="alert-warning">
<span class="close">x</span>
<p>Hello world! This is a warning alert!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="form-group form-group-sm">
<input type="text" class="input-style" placeholder="Input small">
</div>
<div class="form-group form-group-sm">
<input type="text" class="input-style error" placeholder="Input small">
</div>
<div class="form-group form-group-sm">
<input type="text" class="input-style valid" placeholder="Input small">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<input type="text" class="input-style" placeholder="Input default">
</div>
<div class="form-group">
<input type="text" class="input-style error" placeholder="Input default">
</div>
<div class="form-group">
<input type="text" class="input-style valid" placeholder="Input default">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group form-group-lg">
<input type="text" class="input-style" placeholder="Input large">
</div>
<div class="form-group form-group-lg">
<input type="text" class="input-style error" placeholder="Input large">
</div>
<div class="form-group form-group-lg">
<input type="text" class="input-style valid" placeholder="Input large">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="form-group form-group-sm">
<select class="input-style">
<option>Select small</option>
<option>Option 1</option>
</select>
</div>
<div class="form-group form-group-sm">
<select class="input-style error">
<option>Select small</option>
<option>Option 1</option>
</select>
<div class="text-error">This field is required!</div>
</div>
<div class="form-group form-group-sm">
<select class="input-style valid">
<option>Select small</option>
<option>Option 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<select class="input-style">
<option>Select default</option>
<option>Option 1</option>
</select>
</div>
<div class="form-group">
<select class="input-style error">
<option>Select default</option>
<option>Option 1</option>
</select>
<div class="text-error">This field is required!</div>
</div>
<div class="form-group">
<select class="input-style valid">
<option>Select default</option>
<option>Option 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group form-group-lg">
<select class="input-style">
<option>Select large</option>
<option>Option 1</option>
</select>
</div>
<div class="form-group form-group-lg">
<select class="input-style error">
<option>Select large</option>
<option>Option 1</option>
</select>
<div class="text-error">This field is required!</div>
</div>
<div class="form-group form-group-lg">
<select class="input-style valid">
<option>Select large</option>
<option>Option 1</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group form-inline-sm form-group-sm">
<input type="email" class="input-style error" name="email" placeholder="Digite seu e-mail aqui" aria-invalid="true">
<button class="button button-success button-small" type="submit">Cadastrar</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group form-inline-md form-group-md">
<input type="email" class="input-style" name="email" placeholder="Digite seu e-mail aqui" >
<button class="button button-success" type="submit">Cadastrar</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group form-inline-lg form-group-lg">
<input type="email" class="input-style" name="email" placeholder="Digite seu e-mail aqui">
<button class="button button-success button-large" type="submit">Cadastrar</button>
</div>
</div>
</div>
<div class="form-check">
<input class="input-check" type="radio" id="radio-1" name="teste-radio">
<label class="label-check" for="radio-1">Default radio</label>
</div>
<div class="form-check">
<input class="input-check" type="radio" id="radio-2" name="teste-radio" disabled>
<label class="label-check" for="radio-2">Default radio</label>
</div>
<div class="form-check">
<input class="input-check error" type="radio" id="radio-3" name="teste-radio">
<label class="label-check" for="radio-3">Default radio</label>
<div class="text-error">This field is required!</div>
</div>
<div class="form-check">
<input class="input-check" type="checkbox" id="check-1">
<label class="label-check" for="check-1">Default checkbox</label>
</div>
<div class="form-check">
<input class="input-check" type="checkbox" id="check-2" disabled>
<label class="label-check" for="check-2">Default checkbox</label>
</div>
<div class="form-check">
<input class="input-check error" type="checkbox" id="check-3" name="teste-checkbox">
<label class="label-check" for="check-3">Default checkbox</label>
<div class="text-error">This field is required!</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="check-4" class="input-check">
<label class="label-check" for="check-4">Option 1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="check-5" class="input-check">
<label class="label-check" for="check-5">Option 2</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="check-6" class="input-check" disabled>
<label class="label-check" for="check-6">Option 3</label>
</div>
<div class="form-check custom-checkbox">
<input class="input-check-custom" type="checkbox" id="check-7">
<label class="label-check-custom" for="check-7">Custom checkbox</label>
</div>
<div class="form-check custom-checkbox custom-checkbox-bg">
<input class="input-check-custom" type="checkbox" id="check-8">
<label class="label-check-custom" for="check-8">Custom checkbox</label>
</div>
<div class="form-check custom-radio">
<input class="input-check-custom" type="radio" id="radio-7">
<label class="label-check-custom" for="radio-7">Custom radio</label>
</div>
<div class="form-check custom-radio">
<input class="input-check-custom" type="radio" id="radio-8">
<label class="label-check-custom" for="radio-8">Custom radio</label>
</div>
<div class="form-check custom-radio custom-radio-bg">
<input class="input-check-custom" type="radio" id="radio-9">
<label class="label-check-custom" for="radio-9">Custom radio</label>
</div>
<div class="form-check custom-radio custom-radio-bg">
<input class="input-check-custom" type="radio" id="radio-10">
<label class="label-check-custom" for="radio-10">Custom radio</label>
</div>
<form class="validation-form">
<div class="form-group">
<label>E-mail</label>
<input class="input-style" type="text" name="email" id="#" placeholder="E-mail">
<small>This is a small text</small>
</div>
<div class="form-group">
<label>Password</label>
<input class="input-style" type="password" name="password" id="#" placeholder="Password">
</div>
<button class="button button-submit">Salvar</button>
</form>
<form class="validation-form" id="form2">
<div class="form-row">
<div class="form-group col-sm-6">
<label>Name</label>
<input class="input-style" type="text" name="name2" id="" placeholder="Name">
</div>
<div class="form-group col-sm-6">
<label>E-mail</label>
<input class="input-style" type="text" name="email2" id="" placeholder="E-mail">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-8">
<label>Address</label>
<input class="input-style" type="text" name="address2" id="" placeholder="Address">
</div>
<div class="form-group col-sm-4">
<label>Number</label>
<input class="input-style" type="text" name="number2" id="" placeholder="Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-5">
<label>Neighborhood</label>
<input class="input-style" type="text" name="neighborhood2" id="" placeholder="Neighborhood">
</div>
<div class="form-group col-sm-7">
<label>City</label>
<input class="input-style" type="text" name="city2" id="" placeholder="City">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="input-check" type="check" id="check-13">
<label class="label-check" for="check-13">Newsletter</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="input-check" type="check" id="check-14">
<label class="label-check" for="check-14">Terms of use</label>
</div>
</div>
<button class="button button-info button-submit">Salvar</button>
</form>
<a href="#" class="button">Default</a>
<input type="button" class="button button-success">Success</input>
<span class="button button-danger">Danger</span>
<button type="button" class="button button-warning">Warning</button>
<button type="button" class="button button-info">Info</button>
<a href="#" class="button button-outline">Default</a>
<input type="button" class="button button-outline-success">Success</input>
<span class="button button-outline-danger">Danger</span>
<button type="button" class="button button-outline-warning">Warning</button>
<button type="button" class="button button-outline-info">Info</button>
<a href="#" class="button button-small">Default</a>
<input type="button" class="button button-success button-small">Success</input>
<span class="button button-danger button-small">Danger</span>
<button type="button" class="button button-warning button-small">Warning</button>
<button type="button" class="button button-info button-small">Info</button>
<a href="#" class="button button-large">Default</a>
<input type="button" class="button button-success button-large">Success</input>
<span class="button button-danger button-large">Danger</span>
<button type="button" class="button button-warning button-large">Warning</button>
<button type="button" class="button button-info button-large">Info</button>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="" title="">Home</a></li>
</ol>
</nav>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="" title="">Home</a></li>
<li class="breadcrumb-item"><a href="" title="">Products</a></li>
<li class="breadcrumb-item active">Item</li>
</ol>
</nav>
<div class="modal show-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Modal title</h3>
<span class="close">x</span>
</div>
<div class="modal-body">
<p>Modal content</p>
</div>
<div class="modal-footer">
<span class="button button-info">ok</span>
</div>
</div>
</div>
</div>
<div class="modal modal-fixed">
<div class="modal-content">
<h3 class="modal-title">Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav>
<ul class="pagination bodered">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<nav>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est .
<a href="#" tooltip="Tooltip top position" tooltip-position="top">Tooltip text here</a>
<a href="#" tooltip="Tooltip right position" tooltip-position="right">Tooltip text here</a>
<span tooltip="Tooltip left position" tooltip-position="left">Tooltip text here</span>
<button tooltip="Tooltip bottom position" tooltip-position="bottom">Tooltip text here</button>
<h1 class="h1">Lorem ipsum dolor sit <span class="badge badge-primary">amet</span></h1>
<h2 class="h2">Lorem ipsum dolor sit <span class="badge badge-secondary">amet</span></h2>
<h3 class="h3">Lorem ipsum dolor sit <span class="badge badge-success">amet</span></h3>
<h4 class="h4">Lorem ipsum dolor sit <span class="badge badge-warning">amet</span></h4>
<h5 class="h5">Lorem ipsum dolor sit <span class="badge badge-danger">amet</span></h5>
<h6 class="h6">Lorem ipsum dolor sit <span class="badge badge-dark">amet</span></h6>
<button class="button button-success">Button <span class="badge badge-light">4</span></button>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-subtitle text-muted">Card subtitle</p>
<p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="" class="card-link">Card link</a>
<a href="" class="card-link">Card link</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="button button-info">Card button</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="button button-info">Card button</button>
</div>
</div>
</div>
</div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-body">
<img src="image_example.jpg" class="card-img-top"/>
<h5 class="card-title">Card title</h5>
<a href="" class="card-link">Card link</a>
<a href="" class="card-link">Card link</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<img src="image_example.jpg" class="card-img-top"/>
<p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur..</p>
<button class="button button-info">Card button</button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<img src="image_example.jpg" class="card-img-top"/>
<p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur..</p>
<button class="button button-info">Card button</button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<img src="image_example.jpg" class="card-img-top"/>
<p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur..</p>
<button class="button button-info">Card button</button>
</div>
</div>
</div>
</div>
Include Swiper's CSS and JS files to our website/app. In the html file:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
...
<link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
</head>
<body>
...
<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
<script type="text/javascript">
// Initialize Swiper
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
Full documentation in http://idangero.us/swiper/api/
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image_example.jpg"></div>
<div class="swiper-slide"><img src="image_example.jpg"></div>
<div class="swiper-slide"><img src="image_example.jpg"></div>
<div class="swiper-slide"><img src="image_example.jpg"></div>
<div class="swiper-slide"><img src="image_example.jpg"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
We use Flaticon, the largest database of free icons. For search any svg icon, visit: https://www.flaticon.com/
Include the svg symbol just before closing </body> tag and the svg link wherever you want in the content page, like this:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
...
</head>
<body>
...
<svg width="28" height="28">
<use xlink:href="#icon-example-1"></use>
</svg>
...
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
<symbol id="icon-example-1" viewBox="0 0 32 32">
<path d="M32 10l-16-8-16 8 16 8 5.345-10.689......."></path>
</symbol>
<symbol id="icon-example-2" viewBox="0 0 32 32">
<path d="M32 10l-16-8-16 8 16 8 5.345-10.689......."></path>
</symbol>
...
</svg>
</body>
</html>
<symbol id="icon-cap" viewBox="0 0 484.006 484.006">
<polygon points="484.006,189.845 484.006,179.186 241.897,62.561 0,179.083 0,189.946 241.897,306.471"/>
<path d="M83.808,251.571v69.7l145.836,70.25h24.506l145.435-70.057c0.14-0.307,0.271-0.613,0.402-0.922V251.57l-158.09,76.152 L83.808,251.571z"/>
<polygon points="458.506,358.195 458.506,222.599 439.359,232.255 439.359,358.195 426.883,396.203 445.742,421.445 452.123,421.445 470.981,396.203"/>
</symbol>
<symbol id="icon-cap" viewBox="0 0 32 32">
<path d="M32 10l-16-8-16 8 16 8 16-8zM16 4.655l10.689 5.345-10.689
5.345-10.689-5.345 10.689-5.345zM28.79514.398l3.205 1.602-16 8-16-8 3.205-1.602
12.795 6.398zM28.795 20.398l3.205 1.602-16 8-16-8 3.205-1.602 12.795 6.398z"></path>
</symbol>
<symbol id="icon-gift" viewBox="0 0 512 512">
<g>
<path d="M444.709,239.616v227.621H67.877V239.616H32.768v245.175c0,9.696,7.858,17.554,17.554,17.554h411.941
c9.696,0,17.554-7.858,17.554-17.554V239.616H444.709z"/>
</g>
<g>
<path d="M494.446,107.953H17.554C7.858,107.953,0,115.811,0,125.507v114.688c0,9.696,7.858,17.554,17.554,17.554h476.891
c9.696,0,17.554-7.853,17.554-17.554V125.507C512,115.811,504.142,107.953,494.446,107.953z M476.891,222.647H35.109v-79.579
h441.783V222.647z"/>
</g>
<g>
<path d="M273.273,121.066c-1.194-4.552-30.152-111.411-114.7-111.411c-36.782,0-66.706,29.924-66.706,66.706
c0,36.782,29.661,66.706,66.121,66.706h98.304c5.436,0,10.574-2.522,13.897-6.829S274.648,126.326,273.273,121.066z
M157.989,107.959c-17.39,0-31.013-13.88-31.013-31.598c0-17.127,14.471-31.598,31.598-31.598
c38.52,0,61.586,37.947,72.675,63.195H157.989z"/>
</g>
<g>
<path d="M354.011,9.655c-84.547,0-113.506,106.859-114.7,111.411c-1.381,5.26-0.24,10.866,3.084,15.173
c3.324,4.307,8.455,6.829,13.897,6.829h98.304c36.46,0,66.121-29.924,66.121-66.706C420.718,39.579,390.794,9.655,354.011,9.655z
M354.597,107.959h-73.33c11.007-25.249,34.003-63.195,72.751-63.195c17.127,0,31.598,14.471,31.598,31.598
C385.615,94.079,371.993,107.959,354.597,107.959z"/>
</g>
<g>
<rect x="238.738" y="125.513" width="35.109" height="359.278"/>
</g>
</symbol>
<symbol id="icon-game" viewBox="0 0 512.001 512.001">
<path d="M467.091,15.402h-35.805c-4.203,0-7.61,3.407-7.61,7.61s3.407,7.61,7.61,7.61h35.805c16.371,0,29.69,13.319,29.69,29.69 v304.798c0,16.371-13.319,29.69-29.69,29.69H257.108c-16.372,0-29.69-13.319-29.69-29.69V60.311 c0-16.371,13.319-29.69,29.69-29.69h148.813c4.203,0,7.61-3.407,7.61-7.61s-3.407-7.61-7.61-7.61H257.108 c-24.764,0-44.91,20.146-44.91,44.91v304.798c0,24.764,20.146,44.91,44.91,44.91h209.983c24.764,0,44.91-20.146,44.91-44.91 V60.311C512,35.548,491.854,15.402,467.091,15.402z"></path>
<path d="M195.089,101.982H44.91c-24.764,0-44.91,20.146-44.91,44.91v200.487c0,4.203,3.407,7.61,7.61,7.61s7.61-3.407,7.61-7.61 V146.892c0-16.372,13.319-29.69,29.691-29.69h150.179c4.203,0,7.61-3.407,7.61-7.61S199.292,101.982,195.089,101.982z"></path>
<path d="M292.193,419.489c-4.203,0-7.61,3.407-7.61,7.61v24.591c0,16.372-13.319,29.69-29.69,29.69H44.91 c-16.372,0-29.691-13.32-29.691-29.69v-78.944c0-4.203-3.407-7.61-7.61-7.61S0,368.543,0,372.746v78.944 c0,24.764,20.146,44.91,44.91,44.91h209.983c24.764,0,44.91-20.146,44.91-44.91v-24.591 C299.803,422.896,296.396,419.489,292.193,419.489z"></path>
<path d="M430.624,212.71l27.672-47.93c1.36-2.354,1.36-5.256,0-7.61c-1.36-2.354-3.871-3.805-6.59-3.805h-55.346l-27.672-47.93 c-1.36-2.355-3.871-3.805-6.59-3.805c-2.719,0-5.23,1.45-6.59,3.805l-27.672,47.93h-55.345c-2.719,0-5.23,1.451-6.59,3.805 c-1.36,2.354-1.36,5.256,0,7.61l27.672,47.93l-27.672,47.93c-1.36,2.354-1.36,5.256,0,7.61c1.36,2.354,3.871,3.805,6.59,3.805 h55.345l27.672,47.93c1.36,2.354,3.871,3.805,6.59,3.805c2.718,0,5.231-1.451,6.59-3.805l27.672-47.93h55.346 c2.719,0,5.23-1.451,6.59-3.805c1.36-2.354,1.36-5.256,0-7.61L430.624,212.71z M438.527,168.584l-16.689,28.906l-16.689-28.906 H438.527z M362.099,124.459l16.689,28.906h-33.379L362.099,124.459z M285.671,168.584h33.379l-16.689,28.906L285.671,168.584z M285.671,256.835l16.689-28.906l16.689,28.906H285.671z M362.099,300.961l-16.689-28.906h33.379L362.099,300.961z M387.574,256.835h-50.952l-25.476-44.125l25.476-44.125h50.952l25.476,44.125L387.574,256.835z M405.148,256.835l16.689-28.906 l16.689,28.906H405.148z"></path>
<path d="M306.802,69.649h-10.653V58.995c0-4.202-3.407-7.61-7.61-7.61s-7.61,3.407-7.61,7.61v10.653h-10.653 c-4.202,0-7.61,3.407-7.61,7.61s3.407,7.61,7.61,7.61h10.653v10.653c0,4.203,3.407,7.61,7.61,7.61s7.61-3.407,7.61-7.61V84.868 h10.653c4.203,0,7.61-3.407,7.61-7.61S311.005,69.649,306.802,69.649z"></path>
<path d="M453.921,340.551h-10.653v-10.653c0-4.203-3.407-7.61-7.61-7.61s-7.61,3.407-7.61,7.61v10.653h-10.653 c-4.203,0-7.61,3.407-7.61,7.61c0,4.202,3.407,7.61,7.61,7.61h10.653v10.653c0,4.203,3.407,7.61,7.61,7.61s7.61-3.407,7.61-7.61 v-10.653h10.653c4.203,0,7.61-3.407,7.61-7.61C461.53,343.958,458.123,340.551,453.921,340.551z"></path>
<path d="M94.605,156.229H83.952v-10.653c0-4.203-3.407-7.61-7.61-7.61s-7.61,3.407-7.61,7.61v10.653H58.079 c-4.203,0-7.61,3.407-7.61,7.61s3.407,7.61,7.61,7.61h10.653v10.653c0,4.203,3.407,7.61,7.61,7.61s7.61-3.407,7.61-7.61v-10.653 h10.653c4.203,0,7.61-3.407,7.61-7.61S98.808,156.229,94.605,156.229z"></path>
<path d="M241.723,427.133H231.07V416.48c0-4.204-3.407-7.61-7.61-7.61c-4.203,0-7.61,3.407-7.61,7.61v10.653h-10.653 c-4.203,0-7.61,3.407-7.61,7.61s3.407,7.61,7.61,7.61h10.653v10.653c0,4.203,3.407,7.61,7.61,7.61c4.202,0,7.61-3.407,7.61-7.61 v-10.653h10.653c4.203,0,7.61-3.407,7.61-7.61S245.926,427.133,241.723,427.133z"></path>
<path d="M193.786,365.918c-31.432,20.753-73.608,16.451-100.285-10.227c-31.1-31.1-31.1-81.703,0-112.804 c9.334-9.334,20.557-16.049,32.735-19.822c-0.29,0.28-0.577,0.562-0.862,0.847c-27.544,27.544-27.544,72.361,0,99.905 c20.121,20.121,50.162,26.211,76.532,15.517c3.895-1.58,5.771-6.017,4.192-9.912c-1.58-3.893-6.019-5.77-9.912-4.19 c-20.693,8.391-44.263,3.612-60.052-12.175c-21.61-21.61-21.61-56.772,0-78.383c7.245-7.245,16.318-12.328,26.24-14.702 c3.581-0.856,6.035-4.154,5.828-7.83c-0.208-3.676-3.016-6.676-6.671-7.125c-29.255-3.589-57.976,6.291-78.792,27.107 c-17.94,17.94-27.82,41.792-27.82,67.163c0,25.371,9.88,49.224,27.82,67.163c18.304,18.304,42.734,27.76,67.317,27.76 c18.082,0,36.249-5.118,52.115-15.594c3.508-2.315,4.473-7.036,2.157-10.543C202.013,364.566,197.292,363.601,193.786,365.918z"></path>
</symbol>
<symbol id="icon-phone" viewBox="0 0 32 32">
<path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
</symbol>
<symbol id="icon-arrow-dup-down" viewBox="0 0 284.929 284.929">
<path d="M135.899,167.877c1.902,1.902,4.093,2.851,6.567,2.851s4.661-0.948,6.562-2.851L282.082,34.829
c1.902-1.903,2.847-4.093,2.847-6.567s-0.951-4.665-2.847-6.567L267.808,7.417c-1.902-1.903-4.093-2.853-6.57-2.853
c-2.471,0-4.661,0.95-6.563,2.853L142.466,119.622L30.262,7.417c-1.903-1.903-4.093-2.853-6.567-2.853
c-2.475,0-4.665,0.95-6.567,2.853L2.856,21.695C0.95,23.597,0,25.784,0,28.262c0,2.478,0.953,4.665,2.856,6.567L135.899,167.877z"/>
<path d="M267.808,117.053c-1.902-1.903-4.093-2.853-6.57-2.853c-2.471,0-4.661,0.95-6.563,2.853L142.466,229.257L30.262,117.05
c-1.903-1.903-4.093-2.853-6.567-2.853c-2.475,0-4.665,0.95-6.567,2.853L2.856,131.327C0.95,133.23,0,135.42,0,137.893
c0,2.474,0.953,4.665,2.856,6.57l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854l133.054-133.046
c1.902-1.903,2.847-4.093,2.847-6.565c0-2.474-0.951-4.661-2.847-6.567L267.808,117.053z"/>
</symbol>
<symbol id="icon-search-2" viewBox="0 0 485.213 485.213">
<path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
<path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
C318.424,257.208,257.206,318.416,181.956,318.416z"/>
<path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/>
</symbol>
<symbol id="icon-search" viewBox="0 0 32 32">
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
</symbol>
<symbol id="icon-arrow-down" viewBox="0 0 64 64">
<path d="m60.533,15.733l-28.56,28.328-28.579-28.348c-0.397-0.394-0.917-0.59-1.437-0.59s-1.039,
0.196-1.436,0.59c-0.793,0.787-0.793,2.062 0,2.849l29.98,29.735c0.2,0.2 0.494,0.375 0.757,
0.476 0.75,0.282 1.597,0.107 2.166-0.456l29.981-29.735c0.793-0.787
0.793-2.062 0-2.849-0.794-0.786-2.078-0.786-2.872,7.10543e-15z"></path>
</symbol>
<symbol id="icon-arrow-left" viewBox="0 0 27 44">
<path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z'/>
</symbol>
<symbol id="icon-arrow-right" viewBox="0 0 27 44">
<path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z'/>
</symbol>
<symbol id="icon-arrow-up" viewBox="0 0 64 64">
<path d="M3.352,48.296l28.56-28.328l28.58,28.347c0.397,0.394,0.917,0.59,1.436,0.59c0.52,0,1.04-0.196,1.436-0.59
c0.793-0.787,0.793-2.062,0-2.849l-29.98-29.735c-0.2-0.2-0.494-0.375-0.757-0.475c-0.75-0.282-1.597-0.107-2.166,0.456
L0.479,45.447c-0.793,0.787-0.793,2.062,0,2.849C1.273,49.082,2.558,49.082,3.352,48.296z"></path>
</symbol>
<symbol id="icon-chat" viewBox="0 0 32 32">
<path d="M16 2c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z" ></path>
</symbol>
<symbol id="icon-chat-outline" viewBox="0 0 32 32">
<path d="M16 6c-1.717 0-3.375 0.271-4.928 0.804-1.46 0.502-2.76 1.211-3.863 2.108-2.069 1.681-3.209 3.843-3.209 6.088 0 1.259 0.35
2.481 1.039 3.63 0.711 1.185 1.781 2.268 3.093 3.133 0.949 0.625 1.587 1.623 1.755 2.747 0.056 0.375 0.091 0.753 0.105 1.129
0.233-0.194 0.461-0.401 0.684-0.624 0.755-0.755 1.774-1.172 2.828-1.172 0.168 0 0.336 0.011 0.505 0.032 0.655 0.083 1.325 0.126
1.99 0.126 1.717 0 3.375-0.271 4.928-0.804 1.46-0.502 2.76-1.211 3.863-2.108 2.069-1.681
3.209-3.843 3.209-6.088s-1.14-4.407-3.209-6.088c-1.104-0.897-2.404-1.606-3.863-2.108-1.553-0.534-3.211-0.804-4.928-0.804zM16
2v0c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049
4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path>
</symbol>
<symbol id="icon-clock" viewBox="0 0 32 32">
<path d="M20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163
16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z" ></path>
</symbol>
<symbol id="icon-envelop" viewBox="0 0 32 32">
>path d="M29 4h-26c-1.65 0-3 1.35-3 3v20c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-20c0-1.65-1.35-3-3-3zM12.461 17.199l-8.461 6.59v-15.676l8.461 9.086zM5.512 8h20.976l-10.488 7.875-10.488-7.875zM12.79 17.553l3.21 3.447 3.21-3.447 6.58 8.447h-19.579l6.58-8.447zM19.539 17.199l8.461-9.086v15.676l-8.461-6.59z">>/path>
</symbol>
<symbol id="icon-eye" viewBox="0 0 511.626 511.626">
<path d="M505.918,236.117c-26.651-43.587-62.485-78.609-107.497-105.065c-45.015-26.457-92.549-39.687-142.608-39.687
c-50.059,0-97.595,13.225-142.61,39.687C68.187,157.508,32.355,192.53,5.708,236.117C1.903,242.778,0,249.345,0,255.818
c0,6.473,1.903,13.04,5.708,19.699c26.647,43.589,62.479,78.614,107.495,105.064c45.015,26.46,92.551,39.68,142.61,39.68
c50.06,0,97.594-13.176,142.608-39.536c45.012-26.361,80.852-61.432,107.497-105.208c3.806-6.659,5.708-13.223,5.708-19.699
C511.626,249.345,509.724,242.778,505.918,236.117z M194.568,158.03c17.034-17.034,37.447-25.554,61.242-25.554
c3.805,0,7.043,1.336,9.709,3.999c2.662,2.664,4,5.901,4,9.707c0,3.809-1.338,7.044-3.994,9.704
c-2.662,2.667-5.902,3.999-9.708,3.999c-16.368,0-30.362,5.808-41.971,17.416c-11.613,11.615-17.416,25.603-17.416,41.971
c0,3.811-1.336,7.044-3.999,9.71c-2.667,2.668-5.901,3.999-9.707,3.999c-3.809,0-7.044-1.334-9.71-3.999
c-2.667-2.666-3.999-5.903-3.999-9.71C169.015,195.482,177.535,175.065,194.568,158.03z M379.867,349.04
c-38.164,23.12-79.514,34.687-124.054,34.687c-44.539,0-85.889-11.56-124.051-34.687s-69.901-54.2-95.215-93.222
c28.931-44.921,65.19-78.518,108.777-100.783c-11.61,19.792-17.417,41.207-17.417,64.236c0,35.216,12.517,65.329,37.544,90.362
s55.151,37.544,90.362,37.544c35.214,0,65.329-12.518,90.362-37.544s37.545-55.146,37.545-90.362
c0-23.029-5.808-44.447-17.419-64.236c43.585,22.265,79.846,55.865,108.776,100.783C449.767,294.84,418.031,325.913,379.867,349.04
z"/>
</symbol>
<symbol id="icon-instagram" viewBox="0 0 32 32">
<path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
<path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z" class="gray"></path>
<path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z" class="gray"></path>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 32 32">
<path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h13v-14h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1
0-2 0.9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3z"></path>
</symbol>
<symbol id="icon-google-plus" viewBox="0 0 32 32">
<path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM12 24c-4.425 0-8-3.575-8-8s3.575-8 8-8c2.162 0 3.969 0.787 5.363 2.094l-2.175 2.088c-0.594-0.569-1.631-1.231-3.188-1.231-2.731 0-4.963 2.263-4.963 5.050s2.231 5.050 4.963 5.050c3.169 0 4.356-2.275 4.538-3.45h-4.537v-2.744h7.556c0.069 0.4 0.125 0.8 0.125 1.325 0 4.575-3.063 7.819-7.681 7.819zM28 16h-2v2h-2v-2h-2v-2h2v-2h2v2h2v2z"></path>
</symbol>
<symbol id="icon-twitter" viewBox="0 0 32 32">
<path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675
1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169
1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919
5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55
0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25
1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075
0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
</symbol>
<symbol id="icon-messenger" viewBox="0 0 512 512">
<polygon points="281.44,319.2 216.256,249.664 89.056,319.2 228.96,170.656 295.744,240.192 421.376,170.656"/>
</symbol>
<symbol id="icon-whatsapp" viewBox="0 0 32 32">
<path d="M27.281 4.65c-2.994-3-6.975-4.65-11.219-4.65-8.738 0-15.85 7.112-15.85 15.856 0 2.794 0.731 5.525 2.119 7.925l-2.25 8.219 8.406-2.206c2.319 1.262 4.925 1.931 7.575 1.931h0.006c0 0 0 0 0 0 8.738 0 15.856-7.113 15.856-15.856 0-4.238-1.65-8.219-4.644-11.219zM16.069 29.050v0c-2.369 0-4.688-0.637-6.713-1.837l-0.481-0.288-4.987 1.306 1.331-4.863-0.313-0.5c-1.325-2.094-2.019-4.519-2.019-7.012 0-7.269 5.912-13.181 13.188-13.181 3.519 0 6.831 1.375 9.319 3.862 2.488 2.494 3.856 5.8 3.856 9.325-0.006 7.275-5.919 13.188-13.181 13.188zM23.294 19.175c-0.394-0.2-2.344-1.156-2.706-1.288s-0.625-0.2-0.894 0.2c-0.262 0.394-1.025 1.288-1.256 1.556-0.231 0.262-0.462 0.3-0.856 0.1s-1.675-0.619-3.188-1.969c-1.175-1.050-1.975-2.35-2.206-2.744s-0.025-0.613 0.175-0.806c0.181-0.175 0.394-0.463 0.594-0.694s0.262-0.394 0.394-0.662c0.131-0.262 0.069-0.494-0.031-0.694s-0.894-2.15-1.219-2.944c-0.319-0.775-0.65-0.669-0.894-0.681-0.231-0.012-0.494-0.012-0.756-0.012s-0.694 0.1-1.056 0.494c-0.363 0.394-1.387 1.356-1.387 3.306s1.419 3.831 1.619 4.1c0.2 0.262 2.794 4.269 6.769 5.981 0.944 0.406 1.681 0.65 2.256 0.837 0.95 0.3 1.813 0.256 2.494 0.156 0.762-0.113 2.344-0.956 2.675-1.881s0.331-1.719 0.231-1.881c-0.094-0.175-0.356-0.275-0.756-0.475z"></path>
</symbol>
<symbol id="icon-heart-outline" viewBox="0 0 51.997 51.997">
<path d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905
c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478
c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014
C52.216,18.553,51.97,16.611,51.911,16.242z M49.521,21.261c-0.984,4.172-3.265,7.973-6.59,10.985L25.855,47.481L9.072,32.25
c-3.331-3.018-5.611-6.818-6.596-10.99c-0.708-2.997-0.417-4.69-0.416-4.701l0.015-0.101C2.725,9.139,7.806,3.826,14.158,3.826
c4.687,0,8.813,2.88,10.771,7.515l0.921,2.183l0.921-2.183c1.927-4.564,6.271-7.514,11.069-7.514
c6.351,0,11.433,5.313,12.096,12.727C49.938,16.57,50.229,18.264,49.521,21.261z"/>
</symbol>
<symbol id="icon-heart" viewBox="0 0 50 50">
<path d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
</symbol>
<symbol id="icon-home" viewBox="0 0 32 32">
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</symbol>
<symbol id="icon-package" viewBox="0 0 473.8 473.8">
<path d="M454.8,111.7c0-1.8-0.4-3.6-1.2-5.3c-1.6-3.4-4.7-5.7-8.1-6.4L241.8,1.2c-3.3-1.6-7.2-1.6-10.5,0L25.6,100.9
c-4,1.9-6.6,5.9-6.8,10.4v0.1c0,0.1,0,0.2,0,0.4V362c0,4.6,2.6,8.8,6.8,10.8l205.7,99.7c0.1,0,0.1,0,0.2,0.1
c0.3,0.1,0.6,0.2,0.9,0.4c0.1,0,0.2,0.1,0.4,0.1c0.3,0.1,0.6,0.2,0.9,0.3c0.1,0,0.2,0.1,0.3,0.1c0.3,0.1,0.7,0.1,1,0.2
c0.1,0,0.2,0,0.3,0c0.4,0,0.9,0.1,1.3,0.1c0.4,0,0.9,0,1.3-0.1c0.1,0,0.2,0,0.3,0c0.3,0,0.7-0.1,1-0.2c0.1,0,0.2-0.1,0.3-0.1
c0.3-0.1,0.6-0.2,0.9-0.3c0.1,0,0.2-0.1,0.4-0.1c0.3-0.1,0.6-0.2,0.9-0.4c0.1,0,0.1,0,0.2-0.1l206.3-100c4.1-2,6.8-6.2,6.8-10.8
V112C454.8,111.9,454.8,111.8,454.8,111.7z M236.5,25.3l178.4,86.5l-65.7,31.9L170.8,57.2L236.5,25.3z M236.5,198.3L58.1,111.8
l85.2-41.3L321.7,157L236.5,198.3z M42.8,131.1l181.7,88.1v223.3L42.8,354.4V131.1z M248.5,442.5V219.2l85.3-41.4v58.4
c0,6.6,5.4,12,12,12s12-5.4,12-12v-70.1l73-35.4V354L248.5,442.5z"/>
</symbol>
<symbol id="icon-like" viewBox="0 0 475.099 475.0992">
<path d="M442.829,265.532c9.328-14.089,13.986-29.598,13.986-46.538c0-19.607-7.225-36.637-21.687-51.117 c-14.469-14.465-31.601-21.696-51.394-21.696h-50.251c9.134-18.842,13.709-37.117,13.709-54.816c0-22.271-3.34-39.971-9.996-53.105 c-6.663-13.138-16.372-22.795-29.126-28.984C295.313,3.09,280.947,0,264.959,0c-9.712,0-18.274,3.521-25.697,10.566 c-8.183,7.993-14.084,18.274-17.699,30.837c-3.617,12.559-6.521,24.6-8.708,36.116c-2.187,11.515-5.569,19.652-10.135,24.41 c-9.329,10.088-19.511,22.273-30.551,36.547c-19.224,24.932-32.264,39.685-39.113,44.255H54.828 c-10.088,0-18.702,3.574-25.84,10.706c-7.135,7.139-10.705,15.752-10.705,25.841v182.723c0,10.089,3.566,18.699,10.705,25.838 c7.142,7.139,15.752,10.711,25.84,10.711h82.221c4.188,0,17.319,3.806,39.399,11.42c23.413,8.186,44.017,14.418,61.812,18.702 c17.797,4.284,35.832,6.427,54.106,6.427h26.545h10.284c26.836,0,48.438-7.666,64.809-22.99 c16.365-15.324,24.458-36.213,24.27-62.67c11.42-14.657,17.129-31.597,17.129-50.819c0-4.185-0.281-8.277-0.855-12.278 c7.23-12.748,10.854-26.453,10.854-41.11C445.399,278.379,444.544,271.809,442.829,265.532z M85.949,396.58 c-3.616,3.614-7.898,5.428-12.847,5.428c-4.95,0-9.233-1.813-12.85-5.428c-3.615-3.613-5.424-7.897-5.424-12.85 c0-4.948,1.805-9.229,5.424-12.847c3.621-3.617,7.9-5.425,12.85-5.425c4.949,0,9.231,1.808,12.847,5.425 c3.617,3.617,5.426,7.898,5.426,12.847C91.375,388.683,89.566,392.967,85.949,396.58z M414.145,242.419 c-4.093,8.754-9.186,13.227-15.276,13.415c2.854,3.237,5.235,7.762,7.139,13.562c1.902,5.807,2.847,11.087,2.847,15.848 c0,13.127-5.037,24.455-15.126,33.969c3.43,6.088,5.141,12.658,5.141,19.697c0,7.043-1.663,14.038-4.996,20.984 c-3.327,6.94-7.851,11.938-13.559,14.982c0.951,5.709,1.423,11.04,1.423,15.988c0,31.785-18.274,47.678-54.823,47.678h-34.536 c-24.94,0-57.483-6.943-97.648-20.841c-0.953-0.38-3.709-1.383-8.28-2.998s-7.948-2.806-10.138-3.565 c-2.19-0.767-5.518-1.861-9.994-3.285c-4.475-1.431-8.087-2.479-10.849-3.142c-2.758-0.664-5.901-1.283-9.419-1.855 c-3.52-0.571-6.519-0.855-8.993-0.855h-9.136V219.285h9.136c3.045,0,6.423-0.859,10.135-2.568c3.711-1.714,7.52-4.283,11.421-7.71 c3.903-3.427,7.564-6.805,10.992-10.138c3.427-3.33,7.233-7.517,11.422-12.559c4.187-5.046,7.47-9.089,9.851-12.135 c2.378-3.045,5.375-6.949,8.992-11.707c3.615-4.757,5.806-7.613,6.567-8.566c10.467-12.941,17.795-21.601,21.982-25.981 c7.804-8.182,13.466-18.603,16.987-31.261c3.525-12.66,6.427-24.604,8.703-35.832c2.282-11.229,5.903-19.321,10.858-24.27 c18.268,0,30.453,4.471,36.542,13.418c6.088,8.945,9.134,22.746,9.134,41.399c0,11.229-4.572,26.503-13.71,45.821 c-9.134,19.32-13.698,34.5-13.698,45.539h100.495c9.527,0,17.993,3.662,25.413,10.994c7.426,7.327,11.143,15.843,11.143,25.553 C420.284,225.943,418.237,233.653,414.145,242.419z" data-original="#000000" class="active-path"/>
</symbol>
<symbol id="icon-unlike" viewBox="0 0 475.099 475.0992">
<g transform="matrix(1 0 0 -1 0 475.099)">
<path d="M442.829,265.532c9.328-14.089,13.986-29.598,13.986-46.538c0-19.607-7.225-36.637-21.687-51.117 c-14.469-14.465-31.601-21.696-51.394-21.696h-50.251c9.134-18.842,13.709-37.117,13.709-54.816c0-22.271-3.34-39.971-9.996-53.105 c-6.663-13.138-16.372-22.795-29.126-28.984C295.313,3.09,280.947,0,264.959,0c-9.712,0-18.274,3.521-25.697,10.566 c-8.183,7.993-14.084,18.274-17.699,30.837c-3.617,12.559-6.521,24.6-8.708,36.116c-2.187,11.515-5.569,19.652-10.135,24.41 c-9.329,10.088-19.511,22.273-30.551,36.547c-19.224,24.932-32.264,39.685-39.113,44.255H54.828 c-10.088,0-18.702,3.574-25.84,10.706c-7.135,7.139-10.705,15.752-10.705,25.841v182.723c0,10.089,3.566,18.699,10.705,25.838 c7.142,7.139,15.752,10.711,25.84,10.711h82.221c4.188,0,17.319,3.806,39.399,11.42c23.413,8.186,44.017,14.418,61.812,18.702 c17.797,4.284,35.832,6.427,54.106,6.427h26.545h10.284c26.836,0,48.438-7.666,64.809-22.99 c16.365-15.324,24.458-36.213,24.27-62.67c11.42-14.657,17.129-31.597,17.129-50.819c0-4.185-0.281-8.277-0.855-12.278 c7.23-12.748,10.854-26.453,10.854-41.11C445.399,278.379,444.544,271.809,442.829,265.532z M85.949,396.58 c-3.616,3.614-7.898,5.428-12.847,5.428c-4.95,0-9.233-1.813-12.85-5.428c-3.615-3.613-5.424-7.897-5.424-12.85 c0-4.948,1.805-9.229,5.424-12.847c3.621-3.617,7.9-5.425,12.85-5.425c4.949,0,9.231,1.808,12.847,5.425 c3.617,3.617,5.426,7.898,5.426,12.847C91.375,388.683,89.566,392.967,85.949,396.58z M414.145,242.419 c-4.093,8.754-9.186,13.227-15.276,13.415c2.854,3.237,5.235,7.762,7.139,13.562c1.902,5.807,2.847,11.087,2.847,15.848 c0,13.127-5.037,24.455-15.126,33.969c3.43,6.088,5.141,12.658,5.141,19.697c0,7.043-1.663,14.038-4.996,20.984 c-3.327,6.94-7.851,11.938-13.559,14.982c0.951,5.709,1.423,11.04,1.423,15.988c0,31.785-18.274,47.678-54.823,47.678h-34.536 c-24.94,0-57.483-6.943-97.648-20.841c-0.953-0.38-3.709-1.383-8.28-2.998s-7.948-2.806-10.138-3.565 c-2.19-0.767-5.518-1.861-9.994-3.285c-4.475-1.431-8.087-2.479-10.849-3.142c-2.758-0.664-5.901-1.283-9.419-1.855 c-3.52-0.571-6.519-0.855-8.993-0.855h-9.136V219.285h9.136c3.045,0,6.423-0.859,10.135-2.568c3.711-1.714,7.52-4.283,11.421-7.71 c3.903-3.427,7.564-6.805,10.992-10.138c3.427-3.33,7.233-7.517,11.422-12.559c4.187-5.046,7.47-9.089,9.851-12.135 c2.378-3.045,5.375-6.949,8.992-11.707c3.615-4.757,5.806-7.613,6.567-8.566c10.467-12.941,17.795-21.601,21.982-25.981 c7.804-8.182,13.466-18.603,16.987-31.261c3.525-12.66,6.427-24.604,8.703-35.832c2.282-11.229,5.903-19.321,10.858-24.27 c18.268,0,30.453,4.471,36.542,13.418c6.088,8.945,9.134,22.746,9.134,41.399c0,11.229-4.572,26.503-13.71,45.821 c-9.134,19.32-13.698,34.5-13.698,45.539h100.495c9.527,0,17.993,3.662,25.413,10.994c7.426,7.327,11.143,15.843,11.143,25.553 C420.284,225.943,418.237,233.653,414.145,242.419z" data-original="#000000" class="active-path"/>
</g>
</symbol>