Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
​
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WTS SHOP</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
​
<body>
​
<section id="home">
  <span class="header2 etpadding">Welcome To</span><br>
  <br><span class="header1 tpadding">WTS<br>SHOP</span><br>
  <span class="header2 mtpadding">This is a test for checking background blur</span><br>
  <a href="#product" class="button" data-scroll>Check out our Product catalogue</a><br>
</section>
​
<section id="product">
  <span class="header3">This is a test</span><br>
​
<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Modal Button 1</a>
​
<!-- The Modal -->
<div id="myModal1" class="modal">
​
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
             Modal Window 1
      </div>
    </div>
    <div class="modal-body">
       <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
 currently viewing modal no.1
<a href="#myModal2" class="modal-button">Click to open modal window no.2</a>
      </div>
    </div>
  </div>
</div>
​
​
  <!-- The Modal -->
  <div id="myModal2" class="modal">
​
<!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
             Modal Window 2
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
           You are currently viewing modal no.2
      </div>
    </div>
  </div>
</div>
​
<p>Modal Window 2 to be launched through body of Modal 1</p>
​
​
<!-- Trigger/Open The Modal -->
<a href="#myModal3" class="modal-button buttonalign">• Modal button 3</a><br>
​
<!-- The Modal -->
<div id="myModal3" class="modal">
​
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
              Modal Window 3
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
           Currently viewing modal window 3
      </div>
    </div>
  </div>
</div>
​
<!-- Trigger/Open The Modal -->
<a href="#myModal4" class="modal-button buttonalign">• Modal Button 4</a><br>
​
<!-- The Modal -->
<div id="myModal4" class="modal">
​
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <div class="headertext">
             Modal Window 4
      </div>
    </div>
    <div class="modal-body">
      <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
      <div class="bodytext">
           Currently viewing modal window 4
      </div>
    </div>
  </div>
</div>
​
</section>
​
<section id="payment">
  <span class="header3">Supported Payment Methods</span>
</section>
​
<section id="disclaimer">
  <span class="header3">Disclaimer</span>
</section>
​
<section id="contact">
  <span class="header3">Contact Us</span>
</section>
​
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers