jordanhudgens/emmet.html

## emmet.html
<!-- html:5 -->
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <title></title>
</head>

<body>
  <!-- Basic tags  -->
  <p></p>
  <div></div>
  <something></something>

  <!-- Multiplication -->
  <!-- ul>li*10  -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <!-- Adding a class -->
  <div class="container"></div>

  <!-- Adding an ID -->
  <div id="headline"></div>

  <!-- Multiple levels of nesting -->
  <!-- nav>div>span*4  -->
  <nav>
    <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </nav>

  <!-- Siblings -->
  <!-- nav+.container+footer -->
  <nav></nav>
  <div class="container"></div>
  <footer></footer>

  <!-- Multiple elements -->
  <!-- nav+.container>ul>li*5 -->
  <nav></nav>
  <div class="container">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <!-- Adding lorem placeholder text -->
  <!-- .widget*5>lorem -->
  <div class="widget">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime et voluptatibus ipsa distinctio quas aut assumenda nostrum
    harum, quos sint ad natus, nulla, tenetur facere, asperiores! Sapiente, porro enim suscipit!</div>
  <div class="widget">Totam vitae laborum debitis quis odio adipisci harum voluptates maxime nisi, similique facilis corporis, rem, eveniet amet
    aliquid ducimus. Repellendus repellat, dolorum et saepe nam voluptatum magnam expedita, vitae perspiciatis.</div>
  <div class="widget">Consequuntur impedit deleniti adipisci nobis voluptas repudiandae vero reprehenderit cupiditate, dolores omnis molestias
    modi accusamus possimus neque repellat non distinctio excepturi illum saepe. Blanditiis dolores, adipisci repudiandae
    suscipit qui laboriosam?</div>
  <div class="widget">Et, eligendi distinctio fugiat quidem, quod, tempora voluptates obcaecati voluptatum illo enim quisquam doloribus fugit
    sit accusantium numquam ex recusandae omnis. Exercitationem sunt in illo, repudiandae assumenda harum consequatur ullam.</div>
  <div class="widget">Aperiam deserunt commodi id, saepe harum natus! Temporibus distinctio animi adipisci molestias perspiciatis qui doloribus,
    a in amet ex fugiat nobis harum doloremque rem neque omnis, esse iure. Aliquam, molestiae!</div>


  <!-- Adding a variable amount of lorem placeholder text -->
  <!-- .widget*5>lorem200 -->
  <div class="widget">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex aliquid dicta fugiat, beatae sit, ea mollitia fugit voluptas
    sunt voluptatem nulla. Earum iusto perspiciatis animi, error blanditiis aperiam quia laborum quos est et obcaecati nostrum
    numquam, perferendis deleniti amet maiores, libero, commodi atque architecto porro culpa debitis! Nam maiores unde cumque
    facere odio sint ratione repellat delectus, sapiente temporibus, eligendi ipsa, mollitia optio ullam, laborum architecto
    ipsam. Ipsa saepe voluptatem tempora, inventore repellat consequatur quas illo minima, tenetur ex magni sunt perferendis
    reiciendis debitis tempore? Accusamus nisi unde fuga, quisquam amet commodi aliquam dignissimos pariatur, quidem ut perspiciatis
    animi quasi vero odit optio. Facere aperiam praesentium architecto deleniti quos error quibusdam sint inventore placeat
    corrupti voluptatibus temporibus doloribus animi laboriosam non sit aliquid magnam aut, dolore enim id ipsum? Repellendus,
    deleniti earum illum atque eius animi. Eius ipsum eveniet velit, doloribus ea ducimus nostrum sequi, distinctio nesciunt
    fuga excepturi exercitationem possimus illum et pariatur accusamus magni! Magnam nobis odio iusto adipisci, aperiam veniam
    ipsum voluptate in deserunt natus ex iste facere soluta, earum vitae. Velit perferendis, iusto expedita doloribus, provident
    ipsam officia fugiat qui, nihil temporibus et! Deserunt accusamus accusantium cupiditate blanditiis enim tempora! Veniam
    ea repudiandae doloremque totam, in.</div>
  <div class="widget">Dignissimos quaerat, in ad. Impedit labore, consequuntur voluptate dolore eveniet, laboriosam et harum velit eum totam,
    voluptatum voluptatem ad dicta tenetur expedita quo sapiente, voluptatibus saepe. Nemo ipsam, ea adipisci animi deserunt
    cum cumque, esse nam explicabo eveniet unde quas quo earum optio dicta. Tempora asperiores architecto accusantium debitis
    labore tenetur, dolorum libero culpa laborum, fugiat molestiae exercitationem facere et! Delectus expedita dolor enim
    aliquam, culpa, cum sit at doloribus pariatur repellendus. Neque, voluptatibus vero possimus consequuntur eius ea id.
    Numquam reprehenderit perspiciatis omnis vero ex quidem porro magnam, excepturi, consectetur incidunt eveniet nemo voluptatem
    ratione mollitia assumenda culpa officia in deleniti sit adipisci minima eligendi dignissimos rerum. Suscipit sunt nesciunt
    laudantium! Voluptatibus vitae in incidunt, possimus modi soluta unde. Officiis qui vitae adipisci doloremque aperiam
    ex aut ipsa dignissimos, dolores atque, laboriosam omnis harum soluta odit incidunt numquam. Maiores fugit unde provident
    quas, harum, libero eos atque excepturi deleniti hic laudantium ducimus laboriosam consequatur iste saepe vero odit ut
    maxime cupiditate neque commodi cum. Minus quidem laboriosam perferendis nihil quisquam, impedit beatae nostrum adipisci,
    neque iure, saepe distinctio quaerat molestias! Fuga libero assumenda accusantium sunt inventore in suscipit, quibusdam
    quos vel velit expedita aperiam ducimus, debitis necessitatibus, corporis molestias.</div>
  <div class="widget">Veniam aliquam, obcaecati quod. Vero molestias non nobis temporibus expedita explicabo magni tenetur iure optio vitae error
    delectus architecto corrupti dolor, alias similique. Incidunt distinctio pariatur laboriosam laudantium, earum unde voluptate
    magni voluptatum quam magnam, voluptates. Dignissimos modi ducimus error doloremque sapiente temporibus, odit, ipsa fuga
    cumque quibusdam incidunt aliquid consectetur pariatur enim, ad itaque tenetur. Saepe, deserunt, eveniet. Labore amet,
    harum maxime illum eius debitis delectus quidem doloribus nulla, culpa pariatur, eos alias eligendi similique dignissimos
    est aperiam blanditiis officiis ipsa eum cum placeat veniam enim minima. Nesciunt quaerat repellat nisi libero quas provident
    officia animi nam, minima quam in, at, eius. Perferendis eligendi, adipisci magnam accusamus voluptatum dolor totam quidem,
    voluptates sed perspiciatis repellat! Hic repellendus eaque deleniti enim, omnis maxime deserunt aut laborum earum quo
    voluptatum dicta excepturi temporibus reiciendis totam exercitationem debitis dolor ipsum non quaerat unde, quas beatae
    nihil voluptates! Nobis rem exercitationem consectetur quasi omnis inventore mollitia delectus aperiam nisi dolorem enim
    esse ex quas et, odit doloremque ad odio animi voluptatibus sapiente cumque, consequatur, praesentium numquam! Magni,
    ratione inventore eum eos dignissimos omnis ipsum modi sapiente deleniti, molestias, hic molestiae ipsa porro voluptate
    sequi quae! A, aliquid nisi excepturi aut iusto voluptate voluptates.</div>
  <div class="widget">Dignissimos, autem explicabo illum molestias laborum asperiores deserunt commodi ea unde eius mollitia aliquid corrupti
    quo tempora neque reprehenderit sit impedit doloremque voluptate praesentium quisquam. Numquam illo debitis, explicabo
    esse at! Nemo fugit quo eaque et odit sapiente dolor, repellendus expedita aliquam dicta. Maxime officiis quam aspernatur
    dolores quia, ut beatae quibusdam nihil nobis quos dicta quaerat aliquid repudiandae, impedit porro similique dolor neque
    error molestias animi sit reiciendis eaque. Dolores accusamus aperiam eligendi ullam aspernatur neque omnis dignissimos
    placeat distinctio quisquam quo modi quibusdam sapiente, iusto, assumenda necessitatibus recusandae ipsam vitae suscipit
    natus at ad! Sed esse, delectus quisquam ad, impedit modi odit doloribus reiciendis neque cumque minima corporis obcaecati
    odio voluptate rem reprehenderit dolores ut maiores quas possimus, in commodi! Quo est pariatur sed amet numquam consequatur
    neque error deleniti quasi, rerum cupiditate maiores, a praesentium. Tempora ducimus similique voluptas quisquam. Delectus
    libero iure unde accusantium quasi aut non, sint velit suscipit eligendi exercitationem laborum inventore. Doloremque
    eaque odio nam qui, veritatis laborum enim aliquid suscipit cupiditate dolorum animi, sit blanditiis dolores obcaecati
    minima. Suscipit, maiores tempora libero? Error pariatur, corrupti praesentium dolorem iusto quidem numquam. Labore velit
    at fuga aliquid ullam quos maiores doloremque libero ex, quibusdam!</div>
  <div class="widget">Mollitia, aut cumque. Sunt quaerat adipisci consequatur ratione numquam voluptatibus iusto eius, deserunt ab placeat, quae
    perferendis nihil labore, illum asperiores aut odio culpa dolorum tempore quod repellendus laudantium, nam accusamus.
    Nemo atque dolorem, eveniet necessitatibus quasi nam accusantium deserunt delectus quo libero ducimus suscipit aperiam
    consequatur, ipsa pariatur debitis, totam, ipsam rem ipsum aspernatur expedita eos odit dolores placeat. Perspiciatis,
    quis! Ipsa ipsum aliquam odit! Vel autem recusandae, dolore, voluptatem placeat consequuntur cumque facilis? Nobis tenetur,
    incidunt reprehenderit? Mollitia quod ex dicta voluptates quisquam velit, voluptate nisi asperiores nulla consequuntur
    aut, voluptatum repellendus voluptas voluptatibus sit laboriosam, sequi blanditiis adipisci non. Facilis tempora officia
    sed officiis. Quasi ullam neque reprehenderit blanditiis nemo quisquam quam, aut officiis cupiditate, ad et molestiae
    quia illum! Facere sunt suscipit deleniti laudantium nesciunt consectetur earum, a dicta nemo aliquam vitae, incidunt
    cumque aliquid molestiae! Officia enim neque repellendus reprehenderit similique dolores vero incidunt possimus culpa,
    maxime, earum alias voluptate animi architecto necessitatibus totam itaque ratione, numquam quo debitis delectus consectetur.
    Nulla sint adipisci quidem pariatur similique fugiat at id veritatis distinctio facilis, aspernatur molestiae laudantium
    inventore velit aut tenetur doloremque possimus laboriosam voluptatem explicabo placeat assumenda labore minus exercitationem
    omnis! Quis sapiente officia eos!</div>


  <!-- Creating a div with a class -->
  <!-- .container -->
  <div class="container"></div>

  <!-- div.container -->
  <div class="container"></div>

  <!-- span.featured -->
  <span class="featured"></span>


  <!-- Adding Text -->
  <!-- .container>.featured>h1{Hi there} -->
  <div class="container">
    <div class="featured">
      <h1>Hi there</h1>
    </div>
  </div>

  <!-- Adding attributes -->
  <!-- .img-wrapper>img[src="featured.jpg"] -->
  <div class="img-wrapper"><img src="featured.jpg" alt=""></div>

  <!-- .img-wrapper>img[src="featured.jpg" alt="Featured Homepage Image"]  -->
  <div class="img-wrapper"><img src="featured.jpg" alt="Featured Homepage Image"></div>

  <!-- .img-wrapper>img[src="featured.jpg" alt="Featured Homepage Image" special-attr="Something Else"]  -->
  <div class="img-wrapper"><img src="featured.jpg" alt="Featured Homepage Image" special-attr="Something Else"></div>

  <!-- React button event -->
  <!-- button[onClick={activateSidebar}]{Show Sidebar} -->
  <button onClick={activateSidebar}>Show Sidebar</button>

  <!-- Adding classes to custom tags -->
  <!-- nav.nav-wrapper -->
  <nav class="nav-wrapper"></nav>

  <!-- Grouping elements -->
  <!-- .container>(.hero+.content-wrapper+ul>li*10) -->
  <div class="container">
    <div class="hero"></div>
    <div class="content-wrapper"></div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <!-- Numbering -->
  <!-- ul>li.bullet-list$*7 -->
  <ul>
    <li class="bullet-list1"></li>
    <li class="bullet-list2"></li>
    <li class="bullet-list3"></li>
    <li class="bullet-list4"></li>
    <li class="bullet-list5"></li>
    <li class="bullet-list6"></li>
    <li class="bullet-list7"></li>
  </ul>

  <!-- Auto import stylesheets -->
  <!-- link -->
  <link rel="stylesheet" href="main.css">

  <!-- Links -->
  <!-- a -->
  <a href="https://google.com"></a>

  <!-- a[href="https://google.com"]{Google} -->
  <a href="https://google.com">Google</a>

</body>

</html>
	<!-- html:5 -->
	<!DOCTYPE html>
	<html lang='en'>

	<head>
	<meta charset='UTF-8'>
	<title></title>
	</head>

	<body>
	<!-- Basic tags -->
	<p></p>
	<div></div>
	<something></something>

	<!-- Multiplication -->
	<!-- ul>li*10 -->
	<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>

	<!-- Adding a class -->
	<div class="container"></div>

	<!-- Adding an ID -->
	<div id="headline"></div>

	<!-- Multiple levels of nesting -->
	<!-- nav>div>span*4 -->
	<nav>
	<div>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	</div>
	</nav>

	<!-- Siblings -->
	<!-- nav+.container+footer -->
	<nav></nav>
	<div class="container"></div>
	<footer></footer>

	<!-- Multiple elements -->
	<!-- nav+.container>ul>li*5 -->
	<nav></nav>
	<div class="container">
	<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
	</div>

	<!-- Adding lorem placeholder text -->
	<!-- .widget*5>lorem -->
	<div class="widget">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime et voluptatibus ipsa distinctio quas aut assumenda nostrum
	harum, quos sint ad natus, nulla, tenetur facere, asperiores! Sapiente, porro enim suscipit!</div>
	<div class="widget">Totam vitae laborum debitis quis odio adipisci harum voluptates maxime nisi, similique facilis corporis, rem, eveniet amet
	aliquid ducimus. Repellendus repellat, dolorum et saepe nam voluptatum magnam expedita, vitae perspiciatis.</div>
	<div class="widget">Consequuntur impedit deleniti adipisci nobis voluptas repudiandae vero reprehenderit cupiditate, dolores omnis molestias
	modi accusamus possimus neque repellat non distinctio excepturi illum saepe. Blanditiis dolores, adipisci repudiandae
	suscipit qui laboriosam?</div>
	<div class="widget">Et, eligendi distinctio fugiat quidem, quod, tempora voluptates obcaecati voluptatum illo enim quisquam doloribus fugit
	sit accusantium numquam ex recusandae omnis. Exercitationem sunt in illo, repudiandae assumenda harum consequatur ullam.</div>
	<div class="widget">Aperiam deserunt commodi id, saepe harum natus! Temporibus distinctio animi adipisci molestias perspiciatis qui doloribus,
	a in amet ex fugiat nobis harum doloremque rem neque omnis, esse iure. Aliquam, molestiae!</div>


	<!-- Adding a variable amount of lorem placeholder text -->
	<!-- .widget*5>lorem200 -->
	<div class="widget">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex aliquid dicta fugiat, beatae sit, ea mollitia fugit voluptas
	sunt voluptatem nulla. Earum iusto perspiciatis animi, error blanditiis aperiam quia laborum quos est et obcaecati nostrum
	numquam, perferendis deleniti amet maiores, libero, commodi atque architecto porro culpa debitis! Nam maiores unde cumque
	facere odio sint ratione repellat delectus, sapiente temporibus, eligendi ipsa, mollitia optio ullam, laborum architecto
	ipsam. Ipsa saepe voluptatem tempora, inventore repellat consequatur quas illo minima, tenetur ex magni sunt perferendis
	reiciendis debitis tempore? Accusamus nisi unde fuga, quisquam amet commodi aliquam dignissimos pariatur, quidem ut perspiciatis
	animi quasi vero odit optio. Facere aperiam praesentium architecto deleniti quos error quibusdam sint inventore placeat
	corrupti voluptatibus temporibus doloribus animi laboriosam non sit aliquid magnam aut, dolore enim id ipsum? Repellendus,
	deleniti earum illum atque eius animi. Eius ipsum eveniet velit, doloribus ea ducimus nostrum sequi, distinctio nesciunt
	fuga excepturi exercitationem possimus illum et pariatur accusamus magni! Magnam nobis odio iusto adipisci, aperiam veniam
	ipsum voluptate in deserunt natus ex iste facere soluta, earum vitae. Velit perferendis, iusto expedita doloribus, provident
	ipsam officia fugiat qui, nihil temporibus et! Deserunt accusamus accusantium cupiditate blanditiis enim tempora! Veniam
	ea repudiandae doloremque totam, in.</div>
	<div class="widget">Dignissimos quaerat, in ad. Impedit labore, consequuntur voluptate dolore eveniet, laboriosam et harum velit eum totam,
	voluptatum voluptatem ad dicta tenetur expedita quo sapiente, voluptatibus saepe. Nemo ipsam, ea adipisci animi deserunt
	cum cumque, esse nam explicabo eveniet unde quas quo earum optio dicta. Tempora asperiores architecto accusantium debitis
	labore tenetur, dolorum libero culpa laborum, fugiat molestiae exercitationem facere et! Delectus expedita dolor enim
	aliquam, culpa, cum sit at doloribus pariatur repellendus. Neque, voluptatibus vero possimus consequuntur eius ea id.
	Numquam reprehenderit perspiciatis omnis vero ex quidem porro magnam, excepturi, consectetur incidunt eveniet nemo voluptatem
	ratione mollitia assumenda culpa officia in deleniti sit adipisci minima eligendi dignissimos rerum. Suscipit sunt nesciunt
	laudantium! Voluptatibus vitae in incidunt, possimus modi soluta unde. Officiis qui vitae adipisci doloremque aperiam
	ex aut ipsa dignissimos, dolores atque, laboriosam omnis harum soluta odit incidunt numquam. Maiores fugit unde provident
	quas, harum, libero eos atque excepturi deleniti hic laudantium ducimus laboriosam consequatur iste saepe vero odit ut
	maxime cupiditate neque commodi cum. Minus quidem laboriosam perferendis nihil quisquam, impedit beatae nostrum adipisci,
	neque iure, saepe distinctio quaerat molestias! Fuga libero assumenda accusantium sunt inventore in suscipit, quibusdam
	quos vel velit expedita aperiam ducimus, debitis necessitatibus, corporis molestias.</div>
	<div class="widget">Veniam aliquam, obcaecati quod. Vero molestias non nobis temporibus expedita explicabo magni tenetur iure optio vitae error
	delectus architecto corrupti dolor, alias similique. Incidunt distinctio pariatur laboriosam laudantium, earum unde voluptate
	magni voluptatum quam magnam, voluptates. Dignissimos modi ducimus error doloremque sapiente temporibus, odit, ipsa fuga
	cumque quibusdam incidunt aliquid consectetur pariatur enim, ad itaque tenetur. Saepe, deserunt, eveniet. Labore amet,
	harum maxime illum eius debitis delectus quidem doloribus nulla, culpa pariatur, eos alias eligendi similique dignissimos
	est aperiam blanditiis officiis ipsa eum cum placeat veniam enim minima. Nesciunt quaerat repellat nisi libero quas provident
	officia animi nam, minima quam in, at, eius. Perferendis eligendi, adipisci magnam accusamus voluptatum dolor totam quidem,
	voluptates sed perspiciatis repellat! Hic repellendus eaque deleniti enim, omnis maxime deserunt aut laborum earum quo
	voluptatum dicta excepturi temporibus reiciendis totam exercitationem debitis dolor ipsum non quaerat unde, quas beatae
	nihil voluptates! Nobis rem exercitationem consectetur quasi omnis inventore mollitia delectus aperiam nisi dolorem enim
	esse ex quas et, odit doloremque ad odio animi voluptatibus sapiente cumque, consequatur, praesentium numquam! Magni,
	ratione inventore eum eos dignissimos omnis ipsum modi sapiente deleniti, molestias, hic molestiae ipsa porro voluptate
	sequi quae! A, aliquid nisi excepturi aut iusto voluptate voluptates.</div>
	<div class="widget">Dignissimos, autem explicabo illum molestias laborum asperiores deserunt commodi ea unde eius mollitia aliquid corrupti
	quo tempora neque reprehenderit sit impedit doloremque voluptate praesentium quisquam. Numquam illo debitis, explicabo
	esse at! Nemo fugit quo eaque et odit sapiente dolor, repellendus expedita aliquam dicta. Maxime officiis quam aspernatur
	dolores quia, ut beatae quibusdam nihil nobis quos dicta quaerat aliquid repudiandae, impedit porro similique dolor neque
	error molestias animi sit reiciendis eaque. Dolores accusamus aperiam eligendi ullam aspernatur neque omnis dignissimos
	placeat distinctio quisquam quo modi quibusdam sapiente, iusto, assumenda necessitatibus recusandae ipsam vitae suscipit
	natus at ad! Sed esse, delectus quisquam ad, impedit modi odit doloribus reiciendis neque cumque minima corporis obcaecati
	odio voluptate rem reprehenderit dolores ut maiores quas possimus, in commodi! Quo est pariatur sed amet numquam consequatur
	neque error deleniti quasi, rerum cupiditate maiores, a praesentium. Tempora ducimus similique voluptas quisquam. Delectus
	libero iure unde accusantium quasi aut non, sint velit suscipit eligendi exercitationem laborum inventore. Doloremque
	eaque odio nam qui, veritatis laborum enim aliquid suscipit cupiditate dolorum animi, sit blanditiis dolores obcaecati
	minima. Suscipit, maiores tempora libero? Error pariatur, corrupti praesentium dolorem iusto quidem numquam. Labore velit
	at fuga aliquid ullam quos maiores doloremque libero ex, quibusdam!</div>
	<div class="widget">Mollitia, aut cumque. Sunt quaerat adipisci consequatur ratione numquam voluptatibus iusto eius, deserunt ab placeat, quae
	perferendis nihil labore, illum asperiores aut odio culpa dolorum tempore quod repellendus laudantium, nam accusamus.
	Nemo atque dolorem, eveniet necessitatibus quasi nam accusantium deserunt delectus quo libero ducimus suscipit aperiam
	consequatur, ipsa pariatur debitis, totam, ipsam rem ipsum aspernatur expedita eos odit dolores placeat. Perspiciatis,
	quis! Ipsa ipsum aliquam odit! Vel autem recusandae, dolore, voluptatem placeat consequuntur cumque facilis? Nobis tenetur,
	incidunt reprehenderit? Mollitia quod ex dicta voluptates quisquam velit, voluptate nisi asperiores nulla consequuntur
	aut, voluptatum repellendus voluptas voluptatibus sit laboriosam, sequi blanditiis adipisci non. Facilis tempora officia
	sed officiis. Quasi ullam neque reprehenderit blanditiis nemo quisquam quam, aut officiis cupiditate, ad et molestiae
	quia illum! Facere sunt suscipit deleniti laudantium nesciunt consectetur earum, a dicta nemo aliquam vitae, incidunt
	cumque aliquid molestiae! Officia enim neque repellendus reprehenderit similique dolores vero incidunt possimus culpa,
	maxime, earum alias voluptate animi architecto necessitatibus totam itaque ratione, numquam quo debitis delectus consectetur.
	Nulla sint adipisci quidem pariatur similique fugiat at id veritatis distinctio facilis, aspernatur molestiae laudantium
	inventore velit aut tenetur doloremque possimus laboriosam voluptatem explicabo placeat assumenda labore minus exercitationem
	omnis! Quis sapiente officia eos!</div>


	<!-- Creating a div with a class -->
	<!-- .container -->
	<div class="container"></div>

	<!-- div.container -->
	<div class="container"></div>

	<!-- span.featured -->
	<span class="featured"></span>


	<!-- Adding Text -->
	<!-- .container>.featured>h1{Hi there} -->
	<div class="container">
	<div class="featured">
	<h1>Hi there</h1>
	</div>
	</div>

	<!-- Adding attributes -->
	<!-- .img-wrapper>img[src="featured.jpg"] -->
	<div class="img-wrapper"><img src="featured.jpg" alt=""></div>

	<!-- .img-wrapper>img[src="featured.jpg" alt="Featured Homepage Image"] -->
	<div class="img-wrapper"><img src="featured.jpg" alt="Featured Homepage Image"></div>

	<!-- .img-wrapper>img[src="featured.jpg" alt="Featured Homepage Image" special-attr="Something Else"] -->
	<div class="img-wrapper"><img src="featured.jpg" alt="Featured Homepage Image" special-attr="Something Else"></div>

	<!-- React button event -->
	<!-- button[onClick={activateSidebar}]{Show Sidebar} -->
	<button onClick={activateSidebar}>Show Sidebar</button>

	<!-- Adding classes to custom tags -->
	<!-- nav.nav-wrapper -->
	<nav class="nav-wrapper"></nav>

	<!-- Grouping elements -->
	<!-- .container>(.hero+.content-wrapper+ul>li*10) -->
	<div class="container">
	<div class="hero"></div>
	<div class="content-wrapper"></div>
	<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
	</div>

	<!-- Numbering -->
	<!-- ul>li.bullet-list$*7 -->
	<ul>
	<li class="bullet-list1"></li>
	<li class="bullet-list2"></li>
	<li class="bullet-list3"></li>
	<li class="bullet-list4"></li>
	<li class="bullet-list5"></li>
	<li class="bullet-list6"></li>
	<li class="bullet-list7"></li>
	</ul>

	<!-- Auto import stylesheets -->
	<!-- link -->
	<link rel="stylesheet" href="main.css">

	<!-- Links -->
	<!-- a -->
	<a href="https://google.com"></a>

	<!-- a[href="https://google.com"]{Google} -->
	<a href="https://google.com">Google</a>

	</body>

	</html>