Edit fiddle - JSFiddle - Code Playground

HTML

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Bilal el Badaoui">
  <meta name="description" content="The best clothes for the best price">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
​
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>S&amp;B Clothes</title>
    <link rel="icon" type="image/x-icon" href="logo/icon.png">
  </head>
​
  <body id="body">
​
    >
    <!--faq and language-->
    
     <!-- Adjustment -->
    <div id="reference-line">Reference Line</div>
​
    <div class="topnav">
      <button class="faq_items">About</button>
      <button class="faq_items">Contact</button>
      <button class="faq_items">F.A.Qs</button>
      <button class="faq_items">Help</button>
      <div class="topnav-right">
        <button type="button" class="btn dropdown-toggle" id="lang" data-bs-toggle="dropdown">
          eng
        </button>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="index.html">English</a>
          </li>
          <li>
            <a class="dropdown-item" href="index_frc.html">French</a>
          </li>
          <li>
            <a class="dropdown-item" href="index_arb.html">Arabic</a>
          </li>
        </ul>
      </div>
    </div>
​
    <!--Navbar-->
​
    <nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
          <img src="logo/logo_img.png" class="rounded" id="navbar_logo">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#men_women">
          <div class="container_menu" onclick="menu(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
          </div>
        </button>
        <div class="collapse navbar-collapse" id="men_women">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <button type="button" class="btn" onclick="women_index_fn()" id="navbar_men">Women</button>
            </li>
            <li class="nav-item">
              <button type="button" class="btn" onclick="children_index_fn()" id="navbar_women">Children</button>
            </li>
            <li class="nav-item">
              <button type="button" class="btn" onclick="men_index_fn()" id="navbar_children">Men</button>
            </li>
          </ul>
        </div>
        <div class="input-group rounded">
          <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
          <button type="button" class="btn rounded" id="src_btn">Search</button>
        </div>
        <div>
          <button class="btn" id="user_btn" onmouseover="change_img_user()" onmouseout="change_img_user_2()">
            <img src="Icons/user-white.png" id="user_btn_ico" />
          </button>
        </div>
        <div>
          <button class="btn" id="favorite_btn" onmouseover="change_img_fav()" onmouseout="change_img_fav_2()">
            <img src="Icons/favorite-white.png" id="favorite_btn_ico" />
          </button>
        </div>
        <div>
          <button class="btn" id="shop_cart_btn" onmouseover="change_img_cart()" onmouseout="change_img_cart_2()">
            <img src="Icons/shopping-cart-white.png" id="shop_cart_ico" />
          </button>
        </div>
      </div>
    </nav>
​
    Caroussel
​
    <div class="container">
      <div class="row">
        <div id="car1" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#car1" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="3"></button>
          </div>
          <div class="carousel-caption">
            <hgroup>
              <h1 id="car_text">This is S&amp;B</h1>
              <h3 id="car_text">From our large varieties of fashion clothing</h3>
              <h4 id="car_text">Shop for</h4>
              <button type="button" class="btn rounded" onclick="men_index_fn()" id="car_men_btn">Men</button>
              <button type="button" class="btn rounded" onclick="women_index_fn()" id="car_women_btn">Women</button>
            </hgroup>
            <div>
              <button type="button" class="btn rounded" onclick="children_index_fn()" id="car_child_btn">Children</button>
            </div>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="caroussel_img/car_tmp_pic1.jpg" alt="Clothing 1" class="d-block" id="car_pic1">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic2.jpg" alt="Clothing 2" class="d-block" id="car_pic2">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic3.jpg" alt="clothing 3" class="d-block" id="car_pic3">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic4.jpg" alt="clothing 4" class="d-block" id="car_pic4">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#car1" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#car1" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>
​
    Services
​
    <div class="container">
      <div class="row">
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/women.jpg" alt="Women clothing" id="srv_women">
          <button class="btn-srv" onclick="women_index_fn()">Shop for women</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For women</h2>
        </div>
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/children.jpg" alt="Children clothing" id="srv_child">
          <button class="btn-srv" onclick="children_index_fn()">Shop for children</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For children</h2>
        </div>
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/men.jpg" alt="Men clothing" id="srv_men">
          <button class="btn-srv" onclick="men_index_fn()">Shop for men</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For men</h2>
        </div>
      </div>
    </div>
​
    Back to top
    
    <!-- Adjustment: Change top_btn id to class as 
    ids have higher precedence over classes
    and show-button class won't work-->
    <button onclick="to_top()" class="top_btn">
      <img src="Icons/uparrow.png" id="top_ico">
    </button>
​
    <!-- Services -->
​
    <div>
      <h1 id="brand_title"><b>TRENDING BRANDS</b></h1>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm" id="adidas_div">
          <a href="adidas.html">
            <img src="brands/Adidas-Logo.png" alt="Adidas" id="brand_img_adidas">
          </a>
        </div>
        <div class="col-sm" id="nike_div">
          <a href="nike.html">
            <img src="brands/Nike_logo.png" alt="Nike" id="brand_img_nike">
          </a>
        </div>
        <div class="col-sm" id="northface_div">
          <a href="northface.html">
            <img src="brands/The-North-Face-color.png" alt="North Face" id="brand_img_north">
          </a>
        </div>
        <div class="col-sm" id="tommy_div">
          <a href="tommy.html">
            <img src="brands/Tommy-Hilfiger-Emblem.png" alt="Tommy Hilfiger" id="brand_img_tommy">
          </a>
        </div>
        <div class="col-sm" id="zara_div">
          <a href="zara.html">
            <img src="brands/zara-logo-0.png" alt="Zara" id="brand_img_zara">
          </a>
        </div>
      </div>
    </div>
​
    <!--Footer-->
​
    <footer class="nb-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="about">
              <img src="images/logo.png" class="img-responsive center-block" alt="">
              <p>Follow us on our social media accounts</p>
              <div class="social-media">
                <a href="#" class="fa fa-facebook" id="social"></a>
                <a href="#" class="fa fa-google" id="social"></a>
                <a href="#" class="fa fa-instagram" id="social"></a>
                <a href="#" class="fa fa-whatsapp" id="social"></a>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Help Center</h2>
              <ul class="list-unstyled">
                <li><a href="help.html"><i class="fa fa-angle-double-right"></i>Help</a></li>
                <li><a href="faq.html"><i class="fa fa-angle-double-right"></i>FAQs</a></li>
                <li><a href="about.html"><i class="fa fa-angle-double-right"></i>About</a></li>
                <li><a href="contact.html"><i class="fa fa-angle-double-right"></i>Contact</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Products for</h2>
              <ul class="list-unstyled">
                <li><a href="index_women.html"><i class="fa fa-angle-double-right"></i>Women</a></li>
                <li><a href="index_men.html"><i class="fa fa-angle-double-right"></i>Men</a></li>
                <li><a href="index_children.html"><i class="fa fa-angle-double-right"></i>Children</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Contact</h2>
              <ul class="list-unstyled">
                <li>
                  <a href="https://www.google.com/maps/place/Salé/">
                    <i class="fa fa-angle-double-right"></i>
                    Morocco, Salé,
                  </a>
                </li>
                <li>
                  <a href="mailto:hbhbhbhbhbhh@gmail.com">
                    <i class="fa fa-angle-double-right"></i>
                    hhbhbhbbh@gmail.com
                  </a>
                </li>
                <li>
                  <a href="tel:+212772327441" title="">
                    <i class="fa fa-angle-double-right"></i>
                    +21234343434343
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">S&amp;B</h2>
              <p>S&amp;B offers you the best clothes for the best prices, your style your choice.</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>
​
</html>
​

JavaScript

Module

xxxxxxxxxx
 
/* Send to index*/
​
function men_index_fn() 
{
    location.href='index_men.html';
}
​
function women_index_fn() 
{
    location.href='index_women.html';
}
​
function children_index_fn() 
{
    location.href='index_children.html';
}
​
/* Change navbar icon */
​
function change_img_cart()
{
    document.getElementById("shop_cart_ico").src = "Icons/shopping-cart.png";
}
​
function change_img_cart_2()
{
    document.getElementById("shop_cart_ico").src = "Icons/shopping-cart-white.png";
}
​
function change_img_fav()
{
    document.getElementById("favorite_btn_ico").src = "Icons/favorite-black.png";
}
​
function change_img_fav_2()
{
    document.getElementById("favorite_btn_ico").src = "Icons/favorite-white.png";
}
​
function change_img_user()
{
    document.getElementById("user_btn_ico").src = "Icons/user-black.png";
}
​
function change_img_user_2()
{
    document.getElementById("user_btn_ico").src = "Icons/user-white.png";
}
​
/* Back to top button */
​
/* Adjustment */
​
 if (
  "IntersectionObserver" in window &&
  "IntersectionObserverEntry" in window &&
  "intersectionRatio" in window.IntersectionObserverEntry.prototype
) {
​
let observer = new IntersectionObserver(entries => {
​
  if (entries[0].boundingClientRect.y < 0) {
    document.querySelector('.top_btn').className="top_btn show-button";
  } else {
    document.querySelector('.top_btn').className="top_btn";
  }
});
observer.observe(document.querySelector("#reference-line"));
}
​
function to_top() 
{
    document.documentElement.scrollTop = 0; 
    document.body.scrollTop = 0;
}
​
/* Navbar X menu */
​
function menu(x) 
{
    x.classList.toggle("change");
}

CSS

xxxxxxxxxx
 
#body
{
    background-color: #e3dcd2;
    scroll-behavior: smooth;
    
    /* Adjustment */
    /* Set Body Position to relative in order for
    absolute positioned reference line
    to work over the body */
    
    position: relative; 
}
​
​
/* Navbar */
​
#navbar1
{
    background-color: #013328;
    z-index: 3;
}
​
#navbar_logo
{
    height: 60px;
    width: 60px;
    border: 20;
}
​
#src_btn
{
    border-color: #e3dcd2;
    color: #e3dcd2;
}
​
#src_btn:hover
{
    background-color: #e3dcd2;
    color: #013328;
}
​
#navbar_men, #navbar_women, #navbar_children
{
    color: #e3dcd2;
    width: 90px;
}
​
#navbar_men:hover, #navbar_women:hover, #navbar_children:hover
{
    background-color: #e3dcd2;
    color: #013328;
}
​
#favorite_btn:hover, #user_btn:hover, #shop_cart_btn:hover
{
    background-color: #e3dcd2;
}
​
.container_menu 
{
    display: inline-block;
    cursor: pointer;
}
  
.bar1, .bar2, .bar3 
{
    width: 35px;
    height: 5px;
    background-color: #e3dcd2;
    margin: 6px 0;
    transition: 0.4s;
}
  
.change .bar1 
{
    transform: translate(0, 11px) rotate(-45deg);
}
  
.change .bar2 
{
    opacity: 0;
}
  
.change .bar3 
{
    transform: translate(0, -11px) rotate(45deg);
}
​
/* Caroussel */
​
#car_text
{
    background-color: #e3dcd2;
    color: #013328;
}
​
#car_men_btn, #car_women_btn, #car_child_btn
{
    background-color: #013328;
    color: #e3dcd2;
    width: 100px;
}
​
#car_child_btn
{
    margin-top: 5px;
}
​
#car_men_btn:hover, #car_women_btn:hover, #car_child_btn:hover
{
    background-color: #cc8b65;
    color: #e3dcd2;
    width: 100px;
}
​
#car_pic1, #car_pic2, #car_pic3, #car_pic4
{
    border-radius: 5px;
    width: 100%;
}
​
.carousel-caption
{
    position: sticky;
    bottom: 10%;
    left: 5%;
    z-index: 2;
}
​
/* Back to top button */
​
/* Adjustment */
​
​
#reference-line {
  position: absolute;
  width: 100%;
  top: 20%;  /* Adjust This to your desired value */
  left: 0;
  
  /* To Remove */
  z-index: 9999;
  background: red;
  color: white;
}
​
​
.top_btn 
{
  
  position: fixed;
  top: 100%;
  z-index: 9999;
  right: 5%;
  transition:  transform .5s ease, top .5s ease-out; 
  padding: 10px;
  background: #013328;
  color: #e3dcd2;
  border: none;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  outline: none;
  /* box-shadow: 0 9px #666; */
}
​
.show-button{
  top: 95%;
  transform: translateY(-100%);
}
​
​
#top_ico
{
    height: 40px;
    width: 40px;
}
​
  
#top_btn:hover 
{
    background-color: #013328;
}
  
#top_btn:active 
{
    background-color: #013328;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}
​
/* Services */
​
#srv_men, #srv_women, #srv_child
{
    height: 100%;
    width: 100%;
    border-radius: 5px;
}
​
.container-srv 
{
    position: relative;
    width: 50%;
}
  
.container-srv img 
{
    width: 100%;
    height: auto;
}
  
.container-srv .btn-srv 
{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #e3dcd2;
    color: #013328;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: all ease 1s;
}
  
.container-srv:hover .btn-srv 
{
    background-color: #013328;
    color: #e3dcd2;
    opacity: 1;
}
​
.figure
{
    position: relative;
    display: inline-block;
}
​
#srv_txt
{
    position: absolute;
    left: 0;
    right: 0;
    top: 65%;
    color: #e3dcd2;
    text-align: center;
    opacity: 1;
    transition: all ease 1s;
}
​
.figure:hover #srv_txt
{
    opacity: 0;
}
​
.figure .span1:before
{
    content: '';
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    width: 90%;
    height: 1px;
    background-color: transparent;
    margin: 0 auto;
}
​
.figure .span1:after
{
    content: '';
    position: absolute;
    top: 5%;
    right: 5%;
    width: 1px;
    height: 90%;
    background-color: transparent;
    margin: 0 auto;
}
​
.figure .span2:before
{
    content: '';
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    width: 90%;
    height: 1px;
    background-color: transparent;
    margin: 0 auto;
}
​
.figure .span2:after
{
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 1px;
    height: 90%;
    background-color: transparent;
    margin: 0 auto;
}
​
.figure:hover .span1:before
{
    animation: border-top 0.3s linear;
    transform-origin: left;
    background-color: #e3dcd2;
}
​
@keyframes border-top
{
    0%
    {
        transform: scaleX(0);
    }
}
​
.figure:hover .span1:after
{
    animation: border-right 0.6s linear;
    transform-origin: top;
    background-color: #e3dcd2;
}
​
@keyframes border-right
{
    0%, 50%
    {
        transform: scaleX(0);
    }
}
​
.figure:hover .span2:before
{
    animation: border-bottom 0.9s linear;
    transform-origin: right;
    background-color: #e3dcd2;
}
​
@keyframes border-bottom
{
    0%, 75%
    {
        transform: scaleX(0);
    }
}
​
.figure:hover .span2:after
{
    animation: border-left 1.2s linear;
    transform-origin: bottom;
    background-color: #e3dcd2;
}
​
@keyframes border-left
{
    0%, 80%
    {
        transform: scaleX(0);
    }
}
/* FAQ navbar */
​
#faq_nav
{
    height: 35px;
    padding-top: 0;
}
​
.faq_items
{
    font-size: x-small;
    margin-top: 0;
    margin-right: 5px;
    margin-left: 5px;
    padding-right: 5px;
    padding-left: 5px;
}
​
#lang
{
    align-items: flex-end;
    font-size: xx-small;
    float: right;
    width: 50px;
    height: fit-content;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}
​
.topnav 
{
    background-color: #cc8b65;
    overflow: hidden;
}
​
.topnav button 
{
  float: left;
  background-color: #cc8b65;
  color: #e3dcd2;
  width: 50px;
  height: fit-content;
  margin-top: 7px;
  margin-bottom: 5px;
  border-style: none;
  border-radius: 5px;
}
​
.topnav button:hover 
{
  color: #100c0d;
  background-color: #e3dcd2;
}
​
.topnav-right 
{
  float: right;
}
​
#eng
{
    width: 30px;
    height: 30px;
}
​
#frc, #arb
{
    width: 30px;
    height: 22px;
}
​
/* Brands */
​
#brand_title
{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}
​
#brand_img_adidas
{
    width: 150px;
    height: 100px;
    max-width: 100%;
    margin-left: 10px;
    transition: 0.5s;
    filter: grayscale(100%);
}
​
#brand_img_nike
{
    width: 200px;
    height: 100px;
    margin-left: 20px;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}
​
#brand_img_north
{
    width: 150px;
    height: 100px;
    margin-left: 20px;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}
​
#brand_img_tommy
{
    width: 150px;
    height: 120px;
    margin-left: 20px;
    max-width: 100%;
    margin-right: 0;
    transition: 0.5s;
    filter: grayscale(100%);
}
​
#brand_img_zara
{
    width: 150px;
    height: 150px;
    margin-left: 10px;
    margin-right: 0;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}
​
#zara_div :hover ,#adidas_div :hover, #nike_div :hover, #northface_div :hover, #tommy_div :hover
{
    transform: scale(1.5);
    filter: grayscale(0%);
}
​
@media screen and (max-width: 320px) 
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 60px;
        margin-bottom: 30px;
    }
}
​
@media screen and (max-width: 376px) and (min-width: 321px)
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 90px;
        margin-bottom: 30px;
    }
}
​
@media screen and (max-width: 576px) and (min-width: 376px)
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 120px;
        margin-bottom: 30px;
    }
}
​
/* Footer */
​
footer.nb-footer 
{
background: #100c0d;
border-top: 4px solid #cc8b65; 
}
​
footer.nb-footer .about 
{
margin: 0 auto;
margin-top: 40px;
max-width: 1170px;
text-align: center; 
}
​
footer.nb-footer .about p 
{
font-size: 13px;
color: #999;
margin-top: 30px; 
}
​
footer.nb-footer .footer-info-single 
{
margin-top: 30px; 
}
​
footer.nb-footer .footer-info-single .title 
{
color: #e3dcd2;
text-transform: uppercase;
font-size: 16px;
border-left: 4px solid #cc8b65;
padding-left: 5px; 
}
​
footer.nb-footer .footer-info-single ul li a 
{
display: block;
color: #e3dcd2;
padding: 2px 0; 
}
​
footer.nb-footer .footer-info-single ul li a:hover 
{
color: #cc8b65; 
}
​
footer.nb-footer .footer-info-single p 
{
font-size: 13px;
line-height: 20px;
color: #e3dcd2; 
}
​
footer.nb-footer .about .social-media 
{
margin-top: 15px; 
}
​
#social 
{
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
font-size: 16px;
color: #cc8b65;
border: 1px solid rgba(255, 255, 255, 0.3);
text-decoration: none; 
}
​
#social:hover 
{
background: #cc8b65;
color: #fff;
border-color: #cc8b65; 
}
​
​
img{
  alt: "image"
}

JSFiddle Console. Turn on/off in Editor settings.
☁️ "Running fiddle"

Console

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console

Console

Language

Doctype

Language

Extensions

script attribute

Language

Reset CSS

Keep JSFiddle running.Whitelist us in your content blocker.

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console

Tabs:

Visual:

Embed snippet Prefer iframe?:

Behavior

General

Console

New Automatically expiring fiddles

Ability to download a fiddle

Your recent fiddles when logged out

Tailwind CSS

Code linting and formatting

JSFiddle 3.0

Import fiddles as modules

Fiddle listing shows latest version

Evaluate code into the console

`script` attribute

Keep JSFiddle running.
Whitelist us in your content blocker.