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.