HTML practice

PracticeBoard.com is an HTML practice board

Type in some HTML here:

<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<meta name="keywords" content="" ><meta name="description" content="" >
<link href="https://tmpl-resources.auctiva.com/resources/css/layout-general.min.css?v=14" rel="stylesheet" />
<link href="https://tmpl-resources.auctiva.com/resources/css/theme/theme-craftsman-pink.min.css?v=14" rel="stylesheet" />
<link href="" rel="icon" type="image/x-icon" />
<section class="wrapper  has-m-0  sm-m-12">
<section class="wrapper-inner">
<header class="header  has-mb-8  md-mb-12">
<div class="container-lg">
<div class="header-cover"> </div>

<div class="header-bar">
<h1 class="header-title text-center"><span class="header-title-decoration">[TITLE] </span></h1>
</div>
</div>
</header>

<main class="main-content">
<section class="container-lg">
<div class="grid grid-narrow grid-slides p-relative"><input checked="checked" class="grid-slides-input" id="img-0" name="radio-btn" type="radio" />
<div class="grid-col center-block sm-one-half">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_1]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL1_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-0" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE1_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_1]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-1" name="radio-btn" type="radio" />
<div class="grid-col center-block sm-one-half">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_2]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL2_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-1" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE2_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_2]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-2" name="radio-btn" type="radio" />
<div class="grid-col center-block sm-one-third">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_3]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL3_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-2" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE3_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_3]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-3" name="radio-btn" type="radio" />
<div class="grid-col center-block sm-one-third">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_4]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL4_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-3" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE4_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_4]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-4" name="radio-btn" type="radio" />
<div class="grid-col center-block sm-one-third">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_5]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL5_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-4" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE5_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_5]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>

<div class="grid-slides-nav-dots"> </div>
</div>

<p class="text-small text-muted text-center">Click images to enlarge</p>

<div class="card card-bordered has-mb-16 md-mb-20 lg-mb-30">
<div class="card-header" id="section-heading-1">
<h3 class="card-title"><span class="card-title-decoration">Description</span></h3>
</div>

<div class="card-block">[DESCRIPTION]</div>
</div>

<div class="grid grid-narrow grid-slides p-relative">
<div class="grid-row grid-default grid-center p-relative"><input checked="checked" class="grid-slides-input" id="img-5" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_6]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL6_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-5" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE6_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_6]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-6" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_7]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL7_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-6" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE7_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_7]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-7" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_8]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL8_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-7" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE8_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_8]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
</div>

<div class="grid-row grid-default grid-center p-relative"><input class="grid-slides-input" id="img-8" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_9]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL9_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-8" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE9_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_9]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-9" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_10]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL10_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-9" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE10_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_10]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-10" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_11]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL11_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-10" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE11_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_11]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
</div>

<div class="grid-row grid-default grid-center p-relative"><input class="grid-slides-input" id="img-11" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_12]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL12_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-11" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE12_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_12]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-12" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_13]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL13_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-12" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE13_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_13]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-13" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_14]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL14_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-13" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE14_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_14]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
</div>

<div class="grid-row grid-default grid-center p-relative"><input class="grid-slides-input" id="img-14" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_15]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL15_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-14" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE15_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_15]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-15" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_16]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL16_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-15" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE16_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_16]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-16" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_17]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL17_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-16" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE17_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_17]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
</div>

<div class="grid-row grid-default grid-center p-relative"><input class="grid-slides-input" id="img-17" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_18]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL18_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-17" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE18_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_18]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-18" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_19]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL19_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-18" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE19_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_19]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-19" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_20]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL20_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-19" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE20_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_20]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
</div>

<div class="grid-row grid-default grid-center p-relative"><input class="grid-slides-input" id="img-20" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_21]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL21_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-20" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE21_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_21]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-21" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_22]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL22_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-21" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE22_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_22]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
<input class="grid-slides-input" id="img-22" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_23]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL23_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-22" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE23_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_23]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
</div>

<div class="grid-row grid-default grid-center p-relative"><input class="grid-slides-input" id="img-23" name="radio-btn-2" type="radio" />
<div class="grid-col xs-one-third center-block">
<div class="card cpointer has-mb-16 md-mb-20"><img alt="[ALTERNATE_IMAGE_TEXT_24]" class="card-img img-responsive" src="https://img.auctiva.com/template/product-image.png?[IMAGE_SMALL24_URL]" /> </label></div>

<div class="grid-slides-nav"> </div>
</div>
<input class="grid-slides-input" id="lightbox-23" type="checkbox" />
<aside class="lightbox">
<article class="lightbox-content">
<main class="lightbox-main" style="background-image: url([IMAGE_LARGE24_URL]);"><img alt="[ALTERNATE_IMAGE_TEXT_24]" src="https://tmpl-resources.auctiva.com/resources/static/images/spacer.gif" /></main>
</article>
</aside>
</div>

<div class="grid-slides-nav-dots"> </div>
</div>

<div class="card card-bordered has-mb-12 md-mb-16">
<div class="card-header" id="section-heading-2">
<h3 class="card-title"><span class="card-title-decoration">Payment</span></h3>
</div>

<div class="card-block">[PAYMENT]</div>
</div>

<div class="card card-bordered has-mb-12 md-mb-16">
<div class="card-header" id="section-heading-3">
<h3 class="card-title"><span class="card-title-decoration">Shipping</span></h3>
</div>

<div class="card-block">[SHIPPING]</div>
</div>

<div class="card card-bordered has-mb-16">
<div class="card-header" id="section-heading-4">
<h3 class="card-title"><span class="card-title-decoration">Terms of Sale</span></h3>
</div>

<div class="card-block">[TERMS_OF_SALE]</div>
</div>

<div class="card card-bordered has-mb-16">
<div class="card-header" id="section-heading-5">
<h3 class="card-title"><span class="card-title-decoration">About Us</span></h3>
</div>

<div class="card-block">[ABOUT_ME]</div>
</div>

<div class="card card-bordered has-mb-16">
<div class="card-header" id="section-heading-6">
<h3 class="card-title"><span class="card-title-decoration">Contact Us</span></h3>
</div>

<div class="card-block">[CONTACT_US]</div>
</div>
</section>
</main>

<footer class="footer">
<div class="footer-cover"> </div>
</footer>
</section>
</section>

<footer class="footer"> </footer>

(your HTML will appear below!)

Link to your work: https://www.practiceboard.com/77ae3f53

© 1997-2024 practiceboard.com