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