Content Blocks
Component 1
Featured Today
CAVALLI LIQUID CARBON X AMP
On the other hand, we denounce with righteous indignation and dislike men.
$2,195
<div class="bg-gray-100 ecommerce-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h3 class="text-uppercase pb-3 pb-md-5">Featured Today</h3>
<div class="row align-items-center">
<div class="col-lg-7">
<div class="swiper-container swiper-navication">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/img/templates/amp.jpg" class="w-100" alt="img">
</div>
<div class="swiper-slide">
<img src="../assets/img/templates/amp.jpg" class="w-100" alt="img">
</div>
<div class="swiper-slide">
<img src="../assets/img/templates/amp.jpg" class="w-100" alt="img">
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div class="col-lg-5 my-4">
<p class="star-icon mb-2"><span class="rounded-pill"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</p>
<h2 class="h1 text-uppercase mb-0">CAVALLI LIQUID CARBON X AMP</h2>
<p class="big lh-lg">On the other hand, we denounce with righteous indignation and dislike men.</p>
<p class="h3 mt-4">$2,195</p>
<div class="mt-2">
<a href="javascript:void(0);" class="btn btn-xl btn-dark text-uppercase mr-2 px-5"><span class="px-md-5">Cart</span></a>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
<script>
//Muse Swiper Navication Slider JavaScript
var swiper = new Swiper('.swiper-navication', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
Component 2
<div class="bg-red-500 philo-section">
<div class="has-shape">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1920 143.649">
<path id="Path_2" data-name="Path 2" d="M0,55.558S368.667-36.174,768.667,23.553s593.365,64.118,810,47.555S1920,7.579,1920,7.579V147H0Z" transform="translate(0 -3.351)" fill="#dc3545"></path>
</svg>
</div>
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row">
<div class="col-xl-8">
<h3 class="display-4 text-white">Simple philosophy.</h3>
<p class="big text-white lh-lg">Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.</p>
</div>
</div>
<div class="mt-1 mt-md-4 overlay-center shadow-dark-80 rounded-24">
<img src="../assets/img/templates/philoshopy.jpg" class="rounded-24 w-100" alt="img">
<a href="#" data-toggle="modal" data-target="#staticBackdrop" class="btn play-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 16 16">
<g data-name="icons/tabler/play" transform="translate(0 0)">
<rect data-name="Icons/Tabler/Play background" width="16" height="16" fill="none"></rect>
<path d="M.674,16A.681.681,0,0,1,0,15.314V.687A.681.681,0,0,1,.674,0a.661.661,0,0,1,.351.1L12.68,7.416a.693.693,0,0,1,0,1.168L1.025,15.9A.661.661,0,0,1,.674,16Zm.67-14.087V14.086L11.044,8Z" transform="translate(3)" fill="#ffffff"></path>
</g>
</svg>
</a>
</div>
</section>
</div>
</div>
Component 3
New
MKBHD massive tech video compilation
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…
Read more
<div class="bg-gray-100 magazine-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row align-items-center">
<div class="col-lg-7">
<div class="overlay-center">
<img src="../assets/img/templates/magazine1.jpg" class="img-fluid w-100 rounded-6" alt="Banner">
<a href="#" data-toggle="modal" data-target="#staticBackdrop" class="btn circle circle-lg magazine-play-btn">
<svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
<path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
</div>
<div class="col-lg-5">
<div class="pl-lg-2 pt-4 pt-lg-0">
<span class="badge badge-sm badge-purple text-uppercase">New</span>
<h1 class="h2 text-black-600 mt-1">MKBHD massive tech video compilation</h1>
<p class="lh-lg">The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…</p>
<a href="#" class="btn btn-link text-black-600 mt-2">Read more <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
Component 4
The new Apple Watch is not what you think it is
Jana Strasman
. Yesterday
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…
Read more
<div class="bg-gray-100 magazine-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="card border-0 rounded-6">
<div class="row align-items-center">
<div class="col-lg-7">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/magazine5.jpg" alt="img" class="w-100 rounded-left-6">
</a>
</div>
<div class="col-lg-5">
<span class="avatar avatar-circle fire-avatar bg-purple-500">
<svg data-name="icons/tabler/fire" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Fire background" width="16" height="16" fill="none"></rect>
<path d="M6.75.746A.751.751,0,0,0,5.37.338C1.5,6,7,6.25,7,9a2,2,0,1,1-4-.03V6.3a.75.75,0,0,0-1.295-.516A6.248,6.248,0,0,0,0,10a6,6,0,0,0,12,0C12,4.678,6.75,3.969,6.75.746Z" transform="translate(2)" fill="#ffffff"></path>
</svg>
</span>
<div class="py-4 py-lg-2 px-2 pl-4 pl-xl-5 pr-4 pr-md-5">
<h4 class="title-box"><a href="#">The new Apple Watch is not what you think it is</a></h4>
<p class="small text-gray-600">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar18.png" alt="Image Description">
</span>
<span>Jana Strasman</span>
<span> . Yesterday</span>
</p>
<p class="lh-lg">The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…</p>
<a href="#" class="btn btn-link text-black-600 mt-2">Read more <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#1e1e1e"></path>
</svg></a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 5
Portfolio
Latest work
Fabrx UI Kit Pro for Bootstrap
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia.
View project
Havoc Agency UI Kit
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia.
View project
Fabrx Mobile Design System
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia.
View project
Hopin. Ride Booking UI Kit
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia.
View project
<div class="agency-template bg-dark">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h6>Portfolio</h6>
<h2 class="h1 mb-4 pb-4">Latest work</h2>
<div class="row my-4 my-lg-5">
<div class="col-lg-6">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/latest-work1.jpg" alt="img" class="rounded-12 w-100">
</a>
</div>
<div class="col-lg-6">
<div class="py-3 py-xl-5 px-lg-5">
<h2 class="mb-3 mt-3 mt-lg-0">Fabrx UI Kit Pro for Bootstrap</h2>
<p class="mb-4 lh-lg">Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia.</p>
<a href="#" class="btn btn-link">View project <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ffffff"></path>
</svg></a>
</div>
</div>
</div>
<div class="row py-4 py-lg-5">
<div class="col-lg-6 order-lg-2">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/latest-work2.jpg" alt="img" class="rounded-12 w-100">
</a>
</div>
<div class="col-lg-6">
<div class="py-3 py-xl-5 px-lg-5">
<h2 class="mb-3 mt-3 mt-lg-0">Havoc Agency UI Kit</h2>
<p class="mb-4 lh-lg">Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia.</p>
<a href="#" class="btn btn-link">View project <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ffffff"></path>
</svg></a>
</div>
</div>
</div>
<div class="row py-4 py-lg-5">
<div class="col-lg-6 aos-init">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/latest-work3.jpg" alt="img" class="rounded-12 w-100">
</a>
</div>
<div class="col-lg-6">
<div class="py-3 py-xl-5 px-lg-5">
<h2 class="mb-3 mt-3 mt-lg-0">Fabrx Mobile Design System</h2>
<p class="mb-4 lh-lg">Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia.</p>
<a href="#" class="btn btn-link">View project <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ffffff"></path>
</svg></a>
</div>
</div>
</div>
<div class="row py-4 py-lg-5">
<div class="col-lg-6 order-lg-2 aos-init">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/latest-work4.jpg" alt="img" class="rounded-12 w-100">
</a>
</div>
<div class="col-lg-6">
<div class="py-3 py-lg-5 px-lg-5">
<h2 class="mb-3 mt-3 mt-lg-0">Hopin. Ride Booking UI Kit</h2>
<p class="mb-4 lh-lg">Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia.</p>
<a href="#" class="btn btn-link">View project <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ffffff"></path>
</svg></a>
</div>
</div>
</div>
</section>
</div>
</div>
Component 6
Location
Building 543 Brandenburgische Straße, 11454, Berlin, Germany
Location
Building 543 Brandenburgische Straße, 11454, Berlin, Germany
Location
Building 543 Brandenburgische Straße, 11454, Berlin, Germany
<div class="contact-template">
<div class="container">
<!-- Muse Section, Py 4, Py Md 5, Mt Md 2 -->
<section class="muse-section py-4 py-md-5 mt-md-2">
<!-- Nav, Nav Pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-one-code-features-example1-tab" data-toggle="pill" href="#pills-one-code-features-example1" role="tab" aria-controls="pills-one-code-features-example1" aria-selected="true">Berlin</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-two-code-features-example1-tab" data-toggle="pill" href="#pills-two-code-features-example1" role="tab" aria-controls="pills-two-code-features-example1" aria-selected="false">New York</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-three-code-features-example1-tab" data-toggle="pill" href="#pills-three-code-features-example1" role="tab" aria-controls="pills-three-code-features-example1" aria-selected="false">Berlin</a>
</li>
</ul>
<!-- End Nav -->
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-one-code-features-example1" role="tabpanel" aria-labelledby="pills-one-code-features-example1-tab">
<div class="row">
<div class="col-lg-7">
<div class="rounded-12 overflow-hidden mb-4 mb-md-0">
<img src="../assets/img/pages/map.jpg" class="w-100" alt="Map">
</div>
</div>
<div class="col-lg-5">
<div class="pt-xl-5 pt-lg-0 pt-md-5 pb-lg-5 px-lg-5">
<div class="mb-4">
<h6>Location</h6>
<p class="lh-lg">Building 543 Brandenburgische Straße, 11454, Berlin, Germany</p>
</div>
<div class="mb-4 pt-md-3">
<h6>Email</h6>
<p class="lh-lg"><a href="mailto:support@fabrx.co" class="text-secondary">support@fabrx.co</a></p>
</div>
<div class="mb-4 pt-md-3">
<h6 class="mb-3">Phone</h6>
<p class="mb-2"><a href="tel:112334556678" class="text-secondary">+112 334 556 678</a></p>
<p><a href="tel:112776889998" class="text-secondary">+112 776 889 998</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-two-code-features-example1" role="tabpanel" aria-labelledby="pills-two-code-features-example1-tab">
<div class="row">
<div class="col-lg-7">
<div class="rounded-12 overflow-hidden mb-4 mb-md-0">
<img src="../assets/img/pages/map.jpg" class="w-100" alt="Map">
</div>
</div>
<div class="col-lg-5">
<div class="pt-xl-5 pt-lg-0 pt-md-5 pb-lg-5 px-lg-5">
<div class="mb-4">
<h6>Location</h6>
<p class="lh-lg">Building 543 Brandenburgische Straße, 11454, Berlin, Germany</p>
</div>
<div class="mb-4 pt-md-3">
<h6>Email</h6>
<p class="lh-lg"><a href="mailto:support@fabrx.co" class="text-secondary">support@fabrx.co</a></p>
</div>
<div class="mb-4 pt-md-3">
<h6 class="mb-3">Phone</h6>
<p class="mb-2"><a href="tel:112334556678" class="text-secondary">+112 334 556 678</a></p>
<p><a href="tel:112776889998" class="text-secondary">+112 776 889 998</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-three-code-features-example1" role="tabpanel" aria-labelledby="pills-three-code-features-example1-tab">
<div class="row">
<div class="col-lg-7">
<div class="rounded-12 overflow-hidden mb-4 mb-md-0">
<img src="../assets/img/pages/map.jpg" class="w-100" alt="Map">
</div>
</div>
<div class="col-lg-5">
<div class="pt-xl-5 pt-lg-0 pt-md-5 pb-lg-5 px-lg-5">
<div class="mb-4">
<h6>Location</h6>
<p class="lh-lg">Building 543 Brandenburgische Straße, 11454, Berlin, Germany</p>
</div>
<div class="mb-4 pt-md-3">
<h6>Email</h6>
<p class="lh-lg"><a href="mailto:support@fabrx.co" class="text-secondary">support@fabrx.co</a></p>
</div>
<div class="mb-4 pt-md-3">
<h6 class="mb-3">Phone</h6>
<p class="mb-2"><a href="tel:112334556678" class="text-secondary">+112 334 556 678</a></p>
<p class="mb-0"><a href="tel:112776889998" class="text-secondary">+112 776 889 998</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Tab Content -->
</section>
</div>
</div>
Component 7
<div class="container">
<!-- Muse Section -->
<section class="muse-section py-4 py-md-5">
<div class="rounded-12 position-relative">
<img src="../assets/img/blog/blog5.jpg" class="rounded-12 w-100" alt="Blog">
<div class="position-absolute blog-overlay">
<div class="bg-white rounded-6 p-3 p-lg-5">
<span class="badge badge-sm badge-primary">Feature</span>
<h4 class="pt-2"><a href="#" class="text-black-600">Beached to take you somewhere else</a></h4>
<div class="d-flex align-items-center mb-md-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar5.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Farok Rastegar . </span><span>1 hour ago</span></div>
</div>
</div>
</div>
</section>
</div>