Blog Posts

Copy
<section class="py-3">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mx-auto">
        <div class="p-3 text-center mb-5">
          <div class="icon icon-shape icon-lg bg-gradient-primary shadow mx-auto">
            <i class="material-icons opacity-10">person</i>
          </div>
          <h2 class="mt-3">Check out what&#39;s new</h2>
          <p>We get insulted by others, lose trust for those others. We get back freezes every winter</p>
        </div>
      </div>
    </div>
    <div class="row mb-5">
      <div class="col-lg-4 col-md-6">
        <div class="card card-background align-items-start h-100">
          <div class="full-background" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/beach.jpg)"></div>
          <div class="card-body text-center z-index-3">
            <p class="text-uppercase font-weight-bold opacity-8 text-xs mt-7">Landscape</p>
            <h4 class="text-white mb-1">Nature&#39;s Light</h4>
            <p class="text-white opacity-8">It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it.</p>
            <button class="btn btn-white btn-sm" type="button" name="button">Read More</button>
          </div>
          <span class="mask bg-gradient-primary border-radius-xl z-index-2 opacity-7"></span>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 d-flex flex-column">
        <div class="card h-100 card-background align-items-start">
          <div class="full-background" style="background-image: url(&#39;https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/indian.jpg&#39;)"></div>
          <div class="card-body z-index-3">
            <i class="material-icons text-white text-3xl">import_contacts</i>
          </div>
          <div class="card-footer pb-3 pt-2 z-index-3">
            <h4 class="text-white mb-1 cursor-pointer">Cultural</h4>
            <p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">257 spots</p>
          </div>
          <span class="mask bg-gradient-dark border-radius-xl z-index-2 opacity-6"></span>
        </div>
        <div class="card h-100 card-background mt-4 align-items-start">
          <div class="full-background" style="background-image: url(&#39;https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/greece.jpg&#39;)"></div>
          <div class="card-body z-index-3">
            <i class="material-icons text-white text-3xl">volunteer_activism</i>
          </div>
          <div class="card-footer pb-3 pt-2 z-index-3">
            <h4 class="text-white mb-1 cursor-pointer">Popularity</h4>
            <p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">363 spots</p>
          </div>
          <span class="mask bg-gradient-dark border-radius-xl z-index-2 opacity-6"></span>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 d-flex flex-column">
        <div class="card card-background align-items-start">
          <div class="full-background" style="background-image: url(&#39;https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/city.jpg&#39;)"></div>
          <div class="card-body z-index-3">
            <i class="material-icons text-white text-3xl">festival</i>
          </div>
          <div class="card-footer pb-3 pt-5 z-index-3">
            <h4 class="text-white mb-1 cursor-pointer">Modern Life</h4>
            <p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">117 spots</p>
          </div>
          <span class="mask bg-gradient-dark border-radius-xl z-index-2 opacity-6"></span>
        </div>
        <div class="card card-background mt-4 align-items-start">
          <div class="full-background" style="background-image: url(&#39;https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/laught.jpg&#39;)"></div>
          <div class="card-body z-index-3">
            <i class="material-icons text-white text-3xl">theater_comedy</i>
          </div>
          <div class="card-footer pb-3 pt-2 z-index-3">
            <h4 class="text-white mb-1 cursor-pointer">Good Vibes</h4>
            <p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">215 spots</p>
          </div>
          <span class="mask bg-gradient-dark border-radius-xl z-index-2 opacity-6"></span>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<!-- START Blogs w/ 3 images & quote & text -->
<section class="py-5">
  <div class="container">
    <div class="row">
        <div class="col-md-6 position-relative">
          <div class="position-relative ms-md-5 me-md-n5">
            <div class="blur-shadow-image">
              <img class="image-left border-radius-lg img-fluid position-relative top-0 end-0 bg-cover" src="https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80" alt="merc">
            </div>
          </div>

          <p class="blockquote border border-primary rounded w-50 p-3 text-sm text-primary float-md-end mt-4 me-md-n2 mx-auto">"Over the span of the satellite record, Arctic sea ice has been declining significantly, while sea ice in the Antarctichas increased very slightly"
              <br>
              <br>
              <small>-NOAA</small>
          </p>
          <!-- Second image on the left side of the article -->
          <div class="position-absolute bottom-0 ms-n2 me-3 start-0 end-2 d-md-block d-none">
            <div class="blur-shadow-image">
              <img class="image-container border-radius-lg img-fluid position-relative bg-cover" src="https://images.unsplash.com/photo-1604399419919-5e7e3ff0db76?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="steer">
            </div>
          </div>

        </div>
        <div class="col-md-5">
            <!-- First image on the right side, above the article -->
            <div class="position-relative ms-n4 mb-5 mt-8 d-md-block d-none">
              <div class="blur-shadow-image">
                <img class="image-right border-radius-lg img-fluid position-relative bg-cover" src="https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="biturbo">
              </div>
            </div>
            <h3 class="mb-4">So what does the new record for the lowest level of winter ice actually mean</h3>
            <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever happens with climate change. Even if the Arctic continues to be one of the fastest-warming regions of the world, it will always be plunged into bitterly cold polar dark every winter. And year-by-year, for all kinds of natural reasons, there’s huge variety of the state of the ice.
            </p>
            <p>
                For a start, it does not automatically follow that a record amount of ice will melt this summer. More important for determining the size of the annual thaw is the state of the weather as the midnight sun approaches and temperatures rise. But over the more than 30 years of satellite records, scientists have observed a clear pattern of decline, decade-by-decade.
            </p>
            <p class="mb-0">The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever happens with climate change. Even if the Arctic continues to be one of the fastest-warming regions of the world, it will always be plunged into bitterly cold polar dark every winter. And year-by-year, for all kinds of natural reasons, there’s huge variety of the state of the ice.
            </p>
        </div>
    </div>
</div>
</section>
<!-- END Blogs w/ 3 images & quote & text -->
Copy
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-lg-6 justify-content-center d-flex flex-column">
            <div class="card border-radius-lg">
              <div class="d-block blur-shadow-image">
                <img src="../../assets/img/examples/blog8.jpg" alt="img-blur-shadow-blog-2" class="img-fluid border-radius-lg">
              </div>
            </div>
          </div>
          <div class="col-lg-6 justify-content-center d-flex flex-column ps-lg-5 pt-lg-0 pt-3">
            <h6 class="category text-info mt-3">Coworking</h6>
            <h3>
              <a href="javascript:;" class="text-dark">Warner Music Group buys concert discovery service Songkick</a>
            </h3>
            <p>
              Warner Music Group announced today it’s acquiring the selected assets of the music platform Songkick, including its app for finding concerts and the company’s trademark. Songkick has been involved in a lawsuit against the major… <a href="javascript:;" class="text-darker icon-move-right text-sm">Read More
                <i class="fas fa-arrow-right text-xs ms-1"></i>
              </a>
            </p>
            <p class="author">
              by <a href="javascript:;" class="ms-1"><span class="font-weight-bold text-info">Sarah Perez</span></a>, 2 days ago
            </p>
          </div>
        </div>
      </div>
      <div class="col-lg-12 mt-5">
        <div class="row flex-row-reverse">
          <div class="col-lg-6 justify-content-center d-flex flex-column">
            <div class="card border-radius-lg">
              <div class="blur-shadow-image">
                <img src="../../assets/img/examples/blog6.jpg" alt="img-blur-shadow-blog-2" class="img-fluid border-radius-lg">
              </div>
            </div>
          </div>
          <div class="col-lg-6 pe-lg-5 justify-content-center d-flex flex-column pt-lg-0 pt-3">
            <h6 class="category text-info mt-3">House</h6>
            <h3>
              <a href="javascript:;" class="text-dark">Warner Music Group buys concert discovery service Songkick</a>
            </h3>
            <p>
              Warner Music Group announced today it’s acquiring the selected assets of the music platform Songkick, including its app for finding concerts and the company’s trademark. Songkick has been involved in a lawsuit against the major… <a href="javascript:;" class="text-darker icon-move-right text-sm">Read More
                <i class="fas fa-arrow-right text-xs ms-1"></i>
              </a>
            </p>
            <p class="author">
              by <a href="javascript:;" class="ms-1"><span class="font-weight-bold text-info">Millie Borough</span></a>, 10 days ago
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<section class="pt-5 pb-0">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6">
        <div class="card">
          <div class="card-header p-0 mx-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/products/product-2-min.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-3">
            <p class="text-dark mb-2 text-sm">Entire Apartment • 3 Guests • 2 Beds</p>
            <a href="javascript:;">
              <h5>
                Lovely and cosy apartment
              </h5>
            </a>
            <p>
              Siri&#39;s latest trick is offering a hands-free TV viewing experience, that will allow consumers to turn on or off their television, change inputs, fast forward.
            </p>
            <button type="button" class="btn btn-outline-primary btn-sm mb-0">From / Night</button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card">
          <div class="card-header p-0 mx-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/products/product-1-min.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-3">
            <p class="text-dark mb-2 text-sm">Private Room • 1 Guests • 1 Sofa</p>
            <a href="javascript:;">
              <h5>
                Single room in the center of the city
              </h5>
            </a>
            <p>
              As Uber works through a huge amount of internal management turmoil, the company is also consolidating more of its international business.
            </p>
            <button type="button" class="btn btn-outline-primary btn-sm mb-0">From / Night</button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card">
          <div class="card-header p-0 mx-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/products/product-3-min.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-3">
            <p class="text-dark mb-2 text-sm">Entire Apartment • 4 Guests • 2 Beds</p>
            <a href="javascript:;">
              <h5>
                Independent house bedroom kitchen
              </h5>
            </a>
            <p>
              Music is something that every person has his or her own specific opinion about. Different people have different taste, and various types of music.
            </p>
            <button type="button" class="btn btn-outline-primary btn-sm mb-0">From / Night</button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card mt-5">
          <div class="card-header p-0 mx-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/products/product-5-min.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-3">
            <p class="text-dark mb-2 text-sm">Entire Apartment • 2 Guests • 1 Bed</p>
            <a href="javascript:;">
              <h5>
                Zen Gateway with pool and garden
              </h5>
            </a>
            <p>
              Fast forward, rewind and more, without having to first invoke a specific skill, or even
              press a button on their remote.
            </p>
            <button type="button" class="btn btn-outline-primary btn-sm mb-0">From / Night</button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card mt-5">
          <div class="card-header p-0 mx-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/products/product-6-min.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-3">
            <p class="text-dark mb-2 text-sm">Entire Flat • 8 Guests • 3 Rooms</p>
            <a href="javascript:;">
              <h5>
                Cheapest hotels for a luxury vacation
              </h5>
            </a>
            <p>
              Today, the company announced it will be combining its rides-on-demand business and UberEATS.
            </p>
            <button type="button" class="btn btn-outline-primary btn-sm mb-0">From / Night</button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card mt-5">
          <div class="card-header p-0 mx-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/products/product-7-min.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-3">
            <p class="text-dark mb-2 text-sm">Entire Apartment • 2 Guests • 1 Bed</p>
            <a href="javascript:;">
              <h5>
                Cozy Double Room Near Station
              </h5>
            </a>
            <p>
              Different people have different taste, and various types of music have many ways of leaving an impact on someone.
            </p>
            <button type="button" class="btn btn-outline-primary btn-sm mb-0">From / Night</button>
          </div>
        </div>
      </div>
      <div class="col-sm-7 ms-auto text-end">
        <ul class="pagination pagination-primary mt-4">
          <li class="page-item ms-auto">
            <a class="page-link" href="javascript:;" aria-label="Previous">
              <span aria-hidden="true"><i class="fa fa-angle-double-left" aria-hidden="true"></i></span>
            </a>
          </li>
          <li class="page-item active">
            <a class="page-link" href="javascript:;">1</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="javascript:;">2</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="javascript:;">3</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="javascript:;">4</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="javascript:;">5</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="javascript:;" aria-label="Next">
              <span aria-hidden="true"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
Copy
<!-- START Blogs w/ 3 rows w/ image on left & title, text, author on end-->
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-10 ms-auto me-auto">
        <div class="card card-plain card-blog mt-5">
          <div class="row">
            <div class="col-md-4">
              <div class="card-image position-relative border-radius-lg">
                <div class="blur-shadow-image">
                  <img class="img border-radius-lg" src="../../assets/img/examples/card-blog3.jpg">
                </div>
              </div>
            </div>
            <div class="col-md-7 my-auto ms-md-3 mt-md-auto mt-4">
              <h3>
                <a href="javascript:;" class="text-dark font-weight-normal">Miami raised $65 million for pet sitting</a>
              </h3>
              <p>
                Finding temporary housing for your dog should be as easy as renting an Airbnb. That’s the idea behind Rover, which raised $65 million to expand its pet sitting and dog-walking businesses.. <a href="javascript:;" class="text-dark"> Read More </a>
              </p>
      				<div class="author">
      				   <img src="../../assets/img/team-1.jpg" alt="..." class="avatar border-radius-lg avatar-sm shadow me-2">
      				   <p class="my-auto">Katie Roof</p>
      				</div>
            </div>
          </div>
        </div>

        <div class="card card-plain card-blog mt-5">
          <div class="row">
            <div class="col-md-4">
              <div class="card-image position-relative border-radius-lg">
                <div class="blur-shadow-image">
                  <img class="img border-radius-lg" src="../../assets/img/examples/card-blog4.jpg">
                </div>
              </div>
            </div>
            <div class="col-md-7 my-auto ms-md-3 mt-md-auto mt-4">
              <h3>
                <a href="javascript:;" class="text-dark font-weight-normal">MateLabs mixes machine learning</a>
              </h3>
              <p>
                If you’ve ever wanted to train a machine learning model and integrate it with IFTTT, a new offering from MateLabs. MateVerse, a platform where novices can spin out machine... <a href="javascript:;" class="text-dark"> Read More </a>
              </p>
              <div class="author">
               <img src="../../assets/img/team-3.jpg" alt="..." class="avatar border-radius-lg avatar-sm shadow me-2">
               <p class="my-auto">John Mannes</p>
              </div>
            </div>
          </div>
        </div>

        <div class="card card-plain card-blog mt-5">
          <div class="row">
            <div class="col-md-4">
              <div class="card-image position-relative border-radius-lg">
                <div class="blur-shadow-image">
                  <img class="img border-radius-lg" src="../../assets/img/examples/blog5.jpg">
                </div>
              </div>
            </div>
            <div class="col-md-7 my-auto ms-md-3 mt-md-auto mt-4">
              <h3>
                  <a href="javascript:;" class="text-dark font-weight-normal">US venture investment ticks up</a>
              </h3>
              <p>
                  Venture investment in U.S. startups rose sequentially in the second quarter of 2017, boosted by large, late-stage financings and a few outsized early-stage rounds in tech and healthcare.. <a href="javascript:;" class="text-dark"> Read More </a>
              </p>
              <div class="author">
                 <img src="../../assets/img/team-4.jpg" alt="..." class="avatar border-radius-lg avatar-sm shadow me-2">
                 <p class="my-auto">Devin Coldewey</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END Blogs w/ 3 rows w/ image on left & title, text, author on end-->
Copy
<section class="py-5 bg-gray-100">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto text-center">
        <div class="card card-blog card-plain">
          <div class="card-header p-0 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/examples/card-blog2.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body px-0 pt-4">
            <p class="text-gradient text-primary text-gradient font-weight-bold text-sm text-uppercase">Enterprise</p>
            <a href="javascript:;">
              <h4>
                Siri brings hands-free TV to more devices
              </h4>
            </a>
            <p>
              Siri&#39;s latest trick is offering a hands-free TV viewing experience, that will allow consumers to turn on or off their television, change inputs, fast forward, rewind and more, without having to first invoke a specific skill, or even
              press a button on their remote.
            </p>
            <button type="button" class="btn bg-gradient-primary mt-3">Read more</button>
          </div>
        </div>
      </div>
      <div class="col-lg-8 mx-auto text-center mt-5">
        <div class="card card-blog card-plain">
          <div class="card-header p-0 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/examples/card-blog3.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body px-0 pt-4">
            <p class="text-gradient text-warning text-gradient font-weight-bold text-sm text-uppercase">Music</p>
            <a href="javascript:;">
              <h4>
                Shark Week: How to Watch It Scientist
              </h4>
            </a>
            <p>
              As Uber works through a huge amount of internal management turmoil, the company is also consolidating and rationalizing more of its international business. Today, the company announced it will be combining its rides-on-demand business
              and UberEATS.
            </p>
            <button type="button" class="btn bg-gradient-warning mt-3">Read more</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<section class="py-6 bg-gray-100">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 mb-lg-0 mb-4">
        <div class="card">
          <div class="card-header p-0 m-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="https://images.unsplash.com/photo-1592489637182-8c172d6d7826?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2300&q=80" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-2">
            <span class="text-gradient text-warning text-uppercase text-xs font-weight-bold my-2">House</span>
            <a href="javascript:;" class="h5 d-block text-dark">
              Shared Coworking
            </a>
            <p class="card-description mb-4">
              Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
            </p>
            <div class="author align-items-center">
              <img src="../../assets/img/team-2.jpg" alt="..." class="avatar shadow border-radius-lg">
              <div class="name ps-3">
                <span>Mathew Glock</span>
                <div class="stats">
                  <small>Posted on 28 February</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mb-lg-0 mb-4">
        <div class="card">
          <div class="card-header p-0 m-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2300&q=80" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-2">
            <span class="text-gradient text-info text-uppercase text-xs font-weight-bold my-2">Office</span>
            <a href="javascript:;" class="text-darker card-title h5 d-block">
              Really Housekeeping
            </a>
            <p class="card-description mb-4">
              Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
            </p>
            <div class="author align-items-center">
              <img src="../../assets/img/ivana-square.jpg" alt="..." class="avatar shadow border-radius-lg">
              <div class="name ps-3">
                <span>Chriss Smahos</span>
                <div class="stats">
                  <small>Posted 2 min ago</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mb-lg-0 mb-4">
        <div class="card">
          <div class="card-header p-0 m-3 mt-n4 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="https://images.unsplash.com/photo-1444877466744-dc2f2af2b931?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2300&q=80" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-2">
            <span class="text-gradient text-warning text-uppercase text-xs font-weight-bold my-2">Hub</span>
            <a href="javascript:;" class="text-darker card-title h5 d-block">
              Coworking Office
            </a>
            <p class="card-description mb-4">
              Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
            </p>
            <div class="author align-items-center">
              <img src="../../assets/img/marie.jpg" alt="..." class="avatar shadow border-radius-lg">
              <div class="name ps-3">
                <span>Elijah Miller</span>
                <div class="stats">
                  <small>Posted now</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<!-- START Blogs w/ 4 cards w/ image & text & link -->
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-sm-6">
        <div class="card card-plain card-blog mt-4">
          <div class="card-header p-0 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/examples/card-blog4.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body px-0">
            <p class="text-uppercase font-weight-bold text-info text-xs">Enterprise</p>
            <h5>
              <a href="javascript:;" class="text-dark font-weight-bold">Autodesk looks to future of 3D with Project Escher</a>
            </h5>
            <p>
              Finding temporary housing for your dog should be as easy as
              renting an Airbnb. That’s the idea behind Rover <a href="javascript:;" class="text-primary icon-move-right"> Read More</a>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6">
        <div class="card card-plain card-blog mt-4">
          <div class="card-header p-0 position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/examples/blog5.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body px-0">
            <p class="text-uppercase font-weight-bold text-success text-xs">Startup</p>
            <h5>
              <a href="javascript:;" class="text-dark font-weight-bold">Lyft launching cross-platform service this week</a>
            </h5>
            <p>
              If you’ve ever wanted to train a machine learning model
              and integrate it with IFTTT, you now can with <a href="javascript:;" class="text-primary icon-move-right">Read More</a>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6">
        <div class="card card-plain card-blog mt-4">
          <div class="card-image border-radius-lg position-relative">
            <a href="javascript:;">
              <div class="blur-shadow-image">
                <img class="img border-radius-lg move-on-hover" src="../../assets/img/examples/blog7.jpg">
              </div>
            </a>
          </div>
          <div class="card-body px-0">
            <p class="text-uppercase font-weight-bold text-danger text-xs">Enterprise</p>
            <h5>
              <a href="javascript:;" class="text-dark font-weight-bold">6 insights into the French Fashion landscape</a>
            </h5>
            <p>
              Venture investment in U.S. startups rose sequentially in
              the second quarter of 2017, boosted by large, ate-stage financings <a href="javascript:;" class="text-primary icon-move-right">Read More</a>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6">
        <div class="card card-plain card-blog mt-4">
          <div class="card-image border-radius-lg position-relative">
            <a href="javascript:;">
              <div class="blur-shadow-image">
                <img class="img border-radius-lg move-on-hover" src="../../assets/img/examples/blog8.jpg">
              </div>
            </a>
          </div>
          <div class="card-body px-0">
            <p class="text-uppercase font-weight-bold text-warning text-xs">Business</p>
            <h5>
              <a href="javascript:;" class="text-dark font-weight-bold"> Startup Insticator raises $5.2M</a>
            </h5>
            <p>
              Insticator is announcing that it has raised $5.2 million in Series A funding.
              The startup allows online publishers <a href="javascript:;" class="text-primary icon-move-right">Read More</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END Blogs w/ 4 cards w/ image & text & link -->
Copy
<section class="py-6 bg-gradient-dark position-relative overflow-hidden">
  <img src="../../assets/img/shapes/pattern-lines.svg" class="position-absolute top-0 d-lg-block d-none opacity-6 w-100" alt="pattern">
  <div class="container">
    <div class="row mb-5">
      <div class="col-lg-8 mx-auto text-center">
        <h3 class="text-white">Latest Blog Posts</h3>
        <p class="lead text-white">The time is now for it to be okay to be great. People in this world should.</p>
      </div>
    </div>
    <div class="row d-flex align-items-center">
      <div class="col-lg-3 col-md-6">
        <div class="card card-blog card-plain">
          <a href="javascript:;">
            <img class="w-100 shadow border-radius-md" src="../../assets/img/examples/blog-9-1.jpg">
          </a>
          <div class="card-body px-0">
            <h5 class="text-white">Siri brings hands-free</h5>
            <p class="text-white opacity-8 text-sm">
              Siri&#39;s latest trick is offering a hands-free TV viewing experience, that will allow consumers
            </p>
            <button type="button" class="btn btn-white btn-sm">Read more</button>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card card-blog card-plain">
          <a href="javascript:;">
            <img class="w-100 shadow border-radius-md" src="../../assets/img/examples/blog-9-2.jpg">
          </a>
          <div class="card-body px-0">
            <h5 class="text-white">Material Design System</h5>
            <p class="text-white opacity-6 text-sm">
              Siri&#39;s latest trick is offering a hands-free TV viewing experience, that will allow consumers
            </p>
            <button type="button" class="btn btn-white btn-sm">Read more</button>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card card-blog card-plain">
          <a href="javascript:;">
            <img class="w-100 shadow border-radius-md" src="../../assets/img/examples/blog-9-3.jpg">
          </a>
          <div class="card-body px-0">
            <h5 class="text-white">Grow Your Business</h5>
            <p class="text-white opacity-6 text-sm">
              Siri&#39;s latest trick is offering a hands-free TV viewing experience, that will allow consumers
            </p>
            <button type="button" class="btn btn-white btn-sm">Read more</button>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card card-blog card-plain">
          <a href="javascript:;">
            <img class="w-100 shadow border-radius-md" src="../../assets/img/examples/blog-9-4.jpg">
          </a>
          <div class="card-body px-0">
            <h5 class="text-white">Train Your Brain</h5>
            <p class="text-white opacity-6 text-sm">
              Siri&#39;s latest trick is offering a hands-free TV viewing experience, that will allow consumers
            </p>
            <button type="button" class="btn btn-white btn-sm">Read more</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h3 class="mt-4">Build something great</h3>
        <p>We&#39;re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment.</p>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col-lg-4 mb-lg-0 mb-4">
        <a href="javascript:;">
          <div class="card card-background">
            <div class="full-background" style="background-image: url(&#39;../../assets/img/examples/blog1.jpg&#39;)"></div>
            <div class="card-body pt-12">
              <h4 class="text-white">Search and Discovery</h4>
              <p class="text-white">Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards we tend to offer.</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col-lg-4 mb-lg-0 mb-4">
        <a href="javascript:;">
          <div class="card card-background">
            <div class="full-background" style="background-image: url(&#39;../../assets/img/examples/blog2.jpg&#39;)"></div>
            <div class="card-body pt-12">
              <h4 class="text-white">Last visits in US</h4>
              <p class="text-white">Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status.</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col-lg-4">
        <a href="javascript:;">
          <div class="card card-background">
            <div class="full-background" style="background-image: url(&#39;../../assets/img/examples/blog3.jpg&#39;)"></div>
            <div class="card-body pt-12">
              <h4 class="text-white">Grow in a beautiful area</h4>
              <p class="text-white">Free people make free choices. Free choices mean you get unequal outcomes. You can have freedom, or you can have equal outcomes. You can&#39;t have both.</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>
Copy
<!-- START Blogs w/ big image on left -->
<section class="py-5">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-5 col-10 d-flex justify-content-center flex-column mx-auto text-lg-start text-center">
        <h2 class="mb-4">Find more great partners</h2>
        <p class="mb-2">It really matters and then like it really doesn&#39;t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn&#39;t matter. </p>
        <ul class="m-lg-2 m-auto">
          <li class="mb-2">People are so scared to lose their hope</li>
          <li class="mb-2">That&#39;s the main thing people </li>
          <li class="mb-2">Thoughts- their perception of themselves!</li>
        </ul>
        <p>It really matters and then like it really doesn&#39;t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn&#39;t matter.</p>
        <h3 class="mt-4">We will be with you forever</h3>
        <p>It really matters and then like it really doesn&#39;t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn&#39;t matter.</p>
        <p class="blockquote my-3 ps-2">
          <span class="text-bold">“And thank you for turning my personal jean jacket into a couture piece.”</span>
          <br>
          <small class="blockquote-footer">
            Kanye West, Producer.
          </small>
        </p>
      </div>
      <div class="col-md-5 col-6 mx-lg-0 mx-auto px-lg-0 px-md-0 my-auto">
        <img class="max-width-400 border-radius-lg shadow-lg" src="../../assets/img/examples/studio-2.jpg">
      </div>
    </div>
  </div>
</section>
<!-- END Blogs w/ big image on left -->