<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 120px;
  height: 150px;
  border: 15px solid black;
  padding: 50px;
  margin: 20px;
 }
  <h2>Progress Bar</h2>
<p>The w3-container class can be used for a progress bar.</p>
<p>The CSS width property can be used to set the height and width.</p>

<div class="w3-border">
  <div class="w3-grey" style="height:24px;width:20%"></div>
</div>

</div>
  
</style>
</head>
<body>
  
<h2>Demonstrating the Box Model</h2>
<div>Box Model.</di>
</style>
</head>
<body>

<h1>Welcome To The Code Guide aka CodeG</h1>
  <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p> <br>

  <ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>
  </br>

</body>
</html>
View Compiled 
div {
  width: 90px;
  padding: 10px;
  border: 1px solid gray;
  margin: 0;
  box-shadow: 20px 20px 50px 10px black; 
}
p {
  border-top-style: outset;
  border-right-style: outset;
  border-bottom-style: outset;
  border-left-style: outset;
  margin: 15px 25px;
  length: 100px;
  font-size: 20%;
  overflow: hidden;
  box-shadow: 20px 20px 50px 10px pink; 
}
}
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
h1 {
  color: black;
  font-family: verdana;
  font-size: 20%;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.