Jumbotron image

TEXT FILLER 123

Smaller subtext below

CSS


    .jumbotron {
        background-image: url("html-class-jumbo.jpg");
        width: 100%;
        height: 500px;
        color: white;
  
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

HTML


    <section class="jumbotron">
    <div>      
      <h2> TEXT FILLER 123 </h2>
      <h3> Smaller subtext below </h3>
   </div>
    </section>

2-panel (image/text) - 70/30

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

CSS


        .panels-two {
          display: flex;
          justify-content: space-between;
          align-items: center;
          }
          
        .panels-two img {
          flex: 1;
          padding: 0 20px;
          max-width: 400px;
        }
  
        .panels-two div {
          flex: 2;
          padding: 0 20px;
        }

HTML


        <section class="panels-two"> 
          <img src="https://via.placeholder.com/250/" /> 
          <div> 
            <p> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
  
            <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
          </div>
        </section>

2-panel (image/text) - 70/30

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

CSS


        .panels-two {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
          
        .panels-two img {
          flex: 1;
          padding: 0 20px;
          max-width: 400px;
        }
  
        .panels-two div {
          flex: 2;
          padding: 0 20px;
        }

HTML


        <section class="panels-two"> 
          <img src="https://via.placeholder.com/250/" /> 
          <div> 
            <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
            <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
          </div>
        </section>

2-panel even (image, image) 50,50

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

CSS


      .panels-two-even {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }
        
      .panels-two-even div {
        flex: 1;
        padding: 0 20px;
      }

HTML


        <section class="panels-two-even"> 
          <div> 
            <p> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
            <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
          </div>
  
          <div> 
            <p> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
            <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
          </div>
        </section>

3-panel (text plus image below it)

HEADER TEXT

This is sub-text here.

HEADER TEXT

This is sub-text here.

HEADER TEXT

This is sub-text here.

CSS


        .panel-3-image-text {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        column {
          display: flex;
          flex-direction: column; 
          justify-content: center;
          align-items: center;
          flex: 1;
        }

HTML


        <section class="panel-3-image-text">
          <column> 
          <img src="https://via.placeholder.com/100/" /> 
          <h3> HEADER TEXT </h3>
          <p> This is sub-text here. </p>
          </column>
  
          <column> 
          <img src="https://via.placeholder.com/100/" /> 
          <h3> HEADER TEXT </h3>
          <p> This is sub-text here. </p>
          </column>
  
          <column> 
          <img src="https://via.placeholder.com/100/" /> 
          <h3> HEADER TEXT </h3>
          <p> This is sub-text here. </p>
          </column>
        </section>

Minitron (narrow bar)

Get it now!

CSS


      .minitron {
        background-image: url("html-class-jumbo.jpg");
        width: 100%;
        height: 250px;
  
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
      }

HTML


        <div class="minitron"> Get it now! </div>

Call-to-Action

Don't let this opportunity slip by

Buy Now

CSS


    .column-cta {
      display: flex;
      flex-direction: column; 
      justify-content: center;
      align-items: center;
      flex: 1;
    }
  
    .myButton {
      box-shadow: 0px 10px 14px -7px #276873;
      background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
      background-color:#599bb3;
      border-radius:8px;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:20px;
      font-weight:bold;
      padding:13px 32px;
      text-decoration:none;
      text-shadow:0px 1px 0px #3d768a;
    }
    .myButton:hover {
      background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
      background-color:#408c99;
    }
    .myButton:active {
      position:relative;
      top:1px;
    }

HTML


      <section class="column-cta">       
        <h2> Don't let this opportunity slip by </h2> 
        <a href="#" class="myButton">Buy Now</a> 
      </section>

Call out

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.

CSS


    .callout {
      max-width: 600px;
      margin: 25px auto;
      padding: 20px;
      background: yellow; 
      border: 2px dotted white;
      box-shadow: 2px 10px 0 rgba(0,0,0,0.1);
    }

HTML


        <section class="callout"> 
          <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
          <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
        </section>

Header (image left/ links right)

Menu
Team
About
Store
Blog

CSS


        .navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: grey;
          color: white;
        }
  
        .nav-logo {
          float: left;  
        }
  
        .nav-links {
          float: right;
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }
  
        .nav-links li {
          display: block;
          float: left;
          padding-right: 15px;
        width: auto;
        }

HTML


        <div class="navbar">
          <img class="nav-logo" src="https://via.placeholder.com/100/?Text=LOGO HERE">
  
          <ul class="nav-links">
            <li>Menu</li>
            <li>Team</li>
            <li>About</li>
            <li>Store</li>
            <li>Blog</li>
          </ul> 
            
        </div>

Footer

Left content

Social Media Logos

CSS


        .footer {
          background-color: black;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items:flex-end;

          color: white;
          padding: 10px;

        }

        .footer p {
          padding: 20px;
        }

HTML


        <div class="footer"> 
          <p> Left content </p>
          <p> Copyright or something </p>
          <p> Social Media Logos </p>
        </div>

Stock Photos: Pexel, Pixabay
Stock Icons: Flaticon.com, the Noun Project
CSS Buttons Generator: Google it
HTML Editor: Google it