Created
April 30, 2020 10:41
-
-
Save dispeakble/ede2c87a7ba1d41e05f32e8a5b8f9eb2 to your computer and use it in GitHub Desktop.
// source http://jsbin.com
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Simple HTML5 page </title> | |
</head> | |
<body> | |
<header> | |
<hgroup> | |
<h1> HTML5 AND CSS3 </h1> | |
<h2> A Simple HTML5 WITHOUT CSS</h2> | |
</hgroup> | |
<nav> | |
<ul> | |
<a href="">Home</a> | |
<a href="">Advance features</a> | |
<a href=""> About</a> | |
<a href=""> contact </a> | |
<a href=""> Sign in </a> | |
<a href=""> Sign up </a> | |
</ul> | |
</nav> | |
</header> | |
<section> | |
<h2>A Simple HTML5 Page</h2> | |
<p> | |
This is an example of a simple HTML5 webpage using some of it's basic elements. | |
</p> | |
</section> | |
<section> | |
<h2> CSS3 for Styling</h2> | |
<p> | |
To make this webpage visually appealing we'll use some of the basic CSS3 code in another example. CSS Makes styling of the page more easy and convinient. | |
</p> | |
</section> | |
<section> | |
<h2> Progress bar </h2> | |
<p> | |
Progress you'll make<br> | |
When you undertand HTML5 code<progress max="100" value=50></progress><br> | |
When you understand CSS3 Code <progress max="100" value=50></progress><br> | |
When you understand HTML5+CSS3 Code<progress max=100 value=100></progress> | |
</p> | |
</section> | |
<section> | |
<mark> For more understandibility how css works this page doesn't inlude any CSS3 code.</mark> | |
</section> | |
<footer> | |
<p> | |
This is the modified example of the code taught by Colleen van Lent in her Introduction to CSS3 course on coursera.</p> | |
</footer | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Simple HTML5 page </title> | |
</head> | |
<body> | |
<header> | |
<hgroup> | |
<h1> HTML5 AND CSS3 </h1> | |
<h2> A Simple HTML5 WITHOUT CSS</h2> | |
</hgroup> | |
<nav> | |
<ul> | |
<a href="">Home</a> | |
<a href="">Advance features</a> | |
<a href=""> About</a> | |
<a href=""> contact </a> | |
<a href=""> Sign in </a> | |
<a href=""> Sign up </a> | |
</ul> | |
</nav> | |
</header> | |
<section> | |
<h2>A Simple HTML5 Page</h2> | |
<p> | |
This is an example of a simple HTML5 webpage using some of it's basic elements. | |
</p> | |
</section> | |
<section> | |
<h2> CSS3 for Styling</h2> | |
<p> | |
To make this webpage visually appealing we'll use some of the basic CSS3 code in another example. CSS Makes styling of the page more easy and convinient. | |
</p> | |
</section> | |
<section> | |
<h2> Progress bar </h2> | |
<p> | |
Progress you'll make<br> | |
When you undertand HTML5 code<progress max="100" value=50></progress><br> | |
When you understand CSS3 Code <progress max="100" value=50></progress><br> | |
When you understand HTML5+CSS3 Code<progress max=100 value=100></progress> | |
</p> | |
</section> | |
<section> | |
<mark> For more understandibility how css works this page doesn't inlude any CSS3 code.</mark> | |
</section> | |
<footer> | |
<p> | |
This is the modified example of the code taught by Colleen van Lent in her Introduction to CSS3 course on coursera.</p> | |
</footer | |
</body> | |
</html> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment