API tools faq
paste
Advertisement
dleargamer

tk-css

dleargamer
Jul 29th, 2022
1,297
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.38 KB | None | 0 0
raw download clone embed print report
  1.         .header_blue {
  2.             background: #1565c0;
  3.             padding: 80px 0 20px;
  4.             color: #fff;
  5.             font-size: 48px;
  6.             font-weight: 300;
  7.             margin-bottom: 40px;
  8.         }
  9.         .header_text {
  10.             margin-left: auto;
  11.             margin-right: auto;
  12.             width: 80%;
  13.         }
  14.         body{
  15.             margin:0;
  16.             font-family:Roboto, sans-serif;
  17.             color:#444;
  18.               overflow-x: hidden;
  19.         }
  20.         .unlockBtn:hover{
  21.             box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
  22.         }
  23.         .unlockBtn {
  24.             background: #2196f3;
  25.             border: none;
  26.             border-radius: 2px;
  27.             box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  28.             min-height: 31px;
  29.             min-width: 70px;
  30.             padding: 2px 16px;
  31.             text-align: center;
  32.             text-shadow: none;
  33.             text-transform: uppercase;
  34.             -webkit-transition: all 280ms ease;
  35.             transition: all 280ms ease;
  36.             box-sizing: border-box;
  37.             cursor: pointer;
  38.             -webkit-appearance: none;
  39.             display: inline-block;
  40.             vertical-align: middle;
  41.             font: 500 14px/31px Roboto,sans-serif!important;
  42.             outline: 0!important;
  43.             color:white;
  44.         }
  45.         .content-container{
  46.             width:80%;margin:0 auto;
  47.         }
  48.         @font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light'),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}
  49.         body{
  50.   font-family: Poppins;
  51.  
  52. }
  53. h1{
  54.   font-weight: bold;
  55. }
  56. .header {
  57.   text-align: left;
  58.   position: fixed;
  59.   width: 100%;
  60.   background: #fff;
  61.   color: #474747;
  62.   box-shadow: 0 0 5px black;
  63.  
  64. padding: 15px;
  65. z-index: 1;
  66. top: 0;
  67. left: 0;
  68. }
  69. .text-enter-username{
  70.   position: relative;
  71.   color: #474747;
  72.   font-family: Poppins;
  73.   font-weight: bold;
  74.   font-size: 32px;
  75.   padding: 5px;
  76.  
  77. }
  78. .title{
  79.   text-align: center;
  80.   width: 100%;
  81. margin-top: 120px;
  82.   color: #474747;
  83.   font-family: Poppins;
  84.   font-weight: bold;
  85.   font-size: 22px;
  86.   padding: 5px;
  87. }
  88. .usernamebox1{
  89.   text-align: center;
  90.   align-items: center;
  91.   justify-content: center;
  92.   position: relative;
  93.   margin-top: 50px;
  94.   max-width: 600px;
  95.   width: 90%;
  96. height: auto;
  97. overflow: auto;
  98. padding-bottom: 20px;
  99. background-color: white;
  100. border-radius: 30px;
  101. box-shadow: 0 0 10px #cfcfcf;
  102. margin-bottom: 200px;
  103. }
  104. .footer{
  105.   align-items: center;
  106.   justify-content: center;
  107.   text-align: center;
  108.   display: flex;
  109. }
  110. .footer1{
  111.   align-items: center;
  112.   justify-content: center;
  113.   text-align: center;
  114. padding: 10px;
  115.   position: fixed;
  116. bottom: 20px;
  117. width: 80%;
  118. height: 80px;
  119. background-color: black;
  120. border-radius: 20px;
  121. z-index: 1;
  122. }
  123. .footertext{
  124.   color:white;
  125. margin: 0px;
  126.  
  127. }
  128. .footerleft{
  129. position: fixed;
  130. bottom: 20px;
  131. width: 80%;
  132. margin-left: -30px;
  133. height: 100px;
  134. background-color: #00f7ef;
  135. border-radius: 20px;
  136.  
  137. }
  138. .footerright{
  139. position: fixed;
  140. bottom: 20px;
  141. width: 80%;
  142. margin-right: -30px;
  143. height: 100px;
  144. background-color: #ff2f6f;
  145. border-radius: 20px;
  146.  
  147. }
  148. img.imgtiktok{
  149.    width:80px;
  150.   margin-top:10px;
  151. }
  152. img.imguser{
  153.   width:100px;
  154.   top: 10px;
  155. padding: 10px;
  156. }
  157. input{
  158.   color: #474747;
  159.   position: relative;
  160.  
  161.   border: 2px solid #ff2f6f;
  162.   border-radius: 30px;
  163. }
  164.  
  165. input[type=text]:focus {
  166.   outline: none;
  167.   width: 400px;
  168. box-sizing: border-box;
  169. border: 2px solid #ff2f6f;
  170. border-radius: 30px;
  171. font-size:30px;
  172. background-color: white;
  173. transition: width 0.4s ease-in-out;
  174. box-shadow: 0 0 4px #00f7ef;
  175. }
  176. .bntValidate{
  177.   margin-top: 20px;
  178.   border-style: solid;
  179.   border-radius: 5px;
  180.   border-width: 2px;
  181.   border-color: #ff4e70;
  182.   box-shadow: 0 0 2px #00c7c0;
  183.   justify-content: center;
  184.   align-items: center;
  185.   color: white;
  186.   font-size: 28px;
  187.   display: flex;
  188.   position: relative;
  189.   background-color: #fe2b54;
  190.   width: 250px;
  191.   height: 60px;
  192. }
  193. .bntValidate:hover{
  194.   box-shadow: 0 0 10px #00c7c0;
  195.   cursor: pointer;
  196. }
  197. .line{
  198.  
  199.   top:180px;
  200.   height: 2px;
  201.   width: 80%;
  202.   background-color:#c4c5c9;
  203. }
  204.  
  205.  
  206. .packag1:hover{
  207.   cursor: pointer;
  208.   animation:shadow-drop-2-center .4s cubic-bezier(.25,.46,.45,.94) both
  209. }
  210. .packag2:hover{
  211.   cursor: pointer;
  212.   animation:shadow-drop-2-center .4s cubic-bezier(.25,.46,.45,.94) both
  213. }
  214. .packag3:hover{
  215.   cursor: pointer;
  216.   animation:shadow-drop-2-center .4s cubic-bezier(.25,.46,.45,.94) both
  217. }
  218. .packag1{
  219.   margin-top: 10px;
  220.   text-align: center;
  221.   box-shadow: 0 0 10px #c2c2c2;
  222.   height: 120px;
  223.         width: 90%;
  224.       background-color: white;
  225.       text-align: center;
  226.       border-radius: 10px;
  227.       border-style: solid;
  228.       border-width: 2px;
  229.       border-color: #ebebeb;
  230. position: relative;
  231.  
  232.  
  233. }
  234.  
  235. .selectedpackage{
  236.   text-align: center;
  237.   box-shadow: 0 0 10px #c2c2c2;
  238.       height: 120px;
  239.       width: 90%;
  240.       background-color: white;
  241.       border-radius: 10px;
  242.       border-style: solid;
  243.       border-width: 1px;
  244.       border-color: #ebebeb;
  245.  
  246. }
  247. .packag2{
  248. margin-top: 10px;
  249. margin-bottom: 10px;
  250.   text-align: center;
  251.   box-shadow: 0 0 10px #c2c2c2;
  252.       height: 120px;
  253.         width: 90%;
  254.       background-color: white;
  255.       text-align: center;
  256.       border-radius: 10px;
  257.       border-style: solid;
  258.       border-width: 1px;
  259.       border-color: #ebebeb;
  260. position: relative;
  261. }
  262. .packag3{
  263.   text-align: center;
  264.   box-shadow: 0 0 10px #c2c2c2;
  265.       height: 120px;
  266.       width: 90%;
  267.       background-color: white;
  268.       text-align: center;
  269.       border-radius: 10px;
  270.       border-style: solid;
  271.       border-width: 1px;
  272.       border-color: #ebebeb;
  273. position: relative;
  274.  
  275. }
  276.  
  277. .cardtext{
  278.   padding: 0px;
  279.   margin: 0px;
  280.   font-weight: bolder;
  281. }
  282.  
  283. .text-gen{
  284.    color: #474747;
  285.     font-family: Poppins;
  286.     font-weight: bold;
  287.     font-size: 22px;
  288.     padding: 5px;
  289. }
  290.  
  291.  
  292. .loader{
  293.   display: none;
  294. width:50px;
  295. position: relative;
  296. padding-top:20px;
  297. margin-top: 10px;
  298. left: 50%;
  299. margin-left: -20px;
  300. }
  301. .loaderblue{
  302.   position: absolute;
  303.   left: 0px;
  304.   width:20px;
  305.   height: 20px;
  306.   background-color:#00f7efbf ;
  307.   border-radius: 50%;
  308.   animation-name: loaderblue;
  309.   animation-duration: 1s;
  310.   animation-iteration-count: infinite;
  311. }
  312. .loaderred{
  313.   position: absolute;
  314.   left: 20px;
  315.   width:20px;
  316.   height: 20px;
  317.   background-color:#ff2f6fba;
  318.   border-radius: 50%;
  319.   animation-name: loaderred;
  320.   animation-duration: 1s;
  321.   animation-iteration-count: infinite;
  322. }
  323.  
  324. @keyframes loaderblue {
  325.   0%   {background-color:#00f7efbf; left:0px; top:0px;width:20px;height:20px;z-index: 1;}
  326.   50% {background-color:#00f7efbf; left:20px; top:0px;width:20px;height:20px;z-index: 1;}
  327.   75% {background-color:#00f7efbf; left:10px; top:2px;width:15px;height:15px;z-index: 0;}
  328.   100% {background-color:#00f7efbf; left:0px; top:0px;width:20px;height:20px;z-index: 0;}
  329. }
  330. @keyframes loaderred {
  331.   0%   {background-color:#ff2f6fba; left:20px; top:0px;width:20px;height:20px;z-index: 1;}
  332.   25% {background-color:#ff2f6fba; left:10px; top:2px;width:15px;height:15px;z-index: 0;}
  333.   50% {background-color:#ff2f6fba; left:0px; top:0px;width:20px;height:20px;z-index: 0;}
  334.   100% {background-color:#ff2f6fba; left:20px; top:0px;width:20px;height:20px;z-index: 1;}
  335. }
  336.  
  337.  
  338. @keyframes shadow-drop-2-center{0%{transform:translateZ(0);box-shadow:0 0 0 0 transparent}100%{transform:translateZ(50px);box-shadow:0 0 20px 0 rgba(0,0,0,.35)}}
  339.  
  340.  
  341.  
  342. @media only screen and (max-width:680px) {
  343.   .text-enter-username{
  344.     position: relative;
  345.     color: #474747;
  346.     font-family: Poppins;
  347.     font-weight: bold;
  348.     font-size: 24px;
  349.     padding: 5px;
  350.  
  351.   }
  352.   .header {
  353.     text-align: center;
  354.     position: fixed;
  355.     width: 100%;
  356.     background: #fff;
  357.     color: #474747;
  358.     box-shadow: 0 0 5px black;
  359.     padding: 10px;
  360.    z-index: 1;
  361.    top: 0;
  362.    left: 0;
  363.   }
  364.  
  365.  
  366.   input[type=text] {
  367.   width: 32%;
  368.   border-radius: 30px;
  369.   font-size: 80px;
  370.   font-weight: bold;
  371.   background-color: white;
  372.   background-repeat: no-repeat;
  373.   padding: 15px 8px;
  374.   transition: width 0.4s ease-in-out;
  375.   box-shadow: 0 0 4px #00f7ef;
  376. }
  377.  
  378.  
  379. .center {
  380.   border-radius: 50%;
  381.   display: block;
  382.   margin-left: auto;
  383.   margin-right: auto;
  384.   width: 40%;
  385. }
  386. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!