290 lines
16 KiB
PHP
290 lines
16 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Article')
|
|
|
|
@push('style')
|
|
<!-- CSS Libraries -->
|
|
@endpush
|
|
|
|
@section('main')
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Article</h1>
|
|
<div class="section-header-breadcrumb">
|
|
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
|
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
|
<div class="breadcrumb-item">Article</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<h2 class="section-title">Articles</h2>
|
|
<p class="section-lead">This article component is based on card and flexbox.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img08.jpg') }}">
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#"
|
|
class="btn btn-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img04.jpg') }}">
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#"
|
|
class="btn btn-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img09.jpg') }}">
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#"
|
|
class="btn btn-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img12.jpg') }}">
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#"
|
|
class="btn btn-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">Article Style B</h2>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article article-style-b">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img13.jpg') }}">
|
|
</div>
|
|
<div class="article-badge">
|
|
<div class="article-badge-item bg-danger"><i class="fas fa-fire"></i> Trending</div>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article article-style-b">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img15.jpg') }}">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article article-style-b">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img07.jpg') }}">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article article-style-b">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img02.jpg') }}">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<h2 class="section-title">Article Style C</h2>
|
|
<div class="row">
|
|
<div class="col-12 col-md-4 col-lg-4">
|
|
<article class="article article-style-c">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img13.jpg') }}">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-category"><a href="#">News</a>
|
|
<div class="bullet"></div> <a href="#">5 Days</a>
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-user">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}">
|
|
<div class="article-user-details">
|
|
<div class="user-detail-name">
|
|
<a href="#">Hasan Basri</a>
|
|
</div>
|
|
<div class="text-job">Web Developer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-md-4 col-lg-4">
|
|
<article class="article article-style-c">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img14.jpg') }}">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-category"><a href="#">News</a>
|
|
<div class="bullet"></div> <a href="#">5 Days</a>
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-user">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-3.png') }}">
|
|
<div class="article-user-details">
|
|
<div class="user-detail-name">
|
|
<a href="#">Rizal Fakhri</a>
|
|
</div>
|
|
<div class="text-job">UX Designer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-md-4 col-lg-4">
|
|
<article class="article article-style-c">
|
|
<div class="article-header">
|
|
<div class="article-image"
|
|
data-background="{{ asset('img/news/img01.jpg') }}">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-category"><a href="#">News</a>
|
|
<div class="bullet"></div> <a href="#">5 Days</a>
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-user">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-2.png') }}">
|
|
<div class="article-user-details">
|
|
<div class="user-detail-name">
|
|
<a href="#">Irwansyah Saputra</a>
|
|
</div>
|
|
<div class="text-job">Mobile Developer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<!-- JS Libraies -->
|
|
|
|
<!-- Page Specific JS File -->
|
|
@endpush
|