API tools faq
paste
Advertisement
andruhovski

Task 982: Selectors API Demo (HTML)

andruhovski
Oct 9th, 2017
182
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Demo </title>
  6.     <style>
  7.         .intro {
  8.             color: red;
  9.         }
  10.  
  11.         .markup {
  12.             color: yellow;
  13.         }
  14.  
  15.         .noSel {
  16.             color: green;
  17.         }
  18.  
  19.         .newsletter {
  20.             font-family: monospace;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <h1>Welcome to My Homepage</h1>
  26.     <div class="intro">
  27.         <p>My name is Donald <span id="Lastname">Duck.</span></p>
  28.         <p id="my-Address">I live in Duckburg</p>
  29.         <p>I have many friends:</p>
  30.     </div>
  31.  
  32.     <ul id="Listfriends">
  33.         <li>Goofy</li>
  34.         <li>Mickey</li>
  35.         <li>Daisy</li>
  36.         <li>Pluto</li>
  37.     </ul>
  38.     <h3>We are all animals!</h3>
  39.  
  40.     <p>
  41.         All my friends are great!<br>
  42.         But I really like Daisy!!
  43.     </p>
  44.     <p lang="it" title="Hello beautiful">Ciao bella</p>
  45.  
  46.     <p><b>My latest discoveries have led me to believe that we are all animals:</b></p>
  47.     <table>
  48.         <tbody>
  49.             <tr style="background-color: rgb(241, 241, 241);">
  50.                 <th>Name</th>
  51.                 <th>Type of Animal</th>
  52.             </tr>
  53.             <tr style="background-color: rgb(241, 241, 241);">
  54.                 <td>Mickey</td>
  55.                 <td>Mouse</td>
  56.             </tr>
  57.             <tr style="background-color: rgb(241, 241, 241);">
  58.                 <td>Goofey</td>
  59.                 <td>Dog</td>
  60.             </tr>
  61.             <tr style="background-color: rgb(241, 241, 241);">
  62.                 <td>Daisy</td>
  63.                 <td>Duck</td>
  64.             </tr>
  65.             <tr style="background-color: rgb(241, 241, 241);">
  66.                 <td>Pluto</td>
  67.                 <td>Dog</td>
  68.             </tr>
  69.         </tbody>
  70.     </table>
  71.     <div class="noSel newsletter" style="padding: 10px; border: 1px solid rgb(0, 153, 255); border: none; background-color: rgb(153, 214, 255);">
  72.         <form>
  73.             <h4>Subscribe to my newsletter:</h4>
  74.             <div style="overflow:auto;">
  75.                 <div style="width:100px;float:left;">Name:</div><div style="width:180px;float:left;"><input class="markup" style="width: 150px;" type="text"></div>
  76.             </div>
  77.             <div style="overflow:auto;">
  78.                 <div style="width:100px;float:left;">E-mail:</div><div style="width:180px;float:left;"><input class="markup" style="width: 150px;" onchange="changeEmail(this)" type="email"></div>
  79.             </div>
  80.  
  81.             <div class="noSel" style="margin-top:10px;">
  82.                 Female: <input name="rr" id="rr1" style="outline: transparent solid 2px;" type="radio" checked="checked">
  83.                 Male: <input name="rr" id="rr2" style="outline: transparent solid 2px;" type="radio">
  84.                 Other: <input name="rr" disabled="disabled" id="rr3" style="border-color: rgb(255, 102, 102); outline: rgb(255, 0, 0) solid 2px; background-color: rgb(255, 255, 153);" type="radio">
  85.             </div>
  86.             <h4>Newscategories:</h4>
  87.             <div style="overflow:auto;">
  88.                 <div style="width:60px;float:left;">Ducks:</div>
  89.                 <div style="width: 20px; float: left;">
  90.                     <input id="cc1" style="outline: transparent solid 2px;" type="checkbox" checked="checked">
  91.                 </div>
  92.             </div>
  93.             <div style="overflow:auto;">
  94.                 <div style="width: 60px; float: left;">Dogs:</div>
  95.                 <div style="width: 20px; float: left;">
  96.                     <input id="cc2" style="outline: transparent solid 2px;" type="checkbox">
  97.                 </div>
  98.             </div>
  99.             <div style="overflow:auto;">
  100.                 <div style="width:60px;float:left;">Humans:</div><div style="width: 20px; float: left;">
  101.                     <input id="cc3" style="outline: transparent solid 2px;" type="checkbox">
  102.                 </div>
  103.             </div>
  104.             <div class="noSel" style="clear:both;"></div>
  105.             <p class="noSel">Your lucky number (between 1 and 10):
  106.             <input onchange="changeLuckyNumber(this)" type="number" min="1" max="10" value="7"></p>
  107.         </form>
  108.     </div>
  109. </body>
  110. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!