API tools faq
paste
LatviaCPI

bookshamrakr

LatviaCPI
Sep 25th, 2024
205
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <title>Techie</title>
  3. <link rel="shortcut icon" href="https://i.imgur.com/efvX9OK.png">
  4.  
  5. <head>
  6.  
  7. <!--- all this is ripped from my old sniff, lots of stuff gutted, almost nothing in the styling is used :) --->
  8.  
  9. <!--- jquery cringeport begin --->
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  11. <!--- jquery cringeport end --->
  12.  
  13. <!--- stylized tooltip import begin --->
  14. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  15. <!--- stylized tooltip import end --->
  16.  
  17. <!--- typing lines beginning --->
  18. <link rel="stylesheet" href="https://rawcdn.githack.com/LordMurci/LordMurci/dbf0a34eae354842dca936a591f80ba05b0b320e/css/Ncss/typing.css">
  19. <!--- typing lines ending --->
  20.  
  21.  
  22. <!---  icons icons icons beginning --->
  23. <link href='https://css.gg/terminal.css' rel='stylesheet'>
  24. <link href='https://css.gg/home.css' rel='stylesheet'>
  25. <link href='https://css.gg/folder.css' rel='stylesheet'>
  26. <link href='https://css.gg/pen.css' rel='stylesheet'>
  27. <link href='https://css.gg/music.css' rel='stylesheet'>
  28. <!---  icons icons icons ending --->
  29.  
  30. <!---  wouldnt you like to know weatherboy --->
  31. <script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:300,attribute:"title"});});})(jQuery);</script>
  32.  
  33.  
  34. <style>
  35. @import url('https://fonts.googleapis.com/css?family=Play&display=swap');
  36. /* most of this shit is self explanatory, honestly */
  37.  
  38. /* https://media.discordapp.net/attachments/958829712816341002/984542051523768360/3x.gif mewspin img link */
  39.  
  40. /* you know what this is */
  41. body {
  42.     font-family: Play;
  43.     overflow-x:hidden;
  44.     overflow-y:hidden;
  45.     background-color: #000;
  46.     /*background-color: #e81d1d;*/
  47.     /*transition: background-color 2s;*/
  48. }
  49. /* you know what this is */
  50.  
  51.  
  52. /* invisible container for containing everything */
  53. .fullbodycont {
  54.     height: 500px;
  55.     width: 500px;
  56.     border: 0px solid white;
  57.     position: absolute;
  58.     transform: translate(-50%, 50%);
  59.     bottom: 50%;
  60.     left: 50%;
  61. }
  62. /* invisible container for containing everything */
  63.  
  64. /* information container beginning */
  65. .main {
  66.     height: 300px;
  67.     width: 300px;
  68.     text-align: center;
  69.     border: 0px solid white;
  70.     border-radius: 0px;
  71.     color: white;
  72.     position: absolute;
  73.     transform: translate(-50%, 50%);
  74.     bottom: 50%;
  75.     left: 50%;
  76.     padding: 25px;
  77.     background-color: rgba(0,0,0,0);
  78.     opacity: 1;
  79.     /*background: url(https://wallpaperset.com/w/full/8/8/9/354096.jpg);
  80.     background-size: cover;
  81.     background-repeat: no-repeat;*/
  82.     -webkit-animation: fade 12s;
  83.     animation: fade 12s;
  84.     animation-delay: 0s;
  85.     transition: 0.3s;
  86. }
  87.  
  88. @-webkit-keyframes fade {from {opacity: 0;}to {opacity: 1;}}
  89. @keyframes fade {from {opacity: 0;}to {opacity: 1;}}
  90. /* information container ending */
  91.  
  92.  
  93. /* i am going to steal your skin */
  94. .main p {font-size: 12px;}
  95. .main a {color: white;}
  96. h3 , h5 {font-weight: lighter;}
  97. /* i am going to steal your skin but twice */
  98.  
  99.  
  100. /* stylized tooltip beginning */
  101. .tooltip {display:inline;position:relative;}
  102. #s-m-t-tooltip {
  103.     position: relative;
  104.     overflow: hidden;
  105.     z-index: 99999;
  106.     max-width: 120px;
  107.     margin: 0px 20px 20px 35px;
  108.     padding: 6px;
  109.     font-family: Play;
  110.     /*background: black;*/
  111.     border: 1px solid white;
  112.     line-height: 100%;
  113.     letter-spacing: 1px;
  114.     color: white;
  115.     font-size: 10px;
  116. }
  117. /* stylized tooltip ending */
  118.  
  119. /* you cannot highlight heeheeha */
  120. ::selection {display: none}
  121. ::-webkit-selection {display: none}
  122. ::-o-selection {display: none}
  123. ::-ms-selection {display: none}
  124. /* you cannot highlight heeheeha */
  125.  
  126.  
  127. /* spinning main image beginning*/
  128. .himg {
  129.     cursor: pointer;
  130.     -webkit-animation: spin 6s linear infinite;
  131.     animation: spin 10s linear infinite;
  132.     border: 1px solid white;
  133.     border-radius: 150px;
  134.     height: 120px;
  135.     width: 120px;
  136.     margin: 25px 0px 10px 0px;
  137.     background-color: rgba(0, 0, 0, 0);
  138. }
  139. @-webkit-keyframes spin {0% { -webkit-transform: rotateY(0deg); }100% { -webkit-transform: rotateY(360deg); }}
  140. @keyframes spin { 0% { transform: rotateY(0deg); }100% { transform: rotateY(360deg); }}
  141. /* spinning main image ending*/
  142.  
  143. tumblr_controls, .tmblr-iframe {visibility:hidden;padding-top: 0 !important;}
  144. tumblr_controls, .iframe-controls--desktop {visibility:hidden;}
  145.  
  146. #sidingLeft, #sidingRight, #sidingTop, #sidingBottom{
  147.     position: absolute;
  148.     background-color: #fff;
  149. }
  150.  
  151. #sidingLeft{
  152.     position: fixed;
  153.     left: 50%;
  154.     top: 50%;
  155.     margin-left: -175px;
  156.     margin-top: -175px;
  157.     width: 1px; height: 0;
  158.     animation: sideLeft 2s; animation-delay: 0s; animation-fill-mode: forwards;
  159. }
  160.  
  161. #sidingRight{
  162.     position: fixed;
  163.     left: 50%;
  164.     bottom: 50%;       
  165.     margin-left: 175px;
  166.     margin-bottom: -175px;     
  167.     width: 1px; height: 0;
  168.     animation: sideRight 2s; animation-delay: 2s; animation-fill-mode: forwards;
  169. }
  170.  
  171. #sidingTop{
  172.     position: fixed;
  173.     top: 50%;
  174.     right: 50%;    
  175.     margin-right: -175px;
  176.     margin-top: -175px;    
  177.     width: 0; height: 1px;
  178.     animation: sideTop 2s; animation-delay: 3s; animation-fill-mode: forwards;
  179. }
  180.  
  181. #sidingBottom{
  182.     position: fixed;
  183.     top: 50%;
  184.     left: 50%;     
  185.     margin-left: -175px;
  186.     margin-top: 175px;
  187.     width: 0; height: 1px;
  188.     animation: sideBottom 2s; animation-delay: 1s; animation-fill-mode: forwards;
  189. }
  190.  
  191. @keyframes sideLeft{from{height: 0;} to{height: 350px;} }
  192. @keyframes sideRight{from{height: 0;} to{height: 350px;} }
  193. @keyframes sideTop{from{width: 0;} to{width: 350px;} }
  194. @keyframes sideBottom{from{width: 0;} to{width: 350px;} }
  195.        
  196.  
  197.  
  198. </style>
  199. </head>
  200. <body onload="window.resizeTo(600,600)">
  201.  
  202. <!--- invisible container beginning --->
  203. <div class="fullbodycont">
  204.  
  205. <div id="sidingLeft"></div>
  206. <div id="sidingRight"></div>
  207. <div id="sidingTop"></div>
  208. <div id="sidingBottom"></div>
  209.  
  210. <div class="main" id="Home">
  211.  
  212. <h3 style="margin-top: 5px;">
  213. <center>Technician</center>
  214. </h3>
  215.  
  216. <img src="https://i.imgur.com/ByLMChq.jpeg" class="himg" title="Woah!">
  217.  
  218. <br>
  219. <center>
  220.  
  221. <div style="margin-top: 15px;">
  222. <!---<font style="text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;">--->
  223. <div class="typing">
  224. 20//He/Him
  225. </div>
  226. <div class="typing2">
  227. "IT Field Support Technician"
  228. </div>
  229. <div class="typing3">
  230. 1.2k hours in Fallout: New Vegas
  231. </div>
  232. <div class="typing4">
  233. 3.5k hours in Rust
  234. </div>
  235.  
  236. </font>
  237. </div>
  238. </center>
  239.  
  240. </div>
  241.  
  242.  
  243. </div>
  244.  
  245. <!--- youtube embed begin --->
  246. <iframe allow="autoplay; encrypted-media; loop;" width="0" height="0" src="https://www.youtube.com/embed/HevFHRuLeTw?autoplay=1&start=0&mute=0&enablejsapi=1;loop=1" frameborder="0" ></iframe>
  247. <!--- youtube embed end --->
  248.  
  249.  
  250. <!--- thats all folks --->
  251. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!