clayanNEU/index.html

## index.html
<!-- hypertext reference -->

<!-- absolute url -->
<a href="https://www.google.com/"> Gooooogle</a>

<!-- relative url, local copy of the file or path to file -->
<!-- ../ means go to folder above it, index.html

<!-- Navigation bar -->
<nav role="navigation" aria-label="main menu">
  <ul class="navbar">
    <li><a href="/">Home</a></li>
    <li><a href="/people">People</a></li>
    <li><a href="/prices">Prices</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Order matters -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs">
    <li><a href="/">Home</a></li>
    <li><a href="/people">Blog</a></li>
    <li><a href="/contact">March</a></li>
    <li>March 9th Update</li>
  </ol>
</nav>

<!-- Footer -->
<footer>
  <a href="/about/privacy">Privacy Policy</a>
  <a href="/about/legal">Terms of Service</a>
</footer>

<!-- formats: gif, svg (scalable vector graphic), jpg (compressing), png (transparency) -->

<!-- images -->
<img src="https://cdn.eso.org/images/screen/eso1907a.jpg" alt="first image of a black hole" width="400" height="200"

     srcset="https://cdn.eso.org/images/screen/eso1907a.jpg 1x,
             https://cdn.eso.org/images/screen/eso1907a.jpg 3x,
             https://cdn.eso.org/images/screen/eso1907a.jpg 4x"
>

<!-- changes according to browser -->
<img src="https://cdn.eso.org/images/screen/eso1907a.jpg" alt="first image of a black hole" width="400" height="200"

     srcset="https://cdn.eso.org/images/screen/eso1907a.jpg 480w,
             https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg 960w,
             https://cdn.eso.org/images/screen/eso1907a.jpg 1440w,
             https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg 1920w
             "

     sizes="(max-width: 480px) 240px,
            (max-width: 960px) 480px,
            (max-width: 1440px) 960px,
            1920px"
>

<!-- responsive images, loads tree image when screen is larger than 600-->
<figure>

<picture>
  <source media="(min-width:600px)"
          srcset="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
  <source srcset="https://cdn.eso.org/images/screen/eso1907a.jpg">
<img src="https://cdn.eso.org/images/screen/eso1907a.jpg" alt="first image of a black hole" width="400" height="200">
</picture>

  <figcaption> responsive images, loads tree image when screen is larger than 600. </figcaption>
</figure>

<!-- also look for loop and autoplay, and different sources-->
<audio controls src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/birds.mp3"></audio>

<audio controls loop autoplay>
  <source src="birds.ogg"
          type="audio/ogg; codec=opus">
  <source src="birds.mp3"
          type ="audio/mpeg">
  Sorry your browser doesn't support this audio.
</audio>


<!-- Videos -->
<video controls>
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/moonwalk.480p.vp9.webm"
          type="video/webm">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/moonwalk.480p.h264.mp4"
          type="video/mp4">
  <track src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/moonwalk.vtt"
         kind="captions"
         label="English"
         srclang="en"
         default>
  <p>This would be a video of a moonwalk, if your device supports playing this video.</p>
</video>

<!-- embed a video -->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ldeLy8D_uSE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<html lang="en-US" dir="ltr"> </html>
<meta charset="utf-8">

<p lang="es-mx">
  En 12930, Jose gusta la casa. <span lang="nah"> somethign thing</span>
</p>


<!-- Generic elements: div (block-level element), span (inline element) -->

<div class="box"> whatever is here </div>
<span lang="es" class="bilingual"> inline element to change language of a sentence to spanish </span>


## notes-part-2.markdown

      
    Raw
  

              notes-part-2.markdown
            
          
    Notes part 2

A Pen by clayanNEU on CodePen.
License.
	<!-- hypertext reference -->

	<!-- absolute url -->
	<a href="https://www.google.com/"> Gooooogle</a>

	<!-- relative url, local copy of the file or path to file -->
	<!-- ../ means go to folder above it, index.html

	<!-- Navigation bar -->
	<nav role="navigation" aria-label="main menu">
	<ul class="navbar">
	<li><a href="/">Home</a></li>
	<li><a href="/people">People</a></li>
	<li><a href="/prices">Prices</a></li>
	<li><a href="/contact">Contact</a></li>
	</ul>
	</nav>

	<!-- Order matters -->
	<nav aria-label="Breadcrumb">
	<ol class="breadcrumbs">
	<li><a href="/">Home</a></li>
	<li><a href="/people">Blog</a></li>
	<li><a href="/contact">March</a></li>
	<li>March 9th Update</li>
	</ol>
	</nav>

	<!-- Footer -->
	<footer>
	<a href="/about/privacy">Privacy Policy</a>
	<a href="/about/legal">Terms of Service</a>
	</footer>

	<!-- formats: gif, svg (scalable vector graphic), jpg (compressing), png (transparency) -->

	<!-- images -->
	<img src="https://cdn.eso.org/images/screen/eso1907a.jpg" alt="first image of a black hole" width="400" height="200"

	srcset="https://cdn.eso.org/images/screen/eso1907a.jpg 1x,
	https://cdn.eso.org/images/screen/eso1907a.jpg 3x,
	https://cdn.eso.org/images/screen/eso1907a.jpg 4x"
	>

	<!-- changes according to browser -->
	<img src="https://cdn.eso.org/images/screen/eso1907a.jpg" alt="first image of a black hole" width="400" height="200"

	srcset="https://cdn.eso.org/images/screen/eso1907a.jpg 480w,
	https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg 960w,
	https://cdn.eso.org/images/screen/eso1907a.jpg 1440w,
	https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg 1920w
	"

	sizes="(max-width: 480px) 240px,
	(max-width: 960px) 480px,
	(max-width: 1440px) 960px,
	1920px"
	>

	<!-- responsive images, loads tree image when screen is larger than 600-->
	<figure>

	<picture>
	<source media="(min-width:600px)"
	srcset="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
	<source srcset="https://cdn.eso.org/images/screen/eso1907a.jpg">
	<img src="https://cdn.eso.org/images/screen/eso1907a.jpg" alt="first image of a black hole" width="400" height="200">
	</picture>

	<figcaption> responsive images, loads tree image when screen is larger than 600. </figcaption>
	</figure>

	<!-- also look for loop and autoplay, and different sources-->
	<audio controls src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/birds.mp3"></audio>

	<audio controls loop autoplay>
	<source src="birds.ogg"
	type="audio/ogg; codec=opus">
	<source src="birds.mp3"
	type ="audio/mpeg">
	Sorry your browser doesn't support this audio.
	</audio>


	<!-- Videos -->
	<video controls>
	<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/moonwalk.480p.vp9.webm"
	type="video/webm">
	<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/moonwalk.480p.h264.mp4"
	type="video/mp4">
	<track src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/moonwalk.vtt"
	kind="captions"
	label="English"
	srclang="en"
	default>
	<p>This would be a video of a moonwalk, if your device supports playing this video.</p>
	</video>

	<!-- embed a video -->
	<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ldeLy8D_uSE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

	<html lang="en-US" dir="ltr"> </html>
	<meta charset="utf-8">

	<p lang="es-mx">
	En 12930, Jose gusta la casa. <span lang="nah"> somethign thing</span>
	</p>


	<!-- Generic elements: div (block-level element), span (inline element) -->

	<div class="box"> whatever is here </div>
	<span lang="es" class="bilingual"> inline element to change language of a sentence to spanish </span>