EXERCISE 8 WEB PROGRAMING NAVIGATION BAR

-

 PORFOLIO



PROFILE



CONTACT




CODES FOR HTML:

<!DOCTYPE html>



<html lang="en" dir="ltr">

  <head>
<header>
  <h1> Exercise 8 CSS Sidebar navigation</h1>
    </header>
    <meta charset="utf-8">

   

    <link rel="stylesheet" href="SIDBAR.CSS">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <script>

      $(document).ready(function(){

        $('i').click(function(){

          $('ul').toggleClass('ul_show');

          $('section').toggleClass('slide_image');

        });

        $('li').click(function(){

          $(this).addClass('active').siblings().removeClass('active');

        });

      });



    </script>



  </head>

  <body>

    <ul>

<li class="active"><a href="#">Home</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#profile">Profile</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#link">Link</a></li>

</ul>

<section>

      <i class="fas fa-bars"></i>

      <div class="sec1">

</div>

<h2 id="Home">

Home</h2>
  <h1></h1>           <a href="https://scontent.fmnl4-3.fna.fbcdn.net/v/t1.6435-9/168782967_1073603933163564_3897033777679195094_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=8bfeb9&_nc_eui2=AeE_hoE43jsa1swe5zdsaqJWRXXUxLbls-pFddTEtuWz6qnJ6KN4mG9bVGdPloL8bOKaFCLwA6g-DBXu2dYsSABp&_nc_ohc=c_tkkJb1GDMAX_I-D7Z&_nc_ht=scontent.fmnl4-3.fna&oh=fbf73100fc87b6d28fca8f40d7c3eba0&oe=60BB39AC" height="700" width="1520"></a><br>
  <H1>HI! WHATS UP? MY NAME IS EMMANUEL UBALDO, YOU CAN CALL ME EMMAN I'M A FREELANCE DIGITAL ARTIST AND ILLUSTRATOR YOU CAN COUNT ON ME ANYTIME!</h1>

<div class="sec2">

</div>

<h2 id="portfolio">

Portfolio</h2>

<p>

 </p>
  <div id="imagelist">
  <a href="https://ibb.co/0JCkn7j"><img src="https://scontent.fmnl4-6.fna.fbcdn.net/v/t1.6435-9/176778211_1083254432198514_7061515951481960304_n.jpg?_nc_cat=108&ccb=1-3&_nc_sid=730e14&_nc_eui2=AeE3GSkEnZ0vZz3TL6Kdxiw6Tc-glHHVSZ5Nz6CUcdVJnjc4NEXGiiIZPS6meAshsKmRCKtueIui1mhQ2Rm-m18Y&_nc_ohc=4d0YehCqFTQAX81lj_D&_nc_ht=scontent.fmnl4-6.fna&oh=3325a8eb7e30bf0ee64e3e7f6d4c5776&oe=60BBDB45" alt="ANGEL" height="300" width="auto"></a>
   <a href="https://ibb.co/0JCkn7j"><img src="https://scontent.fmnl4-4.fna.fbcdn.net/v/t1.6435-9/150047686_1044392272751397_2263627438026067143_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=730e14&_nc_eui2=AeHtKB0STAN8XwTjFofz8Dhw6eEd2nH1nhHp4R3acfWeEXZML9F1rVpKQeJhkRlHOwuGuy4UNckkI96K_NnJm-wl&_nc_ohc=tJmccQOOO5AAX9Ygp9m&_nc_oc=AQlqUwBVYrr_H_iN65DzIbr8HvwmlWX41I7FoNII8YUxWuEkqZI5I9-gdPS3vkzvfqo&_nc_ht=scontent.fmnl4-4.fna&oh=df3fcd34856d26a6c3d5ddca8d847a88&oe=60BA8528" alt="killjoy" height="300" width="auto"></a>
    <a href="https://ibb.co/0JCkn7j"><img src="https://scontent.fmnl4-3.fna.fbcdn.net/v/t1.6435-9/168782967_1073603933163564_3897033777679195094_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=8bfeb9&_nc_eui2=AeE_hoE43jsa1swe5zdsaqJWRXXUxLbls-pFddTEtuWz6qnJ6KN4mG9bVGdPloL8bOKaFCLwA6g-DBXu2dYsSABp&_nc_ohc=c_tkkJb1GDMAX_I-D7Z&_nc_ht=scontent.fmnl4-3.fna&oh=fbf73100fc87b6d28fca8f40d7c3eba0&oe=60BB39AC" alt="DRAGON" height="300" width="auto"></a><br>
   <a href="https://ibb.co/0JCkn7j"><img src="https://scontent.fmnl4-2.fna.fbcdn.net/v/t1.6435-9/160717144_1060963257760965_2837933381773745912_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=09cbfe&_nc_eui2=AeEl2MBvhO7VgYk42o7QKxInrAD6cI1EKxWsAPpwjUQrFRYDt2_jGQJWqOpWhbaTCGDL9f2iQN2ylI_CENEERiqo&_nc_ohc=TpvV9jh8Na4AX93I-VP&_nc_ht=scontent.fmnl4-2.fna&oh=c85a0c6e6eb3a58c0f9e4188eadb687e&oe=60BAFFDA" alt="EMMAN" height="300" width="auto"></a>
     <a href="https://ibb.co/0JCkn7j"><img src="https://scontent.fmnl4-2.fna.fbcdn.net/v/t1.6435-9/117386868_907203619803597_1096314795794392660_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=8bfeb9&_nc_eui2=AeEdFP3xjnZKaXp13Mevd7hjHJenTWiKSBccl6dNaIpIF-a3XDWptZzDVCgMLJK4m6bcsai6h2F_wSMC5apUi7A3&_nc_ohc=mBiZ0rIugpoAX-k4soM&_nc_ht=scontent.fmnl4-2.fna&oh=66eb75f40e1dab9b906e0188c47468f7&oe=60BC51A8" alt="CODM"  height="300" width="auto"></a>
    <a href="https://ibb.co/0JCkn7j"><img src="https://scontent.fmnl4-6.fna.fbcdn.net/v/t1.6435-9/118820388_925680891289203_6799139428414115988_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=8bfeb9&_nc_eui2=AeHd8MnAc8ARxD2-EkFTFXGNCng2Dhl_u4YKeDYOGX-7hjzIgJU0jeLpCL08sEMU-5FfKiWXRhx93OS_v7nY3Xt_&_nc_ohc=lCOUIFPiw_kAX8fcZ81&_nc_ht=scontent.fmnl4-6.fna&oh=71c87afebb732a405bf428f3e8a05dfe&oe=60B95227" alt="GJ3" height="300" width="auto"></a>

<div class="sec3">

</div>

<h2 id="profile">

Profile</h2>
  <br> <a href="https://ibb.co/0JCkn7j"><img src="https://scontent.fmnl4-2.fna.fbcdn.net/v/t1.6435-9/160717144_1060963257760965_2837933381773745912_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=09cbfe&_nc_eui2=AeEl2MBvhO7VgYk42o7QKxInrAD6cI1EKxWsAPpwjUQrFRYDt2_jGQJWqOpWhbaTCGDL9f2iQN2ylI_CENEERiqo&_nc_ohc=TpvV9jh8Na4AX93I-VP&_nc_ht=scontent.fmnl4-2.fna&oh=c85a0c6e6eb3a58c0f9e4188eadb687e&oe=60BAFFDA" alt="DSC-0041" width="400"height="auto" margin="10"></a><br>
<p>HI!  <h1>EMMONZTAH ON THE HOUSE!</h1><br> Been drawing ever since I was a kid and now I'm capable of illustrating what you vision sees so contact me anytime! </p><br>
 <li> PORTRAITS   
  <p> When illustrating faces im the man on job i love drawing portraits because you can appreciate more the beauty of the person.</p><br>
<li> video games!
  <p> Being an artist im not that far off in loving video games, because that's where the joy of imaginations kick in , so if you want to play with me i can boost you up! </p><br>
<li> Digital arts
  <p>I was more traditional artist back in day , mainly because I have no money to buy some stuff in digital arts, furtunately i was given a chance to have some digital art equipments and I gotta say all that grinding in paper and pencil really helped out.</p>
    
    
    

<div class="sec4">

</div>

<h2 id="contact">

Contact</h2>

<h2>you can email me via gmail: Emmnbu@gmail.com </h2>
  <h2>FOLLOW ME ON INSTAGRAM!</h2>

  <h2>Instagram: @EMMONZTAH</h2>

<div class="sec5">

</div>

<h2 id="link">

link</h2>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Add font awesome icons -->
<a href="https://www.facebook.com/profile.php?id=100015419016635" class="fa fa-facebook"></a>
<a href="#" class="fa fa-youtube"></a>
...
          <p> <a 
<div class="sec6">

</div>
 <footer>
            &copy; 2021 | EMMONZTAH
    </footer>
</div>

</section>



  </body>

</html> 




                                                    CODES FOR CSS:

{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
body {
  font-family: 'Courier New', monospace;
  background-color: #99e6b3;
}
.sidebar {
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #20b2aa;
  transition: all .5s ease;
}
.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #40e0d0;
  user-select: none;
}
.sidebar ul a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: white;
  padding-left: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-top: 1px solid rgba(255,255,255,.1);
  transition: .4s;
}
ul li:hover a{
  padding-left: 50px;
}
.sidebar ul a i{
  margin-right: 16px;
}
#check{
  display: none;
}
label #btn,label #cancel{
  position: absolute;
  background: #c97010;
  border-radius: 3px;
  cursor: pointer;
}
label #btn{
  left: 40px;
  top: 25px;
  font-size: 35px;
  color: white;
  padding: 6px 12px;
  transition: all .5s;
}
label #cancel{
  z-index: 1111;
  left: -195px;
  top: 17px;
  font-size: 30px;
  color: #0a5275;
  padding: 4px 9px;
  transition: all .5s ease;
}
#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  left: 250px;
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #cancel{
  left: 195px;
}
#check:checked ~ section{
  margin-left: 250px;
}
section{
  background: url(dex.jpg) no-repeat; 
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
}

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  font-family: montserrat;
}
ul{
  position: fixed;
  top: 0;
  left: 0;
  margin-left: -240px;
  width: 240px;
  background: #c97010;
  height: 100vh;
  overflow-y: auto;
  transition: all .3s;
}
ul li{
  height: 65px;
  outline: none;
}
ul li a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 70px;
  font-size: 20px;
  color: white;
  padding-left: 10%;
  background: #1e1e1e;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid black;
  border-left: 5px solid transparent;
}
li a.contact{
  border-bottom: 1px solid rgba(0,0,0,.5);
}
.active a{
  color: #B93632;
  border-left: 5px solid #B93632;
  background: #1B1B1B;
}
section{
  margin-left: 0px;
  transition: all .3s;
}
i{
  position: fixed;
  margin: 20px 25px;
  font-size: 40px;
  color: orangered;
  cursor: pointer;
}
.sec1{
  margin-left: -20px;
  background: url(dex.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec2{
  margin-left: -20px;
  background: url(lpc.png) no-repeat;
  background: url(low.png) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec3{
  margin-left: -20px;
  background: url(profile.png) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec4{
  margin-left: -20px;
  background: url(gallery.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec5{
  margin-left: -20px;
  background: url(services.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec6{
  margin-left: -20px;
  background: url(feedback.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.sec7{
  margin-left: -20px;
  background: url(contact.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
h2{
  font-size: 40px;
  padding: 15px 20px;
}
p{
  padding: 0 20px 10px 20px;
  text-align: justify;
}
.ul_show{
  margin-left: 0px;
}
.slide_image{
  margin-left: 260px;
}
.section{
  background: url(dex.jpg) no-repeat; 
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
} 
/* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-youtube {
  background: #55ACEE;
  color: white;
}
footer{
    clear:both;
}
*{box-sizing:border-box}
footer,header{background: #40e0d0; color: #fbfbfb; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; text-align: center; padding: 2em 0;}


Comments

Post a Comment

Popular posts from this blog

-
Image
W elcome To My Art Blog Portraits are works of art that record the likenesses of humans or animals that are alive or have been alive. The word  portraiture  is used to describe this category of art. The purpose of a portrait is to memorialize an image of someone for the future. It can be done with painting, photography, sculpture or almost any other medium. Some portraiture is also created by artists purely for the sake of creating art, rather than working on commission. The human body and face are fascinating subjects that many artists like to study in their personal work. Many artists also choose to do a "self-portrait." It is a work of art depicting the artist created by their own hand. These are typically made from a reference photo or by looking in a mirror. Self-portraits can give you a good sense of how an artist views themselves and, quite often, it is rather introspective. Some artists will regularly create self-...
Read more
-
Image
 REGISTRATION FORM <!DOCTYPE hmtl> <html>  <body>   <title>Form Element and Attributes</title> <style> //format and styles div{ margin-bottom:10px; } label{  display:inline-block; width:120px; } legend{ padding:20px0; font-size:20px; } </style> </head> <body> <form action="/form/submit" method="GET or POST" > <fieldset> <legend>Personal Information:</legend> <label for="fname">Name</label> <input type="text" placeholder="Enter Name" name="Name" id="fname"/><br/><br/> <label for="number">Phone</label> <input type="number" placeholder="Enter Number" name="Phone" id="number"/><br/><br/> <label for="email">Email</label> <input type="email" placeholder="Enter Email" name="email" requ...
Read more
-
Image
BASIC THINGS TO KNOW ABOUT PHOTOSHOP  HELLO MAAM! this is our group project FOR MIDTERM grp: SALO , DELA CRUZ, AGBIN , UBALDO  that includes  READ HEAR SEE  TALK ABOUT USE AND DO   
Read more