<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"><video></code> element is used to show a video on a web page.</p>
<h3>Example</h3>
<div class="code-segment">
<code>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="movie.ogg" type="https://www.w3schools.com/html/mov_bbb.ogg">
Your browser does not support the video tag.
</video>
</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"><source></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"> <video></code> and <code class="code-elt"> </video></code> tags will only be displayed in browsers that do not support the <code> <video></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"><audio></code> element is used to play an audio file on a web page.</p>
<h3>Example</h3>
<div class="code-segment">
<code>
<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 >
</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"><source></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"><audio></code> and <code class="code-elt"><audio></code> tags will only be displayed in browsers that do not support the <code class="code-elt"><audio></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>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/5b1h4WzOUgc?autoplay=1&mute=1"
title="YouTube video player>
<iframe>
</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"><iframe></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"><object></code> Element</b></p>
<p>The <code class="code-elt"><object></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>
<object data="audi.jpeg"></object>
</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"><embed></code> Element</b></p>
<p>The <code class="code-elt"><embed></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>
<embed src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-b-4_ARUtc0DxqzuduzJx83l4fwjnhD2Wlg&usqp=CAU">
</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><embed></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>
:root {
--dark-theme: #0dac50;
--regular-theme: #1bdc60;
--highlight: #00fa9a;
--text: "Quicksand", sans-serif;
}
body {
font-family: var(--text);
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
p,
li {
font-size: 20px;
}
a {
text-decoration: none;
color: inherit;
}
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;
}
.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%;
}
}
@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);
}
}
#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 {
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;
}
@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;
}
}
