561 lines
21 KiB
JavaScript
561 lines
21 KiB
JavaScript
|
/*
|
||
|
|
Copyright 2017 Ziadin Givan
|
||
|
|
|
||
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
|
you may not use this file except in compliance with the License.
|
||
|
|
You may obtain a copy of the License at
|
||
|
|
|
||
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
|
||
|
|
Unless required by applicable law or agreed to in writing, software
|
||
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
|
See the License for the specific language governing permissions and
|
||
|
|
limitations under the License.
|
||
|
|
|
||
|
|
https://github.com/givanz/Vvvebjs
|
||
|
|
*/
|
||
|
|
|
||
|
|
Vvveb.SectionsGroup['Bootstrap'] =
|
||
|
|
["bootstrap4/about-team", "bootstrap4/portfolio-one-column", "bootstrap4/portfolio-two-column", "bootstrap4/portfolio-three-column", "bootstrap4/portfolio-four-column"];
|
||
|
|
|
||
|
|
|
||
|
|
Vvveb.Sections.add("bootstrap4/about-team", {
|
||
|
|
name: "About and Team Section",
|
||
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
|
||
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/about-team.jpg",
|
||
|
|
html:`
|
||
|
|
<section data-name="about-team">
|
||
|
|
<header class="bg-primary text-center py-5 mb-4">
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="font-weight-light text-white">Meet the Team</h1>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<!-- Team Member 1 -->
|
||
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
||
|
|
<div class="card border-0 shadow">
|
||
|
|
<img src="https://images.unsplash.com/photo-1507591064344-4c6ce005b128?w=640" class="card-img-top" alt="...">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<h5 class="card-title mb-0">Team Member</h5>
|
||
|
|
<div class="card-text text-black-50">Web Developer</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Team Member 2 -->
|
||
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
||
|
|
<div class="card border-0 shadow">
|
||
|
|
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=640" class="card-img-top" alt="...">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<h5 class="card-title mb-0">Team Member</h5>
|
||
|
|
<div class="card-text text-black-50">Web Developer</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Team Member 3 -->
|
||
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
||
|
|
<div class="card border-0 shadow">
|
||
|
|
<img src="https://images.unsplash.com/photo-1522536421511-14c9073df899?w=640" class="card-img-top" alt="...">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<h5 class="card-title mb-0">Team Member</h5>
|
||
|
|
<div class="card-text text-black-50">Web Developer</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Team Member 4 -->
|
||
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
||
|
|
<div class="card border-0 shadow">
|
||
|
|
<img src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?w=640" class="card-img-top" alt="...">
|
||
|
|
<div class="card-body text-center">
|
||
|
|
<h5 class="card-title mb-0">Team Member</h5>
|
||
|
|
<div class="card-text text-black-50">Web Developer</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.row -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
`,
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Vvveb.Sections.add("bootstrap4/portfolio-one-column", {
|
||
|
|
name: "One Column Portfolio Layout",
|
||
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
|
||
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/portfolio-one-column.jpg",
|
||
|
|
html:`
|
||
|
|
<section data-name="portfolion-one-column">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<!-- Page Heading -->
|
||
|
|
<h1 class="my-4">Page Heading
|
||
|
|
<small>Secondary Text</small>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<!-- Project One -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-7">
|
||
|
|
<a href="#">
|
||
|
|
<img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.co/700x300" alt="">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5">
|
||
|
|
<h3>Project One</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
|
||
|
|
<a class="btn btn-primary" href="#">View Project</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.row -->
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- Project Two -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-7">
|
||
|
|
<a href="#">
|
||
|
|
<img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.co/700x300" alt="">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5">
|
||
|
|
<h3>Project Two</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
|
||
|
|
<a class="btn btn-primary" href="#">View Project</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.row -->
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- Project Three -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-7">
|
||
|
|
<a href="#">
|
||
|
|
<img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.co/700x300" alt="">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5">
|
||
|
|
<h3>Project Three</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!</p>
|
||
|
|
<a class="btn btn-primary" href="#">View Project</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.row -->
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- Project Four -->
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
<div class="col-md-7">
|
||
|
|
<a href="#">
|
||
|
|
<img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.co/700x300" alt="">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5">
|
||
|
|
<h3>Project Four</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
|
||
|
|
<a class="btn btn-primary" href="#">View Project</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.row -->
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- Pagination -->
|
||
|
|
<ul class="pagination justify-content-center">
|
||
|
|
<li class="page-item">
|
||
|
|
<a class="page-link" href="#" aria-label="Previous">
|
||
|
|
<span aria-hidden="true">«</span>
|
||
|
|
<span class="sr-only">Previous</span>
|
||
|
|
</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="#" aria-label="Next">
|
||
|
|
<span aria-hidden="true">»</span>
|
||
|
|
<span class="sr-only">Next</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
`,
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Vvveb.Sections.add("bootstrap4/portfolio-two-column", {
|
||
|
|
name: "Two Column Portfolio Layout",
|
||
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
|
||
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/portfolio-one-column.jpg",
|
||
|
|
html:`
|
||
|
|
<section data-name="portfolio-two-column">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<!-- Page Heading -->
|
||
|
|
<h1 class="my-4">Page Heading
|
||
|
|
<small>Secondary Text</small>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project One</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Two</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Three</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Four</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Five</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Six</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.row -->
|
||
|
|
|
||
|
|
<!-- Pagination -->
|
||
|
|
<ul class="pagination justify-content-center">
|
||
|
|
<li class="page-item">
|
||
|
|
<a class="page-link" href="#" aria-label="Previous">
|
||
|
|
<span aria-hidden="true">«</span>
|
||
|
|
<span class="sr-only">Previous</span>
|
||
|
|
</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="#" aria-label="Next">
|
||
|
|
<span aria-hidden="true">»</span>
|
||
|
|
<span class="sr-only">Next</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
`,
|
||
|
|
});
|
||
|
|
|
||
|
|
Vvveb.Sections.add("bootstrap4/portfolio-three-column", {
|
||
|
|
name: "Three Column Portfolio Layout",
|
||
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
|
||
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/portfolio-three-column.jpg",
|
||
|
|
html:`
|
||
|
|
<section data-name="portfolio-three-column">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<!-- Page Heading -->
|
||
|
|
<h1 class="my-4">Page Heading
|
||
|
|
<small>Secondary Text</small>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project One</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Two</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Three</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Four</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Five</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Six</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.row -->
|
||
|
|
|
||
|
|
<!-- Pagination -->
|
||
|
|
<ul class="pagination justify-content-center">
|
||
|
|
<li class="page-item">
|
||
|
|
<a class="page-link" href="#" aria-label="Previous">
|
||
|
|
<span aria-hidden="true">«</span>
|
||
|
|
<span class="sr-only">Previous</span>
|
||
|
|
</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="#" aria-label="Next">
|
||
|
|
<span aria-hidden="true">»</span>
|
||
|
|
<span class="sr-only">Next</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>`,
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
Vvveb.Sections.add("bootstrap4/portfolio-four-column", {
|
||
|
|
name: "Four Column Portfolio Layout",
|
||
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
|
||
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/portfolio-four-column.jpg",
|
||
|
|
html:`
|
||
|
|
<section data-name="portfolio-four-column">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<!-- Page Heading -->
|
||
|
|
<h1 class="my-4">Page Heading
|
||
|
|
<small>Secondary Text</small>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project One</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Two</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Three</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Four</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Five</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Six</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Seven</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
|
||
|
|
<div class="card h-100">
|
||
|
|
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">
|
||
|
|
<a href="#">Project Eight</a>
|
||
|
|
</h4>
|
||
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius adipisci dicta dignissimos neque animi ea, veritatis, provident hic consequatur ut esse! Commodi ea consequatur accusantium, beatae qui deserunt tenetur ipsa.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.row -->
|
||
|
|
|
||
|
|
<!-- Pagination -->
|
||
|
|
<ul class="pagination justify-content-center">
|
||
|
|
<li class="page-item">
|
||
|
|
<a class="page-link" href="#" aria-label="Previous">
|
||
|
|
<span aria-hidden="true">«</span>
|
||
|
|
<span class="sr-only">Previous</span>
|
||
|
|
</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="#" aria-label="Next">
|
||
|
|
<span aria-hidden="true">»</span>
|
||
|
|
<span class="sr-only">Next</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<section>
|
||
|
|
`,
|
||
|
|
});
|