777 lines
38 KiB
HTML
777 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" dir="">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Blog: Metro | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="./favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<link rel="stylesheet" href="./assets/css/vendor.min.css">
|
||
<link rel="stylesheet" href="./assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="./assets/css/theme.min.css?v=1.0">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-dark navbar-fullscreen">
|
||
<nav class="container">
|
||
<!-- Default Logo -->
|
||
<a class="navbar-brand" href="./index.html" aria-label="Front">
|
||
<img class="navbar-brand-logo" src="./assets/svg/logos/logo-white.svg" alt="Logo">
|
||
</a>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Toggler -->
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarFullscreenNav" aria-controls="navbarFullscreenNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</button>
|
||
<!-- End Toggler -->
|
||
|
||
<!-- Collapse -->
|
||
<div class="collapse navbar-collapse" id="navbarFullscreenNav">
|
||
<div class="container">
|
||
<div class="navbar-fullscreen-scroller">
|
||
<div class="row justify-content-md-between align-items-md-center">
|
||
<div class="col-md-6">
|
||
<!-- Collapse -->
|
||
<ul class="navbar-nav" id="navbarNavCollapse">
|
||
<!-- Landings -->
|
||
<li class="nav-item">
|
||
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsCollapse" aria-expanded="false" aria-controls="landingsCollapse">Landings</a>
|
||
|
||
<div id="landingsCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
|
||
<div id="landingsNavCollapse">
|
||
<!-- Classic -->
|
||
<div class="nav-item">
|
||
<a class="dropdown-item collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsClassicCollapse" aria-expanded="false" aria-controls="landingsClassicCollapse">Classic</a>
|
||
|
||
<div id="landingsClassicCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
|
||
<a class="dropdown-item " href="./index.html">Corporate</a>
|
||
<a class="dropdown-item " href="./landing-classic-analytics.html">Analytics <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
|
||
<a class="dropdown-item " href="./landing-classic-studio.html">Studio</a>
|
||
<a class="dropdown-item " href="./landing-classic-marketing.html">Marketing</a>
|
||
<a class="dropdown-item " href="./landing-classic-advertisement.html">Advertisement</a>
|
||
<a class="dropdown-item " href="./landing-classic-consulting.html">Consulting</a>
|
||
<a class="dropdown-item " href="./landing-classic-portfolio.html">Portfolio</a>
|
||
<a class="dropdown-item " href="./landing-classic-software.html">Software</a>
|
||
<a class="dropdown-item " href="./landing-classic-business.html">Business</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Classic -->
|
||
|
||
<!-- App -->
|
||
<div class="nav-item">
|
||
<a class="dropdown-item collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsAppCollapse" aria-expanded="false" aria-controls="landingsAppCollapse">App</a>
|
||
|
||
<div id="landingsAppCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
|
||
<a class="dropdown-item " href="./landing-app-ui-kit.html">UI Kit</a>
|
||
<a class="dropdown-item " href="./landing-app-saas.html">SaaS</a>
|
||
<a class="dropdown-item " href="./landing-app-workflow.html">Workflow</a>
|
||
<a class="dropdown-item " href="./landing-app-payment.html">Payment</a>
|
||
<a class="dropdown-item " href="./landing-app-tool.html">Tool</a>
|
||
</div>
|
||
</div>
|
||
<!-- End App -->
|
||
|
||
<!-- Onepage -->
|
||
<div class="nav-item">
|
||
<a class="dropdown-item collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#landingsOnepageCollapse" aria-expanded="false" aria-controls="landingsOnepageCollapse">Onepage</a>
|
||
|
||
<div id="landingsOnepageCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#landingsNavCollapse">
|
||
<a class="dropdown-item " href="./landing-onepage-corporate.html">Corporate</a>
|
||
<a class="dropdown-item " href="./landing-onepage-saas.html">SaaS <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Onepage -->
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Landings -->
|
||
|
||
<!-- Company -->
|
||
<li class="nav-item">
|
||
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#companyCollapse" aria-expanded="false" aria-controls="companyCollapse">Company</a>
|
||
|
||
<div id="companyCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
|
||
<a class="dropdown-item " href="./page-about.html">About</a>
|
||
<a class="dropdown-item " href="./page-services.html">Services</a>
|
||
<a class="dropdown-item " href="./page-customer-stories.html">Customer Stories</a>
|
||
<a class="dropdown-item " href="./page-customer-story.html">Customer Story</a>
|
||
<a class="dropdown-item " href="./page-careers.html">Careers</a>
|
||
<a class="dropdown-item " href="./page-careers-overview.html">Careers Overview</a>
|
||
<a class="dropdown-item " href="./page-hire-us.html">Hire Us</a>
|
||
<a class="dropdown-item " href="./page-pricing.html">Pricing</a>
|
||
<a class="dropdown-item " href="./page-contacts-agency.html">Contacts: Agency</a>
|
||
<a class="dropdown-item " href="./page-contacts-startup.html">Contacts: Startup</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Company -->
|
||
|
||
<!-- Account -->
|
||
<li class="nav-item">
|
||
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#accountCollapse" aria-expanded="false" aria-controls="accountCollapse">Account</a>
|
||
|
||
<div id="accountCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
|
||
<!-- Authentication -->
|
||
<div class="nav-item">
|
||
<a class="dropdown-item collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#authenticationCollapse" aria-expanded="false" aria-controls="authenticationCollapse">
|
||
Authentication
|
||
</a>
|
||
|
||
<div id="authenticationCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#accountCollapse">
|
||
<a class="dropdown-item " href="./page-login.html">Login</a>
|
||
<a class="dropdown-item " href="./page-signup.html">Signup</a>
|
||
<a class="dropdown-item " href="./page-reset-password.html">Reset Password</a>
|
||
<a class="dropdown-item " href="./page-login-simple.html">Login Simple</a>
|
||
<a class="dropdown-item " href="./page-signup-simple.html">Signup Simple</a>
|
||
<a class="dropdown-item " href="./page-reset-password-simple.html">Reset Password Simple</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Authentication -->
|
||
|
||
<a class="dropdown-item " href="./account-overview.html">Personal info</a>
|
||
<a class="dropdown-item " href="./account-login-and-security.html">Login & Security</a>
|
||
<a class="dropdown-item " href="./account-notifications.html">Notifications</a>
|
||
<a class="dropdown-item " href="./account-preferences.html">Preferences</a>
|
||
<a class="dropdown-item " href="./account-orders.html">Orders</a>
|
||
<a class="dropdown-item " href="./account-wishlist.html">Wishlist</a>
|
||
<a class="dropdown-item " href="./account-billing.html">Plans & Payment</a>
|
||
<a class="dropdown-item " href="./account-address.html">Address</a>
|
||
<a class="dropdown-item " href="./account-teams.html">Teams</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Account -->
|
||
|
||
<!-- Pages -->
|
||
<li class="nav-item">
|
||
<a class="nav-link collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#pagesCollapse" aria-expanded="false" aria-controls="pagesCollapse">
|
||
Pages
|
||
</a>
|
||
|
||
<div id="pagesCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
|
||
<div id="pagesNavCollapse">
|
||
<a class="dropdown-item " href="./page-faq.html">FAQ</a>
|
||
<a class="dropdown-item " href="./page-terms.html">Terms & Conditions</a>
|
||
<a class="dropdown-item " href="./page-privacy.html">Privacy & Policy</a>
|
||
<a class="dropdown-item " href="./page-coming-soon.html">Coming Soon</a>
|
||
<a class="dropdown-item " href="./page-maintenance-mode.html">Maintenance Mode</a>
|
||
<a class="dropdown-item " href="./page-status.html">Status</a>
|
||
<a class="dropdown-item " href="./page-invoice.html">Invoice</a>
|
||
<a class="dropdown-item " href="./page-error-404.html">Error 404</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Pages -->
|
||
|
||
<!-- Blog -->
|
||
<li class="nav-item">
|
||
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#blogCollapse" aria-expanded="false" aria-controls="blogCollapse">Blog</a>
|
||
|
||
<div id="blogCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
|
||
<a class="dropdown-item " href="./blog-journal.html">Journal</a>
|
||
<a class="dropdown-item active" href="./blog-metro.html">Metro</a>
|
||
<a class="dropdown-item " href="./blog-newsroom.html">Newsroom</a>
|
||
<a class="dropdown-item " href="./blog-article.html">Article</a>
|
||
<a class="dropdown-item " href="./blog-author-profile.html">Author Profile</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Blog -->
|
||
|
||
<!-- Portfolio -->
|
||
<li class="nav-item">
|
||
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#portfolioCollapse" aria-expanded="false" aria-controls="portfolioCollapse">Portfolio</a>
|
||
|
||
<div id="portfolioCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
|
||
<a class="dropdown-item " href="./portfolio-grid.html">Grid</a>
|
||
<a class="dropdown-item " href="./portfolio-product-article.html">Product Article</a>
|
||
<a class="dropdown-item " href="./portfolio-case-studies-branding.html">Case Studies: Branding</a>
|
||
<a class="dropdown-item " href="./portfolio-case-studies-product.html">Case Studies: Product</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Portfolio -->
|
||
|
||
<!-- Demos -->
|
||
<li class="nav-item">
|
||
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#demosCollapse" aria-expanded="false" aria-controls="demosCollapse">Demos</a>
|
||
|
||
<div id="demosCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
|
||
<a class="dropdown-item " href="./demo-real-main/index.html">Main</a>
|
||
<a class="dropdown-item " href="./demo-real-estate/index.html">Real Estate</a>
|
||
<a class="dropdown-item " href="./demo-jobs/index.html">Jobs</a>
|
||
<a class="dropdown-item " href="./demo-course/index.html">Course</a>
|
||
<a class="dropdown-item " href="./demo-shop/index.html">E-commerce</a>
|
||
<a class="dropdown-item " href="./demo-app-marketplace/index.html">App Marketplace</a>
|
||
<a class="dropdown-item " href="./demo-help-desk/index.html">Help Desk</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Demos -->
|
||
|
||
<!-- Docs -->
|
||
<li class="nav-item">
|
||
<a class="nav-link collapsed " href="#" role="button" data-bs-toggle="collapse" data-bs-target="#docsCollapse" aria-expanded="false" aria-controls="docsCollapse">Docs</a>
|
||
|
||
<div id="docsCollapse" class="navbar-fullscreen-collapse collapse" data-bs-parent="#navbarNavCollapse">
|
||
<a class="dropdown-item" href="./documentation/index.html">Documentation</a>
|
||
<a class="dropdown-item" href="./snippets/index.html">Snippets</a>
|
||
</div>
|
||
</li>
|
||
<!-- End Docs -->
|
||
</ul>
|
||
<!-- End Collapse -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 d-none d-md-inline-block">
|
||
<!-- Address -->
|
||
<div class="mb-7">
|
||
<span class="text-cap text-white">Address</span>
|
||
|
||
<address class="d-grid gap-1 mb-0">
|
||
<span class="text-white-70">+1 (062) 109-9222</span>
|
||
<span class="text-white-70">hello@example.com</span>
|
||
<span class="text-white-70">153 Williamson Plaza, Maggieberg, MT 09514</span>
|
||
</address>
|
||
</div>
|
||
<!-- End Address -->
|
||
|
||
<!-- Socials -->
|
||
<span class="text-cap text-white">Social</span>
|
||
|
||
<ul class="list-inline mb-0">
|
||
<li class="list-inline-item">
|
||
<a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
|
||
<i class="bi-facebook"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-inline-item">
|
||
<a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
|
||
<i class="bi-google"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-inline-item">
|
||
<a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
|
||
<i class="bi-twitter"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-inline-item">
|
||
<a class="btn btn-soft-light btn-sm btn-icon rounded-circle" href="#">
|
||
<i class="bi-github"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Socials -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Collapse -->
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Hero -->
|
||
<div class="js-swiper-blog-metro-hero swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide d-lg-flex min-vh-lg-100 gradient-x-overlay-lg-dark bg-img-start content-space-5" style="background-image: url(./assets/img/1920x1080/img8.jpg);">
|
||
<!-- Container -->
|
||
<div class="container d-lg-flex align-items-lg-center">
|
||
<div class="w-lg-65 text-center mx-lg-auto">
|
||
<a class="text-cap text-white-70" href="#">Adventure</a>
|
||
<div class="4 mb-md-7">
|
||
<h1 class="text-white">The top 30 self-improvement goals we never get around to achieving</h1>
|
||
</div>
|
||
<a class="btn btn-light btn-transition" href="./blog-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Container -->
|
||
</div>
|
||
|
||
<div class="swiper-slide d-lg-flex min-vh-lg-100 gradient-x-overlay-lg-dark bg-img-start content-space-5" style="background-image: url(./assets/img/1920x1080/img22.jpg);">
|
||
<!-- Container -->
|
||
<div class="container d-lg-flex align-items-lg-center">
|
||
<div class="w-lg-65 text-center mx-lg-auto">
|
||
<a class="text-cap text-white-70" href="#">Science</a>
|
||
<div class="mb-4 mb-md-7">
|
||
<h2 class="h1 text-white">Bonded by science: researchers describe their nerdy proposals</h2>
|
||
</div>
|
||
<a class="btn btn-light btn-transition" href="./blog-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Container -->
|
||
</div>
|
||
|
||
<div class="swiper-slide d-lg-flex min-vh-lg-100 gradient-x-overlay-lg-dark bg-img-start content-space-5" style="background-image: url(./assets/img/1920x1080/img2.jpg);">
|
||
<!-- Container -->
|
||
<div class="container d-lg-flex align-items-lg-center">
|
||
<div class="w-lg-65 text-center mx-lg-auto">
|
||
<a class="text-cap text-white-70" href="#">Environment</a>
|
||
<div class="mb-4 mb-md-7">
|
||
<h2 class="h1 text-white">Tree rings reveal increased fire risk for southwestern US</h2>
|
||
</div>
|
||
<a class="btn btn-light btn-transition" href="./blog-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Container -->
|
||
</div>
|
||
|
||
<div class="swiper-slide d-lg-flex min-vh-lg-100 gradient-x-overlay-lg-dark bg-img-start content-space-5" style="background-image: url(./assets/img/1920x1080/img7.jpg);">
|
||
<!-- Container -->
|
||
<div class="container d-lg-flex align-items-lg-center">
|
||
<div class="w-lg-65 text-center mx-lg-auto">
|
||
<a class="text-cap text-white-70" href="#">Lifestyle</a>
|
||
<div class="mb-4 mb-md-7">
|
||
<h2 class="h1 text-white">2020's Most Relaxing and Affordable Vacations</h2>
|
||
</div>
|
||
<a class="btn btn-light btn-transition" href="./blog-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Container -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Swiper Pagination -->
|
||
<div class="js-swiper-blog-metro-hero-pagination swiper-pagination swiper-pagination-light position-absolute bottom-0 start-0 end-0 mb-5"></div>
|
||
</div>
|
||
<!-- End Hero -->
|
||
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-2 content-space-b-lg-3">
|
||
<!-- Tags -->
|
||
<div class="text-center mb-5 mb-md-9">
|
||
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Business</a>
|
||
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Strategy</a>
|
||
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Health</a>
|
||
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Creative</a>
|
||
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Environment</a>
|
||
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Adventure</a>
|
||
<a class="btn btn-soft-secondary btn-xs rounded-pill m-1" href="javascript:;">Stories</a>
|
||
</div>
|
||
<!-- End Tags -->
|
||
|
||
<div class="row">
|
||
<div class="col-12 mb-3 mb-sm-7">
|
||
<!-- Card -->
|
||
<div class="card card-flush">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-8">
|
||
<img class="card-img rounded-2" src="./assets/img/900x450/img1.jpg" alt="Image Description">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<div class="card-body">
|
||
<span class="card-subtitle">Business</span>
|
||
<h2 class="card-title"><a class="text-dark" href="./blog-article.html">Should Product Owners think like entrepreneurs?</a></h2>
|
||
<p class="card-text">Front is a financial technology company. We build products. We do it fast and we do it well.</p>
|
||
<a class="card-link" href="#">Read more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="order-lg-0 col-sm-6 col-lg-4 mb-3 mb-sm-7">
|
||
<!-- Card -->
|
||
<a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="./blog-article.html" style="background-image: url(./assets/img/400x500/img9.jpg); min-height: 25rem;">
|
||
<div class="card-header">
|
||
<span class="card-subtitle text-white">Creative</span>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<h3 class="card-title text-white">This Watch gym partnerships give you perks for working out</h3>
|
||
<p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="order-lg-1 col-sm-6 col-lg-4 mb-3 mb-sm-7">
|
||
<!-- Card -->
|
||
<a class="card card-stretched-vertical card-transition bg-dark" href="./blog-article.html" style="background-image: url(./assets/svg/components/wave-pattern-light.svg); min-height: 25rem;">
|
||
<div class="card-header">
|
||
<span class="card-subtitle text-white">Stories</span>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<h3 class="card-title text-white">Announcing Front Strategies: Ready-to-use rules</h3>
|
||
<p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="order-lg-2 col-sm-6 col-lg-4 mb-3 mb-sm-7">
|
||
<!-- Card -->
|
||
<a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="./blog-article.html" style="background-image: url(./assets/img/400x500/img2.jpg); min-height: 25rem;">
|
||
<div class="card-header">
|
||
<span class="card-subtitle text-white">Stories</span>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<h3 class="card-title text-white">Drone Company PrecisionHawk Names New CEO</h3>
|
||
<p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="order-lg-4 col-sm-6 col-lg-4 mb-3 mb-sm-7">
|
||
<!-- Card -->
|
||
<a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="./blog-article.html" style="background-image: url(./assets/img/400x500/img1.jpg); min-height: 25rem;">
|
||
<div class="card-header">
|
||
<span class="card-subtitle text-white">Business</span>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<h3 class="card-title text-white">Front Interview with a Lead Designer of the Hubble</h3>
|
||
<p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="order-lg-3 col-12 mb-3 mb-sm-7">
|
||
<!-- Card -->
|
||
<div class="card card-flush">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-8">
|
||
<img class="card-img rounded-2" src="./assets/img/900x450/img2.jpg" alt="Image Description">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<div class="card-body">
|
||
<span class="card-subtitle">Business</span>
|
||
<h2 class="card-title"><a class="text-dark" href="./blog-article.html">How Google Assistant now helps you record stories for kids</a></h2>
|
||
<p class="card-text">Google is constantly updating its consumer AI, Google Assistant, with new features.</p>
|
||
<a class="card-link" href="#">Read more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="order-lg-5 col-sm-6 col-lg-4 mb-3 mb-sm-7">
|
||
<!-- Card -->
|
||
<a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="./blog-article.html" style="background-image: url(./assets/img/400x500/img4.jpg); min-height: 25rem;">
|
||
<div class="card-header">
|
||
<span class="card-subtitle text-white">Health</span>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<h3 class="card-title text-white">Better is when everything works together</h3>
|
||
<p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="order-lg-last col-sm-6 col-lg-4 mb-3 mb-sm-7">
|
||
<!-- Card -->
|
||
<a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="./blog-article.html" style="background-image: url(./assets/img/400x500/img5.jpg); min-height: 25rem;">
|
||
<div class="card-header">
|
||
<span class="card-subtitle text-white">Stories</span>
|
||
</div>
|
||
|
||
<div class="card-footer">
|
||
<h3 class="card-title text-white">Should You Buy An Apple Pencil?</h3>
|
||
<p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Card Info -->
|
||
<div class="text-center">
|
||
<div class="card card-info-link card-sm">
|
||
<div class="card-body">
|
||
Want to read more? <a class="card-link ms-2" href="#">Go here <span class="bi-chevron-right small ms-1"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Info -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== FOOTER ========== -->
|
||
<footer class="bg-dark">
|
||
<div class="container pb-1 pb-lg-5">
|
||
<div class="row content-space-t-2">
|
||
<div class="col-lg-3 mb-7 mb-lg-0">
|
||
<!-- Logo -->
|
||
<div class="mb-5">
|
||
<a class="navbar-brand" href="./index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="./assets/svg/logos/logo-white.svg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
<!-- End Logo -->
|
||
|
||
<!-- List -->
|
||
<ul class="list-unstyled list-py-1">
|
||
<li><a class="link-sm link-light" href="#"><i class="bi-geo-alt-fill me-1"></i> 153 Williamson Plaza, Maggieberg</a></li>
|
||
<li><a class="link-sm link-light" href="tel:1-062-109-9222"><i class="bi-telephone-inbound-fill me-1"></i> +1 (062) 109-9222</a></li>
|
||
</ul>
|
||
<!-- End List -->
|
||
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm mb-7 mb-sm-0">
|
||
<h5 class="text-white mb-3">Company</h5>
|
||
|
||
<!-- List -->
|
||
<ul class="list-unstyled list-py-1 mb-0">
|
||
<li><a class="link-sm link-light" href="#">About</a></li>
|
||
<li><a class="link-sm link-light" href="#">Careers <span class="badge bg-warning text-dark rounded-pill ms-1">We're hiring</span></a></li>
|
||
<li><a class="link-sm link-light" href="#">Blog</a></li>
|
||
<li><a class="link-sm link-light" href="#">Customers <i class="bi-box-arrow-up-right small ms-1"></i></a></li>
|
||
<li><a class="link-sm link-light" href="#">Hire us</a></li>
|
||
</ul>
|
||
<!-- End List -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm mb-7 mb-sm-0">
|
||
<h5 class="text-white mb-3">Features</h5>
|
||
|
||
<!-- List -->
|
||
<ul class="list-unstyled list-py-1 mb-0">
|
||
<li><a class="link-sm link-light" href="#">Press <i class="bi-box-arrow-up-right small ms-1"></i></a></li>
|
||
<li><a class="link-sm link-light" href="#">Release Notes</a></li>
|
||
<li><a class="link-sm link-light" href="#">Integrations</a></li>
|
||
<li><a class="link-sm link-light" href="#">Pricing</a></li>
|
||
</ul>
|
||
<!-- End List -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm">
|
||
<h5 class="text-white mb-3">Documentation</h5>
|
||
|
||
<!-- List -->
|
||
<ul class="list-unstyled list-py-1 mb-0">
|
||
<li><a class="link-sm link-light" href="#">Support</a></li>
|
||
<li><a class="link-sm link-light" href="#">Docs</a></li>
|
||
<li><a class="link-sm link-light" href="#">Status</a></li>
|
||
<li><a class="link-sm link-light" href="#">API Reference</a></li>
|
||
<li><a class="link-sm link-light" href="#">Tech Requirements</a></li>
|
||
</ul>
|
||
<!-- End List -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm">
|
||
<h5 class="text-white mb-3">Resources</h5>
|
||
|
||
<!-- List -->
|
||
<ul class="list-unstyled list-py-1 mb-5">
|
||
<li><a class="link-sm link-light" href="#"><i class="bi-question-circle-fill me-1"></i> Help</a></li>
|
||
<li><a class="link-sm link-light" href="#"><i class="bi-person-circle me-1"></i> Your Account</a></li>
|
||
</ul>
|
||
<!-- End List -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="border-top border-white-10 my-7"></div>
|
||
|
||
<div class="row mb-7">
|
||
<div class="col-sm mb-3 mb-sm-0">
|
||
<!-- Socials -->
|
||
<ul class="list-inline list-separator list-separator-light mb-0">
|
||
<li class="list-inline-item">
|
||
<a class="link-sm link-light" href="#">Privacy & Policy</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a class="link-sm link-light" href="#">Terms</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a class="link-sm link-light" href="#">Site Map</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Socials -->
|
||
</div>
|
||
|
||
<div class="col-sm-auto">
|
||
<!-- Socials -->
|
||
<ul class="list-inline mb-0">
|
||
<li class="list-inline-item">
|
||
<a class="btn btn-soft-light btn-xs btn-icon" href="#">
|
||
<i class="bi-facebook"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-inline-item">
|
||
<a class="btn btn-soft-light btn-xs btn-icon" href="#">
|
||
<i class="bi-google"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-inline-item">
|
||
<a class="btn btn-soft-light btn-xs btn-icon" href="#">
|
||
<i class="bi-twitter"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-inline-item">
|
||
<a class="btn btn-soft-light btn-xs btn-icon" href="#">
|
||
<i class="bi-github"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="list-inline-item">
|
||
<!-- Button Group -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-soft-light btn-xs dropdown-toggle" id="footerSelectLanguage" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
|
||
<span class="d-flex align-items-center">
|
||
<img class="avatar avatar-xss avatar-circle me-2" src="./assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/>
|
||
<span>English (US)</span>
|
||
</span>
|
||
</button>
|
||
|
||
<div class="dropdown-menu" aria-labelledby="footerSelectLanguage">
|
||
<a class="dropdown-item d-flex align-items-center active" href="#">
|
||
<img class="avatar avatar-xss avatar-circle me-2" src="./assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/>
|
||
<span>English (US)</span>
|
||
</a>
|
||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||
<img class="avatar avatar-xss avatar-circle me-2" src="./assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/>
|
||
<span>Deutsch</span>
|
||
</a>
|
||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||
<img class="avatar avatar-xss avatar-circle me-2" src="./assets/vendor/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/>
|
||
<span>Español</span>
|
||
</a>
|
||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||
<img class="avatar avatar-xss avatar-circle me-2" src="./assets/vendor/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/>
|
||
<span>中文 (繁體)</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Button Group -->
|
||
</li>
|
||
</ul>
|
||
<!-- End Socials -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Copyright -->
|
||
<div class="w-md-85 text-lg-center mx-lg-auto">
|
||
<p class="text-white-50 small">© Front. 2021 Htmlstream. All rights reserved.</p>
|
||
<p class="text-white-50 small">When you visit or interact with our sites, services or tools, we or our authorised service providers may use cookies for storing information to help provide you with a better, faster and safer experience and for marketing purposes.</p>
|
||
</div>
|
||
<!-- End Copyright -->
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ========== END FOOTER ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="./assets/js/vendor.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="./assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
document.addEventListener('keydown', e => {
|
||
if (e.keyCode && e.keyCode === 27) {
|
||
const $header = document.querySelector('#navbarFullscreenNav')
|
||
if (!$header.classList.contains('show')) return
|
||
new bootstrap.Collapse($header).hide()
|
||
}
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
|
||
|
||
// INITIALIZATION OF SWIPER
|
||
// =======================================================
|
||
var swiper = new Swiper('.js-swiper-blog-metro-hero',{
|
||
effect: 'fade',
|
||
autoplay: true,
|
||
loop: true,
|
||
pagination: {
|
||
el: '.js-swiper-blog-metro-hero-pagination',
|
||
clickable: true,
|
||
}
|
||
});
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|