---
layout: navbar-v1-full
title: News
---

<div id="news-layout" class="news-header">
  <!--Hero 1-->
  <div
    id="top-1"
    class="news-hero-wrapper has-background-image is-accent fadeIn"
    data-background="https://via.placeholder.com/1600x900"
    data-demo-background="assets/img/demo/news/bg6.jpg"
  >
    <div class="overlay-layer">
      <div class="text-layer">
        <div class="hero-text">
          <span class="tag">Technology</span>
          <h2>Why javascript rules the world?</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laboro
            autem non sine causa; Si longus, levis.
          </p>
          <div class="cta-wrap">
            <a class="button">Read More</a>
            <a class="button">Save</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Hero 2-->
  <div
    id="top-2"
    class="news-hero-wrapper has-background-image is-accent fadeIn is-hidden"
    data-background="https://via.placeholder.com/1600x900"
    data-demo-background="assets/img/demo/news/bg2.jpg"
  >
    <div class="overlay-layer">
      <div class="text-layer">
        <div class="hero-text">
          <span class="tag">Tech</span>
          <span class="tag">Finance</span>
          <h2>Facebook buys WhatsApp for $20B</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laboro
            autem non sine causa; Si longus, levis. Ad eos igitur converte.
          </p>
          <div class="cta-wrap">
            <a class="button">Read More</a>
            <a class="button">Save</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Hero 3-->
  <div
    id="top-3"
    class="news-hero-wrapper has-background-image is-primary fadeIn is-hidden"
    data-background="https://via.placeholder.com/1600x900"
    data-demo-background="assets/img/demo/news/bg3.jpg"
  >
    <div class="overlay-layer">
      <div class="text-layer">
        <div class="hero-text">
          <span class="tag">Blockchain</span>
          <span class="tag">Tech</span>
          <h2>How saturation killed the Market</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laboro
            autem non sine causa; Si longus, levis. Ad eos igitur converte.
          </p>
          <div class="cta-wrap">
            <a class="button">Read More</a>
            <a class="button">Save</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Hero 4-->
  <div
    id="top-4"
    class="news-hero-wrapper has-background-image is-accent fadeIn is-hidden"
    data-background="https://via.placeholder.com/1600x900"
    data-demo-background="assets/img/demo/news/bg4.jpg"
  >
    <div class="overlay-layer">
      <div class="text-layer">
        <div class="hero-text">
          <span class="tag">Health</span>
          <span class="tag">Food</span>
          <h2>5 Steps to Green Heaven</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laboro
            autem non sine causa; Si longus, levis.
          </p>
          <div class="cta-wrap">
            <a class="button">Read More</a>
            <a class="button">Save</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Hero 5-->
  <div
    id="top-5"
    class="news-hero-wrapper has-background-image is-red fadeIn is-hidden"
    data-background="https://via.placeholder.com/1600x900"
    data-demo-background="assets/img/demo/news/bg5.jpg"
  >
    <div class="overlay-layer">
      <div class="text-layer">
        <div class="hero-text">
          <span class="tag">Movies</span>
          <h2>Why are Zombies so popular?</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laboro
            autem non sine causa; Si longus, levis.
          </p>
          <div class="cta-wrap">
            <a class="button">Read More</a>
            <a class="button">Save</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Hero 6-->
  <div
    id="top-6"
    class="news-hero-wrapper has-background-image is-accent fadeIn is-hidden"
    data-background="https://via.placeholder.com/1600x900"
    data-demo-background="assets/img/demo/news/bg1.jpg"
  >
    <div class="overlay-layer">
      <div class="text-layer">
        <div class="hero-text">
          <span class="tag">Politics</span>
          <span class="tag">International</span>
          <h2>Pdt. Obama enters in History</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laboro
            autem non sine causa; Si longus, levis. Ad eos igitur converte te,
            quaeso.
          </p>
          <div class="cta-wrap">
            <a class="button">Read More</a>
            <a class="button">Save</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Menu-->
  <div class="news-hero-menu">
    <div class="stories">
      <a data-story="top-1" class="story is-accent is-active">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/ken.jpg"
            alt=""
            data-user-popover="14"
          />
        </div>
        <div class="meta">
          <span>Technology</span>
          <span>Why Javascript Rules the World</span>
          <span>By Ken Rogers, Apr 19, 2019</span>
        </div>
      </a>
      <a data-story="top-2" class="story is-accent">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/leana.jpg"
            data-user-popover="15"
            alt=""
          />
        </div>
        <div class="meta">
          <span>Tech</span>
          <span>Facebook swallows WhatsApp for $20B</span>
          <span>By Leana Marks, Apr 22, 2019</span>
        </div>
      </a>
      <a data-story="top-3" class="story is-primary">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/aline.jpg"
            data-user-popover="16"
            alt=""
          />
        </div>
        <div class="meta">
          <span>Blockchain</span>
          <span>How saturation killed the Market</span>
          <span>By Aline Cambell, Apr 22, 2019</span>
        </div>
      </a>
      <a data-story="top-4" class="story is-accent">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/michael.jpg"
            data-user-popover="17"
            alt=""
          />
        </div>
        <div class="meta">
          <span>Health</span>
          <span>5 Steps to Green Heaven</span>
          <span>By Mike Donovan, Apr 21, 2019</span>
        </div>
      </a>
      <a data-story="top-5" class="story is-red">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/george.jpg"
            data-user-popover="18"
            alt=""
          />
        </div>
        <div class="meta">
          <span>Movies</span>
          <span>Why are Zombies so popular?</span>
          <span>By George A. Romero, Apr 20, 2019</span>
        </div>
      </a>
      <a data-story="top-6" class="story is-accent">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/ken.jpg"
            alt=""
            data-user-popover="14"
          />
        </div>
        <div class="meta">
          <span>Politics</span>
          <span>Pdt. Obama enters in History</span>
          <span>By Ken Rogers, Apr 23, 2019</span>
        </div>
      </a>
    </div>
  </div>
</div>

<div class="section is-news">
  <div class="news-grid">
    <!--Card-->
    <div class="news-card is-default is-inverted">
      <span class="tag category city"> City Life </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/aline.jpg"
            data-user-popover="16"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p1.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">City finished rebuilding Callahan Street.</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button is-solid grey-button raised">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-wide has-absolute-image">
      <img
        src="https://via.placeholder.com/789x1085"
        data-demo-src="assets/img/demo/news/man-2.png"
        alt=""
      />
      <div class="news-content">
        <span class="tag category management"> Management </span>
        <h3 class="news-title">5 things I learned from corporate management</h3>
        <p>
          Sint ista Graecorum. Duo Reges: constructio interrete. Scisse enim te
          quis coarguere possit?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <p>
          Sint ista Graecorum. Duo Reges: constructio interrete. At certe
          gravius. Scisse enim te quis coarguere possit?
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category movies"> Movies </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/george.jpg"
            data-user-popover="18"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p2.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">
          Are theaters still an option to watch a movie?
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category politics"> Politics </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/ken.jpg"
            data-user-popover="14"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p3.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">Donald Trump signs a new treaty</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category tech"> Tech </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/leana.jpg"
            data-user-popover="15"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p4.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">Google unveils its new engine release</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category tech"> Tech </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/leana.jpg"
            data-user-popover="15"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p5.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">Github is being swallowed by Microsoft</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category travel"> Travel </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/michael.jpg"
            data-user-popover="17"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p6.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">Visiting Morocco: a feast for the senses</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category blockchain"> Blockchain </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/aline.jpg"
            data-user-popover="16"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p7.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">
          Ethereum is collapsing hard on crypto exchange platforms
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default is-inverted">
      <span class="tag category fashion"> Fashion </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/jenna.png"
            data-user-popover="0"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p8.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">Latest news from Paris Fashion Week</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button is-solid grey-button raised">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-wide has-absolute-image">
      <img
        src="https://via.placeholder.com/600x931"
        data-demo-src="assets/img/demo/news/woman-1.png"
        alt=""
      />
      <div class="news-content">
        <span class="tag category health"> Health </span>
        <h3 class="news-title">Lose 10lb while keeping eating what you like</h3>
        <p>
          Sint ista Graecorum. Duo Reges: constructio interrete. Scisse enim te
          quis coarguere possit?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <p>
          Sint ista Graecorum. Duo Reges: constructio interrete. At certe
          gravius. Scisse enim te quis coarguere possit?
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category tech"> Tech </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/leana.jpg"
            data-user-popover="15"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p9.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">
          Uber finally becomes profitable for the company
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category music"> Music </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/jenna.png"
            data-user-popover="0"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p10.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">Lil' Gangsta releases his latest EP</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default">
      <span class="tag category business"> Business </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/ken.jpg"
            data-user-popover="14"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p11.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">
          Amazon invests $3.4 billions in drone shipping
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--Card-->
    <div class="news-card is-default is-inverted">
      <span class="tag category movies"> Movies </span>
      <div class="avatar-wrapper">
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/george.jpg"
            data-user-popover="18"
            alt=""
          />
        </div>
      </div>
      <img
        src="https://via.placeholder.com/1600x900"
        data-demo-src="assets/img/demo/news/p12.jpg"
        alt=""
      />
      <div class="news-content">
        <h3 class="news-title">The Caban (2019): "Completely terrifying!"</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de
          Pythagora? At iam decimum annum in spelunca iacet.
        </p>
        <div class="button-wrap">
          <a class="button is-solid grey-button raised">Read More</a>
          <div class="actions">
            <a class="action">
              <i data-feather="bookmark"></i>
            </a>
            <a class="action is-like">
              <i data-feather="heart"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Load more posts -->
  <div class="load-more-wrap has-text-centered">
    <a href="#" class="load-more-button">Load More</a>
  </div>
</div>