Excercise 8 CSS (SIDE BAR NAVIGATION) HTML
Home
Hi my name is Excekel Cabarloc I'm a Freelance Videographer and Graphic Designer
Portfolio
Profile
HI! I'm
Excekel Cabarloc
Aspiring Videographer and Graphic Designer, I'm currently 3rd year Multimedia Arts student in University of Perpetual Help Molino.
Digital arts
I make my own digital art and vector art I posted it on my instagram account
Photography
Itake pictures in event like Debut and Wedding
Video and Film Productions
I have some short film in my youtube channel
You Can contact me Via Instagram: KVNFVZED
link
...
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;
}
No comments:
Post a Comment