HTML CSS JavaScript Editor and Viewer

â€‹x
 
<!-- This is Just Sample HTML -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
 
.topnav {
  overflow: hidden;
  background-color: #1d415a;
}
</style>
</head>
<body>
 
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#Categories">Categories</a>
  <a href="#privacy">Privacy Policy</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
 
<div style="padding-left:16px">
  <h2>Responsive Menu Navigation Example</h2>
  <p>Resize the browser window to see how it works or click the available view button</p>
</div>
 
</body>
</html>

xxxxxxxxxx
 
/* This is Just Sample CSS */.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
 
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
.topnav a.active {
  background-color: #028fb9;
  color: white;
}
 
.topnav .icon {
  display: none;
}
 
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
 
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

xxxxxxxxxx
 
// This is Just Sample Javascript
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

HTML CSS JavaScript Editor and Viewer is a program for editing the markup of a web page. This is specialized free live HTML editor online which offers convenience and added functionality include HTML, CSS, and JavaScript. You can use this for creating, editing, and design your web page. With text-based editors, the text based source code can be edited directly and real time display.

HTML CSS JavaScript Editor and Viewer

HTML CSS JavaScript Free Online Live Tool