You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
915 lines
32 KiB
915 lines
32 KiB
/*
|
|
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/signin-split", "bootstrap4/image-gallery", "bootstrap4/video-header", "bootstrap4/slider-header", "bootstrap4/about-team", "bootstrap4/portfolio-one-column", "bootstrap4/portfolio-two-column", "bootstrap4/portfolio-three-column", "bootstrap4/portfolio-four-column"];
|
|
|
|
|
|
Vvveb.Sections.add("bootstrap4/signin-split", {
|
|
name: "Modern Sign In Page with Split Screen Format",
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/product.png">',
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/sign-in-split.jpg",
|
|
html: `
|
|
<section data-name="sigin-split">
|
|
<div class="container-fluid">
|
|
<div class="row no-gutter">
|
|
<div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
|
|
<div class="col-md-8 col-lg-6">
|
|
<div class="login d-flex align-items-center py-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-9 col-lg-8 mx-auto">
|
|
<h3 class="login-heading mb-4">Welcome back!</h3>
|
|
<form>
|
|
<div class="form-label-group">
|
|
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
|
<label for="inputEmail">Email address</label>
|
|
</div>
|
|
|
|
<div class="form-label-group">
|
|
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
|
<label for="inputPassword">Password</label>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<input type="checkbox" class="form-check-input" id="customCheck1">
|
|
<label class="custom-control-label" for="customCheck1">Remember password</label>
|
|
</div>
|
|
<button class="btn btn-lg btn-primary btn-section btn-login text-uppercase font-weight-bold mb-2" type="submit">Sign in</button>
|
|
<div class="text-center">
|
|
<a class="small" href="#">Forgot password?</a></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.login,
|
|
.image {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.bg-image {
|
|
background-image: url('https://source.unsplash.com/WEQbe2jBg40/600x1200');
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.login-heading {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.btn-login {
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.05rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.form-label-group {
|
|
position: relative;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-label-group>input,
|
|
.form-label-group>label {
|
|
padding: 1rem 1rem;
|
|
height: auto;
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.form-label-group>label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
line-height: 1.5;
|
|
color: #495057;
|
|
cursor: text;
|
|
/* Match the input under the label */
|
|
border: 1px solid transparent;
|
|
border-radius: .25rem;
|
|
transition: all .1s ease-in-out;
|
|
}
|
|
|
|
.form-label-group input::-webkit-input-placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.form-label-group input:-ms-input-placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.form-label-group input::-ms-input-placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.form-label-group input::-moz-placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.form-label-group input::placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.form-label-group input:not(:placeholder-shown) {
|
|
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
|
|
padding-bottom: calc(var(--input-padding-y) / 3);
|
|
}
|
|
|
|
.form-label-group input:not(:placeholder-shown)~label {
|
|
padding-top: 0.5;
|
|
padding-bottom: 0.5;
|
|
font-size: 12px;
|
|
color: #777;
|
|
}
|
|
</style>
|
|
</div>
|
|
</section>
|
|
`,
|
|
});
|
|
|
|
Vvveb.Sections.add("bootstrap4/image-gallery", {
|
|
name: "Image gallery",
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/thumbnail-gallery.jpg",
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/product.png">',
|
|
html: `
|
|
<section data-name="image-gallery">
|
|
<div class="container">
|
|
|
|
<h1 class="font-weight-light text-center text-lg-left">Thumbnail Gallery</h1>
|
|
|
|
<hr class="mt-2 mb-5">
|
|
|
|
<div class="row text-center text-lg-left">
|
|
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/M185_qYH8vg/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/2gYsZUmockw/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/EMSDtjVHdQ8/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/8mUEy0ABdNE/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/G9Rfc1qccH4/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/aJeH0KcFkuc/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-6">
|
|
<a href="#" class="d-block mb-4 h-100">
|
|
<img class="img-fluid img-thumbnail" src="https://source.unsplash.com/p2TQ-3Bh3Oo/400x300" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
`,
|
|
});
|
|
|
|
Vvveb.Sections.add("bootstrap4/slider-header", {
|
|
name: "Image Slider Header",
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/product.png">',
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/full-slider.jpg",
|
|
html:`
|
|
<header class="slider" data-name="slider">
|
|
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<!-- Slide One - Set the background image for this slide in the line below -->
|
|
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h2 class="display-4">First Slide</h2>
|
|
<p class="lead">This is a description for the first slide.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Slide Two - Set the background image for this slide in the line below -->
|
|
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h2 class="display-4">Second Slide</h2>
|
|
<p class="lead">This is a description for the second slide.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Slide Three - Set the background image for this slide in the line below -->
|
|
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h2 class="display-4">Third Slide</h2>
|
|
<p class="lead">This is a description for the third slide.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
|
|
<style>
|
|
.carousel-item {
|
|
height: 100vh;
|
|
min-height: 350px;
|
|
background: no-repeat center center scroll;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
</header>
|
|
`,
|
|
});
|
|
|
|
|
|
Vvveb.Sections.add("bootstrap4/video-header", {
|
|
name: "Video Header",
|
|
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
|
|
image: "https://assets.startbootstrap.com/img/screenshots/snippets/video-header.jpg",
|
|
html:`
|
|
<header class="video" data-name="header-video">
|
|
<div class="overlay"></div>
|
|
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
|
|
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
|
|
</video>
|
|
<div class="container h-100">
|
|
<div class="d-flex h-100 text-center align-items-center">
|
|
<div class="w-100 text-white">
|
|
<h1 class="display-3">Video Header</h1>
|
|
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="my-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto">
|
|
<p>The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
header.video {
|
|
position: relative;
|
|
background-color: black;
|
|
height: 75vh;
|
|
min-height: 25rem;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
header.video video {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
z-index: 0;
|
|
-ms-transform: translateX(-50%) translateY(-50%);
|
|
-moz-transform: translateX(-50%) translateY(-50%);
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
header.video .container {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
header.video .overlay {
|
|
/*position: absolute;*/
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: black;
|
|
opacity: 0.5;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media (pointer: coarse) and (hover: none) {
|
|
header {
|
|
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
|
|
}
|
|
header video {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</header>
|
|
`,
|
|
});
|
|
|
|
|
|
|
|
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://source.unsplash.com/TMgQMXoglsM/500x350" 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://source.unsplash.com/9UVmlIb0wJU/500x350" 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://source.unsplash.com/sNut2MqSmds/500x350" 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://source.unsplash.com/ZI6p3i9SbVU/500x350" 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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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.it/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>
|
|
`,
|
|
});
|