Images and videos are the easy ways to convey your message to users. Web-Boots theme offers simple image, fullwidth image and video background blocks to make your work easy.
Simple Image
<section class="cid-rkNKoE5i77" id="image3-1c">
<figure class="wn-figure container">
<div class="image-block" style="width: 66%;">
<img src="assets/images/background4.jpg" width="1100" alt="Web-Boots">
<figcaption class="wn-figure-caption wn-figure-caption-over">
<div class="container pb-5 wn-white align-center wn-fonts-style display-1">
Simple Image</div>
</figcaption>
</div>
</figure>
</section>
Fullwidth Image
<section class="cid-rkNKpgTQtk" id="image2-1d">
<figure class="wn-figure">
<div class="image-block" style="width: 100%;">
<img src="assets/images/background4.jpg" alt="Web-Boots" title="">
<figcaption class="wn-figure-caption wn-figure-caption-over">
<div class="pb-5 px-3 wn-white align-center wn-fonts-style display-1">
Fullwidth Image</div>
</figcaption>
</div>
</figure>
</section>
Two Column Image
<section class="cid-rkNKqa0EeP" id="image4-1e">
<div class="container images-container">
<div class="media-container-row" style="width: 80%;">
<div class="img-item item1" style="width: 177%;">
<img src="assets/images/background2.jpg">
</div>
<div class="img-item">
<img src="assets/images/background9.jpg">
</div>
</div>
</div>
</section>
Fullwidth Video
<section class="cid-rkNKsD4RKG" id="video2-1f">
<figure class="wn-figure align-center">
<div class="video-block" style="width: 100%;">
<div><iframe class="wn-embedded-video" src="https://www.youtube.com/embed/jnLSYfObARA?rel=0&amp;showinfo=0&autoplay=0&loop=0" width="1280" height="720" frameborder="0" allowfullscreen></iframe></div>
</div>
</figure>
</section>
Simple Video
<section class="cid-rkNKtSLjBr" id="video3-1g">
<figure class="wn-figure align-center container">
<div class="video-block" style="width: 80%;">
<div><iframe class="wn-embedded-video" src="https://www.youtube.com/embed/jnLSYfObARA?rel=0&amp;showinfo=0&autoplay=0&loop=0" width="1280" height="720" frameborder="0" allowfullscreen></iframe></div>
</div>
</figure>
</section>
Images with Text Style
<section class="features13 cid-rkNKyNtJAy" id="features13-1h">
<div class="container">
<h2 class="wn-section-title pb-3 wn-fonts-style align-center display-2">
Images with Text Style</h2>
<div class="media-container-row">
<div class="card col-12 col-md-6 align-center col-lg-4">
<div class="card-wrap">
<div class="card-img">
<img src="assets/images/background1.jpg" alt="Web-Boots" title="">
</div>
<div class="card-box p-5">
<h4 class="card-title py-2 wn-fonts-style align-center wn-white display-5">Amazing Blocks
</h4>
<p class="wn-text wn-fonts-style wn-white display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="card col-12 col-md-6 align-center col-lg-4">
<div class="card-wrap">
<div class="card-img">
<img src="assets/images/background2.jpg" alt="Web-Boots">
</div>
<div class="card-box p-5">
<h4 class="card-title py-2 wn-fonts-style align-center wn-white display-5">
Easy Simple to Use
</h4>
<p class="wn-text wn-fonts-style wn-white display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="card col-12 col-md-6 align-center col-lg-4">
<div class="card-wrap">
<div class="card-img">
<img src="assets/images/background4.jpg" alt="Web-Boots">
</div>
<div class="card-box p-5">
<h4 class="card-title py-2 wn-fonts-style align-center wn-white display-5">
Unlimited Sites
</h4>
<p class="wn-text wn-fonts-style wn-white display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Flip Animation Style
<section class="features15 cid-rkNKBmAjdI" id="features15-1i">
<div class="container">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">
Flip Animation Style</h2>
<h3 class="wn-section-subtitle display-5 align-center wn-fonts-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="media-container-row container pt-5 mt-2">
<div class="col-12 col-md-6 mb-4 col-lg-4">
<div class="card flip-card p-5 align-center">
<div class="card-front card_cont">
<img src="assets/images/background1.jpg" alt="Web-Boots">
</div>
<div class="card_back card_cont">
<h4 class="card-title display-5 py-2 wn-fonts-style">Amazing Blocks
</h4>
<p class="wn-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 col-lg-4">
<div class="card flip-card p-5 align-center">
<div class="card-front card_cont">
<img src="assets/images/background2.jpg" alt="Web-Boots">
</div>
<div class="card_back card_cont">
<h4 class="card-title py-2 wn-fonts-style display-5">
Easy and Simple to Use
</h4>
<p class="wn-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 col-lg-4">
<div class="card flip-card p-5 align-center">
<div class="card-front card_cont">
<img src="assets/images/background3.jpg" alt="Web-Boots">
</div>
<div class="card_back card_cont">
<h4 class="card-title py-2 wn-fonts-style display-5">
Unlimited Sites
</h4>
<p class="wn-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Ensure to replace the text, image and video content in the demo code with your own content.