Skip to main content

Exercise 8: CSS Side Bar Navigation




CODE FOR HTML;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Sidebar Navigation Exercise</title>
<link rel="stylesheet" href="Exercise008webProgram2ChangeBut.css">
</head>

<body>

<section id="home"></section>
<div class="header">
<div class="header-text">
<h1 style="font-family: Consolas; font-size: 75px;"> My Artworks </h1>
</div>
</div>

<div class="sidenav">
<a href="#home">HOME</a>
<a href="#about">About</a>
<a href="#description">Desciption</a>
<a href="#contact">Contact</a>
</div>

<div class="main">
<section id="about"></section>
<p> <b> About </b> </p>
<p style="text-indent: 50px;">  Hi I'm Jillian Marren Dela Cruz. You can call me "Jill or Jillian" i'm currently 3rd year Multimedia Arts Student. 20 years of Age. I chose multimeida because i want to enchance my skills and i'm willing to learn about everything. If you will see my artworks please don't judge me and my Artworks.I'm still in the procesS and i'm currently practicing step by step. </p>
<section id="Desciption"></section>
<p> <b> My Artworks is all about; </b> </p>
<p style="text-indent: 50px;"> This is awareness for everybody. Not you saw happy are happy, they are suffered emotional and mentally tired. Be nice and be careful before you talk nonsense jokes to everybody. </p>
<fieldset>
<p> <b> This is My Digital Artwork </b> </p>
<div class="gallery">
<a target="_blank" href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/181107917_2898527137133225_4194638926678216196_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeEvAj1LLPaZ-hcYNDgrqLMttBR-f3jdBc-0FH5_eN0Fzzmnk6ajRpp3dzdoIsBv_xzEjgTxL_AqgStXwwY4NALI&_nc_ohc=Y2ft7-uFhNAAX80uCjh&_nc_ht=scontent.fmnl19-1.fna&oh=9088ab121248dfef10bdeb4189170176&oe=60BCFE53">
  <img src="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/181107917_2898527137133225_4194638926678216196_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeEvAj1LLPaZ-hcYNDgrqLMttBR-f3jdBc-0FH5_eN0Fzzmnk6ajRpp3dzdoIsBv_xzEjgTxL_AqgStXwwY4NALI&_nc_ohc=Y2ft7-uFhNAAX80uCjh&_nc_ht=scontent.fmnl19-1.fna&oh=9088ab121248dfef10bdeb4189170176&oe=60BCFE53" alt="Self-Worth" width="234" height="312.5">
</a>
<div class="desc">Self-Worth</div>
</div>
<div class="gallery">
<a target="_blank" href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/181351998_2898527160466556_8296395461694292544_n.jpg?_nc_cat=108&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeEUpx9qV1ZnLflJk67dxPDdIoMnHdj6KSAigycd2PopIIYL0zclyH2rqpKngjBkWHYKwdE7etdF-OlJ5rN1790z&_nc_ohc=4pfnvPpNjXUAX-vE8PF&_nc_ht=scontent.fmnl19-1.fna&oh=ac8442253ca67e3759939ead32deff2e&oe=60BD2AD9">
  <img src="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/181351998_2898527160466556_8296395461694292544_n.jpg?_nc_cat=108&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeEUpx9qV1ZnLflJk67dxPDdIoMnHdj6KSAigycd2PopIIYL0zclyH2rqpKngjBkWHYKwdE7etdF-OlJ5rN1790z&_nc_ohc=4pfnvPpNjXUAX-vE8PF&_nc_ht=scontent.fmnl19-1.fna&oh=ac8442253ca67e3759939ead32deff2e&oe=60BD2AD9" alt="Lack of Self Confidence" width="234" height="312.5">
</a>
<div class="desc">Lack of Self Confidence</div>
</div>
<div class="gallery">
<a target="_blank" href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/182256968_2898527213799884_7216999126671459456_n.jpg?_nc_cat=102&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeFcm1h2PK0EqAZWR_wWHh8jBRRJknu-p9gFFEmSe76n2BcWMZ48YO3McRiiqsQNi-rN8kGxGhfv4_i9eo3yMORz&_nc_ohc=YqB9LxbLG_8AX_ywEr3&_nc_ht=scontent.fmnl19-1.fna&oh=122ce9df1135323e4acd6f395993a934&oe=60BC297F">
  <img src="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/182256968_2898527213799884_7216999126671459456_n.jpg?_nc_cat=102&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeFcm1h2PK0EqAZWR_wWHh8jBRRJknu-p9gFFEmSe76n2BcWMZ48YO3McRiiqsQNi-rN8kGxGhfv4_i9eo3yMORz&_nc_ohc=YqB9LxbLG_8AX_ywEr3&_nc_ht=scontent.fmnl19-1.fna&oh=122ce9df1135323e4acd6f395993a934&oe=60BC297F" alt="Blameless" width="234" height="312.5">
</a>
<div class="desc">Blameless<div>
</div>
</div>
</fieldset>
<section id="artworks"></section>
<p> <b> My Digital Artworks Link </b> </p>
<p style="text-indent: 50px;"> <a href="https://www.instagram.com/intheprocess_jillian/?hl=en" target="_blank"> My Instagram </a> </p>
</div>

<section id="contact"></section>
<footer id="footer">
<p> <b> Contact </b> </p>
<p style="text-indent: 50px;"> • E-mail: jilldelacruz26@gmail.com </p>
</footer>

</body>
</html>

CODE FOR CSS;

* {
box-sizing: border-box;
}

body, html {
height: 100%;
min-height: 100vh;
margin: 0;
position: relative;
font-family: "Consolas";
background-repeat: no-repeat;
padding-bottom: 30px;
}

.header {
background-color: #f4a9a9;
height: 38%;
background-position: 50% 39.5%;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 30px
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #cbc6dc;
overflow-x: hidden;
padding-top: 20px;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #9e9e9e;
display: block;
}

.sidenav a:hover {
color: #ffffff;
}

div.gallery {
margin: 3px;
border: 1px solid #ccc;
float: left;
width: 200px;
}

div.gallery:hover {
border: 1px solid #700;
}

div.gallery img {
width: 100%;
height: auto;
}
div.desc {
color: #000000;
padding: 15px;
text-align: center;
}

fieldset {
border: 0;
padding: 0;
}

#container {
min-height: 100%;
}
.main {
margin-left: 168px;
margin-right: 30px;
font-size: 20px;
padding: 0px 10px;
text-align: justify;
}
#footer {
margin-left: 158px;
font-size: 20px;
padding-top: 1px;
padding-left: 20px;
position: relative;
height: 200px;
clear: both;
color: #000000;
background-color: #f4a9a9;
}

img.photo1 {
border-radius: 60%;
border: 5px solid #000000;
}




 

Comments

Post a Comment

Popular posts from this blog

Exercise 10: Animation (Finals Web Prog)

(Code for HTML:) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exercise 010 Animated Web page</title> <link rel="stylesheet" href="Exercise10AnimatedWebpage.css"> </head> <body> <div> <h1 style="font-size:40px;"> ABOUT MYSELF  </h1> </div> <br> <br> <br> <br> <br> <br> <br> <br>  <p style="text-align: justify; text-indent: 50px;">  Hi I'm Jillian Marren Dela Cruz. You can call me "Jill or Jillian" i'm currently 3rd year Multimedia Arts Student. 20 years of Age. I chose multimeida because i want to enchance my skills and i'm willing to learn about everything. I'm November Babies and My zodiac sign is Sagittarius. The Sagittarius Traits is Curious and energetic, Sagittarius is one of the biggest travelers among all...
Post a Comment
Read more

Exercise 12-14: Responsive Web Design, Tutorial Web Page and Activities Compilation

 PROJECT; Tutorial about how to do the Exercise 7: Select Box Price List First the Html code for this exercise is put the usually code the "<!DOCTYPE html> <html> <head>"  if you don't put this usually code then your labored to be made is nonsense so you need this and we will go to put this meta name "<meta name="viewport" content="width=device-width, initial-scale=1">" and the Title of what exercise are you doing like this "<title>Exercise 007: JavaScript Selected Value</title>"  and also you will link this html to the .css code or file like this  "<link rel="stylesheet" href="Exercise007SelectedValueinte2.css"> </head>" Next we will go to the main exercise that we will do how to do the Price List  don't forget the body "<body>" and like the title the main font of this exercise "<h1 class="font1"> Products & Pr...
Post a Comment
Read more

Image

<!DOCTYPE html> <html> <head> <style> header { position:fixed; font-family: 'Arial Black'; top:0px; left:0px; width:98%; height:10%; color:#FFFFFF; background-color: #CBC6DC; background-repeat: no-repeat; background-attachment: fixed; background-size: 200% 50%; font-size: 50px; padding:15px; } footer {   text-align: center;   padding-top:20px;   padding-right: 200px;   padding-bottom: 700px;   padding-left: 325px;   background-color: #FFFFF;   color: black;   font-size: 12px;   width: 500px; }  body { background-image: url('jillian.jpg'); background-repeat: no-repeat; background-attachment: fixed;yy background-size: 100% auto; padding: 90px; color: white; font-family: "Arial Black"; font-size: 15px; text-align: center; } .frame1 { background-color: #CBC6DC; color: #FFFFFF; font-family: 'Arial Black'; margin-left: 0px; padding-top: 10px; padding: 10px; float: left; width: 517px; } .frame2 { backgr...
Post a Comment
Read more