<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Sidebar Navigation Exercise</title>
<link rel="stylesheet" href="Exercise 008 CSS codes.css">
</head>
<body>
<section id="home"></section>
<div class="header">
<div class="header-text">
<h1 style="font-family: Monotype Corsiva; font-size: 75px;"> ♦ Vanhl's Inktober ♦ </h1>
</div>
</div>
<div class="sidenav">
<a href="#home">HOME</a>
<a href="#about">About</a>
<a href="#inktober">Inktober</a>
<a href="#inktoberrules">Inktober Rules</a>
<a href="#inktoberarts">Vanhl's Inktober Arts</a>
<a href="#vanhllinks">Vanhl's Portfolios</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<section id="about"></section>
<p> <b> ♦ About </b> </p>
<a href="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" target="_blank">
<img class="photo1" src="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" alt="Raven short hair" title="Raven" style="float:right; width:200px; height:200px; margin-top: -15px;" hspace="30" vspace="15">
</a>
<p style="text-indent: 50px;"> This page serves as a portfolio for Vanhl's (a.k.a. Jil Yago) artworks. You can visit some of her webpages where she uploads most of her multimedia work. </p>
<section id="inktober"></section>
<p> <b> ♣ What is Inktober? </b> </p>
<p style="text-indent: 50px;"> Inktober is a month long art challenge created by artist Jake Parker that is focused on improving skill and developing positive drawing habits. Every day for the month of October anyone participating in the Inktober challenge creates an ink drawing and posts it online. Remember to use the hashtags #inktober and #inktober2020 if you want your art to be seen by everyone. </p>
<p style="text-indent: 50px;"> Read more by clicking <a href="https://inktober.com/faq#:~:text=A%3A%20Inktober%20is%20a%20month,drawing%20and%20posts%20it%20online." target="_blank"> here! </a> </p>
<section id="inktoberrules"></section>
<p> <b> ♠ Rules of Inktober </b> </p>
<p style="text-indent: 50px;"> The rules for Inktober are to create a drawing in ink every day for the whole of October, and then share it. You don't have to share it online, although if you want to, use the hashtags #inktober and #inktober2020. You can follow the prompts provided or create your own. </p>
<section id="inktoberarts"></section>
<fieldset>
<p> <b> ♥ Vanhl's Inktober Arts </b> </p>
<p style="text-indent: 50px;"> Here are some of Vanhl's personal favorite Inktober Artworks. You can check out more of her Inktober arts by clicking the links below the page. </p>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/EjfPKf3UYAAYqle?format=png&name=large">
<img src="https://pbs.twimg.com/media/EjfPKf3UYAAYqle?format=png&name=large" alt="Inktober Day 4-Radio" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 4 - Radio</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/Ej3rS5XUYAE66GR?format=png&name=large">
<img src="https://pbs.twimg.com/media/Ej3rS5XUYAE66GR?format=png&name=large" alt="Inktober Day 9-Throw" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 9 - Throw</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/Ej9oyv_UYAY0R7d?format=png&name=large">
<img src="https://pbs.twimg.com/media/Ej9oyv_UYAY0R7d?format=png&name=large" alt="Inktober Day 10-Hope" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 10 - Hope</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/EkRYMlmUwAAGRgy?format=png&name=large">
<img src="https://pbs.twimg.com/media/EkRYMlmUwAAGRgy?format=png&name=large" alt="Inktober Day 14-Armor" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 14 - Armor</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/EkrlIx4VMAA50rw?format=png&name=large">
<img src="https://pbs.twimg.com/media/EkrlIx4VMAA50rw?format=png&name=large" alt="Inktober Day 19-Dizzy" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 19 - Dizzy</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/Ek11VwFUUAEBpKm?format=png&name=large">
<img src="https://pbs.twimg.com/media/Ek11VwFUUAEBpKm?format=png&name=large" alt="Inktober Day 21-Sleep" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 21 - Sleep</div>
</div>
</fieldset>
<section id="vanhllinks"></section>
<p> <b> ◙ Check out Vanhl's Portfolios </b> </p>
<p style="text-indent: 50px;"> <a href="https://ravenrose73.weebly.com/" target="_blank"> • Raven Rose </a> </p>
<p style="text-indent: 50px; margin-top: -10px;"> <a href="https://jpgyago-mmaeducworks.weebly.com/" target="_blank"> • JPGY MMA Works </a> </p>
</div>
<section id="contact"></section>
<footer id="footer">
<p> <b> ◘ Contact </b> </p>
<p style="text-indent: 50px;"> • E-mail: [email protected] </p>
<p style="text-indent: 50px; margin-top: -10px;"> • Contact no: 0123 456 7890 </p>
<p style="text-indent: 50px; font-size: 12px;"> <i> All rights reserved 2021 </i> </p>
</footer>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Sidebar Navigation Exercise</title>
<link rel="stylesheet" href="Exercise 008 CSS codes.css">
</head>
<body>
<section id="home"></section>
<div class="header">
<div class="header-text">
<h1 style="font-family: Monotype Corsiva; font-size: 75px;"> ♦ Vanhl's Inktober ♦ </h1>
</div>
</div>
<div class="sidenav">
<a href="#home">HOME</a>
<a href="#about">About</a>
<a href="#inktober">Inktober</a>
<a href="#inktoberrules">Inktober Rules</a>
<a href="#inktoberarts">Vanhl's Inktober Arts</a>
<a href="#vanhllinks">Vanhl's Portfolios</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<section id="about"></section>
<p> <b> ♦ About </b> </p>
<a href="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" target="_blank">
<img class="photo1" src="https://pbs.twimg.com/profile_images/1375326947333435395/Sl8QGch0_400x400.jpg" alt="Raven short hair" title="Raven" style="float:right; width:200px; height:200px; margin-top: -15px;" hspace="30" vspace="15">
</a>
<p style="text-indent: 50px;"> This page serves as a portfolio for Vanhl's (a.k.a. Jil Yago) artworks. You can visit some of her webpages where she uploads most of her multimedia work. </p>
<section id="inktober"></section>
<p> <b> ♣ What is Inktober? </b> </p>
<p style="text-indent: 50px;"> Inktober is a month long art challenge created by artist Jake Parker that is focused on improving skill and developing positive drawing habits. Every day for the month of October anyone participating in the Inktober challenge creates an ink drawing and posts it online. Remember to use the hashtags #inktober and #inktober2020 if you want your art to be seen by everyone. </p>
<p style="text-indent: 50px;"> Read more by clicking <a href="https://inktober.com/faq#:~:text=A%3A%20Inktober%20is%20a%20month,drawing%20and%20posts%20it%20online." target="_blank"> here! </a> </p>
<section id="inktoberrules"></section>
<p> <b> ♠ Rules of Inktober </b> </p>
<p style="text-indent: 50px;"> The rules for Inktober are to create a drawing in ink every day for the whole of October, and then share it. You don't have to share it online, although if you want to, use the hashtags #inktober and #inktober2020. You can follow the prompts provided or create your own. </p>
<section id="inktoberarts"></section>
<fieldset>
<p> <b> ♥ Vanhl's Inktober Arts </b> </p>
<p style="text-indent: 50px;"> Here are some of Vanhl's personal favorite Inktober Artworks. You can check out more of her Inktober arts by clicking the links below the page. </p>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/EjfPKf3UYAAYqle?format=png&name=large">
<img src="https://pbs.twimg.com/media/EjfPKf3UYAAYqle?format=png&name=large" alt="Inktober Day 4-Radio" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 4 - Radio</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/Ej3rS5XUYAE66GR?format=png&name=large">
<img src="https://pbs.twimg.com/media/Ej3rS5XUYAE66GR?format=png&name=large" alt="Inktober Day 9-Throw" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 9 - Throw</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/Ej9oyv_UYAY0R7d?format=png&name=large">
<img src="https://pbs.twimg.com/media/Ej9oyv_UYAY0R7d?format=png&name=large" alt="Inktober Day 10-Hope" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 10 - Hope</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/EkRYMlmUwAAGRgy?format=png&name=large">
<img src="https://pbs.twimg.com/media/EkRYMlmUwAAGRgy?format=png&name=large" alt="Inktober Day 14-Armor" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 14 - Armor</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/EkrlIx4VMAA50rw?format=png&name=large">
<img src="https://pbs.twimg.com/media/EkrlIx4VMAA50rw?format=png&name=large" alt="Inktober Day 19-Dizzy" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 19 - Dizzy</div>
</div>
<div class="gallery">
<a target="_blank" href="https://pbs.twimg.com/media/Ek11VwFUUAEBpKm?format=png&name=large">
<img src="https://pbs.twimg.com/media/Ek11VwFUUAEBpKm?format=png&name=large" alt="Inktober Day 21-Sleep" width="234" height="312.5">
</a>
<div class="desc">Inktober Challenge Day 21 - Sleep</div>
</div>
</fieldset>
<section id="vanhllinks"></section>
<p> <b> ◙ Check out Vanhl's Portfolios </b> </p>
<p style="text-indent: 50px;"> <a href="https://ravenrose73.weebly.com/" target="_blank"> • Raven Rose </a> </p>
<p style="text-indent: 50px; margin-top: -10px;"> <a href="https://jpgyago-mmaeducworks.weebly.com/" target="_blank"> • JPGY MMA Works </a> </p>
</div>
<section id="contact"></section>
<footer id="footer">
<p> <b> ◘ Contact </b> </p>
<p style="text-indent: 50px;"> • E-mail: [email protected] </p>
<p style="text-indent: 50px; margin-top: -10px;"> • Contact no: 0123 456 7890 </p>
<p style="text-indent: 50px; font-size: 12px;"> <i> All rights reserved 2021 </i> </p>
</footer>
</body>
</html>