TeXt Theme

Hero

 

Normal

Hero

<div class="hero" style="background-color: #ccc;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

Center

Hero

<div class="hero hero--center" style="background-color: #ccc;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

Dark Theme

Hero

<div class="hero hero--dark" style="background-color: #123;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

Background Image

Hero

<div class="hero hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

Hero

There's a hero, If you look inside your heart,

You don't have to be afraid of what you are.

<div class="hero hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>

Height

Hero

There's a hero, If you look inside your heart,

You don't have to be afraid of what you are.

<div class="hero hero--dark" style='height: 500px; background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>

Background Image + Center

Hero

There's a hero, If you look inside your heart,

You don't have to be afraid of what you are.

<div class="hero hero--center hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>

Hero

There's a hero, If you look inside your heart,

You don't have to be afraid of what you are.

<style>
  .hero-example--linear-gradient {
    background-image: linear-gradient(135deg, rgba(255, 69, 0, .5), rgba(255, 197, 0, .2)), url("path-to-image");
  }
</style>

<div class="hero hero--center hero--dark hero-example--linear-gradient">
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>
Search