Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- The font I chose for the links is Josefin Sans, I've included the google fonts code for it.
- The colors are labeled as black and grey.
- When applying this to your theme, I put it in my 435px box. Also, you will need to add a margin-left to this area of coding for your layout: .mygen { Background Properties }
- Example:
- .mygen { Background Properties }
- table, tr, td { background-color:transparent; border:none; border-width:0;}
- body {
- background-color:000000;
- background-image:url(https://i.imgur.com/26GSIbU.jpg);
- background-attachment: fixed;
- background-position:center center;
- background-repeat:no-repeat;
- margin-left: 75px;
- }
- ////////////////////////////////////////////////////////
- <style>
- #atj-sidebar{
- float: left;
- position: fixed;
- width: 300px;
- height: 100%;
- background-color: black;
- top: 0px;
- left: 20px;
- }
- #atj-sb{
- position: fixed;
- width: 280px;
- height: 100%;
- background-color: grey;
- top: 0px;
- left: 30px;
- }
- .atj-sbimg{
- margin-top: 30px;
- margin-left: 81px;
- }
- .atj-sbimg img{
- width: 110px;
- height: 110px;
- border-radius: 50%;
- border: 4px solid black;
- }
- #atj-links{
- margin-left: 58px;
- margin-top: 30px;
- }
- .atj-links1{
- margin-left: 0px;
- }
- .atj-links2{
- margin-left: 85px;
- margin-top: -105px;
- }
- #atj-links a{
- font-family: 'Josefin Sans', sans-serif;
- font-size: 8px;
- background-color: black;
- color: grey;
- text-decoration: none;
- font-weight: 700;
- letter-spacing: 1px;
- width: 70px;
- height: 20px;
- padding: 5px;
- line-height: 20px;
- text-align: center;
- display:block;
- margin-bottom: 5px;
- }
- #atj-links a:hover{
- background-color: grey;
- color: black;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease
- }
- </style>
- <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
- <div id="atj-sidebar">
- <div id="atj-sb">
- <div class="atj-sbimg"><img src="https://via.placeholder.com/110x110"></div>
- <div id="atj-links"> <div class="atj-links1"><a href="/">HOME</a> <a href="/">MESSAGE</a> <a href="/">COMMENT</a></div>
- <div class="atj-links2"><a href="/">STREAM</a> <a href="/">BLOG</a> <a href="/">LINK 1</a></div>
- </div>
- </div>
- </div>
Add Comment
Please, Sign In to add comment