Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <header id="page-header">
    <div id="top-header">
      <div id="logo">
        <a href="#"><i class="fad fa-file-code "></i></a><span id="code">code</span><span id="Scape">Scape</span>
      </div>
      <div id="header-links">
        <a href=""><i class="fab fa-facebook-f "></i></a>
        <a href=" "><i class="fab fa-twitter"></i></a>
        <a href=" "><i class="fab fa-github"></i></a>
      </div>
    </div>
    <div id="buttom-header">
      <div id="header-text">
        <h1>codeScape Documentation: </h1>
        <p>Technical information to help you learn, configure, manage, and succeed in HTML.</p>
      </div>
      <div id="area">
        <ul class="circles">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <a href="#documentation"><button><i class="fad fa-chevron-double-down"></i></button></a>
    </div>

  </header>
  <div id="documentation">
    <nav id="navbar">
      <p id="HTML-icon"><i class="fab fa-html5"></i></p>
      <header id="nav-header">
        <h1>HTML Media</h1>
      </header>
      <p><a class="nav-link" href="#What_is_Multimedia?">What is Multimedia?
        </a></p>
      <p><a class="nav-link" href="#HTML_Video">HTML Video
        </a></p>
      <p><a class="nav-link" href="#HTML_Audio">HTML Audio
        </a></p>
      <p><a class="nav-link" href="#HTML_YouTube_Videos">HTML YouTube Videos
        </a></p>
      <p><a class="nav-link" href="#HTML_Plug-ins">HTML Plug-ins</a></p>

    </nav>
    <main id="main-doc">
      <section class="main-section" id="What_is_Multimedia?">
        <header class="section-title">
          <h1>What is Multimedia?</h1>
        </header>
        <p>Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.</p>
        <p> Web pages often contain multimedia elements of different types and formats.</p>
      </section>
      <section class="main-section" id="HTML_Video">
        <header class="section-title">
          <h1>HTML Video</h1>
        </header>
        <p>The HTML <code class="code-elt">&lt;video&gt;</code> element is used to show a video on a web page.</p>
        <h3>Example</h3>
        <div class="code-segment">
          <code>
            &lt;video width="320" height="240" controls&gt;
            &lt;source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"&gt;
            &lt;source src="movie.ogg" type="https://www.w3schools.com/html/mov_bbb.ogg"&gt;
            Your browser does not support the video tag.
            &lt;/video&gt;
          </code>
        </div>
        <h3>Output</h3>
        <video width="320" height="240" controls>
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <h3>How it Works</h3>
        <ul>
          <li> The controls attribute adds video controls, like play, pause, and volume.</li>
          <li>It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.</li>
          <li>The<code class="code-elt">&lt;source&gt;</code> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.</li>
          <li>The text between the <code class="code-elt"> &lt;video&gt;</code> and <code class="code-elt"> &lt;/video&gt;</code> tags will only be displayed in browsers that do not support the <code> &lt;video&gt;</code> element.</li>
        </ul>
      </section>
      <section class="main-section" id="HTML_Audio">
        <header class="section-title">
          <h1>HTML Audio</h1>
        </header>
        <p>The HTML <code class="code-elt">&lt;audio&gt;</code> element is used to play an audio file on a web page.</p>
        <h3>Example</h3>
        <div class="code-segment">
          <code>
            &lt;audio controls&gt;
            &lt;source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg" &gt;
            &lt;source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg" &gt;
            Your browser does not support the audio element.
            &lt;/audio &gt;
          </code>
        </div>
        <h3>Output</h3>
        <audio controls>
          <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
          <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
        <h3>How it works</h3>
        <ul>
          <li>The controls attribute adds audio controls, like play, pause, and volume.</li>
          <li>The <code class="code-elt">&lt;source&gt;</code> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.</li>
          <li>The text between the <code class="code-elt">&lt;audio&gt;</code> and <code class="code-elt">&lt;audio&gt;</code> tags will only be displayed in browsers that do not support the <code class="code-elt">&lt;audio&gt;</code> element.</li>
        </ul>
      </section>
      <section class="main-section" id="HTML_YouTube_Videos">
        <header class="section-title">
          <h1>HTML YouTube Videos</h1>
        </header>
        <p>The easiest way to play videos in HTML, is to use YouTube.</p>
        <h3>Example</h3>
        <div class="code-segment">
          <code>
            &lt;iframe width="420" height="315"
            src="https://www.youtube.com/embed/5b1h4WzOUgc?autoplay=1&mute=1"
            title="YouTube video player&gt;
            &lt;iframe&gt;
          </code>
        </div>
        <h3>Output</h3>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/5b1h4WzOUgc?autoplay=1&mute=1" title="YouTube video player"></iframe>
        <h3>How it works</h3>
        <ul>
          <li> Upload/Select the video to YouTube</li>
          <li>Define an <code class="code-elt">&lt;iframe&gt;</code> element in your web page</li>
          <li>Let the src attribute point to the video URL</li>
          <li>Use the width and height attributes to specify the dimension of the player</li>
        </ul>
        <p>You could add other parameters to the URL such as:</p>
        <ul>
          <li> <code class="code-elt">mute=1</code> and <code class="code-elt">autoplay=1</code> to let your video start playing automatically (but muted) or</li>
          <li><code class="code-elt">loop=1</code> to let your video loop forever.</li>
        </ul>
      </section>
      <section class="main-section" id="HTML_Plug-ins">
        <header class="section-title">
          <h1>HTML Plug-ins</h1>
        </header>
        <p>Plug-ins are computer programs that extend the standard functionality of the browser.</p>
        <div id="warning">
          <p id="warning-note"><b>Warning</b></p>

          <p>Most browsers no longer support Java Applets and Plug-ins.</p>
        </div>
        <ol>
          <li>
            <p><b>The <code class="code-elt">&lt;object&gt;</code> Element</b></p>

            <p>The <code class="code-elt">&lt;object&gt;</code> element is supported by <b>all</b> browsers. It defines an embedded object within an HTML document.</p>
            <p><b>Example</b></p>
            <div class="code-segment">
              <code>
                &lt;object data="audi.jpeg"&gt;&lt;/object&gt;
              </code>
            </div>
            <p><b>Output</b></p>
            <object data="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5EjLVFwhdxyf7YeuHVF3Wn8LmrG959FINJg&usqp=CAU"></object>
          </li>
          <li>
            <p><b>The <code class="code-elt">&lt;embed&gt;</code> Element</b></p>

            <p>The <code class="code-elt">&lt;embed&gt;</code>element is supported in all <b>major</b> browsers. It also defines an embedded object within an HTML document.</p>
            <h3>Example</h3>
            <div class="code-segment">
              <code>
                &lt;embed src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-b-4_ARUtc0DxqzuduzJx83l4fwjnhD2Wlg&usqp=CAU"&gt;
              </code>
            </div>
            <h3>Output</h3>
            <embed src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-b-4_ARUtc0DxqzuduzJx83l4fwjnhD2Wlg&usqp=CAU">
            <p>Web browsers have supported the <code>&lt;embed&gt;</code> element for a long time. However, it has not been a part of the HTML specification before HTML5.</p>
          </li>
        </ol>
      </section>
      <div id="footer">
        <ul>
          <li>
            <p>Reference: <a href="https://www.w3schools.com/html/html_media.asp" target="_blank">W3schools</a></p>
          </li>

          <li>
            <p>Blog: <a href="https://dev.to/babib" target="_blank">dev.to</a>
            </p>
          </li>
          <li>
            <p>Developer: <span id="babi">Babi</span></p>
          </li>
        </ul>
      </div>
    </main>

  </div>
</body>
              
            
!

CSS

              
                /*=================================
VARIABLES
===================================*/
:root {
  --dark-theme: #0dac50;
  --regular-theme: #1bdc60;
  --highlight: #00fa9a;
  --text: "Quicksand", sans-serif;
}
/*=================================
DEFAULTS
===================================*/
body {
  font-family: var(--text);
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
p,
li {
  font-size: 20px;
}
a {
  text-decoration: none;
  color: inherit;
}
/*==========================================
PAGE HEADER
==========================================*/
div#top-header {
  display: flex;
  justify-content: space-between;
}
#logo i.fad {
  color: var(--dark-theme);
  font-size: 48px;
  padding: 10px;
}
#logo {
  margin-top: 10px;
}
#logo #code,
#Scape {
  font-size: 30px;
}
#code {
  font-weight: bolder;
}
#header-links {
  font-size: 20px;
  padding: 23px 40px 0 0;
}
#header-links .fab {
  padding: 10px;
  margin: 0 5px;
  color: var(--dark-theme);
  border: 1px solid #c8c6a7;
  border-radius: 100%;
  box-shadow: 0 1px 0 0 #cdd0cb;
}
#header-links .fab:hover {
  border-color: var(--dark-theme);
  box-shadow: 1px 2px 0 0 var(--dark-theme);
  cursor: pointer;
}
#buttom-header {
  background-color: var(--dark-theme);
  color: white;
  text-align: center;
  margin: 0;
  height: 360px;
}
#header-text h1 {
  margin: 0;
  padding-top: 99px;
  font-size: 40px;
}

div#buttom-header button {
  background-color: var(--dark-theme);
  padding: 10px;
  border-radius: 100%;
  border: 1px solid white;
  margin-top: 70px;
  outline: none;
}
div#buttom-header button .fa-chevron-double-down {
  font-size: 20px;
  color: white;
}
div#buttom-header button:hover {
  cursor: pointer;
}

div#buttom-header button:hover .fa-chevron-double-down {
  animation-name: swipe;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
div#buttom-header button:active {
  border: 1px solid #00a064;
}

div#buttom-header button:active .fa-chevron-double-down {
  color: #00a064;
  animation-play-state: paused;
}

/*===================================== 
ANIMATION for buttom-header 
=====================================*/
.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 100%;
  overflow: hidden;
}
.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 20%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}
.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}
.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

/*====================================   
ANIMATION for buttom-header button
===================================*/
@keyframes swipe {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  25% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  26% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  55% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

/* ==================================
#documentation
=====================================*/

#main-doc {
  overflow: auto;
  margin: 0 0 0 10px;
  padding: 5px 10px 5px 25px;
  scroll-behavior: smooth;
}

#navbar {
  float: left;
  position: sticky;
  top: 2%;
  min-height: 92vh;
  width: 200px;
  background-color: #f3f4ed;
  text-align: center;
  border: 0.1px solid #f3f4ed;
  box-shadow: 1px -1px 9px 0px;
  padding: 10px;
  margin: 13px 0 0 5px;
  border-radius: 5px;
}
#navbar:hover {
  box-shadow: 1px -1px 9px 0 var(--regular-theme);
}
#HTML-icon {
  color: #006645;
  font-size: 40px;
  margin: 0;
  padding: 0;
}
a.nav-link::after {
  background-image: radial-gradient(
    #1bdc60,
    #00fa9a,
    #0dac50,
    #00fa9a,
    #0dac50,
    #1bdc60,
    #00fa9a
  );
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a.nav-link:hover::after {
  left: 10%;
  width: 80%;
}
#navbar #nav-header h1 {
  margin-top: 20px;
  color: #006645;
}
.nav-link {
  margin-top: 18px;
}

.code-elt,
#warning-note {
  color: #be0000;
}
div#warning {
  padding: 10px;
  background-color: rgba(190, 0, 0, 0.2);
  font-size: 15px;
  margin-right: 50px;
  border-radius: 15px;
}
.code-segment {
  padding: 10px;
  background-color: rgba(238, 235, 221, 0.6);
  font-size: 15px;
  margin-right: 50px;
  border-radius: 15px;
  overflow: auto;
}

/* ====================
FOOTER
=====================*/
#footer {
  background-color: var(--dark-theme);
  color: white;
}
#footer ul {
  list-style-type: none;
  justify-content: space-around;
  display: flex;
  font-size: 10px;
}
#footer ul p {
  font-size: 18px;
}

#footer ul li a:hover {
  color: var(--highlight);
}
#footer ul #babi {
  font-family: "Great Vibes", cursive;
  font-size: 28px;
}

/* ==============
RESPONSIVENESS
===============*/
@media (max-width: 990px) {
  #navbar {
    width: 190px;
  }
  iframe {
    width: 450px;
    height: 215px;
  }
  #warning {
    width: 540px;
  }

  #footer ul #babi {
    font-size: 20px;
    font-weight: bolder;
  }
  #footer ul p {
    font-size: 17px;
  }
}

@media (max-width: 900px) {
  #navbar {
    width: 180px;
  }
  iframe {
    width: 360px;
    height: 235px;
  }
}
@media (max-width: 874px) {
  p,
  li {
    font-size: 18px;
  }
  #navbar {
    width: 180px;
  }
  #header-text p {
    font-size: 19px;
  }
  #header-text h1 {
    font-size: 32px;
  }
}
@media (max-width: 806px) {
  p,
  li {
    font-size: 19px;
  }
  .circles {
    width: 94.5%;
  }
  #warning {
    width: 500px;
  }
}

@media (max-width: 770px) {
  #navbar {
    width: 150px;
  }
  
  #main-doc {
    margin: 0;
    padding: 0;
  }
  #main-doc h1 {
    text-decoration: underline;
  }
  #footer {
    border: 1px solid var(--dark-theme);
    padding: 10px 0 0 0;
  }
  .main-section {
    padding: 10px;
  }
  #footer:hover {
    box-shadow: 5px -2px 3px 1px #9e9d89;
  }
}
@media (max-width: 733px) {
  .circles {
    width: 93.5%;
  }
  #warning {
    width: 400px;
  }
}
@media (max-width: 650px) {
  #warning{
    width:350px;
  }
#footer ul {
    margin-left: 20px;
    display: block;
  }
  iframe{
    width:320px;
  }
}
@media (max-width: 622px) {
  
  .circles {
    width: 91.5%;
  }
  
}
@media (max-width: 584px) {
  
  .circles {
    width: 92%;
  }
  #warning {
    width: 280px;
  }
  #footer ul {
    padding: 0;
  }
}
@media (max-width: 508px) {
  .circles {
    width: 90%;
  }
  
  #navbar {
    width: 120px;
  }
  #navbar .nav-link{
    font-size:17px;
    margin-top:20px;
  }
  div#buttom-header button {
    margin-top: 60px;
  }
  
  video,
  iframe {
    width: 280px;
    height: 200px;
  }
  
  #logo i.fad {
    color: var(--dark-theme);
    font-size: 48px;
    padding: 5px;
  }

  #logo #code,
  #Scape {
    font-size: 25px;
  }

  #header-links {
    font-size: 18px;
  }
  .code-segment {
    font-size: 13px;
    padding: 10px;
    margin: 0;
  }
  #footer ul p {
    font-size: 15px;
  }
  #footer ul p span#babi {
    font-size: 18px;
    font-weight: bolder;
  }

#HTML_Plug-ins ol {
  margin: 0 12px;
  padding: 0;
}
  #warning {
    width: 240px;
  }
}
@media (max-width: 440px) {
  .circles {
    width: 89.5%;
  }
  #warning {
    width: 320px;
  }
  #navbar{
    display:none;
  }
}
@media (max-width: 425px) {
  div#buttom-header button {
    margin-top: 40px;
  }
  #warning {
    width: 200px;
  }
  video,
  iframe {
    width: 290px;
    height: 200px;
  }
  #top-header #header-links {
    margin: 0 2px 5px 0;
  }

  #logo #code,
  #Scape {
    font-size: 20px;
  }

  #header-links {
    font-size: 15px;
  }
  
}
@media (max-width: 391px) {
  .circles {
    width: 89%;
  }
  
  #header-text h1 {
    padding-top: 60px;
  }

  div#buttom-header button {
    margin-top: 50px;
  }
  #logo {
    margin-top: 5px;
  }
  #logo #code,
  #Scape {
    font-size: 18px;
  }

  #header-links {
    font-size: 15px;
  }
  #header-links .fab {
    padding: 10px;
    margin: 0 2px;
  }
  
}
@media (max-width: 374px) {
  .circles {
    width: 88%;
  }
  p {
    font-size: 18px;
  }
}
@media (max-width: 344px) {
  .circles {
    width: 87%;
  }
  #warning {
    width: 180px;
  }
  #header-links {
    margin: 0;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console