POP UP CSS

Paste the following code under <style type="text/css">:


/*----- POP UP BOX by borntobewildcodes -----*/

/* You can change the placement of this box and set position value to fixed */

#pclick{
    position:absolute;
    margin-top:50px;
    margin-left:50px;
    width:30px;
    height:30px;
    padding:5px;
    line-height:40px;
    text-align:center;
    color:#222;
    background:#fff;
    border:1px solid #eee;
    overflow:hidden;
    z-index:1000;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

#pclick span{
    font-size:15px;
    color:#444;
}

#pclick:hover span{
    color:#000;
}

#popen{
    position:absolute;
    width:30px;
    height:30px;
}

#pclose{
    position:absolute;
    width:30px;
    height:30px;
    z-index:10;
    display:none;
}

/*-- POP UP BOX --*/

#popup_box {
    position:fixed;
    top:50%;
    left:50%;
    width:600px;
    height:450px;
    z-index:100;
    overflow:hidden;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
    /* Container background */
    background:#000000;
    border:1px solid #111111;
    display:none;
}

/*-- SIDEBAR, I don't recommend changing anything but background, especially if you're not experienced --*/

#sidebar {
    position:absolute;
    top:0px;
    left:300px;
    width:300px;
    height:450px;
    /* Sidebar background */
    background-color:#111111;
    background-image: URL('https://i.pinimg.com/originals/49/67/14/49671401bf201ad7b23c2a25b6d857da.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    z-index:1000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar.pushed{
    -webkit-transform: translateX(-300px);
    -moz-transform: translateX(-300px);
    -ms-transform: translateX(-300px);
    -o-transform: translateX(-300px);
    transform: translateX(-300px);
}

/* Click icon */

#click {
    position:absolute;
    top:50%;
    left:50%;
    width:40px;
    height:40px;
    padding:5px;
    line-height:5px;
    border:1px solid #111111;
    background:rgba(0,0,0,1);
    border-radius:100%;
    text-align:center;
    cursor:pointer;
    z-index:1000;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
}

/* Click icon left */

.clicon span{
    color:#eeeeee;
    font-size:20px;
}

/* Click icon left, on hover */

.clicon:hover span{
    color:#D88552;
}

/* Click icon right */

.cricon {
    display:none;
    margin-top:-10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.cricon span{
    color:#D88552;
    font-size:20px;
}

/* Click icon right, on hover */

.cricon:hover span{
    color:#eeeeee;
}

/*-- PANEL ONE --*/

#panelone{
    position:fixed;
    top:0px;
    left:0px;
    height:450px;
    width:300px;
    background-color:#000000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index:1000!important;
}

/*  I don't recommend editing */

.panelin{
    position:absolute;
    top:50%;
    left:50%;
    width:330px;
    height:auto;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
}

/* Avatar */

#avatar {
    margin:15px auto;
    width:90px;
    height:90px;
    border-radius:100px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#avatar img{
    margin:0;
    width:100%;
    height:100%;
    border:1px solid #bbbbbb;
    border-radius:100px;
}

/* Avatar on hover */

#avatar:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Blog title */

#blogtitle {
    margin:10px auto;
    width:285px;
    height:31px;
    font-size:27px;
    line-height:30px;
    color:#eeeeee;
    background: transparent;
    font-family:'Brutal Type', sans-serif;
    text-align:center;
}

/* Description */

#description {
    margin:0px auto;
    width:265px;
    height:auto;
    font-size:12px;
    line-height:20px;
    color:#eeeeee;
    background: transparent;
    font-family:'Brutal Type', sans-serif;
    text-align:center;
}

/*  Main icons */

#icons {
    margin:0px auto;
    width:240px;
    height:51px;
    background: transparent;
    text-align:center;
    overflow:hidden;
}

#icons span {
    display:inline-block;
    height:40px;
    margin:0px;
    margin-left:-2px;
    margin-right:-1px;
    padding:7px 10px;
    /* Main icons style */
    color: #dddddd;
    font-size:16px;
    line-height:40px;
    text-align:center;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

/* Main icons style on hover */

#icons span:hover {
    color:#D88552;
}

/*-- PANEL TWO --*/

#paneltwo{
    position:fixed;
    top:0px;
    left:0px;
    height:450px;
    width:300px;
    background-color:#000000;
    -webkit-transition: ease 0.5s;
    -moz-transition: ease 0.5s;
    -o-transition: ease 0.5s;
    transition: ease 0.5s;
    z-index:100!imnportant;
}

#paneltwo.pushedtwo{
    -webkit-transform: translateX(300px);
    -moz-transform: translateX(300px);
    -ms-transform: translateX(300px);
    -o-transform: translateX(300px);
    transform: translateX(300px);
}

/* Big icons style, I don't recommend changing anything but color, especially if you're not experienced */

#paneltwo a{
    display:inline-block;
    margin:10px 10px 10px 32px;
    width:110px;
    height:85px;
    padding-top:25px;
    line-height:30px;
    font-size:13px;
    text-align:center;
    cursor:pointer;
    /* Big icon link color */
    color:#eeeeee;
}

.aicon:before, .licon:before, .ticon:before, .ficon:before, .bicon:before, .eicon:before{
    display:block;
    margin-bottom:10px;
    font-family:'saturnicons';
    font-size:32px;
}

/* About icon */

.aicon:before{
    /* Icon code */
    content:'\e275';
    /* Icon color */
    color:#eeeeee;
}

.aicon:after{
    /* Section title */
    content:'ABOUT';
}

/* Links icon */

.licon:before{
    /* Icon code */
    content:'\e190';
    /* Icon color */
    color:#eeeeee;
}

.licon:after{
    /* Section title */
    content:'LINKS';
}

/* Tags icon */

.ticon:before{
    /* Icon code */
    content:'\e24b';
    /* Icon color */
    color:#eeeeee;
}

.ticon:after{
    /* Section title */
    content:'TAGS';
}

/* F.A.Q. icon */

.ficon:before{
    /* Icon code */
    content:'\e080';
    /* Icon color */
    color:#eeeeee;
}

.ficon:after{
    /* Section title */
    content:'F.A.Q.';
}

/* Blogroll icon */

.bicon:before{
    /* Icon code */
    content:'\e123';
    /* Icon color */
    color:#eeeeee;
}

.bicon:after{
    /* Section title */
    content:'PARTNERS';
}

/* Extra icon */

.eicon:before{
    /* Icon code */
    content:'\e183';
    /* Icon color */
    color:#eeeeee;
}

.eicon:after{
    /* Section title */
    content:'EXTRA';
}

.aicon:hover:before, .licon:hover:before, .ticon:hover:before, .ficon:hover:before, .bicon:hover:before, .eicon:hover:before {
    /* Big icon color on hover */
    color:#D88552;
}

/* Close icon */

.close{
    width:110px;
    height:60px;
}

.close:before{
    display:block;
    margin-bottom:10px;
    /* Icon code */
    content:'\e0c4';
    font-family:'saturnicons';
    font-size:30px;
    color:#D88552;
}

.close:after{
    content:'CLOSE';
}

.close:hover:before {
    /* Icon on hover */
    color:#bbbbbb;
}

/*-- CONTENT BOXES, I don't recommend changing anything but color, especially if you're not experienced */

#about, #links, #tags, #faq, #blogroll, #extra{
    position:fixed;
    top:0px;
    left:0px;
    height:450px;
    width:300px;
    background-color:#000000;
    border:1px solid #111111;
    -webkit-transition: ease 0.5s;
    -moz-transition: ease 0.5s;
    -o-transition: ease 0.5s;
    transition: ease 0.5s;
    z-index:1000!important;
    /* do not remove this line */
    display:none;
}

.box{
    position:absolute;
    top:50%;
    left:50%;
    width:255px;
    height:auto;
    max-height:430px;
    /* Content font style */
    font-size:12px;
    line-height:20px;
    overflow:hidden;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
}

.boxin{
    margin-left:0px;
    width:255px;
    height:352px;
    overflow-y:auto!important;
}

/* Box titles, style of headings */

.box h1{
    margin:0px;
    margin-bottom:15px;
    color:#eeeeee;
    font-weight:700;
    font-size:25px;
    font-family:Poiret One;
}

/* Questions etc. */

.box big{
    color:#bbbbbb;
    font-size:15px!important;
    font-weight:600;
}

/*-- Links --*/

#links a{
    display:block;
    padding:5px;
    padding-left:0px;
    font-size:14px;
    color:#eeeeee;
    border-bottom:1px solid #111111;
}

#links span{
    margin-right:10px;
    color:#D88552;
}

#links a:hover{
    color:#D88552;
}

/*-- Tag links --*/

#tags a{
    display:inline-block;
    margin:4px;
    padding:4px 6px;
    color:#eeeeee;
    border:1px solid #111111;
}

#tags span{
    margin-right:5px;
    color:#D88552;
}

#tags a:hover{
    color:#D88552;
    background:#555555;
}

/*-- Blogroll --*/

.person{
    display: inline-block;
    margin-top:5px;
    margin-left:2px;
    width:230px;
    height:50px;
    padding-bottom:10px;
    border-bottom:1px solid #111111;
    overflow:hidden;
}

/* Followed person avatar */

.person img {
    float:left;
    margin:0px;
    width:48px;
    height:48px;
    border:1px solid #eeeeee;
    border-radius:100%;
}

/* Followed person url */

.personurl {
    margin-top:0px;
    margin-left:15px;
    width:150px;
    padding:5px;
    height:40px;
    line-height:20px;
    color:#eeeeee;
    text-align:center;
    overflow:hidden;
}

.personurl a {
    font-size:12px;
    color:#eeeeee;
}