HTML KODLARI
Navbar Try ...
TITLE HEADING
Title description, Dec 7, 2017
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
TITLE HEADING
Title description, Sep 2, 2017
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
CSS KODLARI
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/* navbar */
.nav {
height: 100%;
width: 15%;
position: fixed;
float: left;
top: 0;
left: 0;
background-color: #111111;
padding-top: 100px;
}
.nav li {
list-style: none;
position: absolute;
top: 45%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);;
}
.nav a {
line-height: 50px;
text-align: center;
text-decoration: none;
z-index: 1;
overflow-x: hidden;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.4s;
}
.nav a:hover {
background-color: #ffffff;
color: #111111;
transition: 0.4s;
}
.avatar {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100px;
height: 100px;
border-radius: 50%;
}
.avatar:hover {
opacity: 0.8;
}
h1 {
position: absolute;
font-size: 16px;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ffffff;
}
h1:hover {
opacity: 0.8;
}
/* main */
.wrapper {
position: absolute;
height: 100%;
width: 85%;
color: #ffffff;
background: #ccccccE3;
}
.main {
float: right;
}
