HTML Text Complete Marquee

<!DOCTYPE html>
<html>

<head>
  <title>Cool Effects with Marquees</title>
</head>

<body>

  <div class="example-display" style="position:relative;height:600px;">
 
    <marquee style="z-index:2;position:absolute;left:18%;top:47%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:100px;" scrollamount="3" direction="down">HTML Code Play</marquee>
   
<marquee style="z-index:2;position:absolute;left:1%;top:39%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:50%;" scrollamount="7" direction="down">HTML Code Play</marquee>
   
<marquee style="z-index:2;position:absolute;left:11%;top:7%;font-family:Cursive;font-size:14pt;color:lime;height:302px;" scrollamount="4" direction="down">HTML</marquee>
   
<marquee style="z-index:2;position:absolute;left:25%;top:33%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:435px;" scrollamount="3" direction="down">Code</marquee>
   
<marquee style="z-index:2;position:absolute;left:15%;top:13%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:432px;" scrollamount="2" direction="down">HTML Code Play</marquee>
   
<marquee style="z-index:2;position:absolute;left:8%;top:29%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:369px;" scrollamount="1" direction="down">HTML Code Play</marquee>
   
<marquee style="z-index:2;position:absolute;left:30%;top:17%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:289px;" scrollamount="7" direction="down">HTML Code Play</marquee>

<marquee style="z-index:2;position:absolute;left:46%;top:27%;font-family:Cursive;font-size:14pt;color:#f90;height:78px;" scrollamount="7" direction="down">Play</marquee>

<marquee style="z-index:2;position:absolute;left:16%;top:17%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:56px;" scrollamount="5" direction="down">allinworld99</marquee>

<marquee style="z-index:2;position:absolute;left:30%;top:46%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:194px;" scrollamount="2" direction="down">blogspot.com...</marquee>

<marquee style="z-index:2;position:absolute;left:2%;top:10%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:251px;" scrollamount="6" direction="down">Code play</marquee>

<marquee style="z-index:2;position:absolute;left:48%;top:24%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:154px;" direction="down">">Marquees...</marquee>

<marquee style="z-index:2;position:absolute;left:41%;top:22%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:82px;" direction="down">HTML Code Play</marquee>

<marquee style="z-index:2;position:absolute;left:46%;top:2%;font-family:Cursive;font-size:14pt;color:Fuchsia;height:70px;" scrollamount="3" direction="down">...effects...</marquee>

<marquee style="z-index:2;position:absolute;left:42%;top:15%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:334px;" direction="down">HTML Code Play</marquee>

<marquee style="z-index:2;position:absolute;left:40%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:167px;" scrollamount="7" direction="down">HTML Code Play</marquee>

<marquee style="z-index:2;position:absolute;left:45%;top:18%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:420px;" scrollamount="7" direction="down">HTML Code Play</marquee>

<marquee style="z-index:2;position:absolute;left:22%;top:26%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:12px;" scrollamount="7" direction="down">HTML Code Play</marquee>

<marquee style="z-index:2;position:absolute;left:49%;top:4%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;" scrollamount="2" direction="down">HTML Code Play</marquee>

<marquee style="z-index:2;position:absolute;left:26%;top:32%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;" scrollamount="1" direction="down">HTML Code Play</marquee>

<marquee style="z-index:2;position:absolute;left:3%;top:14%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:130px;" scrollamount="3" direction="down">HTML Code Play</marquee>

  </div>

</body>

</html>

HTML Text Marquee

<!DOCTYPE html>
<html>

<head>
  <title>Marquee Alternative</title>
</head>

<body>

  <!--Will not go away from the screen-->
  <marquee behavior="alternate">
    <h1>Moving Alternative</h1>
  </marquee>

</body>

</html>

HTML Audio

<!DOCTYPE html>
<html>

<head>
  <title>Audio auto play</title>
</head>

<body>

  <!--Please Volume up your mobile-->
  <!--Automatically play when load this page-->
  <audio autoplay="true" src="song.MP3">

  </audio>

</body>

</html>

HTML Video Embed

<!DOCTYPE html>
<html>

<head>
  <title>Embed tag</title>
</head>

<body>

  <embed src="video.MP4" />

</body>

</html>

HTML email

<!DOCTYPE html>
<html>

<head>
  <title>email</title>
</head>

<body>

  <form>
    Email: <input type="email" title="Enter valid E-mail">
    <input type="submit">
  </form>

</body>

</html>

HTML lumx profil

<!DOCTYPE html>
<html ng-app="lumx-demo">

<head>

  <link rel="stylesheet" href="lumx/css/lumx.css">

</head>

<body>

  <div flex-container="row" flex-gutter="24">
    <div flex-item>
      <div class="card">
        <div flex-container="row">
          <div class="card__img card__img--left" style="height: 160px">
            <img src="lumx/img/f1.jpg">
          </div>

          <div flex-item flex-container="column">
            <div flex-item>
              <div class="p+">
                <strong class="fs-headline display-block">Lorem Ipsum</strong>
                <span class="fs-subhead tc-black-2 display-block">Lorem Ipsum</span>
              </div>
            </div>

            <div class="card__actions">
              <button class="btn btn--m btn--black btn--flat" lx-ripple>Free sample</button>
              <button class="btn btn--m btn--orange btn--flat" lx-ripple>Review</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Libs -->
  <script src="lumx/js/jquery.js"></script>
  <script src="lumx/js/velocity.js"></script>
  <script src="lumx/js/moment-with-locales.js"></script>
  <script src="lumx/js/highlight.pack.js"></script>

  <!-- Angular -->
  <script src="lumx/js/angular.js"></script>
  <script src="lumx/js/angular-route.js"></script>
  <script src="lumx/js/angular-highlightjs.js"></script>

  <!-- LumX -->
  <script src="lumx/js/lumx.js"></script>

  <!-- Button -->
  <script src="lumx/js/button_directive.js"></script>
  <script src="lumx/js/button_template.js"></script>

  <!-- Checkbox -->
  <script src="lumx/js/checkbox_directive.js"></script>
  <script src="lumx/js/checkbox_template.js"></script>

  <!-- Date picker -->
  <script src="lumx/js/date-picker_directive.js"></script>
  <script src="lumx/js/date-picker_template.js"></script>

  <!-- Dialog -->
  <script src="lumx/js/dialog_directive.js"></script>

  <!-- Dropdown -->
  <script src="lumx/js/dropdown_directive.js"></script>
  <script src="lumx/js/dropdown_template.js"></script>

  <!-- Fab -->
  <script src="lumx/js/fab_directive.js"></script>
  <script src="lumx/js/fab_template.js"></script>

  <!-- File input -->
  <script src="lumx/js/file-input_directive.js"></script>
  <script src="lumx/js/file-input_template.js"></script>

  <!-- Notification -->
  <script src="lumx/js/notification_service.js"></script>

  <!-- Progress -->
  <script src="lumx/js/progress_directive.js"></script>
  <script src="lumx/js/progress_service.js"></script>
  <script src="lumx/js/progress_template.js"></script>

  <!-- Radio -->
  <script src="lumx/js/radio-button_directive.js"></script>
  <script src="lumx/js/radio-button_template.js"></script>

  <!-- Ripple -->
  <script src="lumx/js/ripple_directive.js"></script>

  <!-- Scrollbar -->
  <script src="lumx/js/scrollbar_directive.js"></script>

  <!-- Search filter -->
  <script src="lumx/js/search-filter_directive.js"></script>
  <script src="lumx/js/search-filter_template.js"></script>

  <!-- Select -->
  <script src="lumx/js/select_directive.js"></script>
  <script src="lumx/js/select_template.js"></script>

  <!-- Switch -->
  <script src="lumx/js/switch_directive.js"></script>
  <script src="lumx/js/switch_template.js"></script>

  <!-- Tabs -->
  <script src="lumx/js/tabs_directive.js"></script>
  <script src="lumx/js/tabs_template.js"></script>

  <!-- Text field -->
  <script src="lumx/js/text-field_directive.js"></script>
  <script src="lumx/js/text-field_template.js"></script>

  <!-- Thumbnail -->
  <script src="lumx/js/thumbnail_directive.js"></script>

  <!-- Tooltip -->
  <script src="lumx/js/tooltip_directive.js"></script>

  <!-- Utils -->
  <script src="lumx/js/event-scheduler_service.js"></script>
  <script src="lumx/js/transclude_directive.js"></script>
  <script src="lumx/js/transclude-replace_directive.js"></script>
  <script src="lumx/js/utils_service.js"></script>

  <!-- App -->
  <script src="lumx/js/app.js"></script>

</body>

</html>

HTML lumx image

<!DOCTYPE html>
<html ng-app="lumx-demo">

<head>

  <link rel="stylesheet" href="lumx/css/lumx.css">

</head>

<body>

  <div flex-container="row" flex-gutter="24">
    <div flex-item>
      <div class="card">
        <div class="card__img card__img--top">
          <img src="lumx/img/natural.jpg">
          <span class="fs-headline tc-white-1 display-block">Lorem Ipsum</span>
        </div>

        <div class="p+">
          <span class="fs-subhead tc-black-2 display-block">Lorem Ipsum</span>

          <div class="paragraph fs-body-1">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique orci a lacinia malesuada.
            </p>
          </div>
        </div>

        <div class="card__actions">
          <button class="btn btn--m btn--black btn--flat" lx-ripple>Share</button>
          <button class="btn btn--m btn--orange btn--flat" lx-ripple>Learn more</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Libs -->
  <script src="lumx/js/jquery.js"></script>
  <script src="lumx/js/velocity.js"></script>
  <script src="lumx/js/moment-with-locales.js"></script>
  <script src="lumx/js/highlight.pack.js"></script>

  <!-- Angular -->
  <script src="lumx/js/angular.js"></script>
  <script src="lumx/js/angular-route.js"></script>
  <script src="lumx/js/angular-highlightjs.js"></script>

  <!-- LumX -->
  <script src="lumx/js/lumx.js"></script>

  <!-- Button -->
  <script src="lumx/js/button_directive.js"></script>
  <script src="lumx/js/button_template.js"></script>

  <!-- Checkbox -->
  <script src="lumx/js/checkbox_directive.js"></script>
  <script src="lumx/js/checkbox_template.js"></script>

  <!-- Date picker -->
  <script src="lumx/js/date-picker_directive.js"></script>
  <script src="lumx/js/date-picker_template.js"></script>

  <!-- Dialog -->
  <script src="lumx/js/dialog_directive.js"></script>

  <!-- Dropdown -->
  <script src="lumx/js/dropdown_directive.js"></script>
  <script src="lumx/js/dropdown_template.js"></script>

  <!-- Fab -->
  <script src="lumx/js/fab_directive.js"></script>
  <script src="lumx/js/fab_template.js"></script>

  <!-- File input -->
  <script src="lumx/js/file-input_directive.js"></script>
  <script src="lumx/js/file-input_template.js"></script>

  <!-- Notification -->
  <script src="lumx/js/notification_service.js"></script>

  <!-- Progress -->
  <script src="lumx/js/progress_directive.js"></script>
  <script src="lumx/js/progress_service.js"></script>
  <script src="lumx/js/progress_template.js"></script>

  <!-- Radio -->
  <script src="lumx/js/radio-button_directive.js"></script>
  <script src="lumx/js/radio-button_template.js"></script>

  <!-- Ripple -->
  <script src="lumx/js/ripple_directive.js"></script>

  <!-- Scrollbar -->
  <script src="lumx/js/scrollbar_directive.js"></script>

  <!-- Search filter -->
  <script src="lumx/js/search-filter_directive.js"></script>
  <script src="lumx/js/search-filter_template.js"></script>

  <!-- Select -->
  <script src="lumx/js/select_directive.js"></script>
  <script src="lumx/js/select_template.js"></script>

  <!-- Switch -->
  <script src="lumx/js/switch_directive.js"></script>
  <script src="lumx/js/switch_template.js"></script>

  <!-- Tabs -->
  <script src="lumx/js/tabs_directive.js"></script>
  <script src="lumx/js/tabs_template.js"></script>

  <!-- Text field -->
  <script src="lumx/js/text-field_directive.js"></script>
  <script src="lumx/js/text-field_template.js"></script>

  <!-- Thumbnail -->
  <script src="lumx/js/thumbnail_directive.js"></script>

  <!-- Tooltip -->
  <script src="lumx/js/tooltip_directive.js"></script>

  <!-- Utils -->
  <script src="lumx/js/event-scheduler_service.js"></script>
  <script src="lumx/js/transclude_directive.js"></script>
  <script src="lumx/js/transclude-replace_directive.js"></script>
  <script src="lumx/js/utils_service.js"></script>

  <!-- App -->
  <script src="lumx/js/app.js"></script>

</body>

</html>

HTML lumx avatar

<!DOCTYPE html>
<html ng-app="lumx-demo">

<head>

  <link rel="stylesheet" href="lumx/css/font.css">
  <link rel="stylesheet" href="lumx/css/lumx.css">

</head>

<body>

  <div flex-container="row" flex-gutter="24" flex-wrap>
    <div flex-item="12" class="mt++">
      <span class="fs-title display-block mb">Avatar with text and icon</span>

      <div class="divider divider--dark"></div>

      <ul class="list mt++">
        <li class="list-row list-row--has-separator">
          <div class="list-row__primary">
            <img src="lumx/img/f1.jpg" width="40" height="40" class="img-round">
          </div>

          <div class="list-row__content">
            <span>Single-line item</span>
          </div>

          <div class="list-row__secondary">
            <i class="icon icon--xs icon--grey icon--flat mdi mdi-information"></i>
          </div>
        </li>
        <li class="list-row list-row--has-separator">
          <div class="list-row__primary">
            <img src="lumx/img/f2.jpg" width="40" height="40" class="img-round">
          </div>

          <div class="list-row__content">
            <span>Single-line item</span>
          </div>

          <div class="list-row__secondary">
            <i class="icon icon--xs icon--grey icon--flat mdi mdi-information"></i>
          </div>
        </li>
        <li class="list-row list-row--has-separator">
          <div class="list-row__primary">
            <img src="lumx/img/f3.jpg" width="40" height="40" class="img-round">
          </div>

          <div class="list-row__content">
            <span>Single-line item</span>
          </div>

          <div class="list-row__secondary">
            <i class="icon icon--xs icon--grey icon--flat mdi mdi-information"></i>
          </div>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

Jquery animate hide

<!DOCTYPE html>
<html>

<head>

  <style>
  div {
    height: 100px;
    width: 100px;
    display: inline-block;
  }
 
  #red {
    background-color: #FF0000;
  }
 
  #blue {
    background-color: #0000FF;
  }
 
  #yellow {
    background-color: #E2BE22;
  }
 
  #green {
    background-color: #008800;
  }
  </style>
  <script src="js/jquery-2.2.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function()
  {
    $('div').click(function()
    {
      $(this).toggle(1000);
    });
  });
  </script>
</head>

<body>
  <div id="red"></div>
  <div id="blue"></div>
  <div id="yellow"></div>
  <div id="green"></div>
</body>

</html>

HTML DATE

<!DOCTYPE html>
<html>

<head>
  <title>Date Picker Default Value</title>
</head>

<body>

  <!--Value should in YYYY-MM-DD format-->
  <input type="date" value="2016-05-02" />

</body>

</html>

HTML Text Scrollamount

<!DOCTYPE html>
<html>

<head>
  <title>Marquee scrollamount</title>
</head>

<body>

  <marquee scrollamount="20" behavior="alternate">
    <h1>Moving scrollamount</h1>
  </marquee>

</body>

</html>