Exercise 8 CSS Sidebar navigation
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Exercise 8 CSS Side bar navigation.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://ibb.co/fvtXQpJ"><img src="https://i.ibb.co/yS5NVy2/banner-image-portfolio-latest-camera.jpg" alt="banner-image-portfolio-latest-camera" height="400" width="auto"></a><br>
<H1>Hi my name is Adrian Guisihan I'm a Freelance photo and videographer</h1>
<div class="sec2">
</div>
<h2 id="portfolio">
Portfolio</h2>
<p>
</p>
<div id="imagelist">
<a href="https://ibb.co/BVtcfq6"><img src="https://i.ibb.co/N6stFZN/kiyo1.jpg" alt="kiyo1" height="300" width="auto"></a>
<a href="https://ibb.co/1RJvwbf"><img src="https://i.ibb.co/dkJWz70/rikkaasa.png" alt="rikkaasa" height="300" width="auto"></a>
<a href="https://ibb.co/LQTyZj6"><img src="https://i.ibb.co/GsZD5Yk/Adrian.jpg" alt="Adrian" height="300" width="auto"></a><br>
<a href="https://ibb.co/q1kNJxV"><img src="https://i.ibb.co/Yjpc0bw/DSC-0171-2.jpg" alt="DSC-0171-2" height="300" width="auto"></a>
<a href="https://ibb.co/850qF2H"><img src="https://i.ibb.co/Z8V5yK0/DSC-0173-3.jpg" alt="DSC-0173-3" height="300" width="auto"></a>
<a href="https://ibb.co/qCw4L06"><img src="https://i.ibb.co/PM8bsTk/DSC-0177-3.jpg" alt="DSC-0177-3" height="300" width="auto"></a>
<div class="sec3">
</div>
<h2 id="profile">
Profile</h2>
<br> <a href="https://ibb.co/0JCkn7j"><img src="https://i.ibb.co/F759hrb/DSC-0041.jpg" alt="DSC-0041" width="400"height="auto" margin="10"></a><br>
<p>HI! I'm <h1>Adrian Guisihan</h1><br> Aspiring photographer/videographer, I'm currently 3rd year Multimedia Arts student in University of Perpetual Help Molino. </p><br>
<li> Photography
<p> Itake pictures in events in School and also I tried taking pictures on a wedding</p><br>
<li> Video and Film Productions
<p> I have some short fils in my youtube channel and also I'm making highlight in game play</p><br>
<li> Digital arts
<p>I make my own digital art and vector art I posted it on my instagram account</p>
<div class="sec4">
</div>
<h2 id="contact">
Contact</h2>
<h2>You Can contact me Via facebook, Instagram and twitter or Follow me on twitter/Instagram: Adywooooow </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/adrian.guisihan.3" class="fa fa-facebook"></a>
<a href="#" class="fa fa-youtube"></a>
...
<p> <a
<div class="sec6">
</div>
</div>
</section>
</body>
</html>
CSS-----
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
body {
font-family: 'Roboto', sans-serif;
}
.sidebar {
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background: #042331;
transition: all .5s ease;
}
.sidebar header {
font-size: 22px;
color: white;
line-height: 70px;
text-align: center;
background: #063146;
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: #042331;
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: #1e1e1e;
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;
}
Comments
Post a Comment