Difference between revisions of "Template:HKJS S/css/Notebook"

 
(18 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
}
 
}
 
.headbtn_div{
 
.headbtn_div{
−
width: 20%;
+
width: 30%;
 
margin: auto;
 
margin: auto;
 
padding: 5px;
 
padding: 5px;
Line 15: Line 15:
 
background: transparent;
 
background: transparent;
 
border: none;
 
border: none;
 +
color: blue;
 +
font-size : 15px;
 +
left-margin: 10px;
 
}
 
}
 
.content{
 
.content{
Line 22: Line 25:
 
padding: 5px;
 
padding: 5px;
 
border-bottom: solid blue 2px;
 
border-bottom: solid blue 2px;
 +
}
 +
.big_div{
 +
width: 87%;
 +
margin: auto;
 
}
 
}
 
.head{
 
.head{
 
font-weight: bold;
 
font-weight: bold;
 +
}
 +
.top_btn{
 +
background-color: blue;
 +
    border: none;
 +
    color: white;
 +
    padding: 10px;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    display: inline-block;
 +
    font-size: 19px;
 +
    border-radius: 70%;
 +
    position: fixed;
 +
    right: 5%;
 +
    bottom: 7%;
 +
    opacity: 1;
 +
-webkit-transition: all .5s ease-in 3s;
 +
transition: all .5s ease-in 3s;
 +
z-index: 2;
 +
-webkit-animation: bounce 2s infinite 2s;
 +
animation: bounce 2s infinite 2s;
 +
-webkit-transition: all .2s ease-in;
 +
transition: all .2s ease-in;
 +
} @keyframes bounce {
 +
0%,
 +
100%,
 +
20%,
 +
50%,
 +
80% {
 +
  -webkit-transform: translateY(0);
 +
  -ms-transform: translateY(0);
 +
  transform: translateY(0);
 +
}
 +
40% {
 +
  -webkit-transform: translateY(10px);
 +
  -ms-transform: translateY(10px);
 +
  transform: translateY(10px);
 +
}
 +
60% {
 +
  -webkit-transform: translateY(5px);
 +
  -ms-transform: translateY(5px);
 +
  transform: translateY(5px);
 +
}
 +
}
 +
.hide_btn{
 +
position: relative;
 +
left: 70%;
 +
bottom: 0px;
 
}
 
}

Latest revision as of 23:48, 17 October 2018

.heading{ padding: 8px; border-bottom: solid blue 4px; } .headbtn_div{ width: 30%; margin: auto; padding: 5px; } .head_btn{ background: transparent; border: none; } .btn{ background: transparent; border: none; color: blue; font-size : 15px; left-margin: 10px; } .content{ display: none; } .head_div{ padding: 5px; border-bottom: solid blue 2px; } .big_div{ width: 87%; margin: auto; } .head{ font-weight: bold; } .top_btn{ background-color: blue; 

   border: none;
   color: white;
   padding: 10px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 19px;
   border-radius: 70%;
   position: fixed;
   right: 5%;
   bottom: 7%;
   opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;

z-index: 2; 

-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;

} @keyframes bounce { 

0%,
100%,
20%,
50%,
80% {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
40% {
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
}
60% {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

} .hide_btn{ position: relative; left: 70%; bottom: 0px; }