EXERCISE 8 (SIDE BAR NAVIGATION )
Home
Hi my name is John Lerry Delos Angeles I'm a Frelance Graphic Designer
Portfolio
Profile
HI! I'm
John Lerry Delos Angeles Aspiring 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
Photography
Itake pictures in event like Debut and Wedding
Video and Film Productions
I have some short film in my Facebook account
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;
}
Comments
Post a Comment