April 3, 2018
Respect always comes first
The past years have been remarkable for web technologies.
News Blogs
To help you reach your audience in a personal and more informal way, Space includes several News Blogs to start with.
News Blog #1
May 22, 2018
Announcing a plan for small teams
We've always believed that by providing a space
<div class="card-mb card-sm-columns card-sm-2-count">
<!-- Blog Grid -->
<article class="card mb-3">
<img class="card-img-top" src="../assets/img/500x250/img11.jpg" alt="Image Description">
<div class="card-body p-5">
<small class="d-block text-muted mb-2">April 3, 2018</small>
<h3 class="h5">
<a href="../html/blog/single-article-classic.html">Respect always comes first</a>
</h3>
<p class="mb-0">The past years have been remarkable for web technologies.</p>
</div>
<div class="card-footer bg-gray-100 py-4 px-5">
<div class="media align-items-center">
<img class="u-sm-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h4 class="d-inline-block mb-0">
<a class="d-block font-size-13" href="../html/blog/single-article-classic.html">Andrea Gard</a>
</h4>
</div>
</div>
</div>
</article>
<!-- End Blog Grid -->
<!-- Blog Grid -->
<article class="card mb-3">
<img class="card-img-top" src="../assets/img/500x250/img6.jpg" alt="Image Description">
<div class="card-body p-5">
<small class="d-block text-muted mb-2">May 22, 2018</small>
<h3 class="h5">
<a href="../html/blog/single-article-classic.html">Announcing a plan for small teams</a>
</h3>
<p class="mb-0">We've always believed that by providing a space</p>
</div>
<div class="card-footer bg-gray-100 py-4 px-5">
<div class="media align-items-center">
<img class="u-sm-avatar rounded-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<div class="media-body">
<h4 class="d-inline-block mb-0">
<a class="d-block font-size-13" href="#">James Austin</a>
</h4>
</div>
</div>
</div>
</article>
<!-- End Blog Grid -->
</div>
News Blog #2
May 15, 2018
InVision design forward fund
Clark Valberg is the founder and CEO of InVision.
May 22, 2018
Announcing a plan for small teams
We've always believed that by providing a space
<div class="card-deck d-block d-lg-flex">
<!-- Blog Grid -->
<article class="card mb-5">
<div class="card-body p-5">
<small class="d-block-2">May 15, 2018</small>
<h2 class="h5">
<a href="../html/blog/single-article-classic.html">InVision design forward fund</a>
</h2>
<p class="mb-0">Clark Valberg is the founder and CEO of InVision.</p>
</div>
<div class="card-footer bg-gray-100 py-4 px-5">
<div class="media align-items-center">
<img class="u-sm-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h3 class="d-inline-block mb-0">
<a class="d-block font-size-13" href="#">Andrea Gard</a>
</h3>
</div>
</div>
</div>
</article>
<!-- End Blog Grid -->
<!-- Blog Grid -->
<article class="card mb-5">
<div class="card-body p-5">
<small class="d-block-2">May 22, 2018</small>
<h3 class="h5">
<a href="../html/blog/single-article-classic.html">Announcing a plan for small teams</a>
</h3>
<p class="mb-0">We've always believed that by providing a space</p>
</div>
<div class="card-footer bg-gray-100 py-4 px-5">
<div class="media align-items-center">
<img class="u-sm-avatar rounded-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<div class="media-body">
<h4 class="d-inline-block mb-0">
<a class="d-block font-size-13" href="#">James Austin</a>
</h4>
</div>
</div>
</div>
</article>
<!-- End Blog Grid -->
</div>
News Blog #3
InVision design forward fund
Clark Valberg is the founder and CEO of InVision.
Announcing a plan for small teams
We've always believed that by providing a space
Design principles
The biggest collections of design principles on the internet
Touch yourself
Everyone's are different, and they can even change
<div class="card-deck d-block d-lg-flex">
<article class="card border-0 mb-5">
<div class="card-body row align-items-stretch no-gutters p-0">
<!-- News Blog Card -->
<div class="col-7 border border-right-0 rounded-left">
<div class="p-5">
<h2 class="h5 mb-3">
<a href="../html/blog/single-article-classic.html">InVision design forward fund</a>
</h2>
<p class="mb-0">Clark Valberg is the founder and CEO of InVision.</p>
</div>
</div>
<div class="col-5 card-img-right border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img4.jpg"></div>
</div>
<!-- End News Blog Card -->
</article>
<article class="card border-0 mb-5">
<div class="card-body row align-items-stretch no-gutters p-0">
<!-- News Blog Card -->
<div class="col-7 border border-right-0 rounded-left">
<div class="p-5">
<h3 class="h5 mb-3">
<a href="../html/blog/single-article-classic.html">Announcing a plan for small teams</a>
</h3>
<p class="mb-0">We've always believed that by providing a space</p>
</div>
</div>
<div class="col-5 card-img-right border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img6.jpg"></div>
</div>
<!-- End News Blog Card -->
</article>
</div>
<div class="card-deck d-block d-lg-flex">
<article class="card border-0 mb-5">
<div class="card-body row align-items-stretch no-gutters p-0">
<!-- News Blog Card -->
<div class="col-7 border border-right-0 rounded-left">
<div class="p-5">
<h3 class="h5 mb-3">
<a href="../html/blog/single-article-classic.html">Design principles</a>
</h3>
<p class="mb-0">The biggest collections of design principles on the internet</p>
</div>
</div>
<div class="col-5 card-img-right border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img3.jpg"></div>
</div>
<!-- End News Blog Card -->
</article>
<article class="card border-0 mb-5">
<div class="card-body row align-items-stretch no-gutters p-0">
<!-- News Blog Card -->
<div class="col-7 border border-right-0 rounded-left">
<div class="p-5">
<h3 class="h5 mb-3">
<a href="../html/blog/single-article-classic.html">Touch yourself</a>
</h3>
<p class="mb-0">Everyone's are different, and they can even change</p>
</div>
</div>
<div class="col-5 card-img-right border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img2.jpg"></div>
</div>
<!-- End News Blog Card -->
</article>
</div>
News Blog #4
Love for Space always comes first
Sit still with ClearMotion
Design principles
<div class="card-mb card-sm-columns card-sm-2-count card-lg-3-count">
<!-- News Blog -->
<article class="card border-0 mb-3">
<div class="card-body bg-primary rounded p-5">
<span class="fab fa-instagram fa-2x text-white mb-4"></span>
<div class="mb-5">
<h2 class="h5 text-white">Love for Space always comes first</h2>
</div>
<a class="btn btn-sm btn-outline-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Follow @Space</a>
</div>
</article>
<!-- End News Blog -->
<!-- News Blog -->
<article class="card mb-3">
<div class="card-body">
<img class="img-fluid rounded" src="../assets/img/500x330/img20.jpg" alt="Image Description">
<div class="p-5">
<h3 class="h5 mb-0">
<a href="#">A UX strategy for the Ultimate Product Launch</a>
</h3>
</div>
</div>
</article>
<!-- End News Blog -->
<!-- News Blog -->
<article class="card mb-3">
<div class="card-body">
<img class="img-fluid rounded" src="../assets/img/500x330/img12.jpg" alt="Image Description">
<div class="p-5">
<h4 class="h5 mb-0">
<a href="#">Breathing in the Crisp Air of Lake</a>
</h4>
</div>
</div>
</article>
<!-- End News Blog -->
<!-- News Blog -->
<article class="card border-0 mb-3">
<div class="card-body bg-dark rounded p-5">
<span class="fab fa-github fa-2x text-white mb-4"></span>
<div class="mb-5">
<h4 class="h5 text-white">Sit still with ClearMotion</h4>
</div>
<a class="btn btn-sm btn-outline-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Follow @Space</a>
</div>
</article>
<!-- End News Blog -->
<!-- News Blog -->
<article class="card border-0 mb-3">
<div class="card-body bg-purple rounded p-5">
<span class="fab fa-linkedin fa-2x text-white mb-4"></span>
<div class="mb-5">
<h4 class="h5 text-white">Design principles</h4>
</div>
<a class="btn btn-sm btn-outline-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Follow @Space</a>
</div>
</article>
<!-- End News Blog -->
<!-- News Blog -->
<article class="card mb-3">
<div class="card-body">
<img class="img-fluid rounded" src="../assets/img/500x330/img4.jpg" alt="Image Description">
<div class="p-5">
<h4 class="h5 mb-0">
<a href="#">The Hypnotic Allure of Cinemagraphic Waves</a>
</h4>
</div>
</div>
</article>
<!-- End News Blog -->
</div>
News Blog #5
We're changing how teams work together
Think back to the last time you were deep in the zone—time flew by and the work flowed through you almost effortlessly.
<!-- Card News Blog Section -->
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg1.png);">
<div class="container space-2 space-3--lg">
<!-- Card News Blog -->
<div class="w-md-75 w-lg-60 mx-md-auto">
<div class="row shadow-sm">
<div class="col-6 rounded-left bg-img-hero" data-bg-img-src="../assets/img/500x550/img12.jpg"></div>
<div class="col-6 bg-white rounded-right">
<div class="p-3 p-sm-5">
<div class="mb-4">
<h3 class="h4 mb-4">
<a href="#">We're changing how teams work together</a>
</h3>
<p class="mb-0">Think back to the last time you were deep in the zone—time flew by and the work flowed through you almost effortlessly.</p>
</div>
<a href="#">Learn More</a>
</div>
</div>
</div>
</div>
<!-- End Card News Blog -->
</div>
</div>
<!-- End Card News Blog Section -->
News Blog #6
News
Read our news & blogs
Our duty towards you is to share our experience we're reaching in our work path with you.
Business
Tis the season to be jolly, and Ueno has one more thing to be cheery about in 2017.
Webinar
It's nice to win awards. Last night, the Ueno team in Reykjavík came home from the Icelandic Web Awards.
Test Space on Atlassian Cloud with your own data for free.
Start-Up
Clark Valberg is the founder and CEO of InVision.
Business
We've been working hard with our besties at Reuters to design a new reading experience for Reuters.com.
Different stations of elements to reach the ultimate destination of design.
HTML:
<!-- Resources Section - Title -->
<div class="bg-purple bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container space-2-top space-3-top--lg space-3-bottom">
<!-- Title -->
<div class="w-md-80 text-center w-lg-60 mx-lg-auto">
<span class="u-label u-label--sm u-label--light mb-3">News</span>
<h2 class="text-white">Read our news & blogs</h2>
<p class="lead text-light">Our duty towards you is to share our experience we're reaching in our work path with you.</p>
</div>
<!-- End Title -->
</div>
</div>
<!-- End Resources Section - Title -->
<!-- Resources Section - Content -->
<div class="container space-2-bottom space-3-bottom--lg mt-n9">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--gutters-3 u-slick--equal-height u-slick--pagination-modern"
data-slides-show="3"
data-slides-scroll="2"
data-pagi-classes="u-slick__pagination mt-2 mr-1"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<!-- Card -->
<div class="js-slide">
<div class="card border shadow-sm rounded mb-4">
<div class="card-header bg-gray-100 p-5">
<h3 class="small text-muted text-uppercase">Business</h3>
<div class="row">
<div class="col-6">
<h4 class="h6">
<a href="../blog/single-article-classic.html">Gimme that Awwward!</a>
</h4>
</div>
<div class="col-6">
<img class="img-fluid" src="../assets/img/500x330/img21.jpg" alt="Image Description">
</div>
</div>
</div>
<div class="card-body pt-5 px-5">
<p>Tis the season to be jolly, and Ueno has one more thing to be cheery about in 2017.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-5">
<a class="btn btn-sm btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="js-slide">
<div class="card border shadow-sm rounded mb-4">
<div class="card-header bg-gray-100 p-5">
<h3 class="small text-muted text-uppercase">Webinar</h3>
<div class="row">
<div class="col-6">
<h4 class="h6">
<a href="../blog/single-article-classic.html">A win-win-win situation</a>
</h4>
</div>
<div class="col-6">
<img class="img-fluid" src="../assets/img/500x330/img11.jpg" alt="Image Description">
</div>
</div>
</div>
<div class="card-body pt-5 px-5">
<p>It's nice to win awards. Last night, the Ueno team in Reykjavík came home from the Icelandic Web Awards.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-5">
<a class="btn btn-sm btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="js-slide">
<div class="card border shadow-sm rounded mb-4">
<div class="card-header bg-gray-100 p-5">
<h3 class="small text-muted text-uppercase">Article</h3>
<div class="row">
<div class="col-6">
<h4 class="h6">
<a href="../blog/single-article-classic.html">Key benefits of project Space template</a>
</h4>
</div>
<div class="col-6">
<img class="img-fluid" src="../assets/img/500x330/img22.jpg" alt="Image Description">
</div>
</div>
</div>
<div class="card-body pt-5 px-5">
<p>Test Space on Atlassian Cloud with your own data for free.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-5">
<a class="btn btn-sm btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="js-slide">
<div class="card border shadow-sm rounded mb-4">
<div class="card-header bg-gray-100 p-5">
<h3 class="small text-muted text-uppercase">Start-Up</h3>
<div class="row">
<div class="col-6">
<h4 class="h6">
<a href="../blog/single-article-classic.html">InVision design forward fund</a>
</h4>
</div>
<div class="col-6">
<img class="img-fluid" src="../assets/img/500x330/img20.jpg" alt="Image Description">
</div>
</div>
</div>
<div class="card-body pt-5 px-5">
<p>Clark Valberg is the founder and CEO of InVision.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-5">
<a class="btn btn-sm btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="js-slide">
<div class="card border shadow-sm rounded mb-4">
<div class="card-header bg-gray-100 p-5">
<h3 class="small text-muted text-uppercase">Business</h3>
<div class="row">
<div class="col-6">
<h4 class="h6">
<a href="../blog/single-article-classic.html">A new look for Reuters.com</a>
</h4>
</div>
<div class="col-6">
<img class="img-fluid" src="../assets/img/500x330/img10.jpg" alt="Image Description">
</div>
</div>
</div>
<div class="card-body pt-5 px-5">
<p>We've been working hard with our besties at Reuters to design a new reading experience for Reuters.com.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-5">
<a class="btn btn-sm btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="js-slide">
<div class="card border shadow-sm rounded mb-4">
<div class="card-header bg-gray-100 p-5">
<h3 class="small text-muted text-uppercase">Design</h3>
<div class="row">
<div class="col-6">
<h4 class="h6">
<a href="../blog/single-article-classic.html">A UX strategy for the Ultimate Product Launch</a>
</h4>
</div>
<div class="col-6">
<img class="img-fluid" src="../assets/img/500x330/img15.jpg" alt="Image Description">
</div>
</div>
</div>
<div class="card-body pt-5 px-5">
<p>Different stations of elements to reach the ultimate destination of design.</p>
</div>
<div class="card-footer border-0 pt-0 pb-5 px-5">
<a class="btn btn-sm btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Slick Carousel -->
</div>
<!-- End Resources Section - Content -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
News Blog #7
Andre Johnson
Joan Smith
Mia Watson
Bill Bush
<div class="row mb-5">
<!-- Post Item -->
<div class="col-md-6 col-lg-4 mb-4 mb-lg-3">
<article class="card border-0 shadow-sm h-100 mb-3">
<img class="card-img-top" src="../assets/img/demo/hotel/blog-post-1.jpg" alt="Image Description">
<div class="card-body pb-2">
<h3 class="h5 mb-0">
<a href="#">10 Best Hotels to Stay in Bali for Work Abroad during Holidays</a>
</h3>
</div>
<div class="card-footer text-muted border-0 d-flex justify-content-between align-items-center small">
<div class="d-flex align-items-center text-muted">
<img class="u-avatar rounded-circle mr-2" src="../assets/img/100x100/img3.jpg" alt="Image description">
Andre Johnson
</div>
<em class="font-normal">April 3</em>
</div>
</article>
</div>
<!-- End Post Item -->
<!-- Post Item -->
<div class="col-md-6 col-lg-4 mb-4 mb-lg-3">
<article class="card border-0 shadow-sm h-100 mb-3">
<img class="card-img-top" src="../assets/img/demo/hotel/blog-post-2.png" alt="Image Description">
<div class="card-body pb-2">
<h3 class="h5 mb-0">
<a href="#">Short Stay in Vegas? Here Are 3 Las Vegas Itineraries</a>
</h3>
</div>
<div class="card-footer text-muted border-0 d-flex justify-content-between align-items-center small">
<div class="d-flex align-items-center text-muted">
<img class="u-avatar rounded-circle mr-2" src="../assets/img/100x100/img1.jpg" alt="Image description">
Joan Smith
</div>
<em class="font-normal">April 20</em>
</div>
</article>
</div>
<!-- End Post Item -->
<!-- Post Item -->
<div class="col-md-6 col-lg-4 mb-4 mb-lg-3">
<article class="card border-0 shadow-sm h-100 mb-3">
<img class="card-img-top" src="../assets/img/demo/hotel/blog-post-3.png" alt="Image Description">
<div class="card-body pb-2">
<h3 class="h5 mb-0">
<a href="#">Top 7 Most Instragrammable Hotels #NoFilterNeeded</a>
</h3>
</div>
<div class="card-footer text-muted border-0 d-flex justify-content-between align-items-center small">
<div class="d-flex align-items-center text-muted">
<img class="u-avatar rounded-circle mr-2" src="../assets/img/100x100/img2.jpg" alt="Image description">
Mia Watson
</div>
<em class="font-normal">May 9</em>
</div>
</article>
</div>
<!-- End Post Item -->
<!-- Post Item -->
<div class="col-md-6 col-lg-4 d-lg-none mb-4 mb-lg-3">
<article class="card border-0 shadow-sm h-100 mb-3">
<img class="card-img-top" src="../assets/img/demo/hotel/blog-post-4.jpg" alt="Image Description">
<div class="card-body pb-2">
<h3 class="h5 mb-0">
<a href="#">TOP 10 Best AirLine</a>
</h3>
</div>
<div class="card-footer text-muted border-0 d-flex justify-content-between align-items-center small">
<div class="d-flex align-items-center text-muted">
<img class="u-avatar rounded-circle mr-2" src="../assets/img/100x100/img4.jpg" alt="Image description">
Bill Bush
</div>
<em class="font-normal">May 9</em>
</div>
</article>
</div>
<!-- End Post Item -->
</div>