API tools faq
paste
especiallygold

stats

especiallygold
Oct 11th, 2019
2,432
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.64 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. © erika-writes
  3. -->
  4.  
  5. <head>
  6.  
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  11.  
  12. <style type="text/css">
  13.  
  14. body {
  15. background-color:#fff;
  16. font-family:avenir;
  17. font-size:10px;
  18. line-height:15px;
  19. letter-spacing:.5px;
  20. -webkit-font-smoothing: antialiased;
  21. -moz-osx-font-smoothing: grayscale;
  22. }
  23.  
  24. a {
  25. color:#000;
  26. -webkit-transition:0.5s ease-in-out;
  27. }
  28.  
  29. a:hover {
  30. letter-spacing:2px;
  31. -webkit-transition:0.5s ease-in-out;
  32. }
  33.  
  34. #container {
  35. background-color:#fff;
  36. width:700px;
  37. height:500px;
  38. margin: 0 auto;
  39. overflow:hidden;
  40. border: .5px solid #eee;
  41. border-radius:5px;
  42. padding:10px;
  43. margin-top:100px;
  44. margin-bottom:30px;
  45. box-shadow: 8px 8px 1px 0px #eee;
  46. }
  47.  
  48. #photo img {
  49. width:230px;
  50. height:230px;
  51. border-radius:5px;
  52. float:left;
  53. margin-left:-10px;
  54. overflow:hidden;
  55. z-index:999999999;
  56. -webkit-transform: rotate(7deg);
  57. }
  58.  
  59. #photo2 img {
  60. width:230px;
  61. height:230px;
  62. margin-left:-210px;
  63. margin-top:150px;
  64. border-radius:130px;
  65. z-index:99999;
  66. position:absolute;
  67. }
  68.  
  69. #photo3 img {
  70. width:230px;
  71. height:230px;
  72. margin-top:270px;
  73. margin-left:-250px;
  74. float:left;
  75. overflow:hidden;
  76. z-index:999999;
  77. position:absolute;
  78. -webkit-clip-path: polygon(34% 0, 0% 100%, 100% 84%);
  79. clip-path: polygon(34% 0, 0% 100%, 100% 84%);
  80. }
  81.  
  82. #right {
  83. float:right;
  84. margin-left:200px;
  85. margin-top:-220px;
  86. }
  87.  
  88. #name {
  89. font-family:courier;
  90. font-size:60px;
  91. text-transform:lowercase;
  92. font-weight:bold;
  93. letter-spacing:-10px;
  94. margin-top:20px;
  95. margin-left:50px;
  96. margin-bottom:-2px;
  97. float:left;
  98. }
  99.  
  100. hr {
  101. border: .5px solid #000;
  102. width:430px;
  103. margin-top:40px;
  104. margin-left:50px;
  105. float:left;
  106. }
  107.  
  108. #info {
  109. font-family:avenir;
  110. font-weight:none;
  111. text-transform:lowercase;
  112. letter-spacing:.5px;
  113. line-height:14px;
  114. padding:12px;
  115. margin-top:-400px;
  116. margin-left:355px;
  117. float:right;
  118. }
  119.  
  120. table {
  121. border-collapse:collapse;
  122. border: 0px solid #000;
  123. margin-top:-5px;
  124. }
  125.  
  126. th, td {
  127. width:100px;
  128. font-size:10px;
  129. font-weight:bold;
  130. letter-spacing:.5px;
  131. line-height:20px;
  132. float:left;
  133. margin:7px;
  134. margin-top:-12px;
  135. padding:5px;
  136. padding-top:10px;
  137. text-align:right;
  138. border-bottom: 0px solid #000;
  139. }
  140.  
  141. #stat {
  142. font-family:courier;
  143. font-size:9px;
  144. font-weight:normal;
  145. text-align:right;
  146. text-transform:uppercase;
  147. letter-spacing:3px;
  148. line-height:12px;
  149. border-bottom:1px solid white;
  150. }
  151.  
  152. #twitter {
  153. width:280px;
  154. height:110px;
  155. margin-top:90px;
  156. margin-left:60px;
  157. box-shadow: -6px 6px 1px 0px #eee;
  158. border-radius:5px;
  159. border: .5px solid #eee;
  160. padding:10px;
  161. }
  162.  
  163. #twitter img {
  164. width:30px;
  165. border-radius:30px;
  166. padding:3px;
  167. }
  168.  
  169. #tweets {
  170. width:240px;
  171. height:auto;
  172. float:right;
  173. margin-top:-83px;
  174. margin-right:-5px;
  175. line-height:14px;
  176. }
  177.  
  178. p {
  179. margin-bottom:10px;
  180. }
  181.  
  182. #insta {
  183. width:280px;
  184. height:118px;
  185. margin-top:20px;
  186. margin-left:60px;
  187. box-shadow: -6px 6px 1px 0px #eee;
  188. border-radius:5px;
  189. border: .5px solid #eee;
  190. padding:10px;
  191. }
  192.  
  193. #insta img {
  194. width:85px;
  195. height:85px;
  196. border-radius:5px;
  197. margin:3px;
  198. float:left;
  199. }
  200.  
  201. #insta1 img {
  202. width:85px;
  203. height:85px;
  204. border-radius:5px;
  205. margin:3px;
  206. float:left;
  207. background: white;
  208. -webkit-transition:0.5s ease-in-out;
  209. }
  210.  
  211. #insta1:hover img {
  212. opacity: 0.5;
  213. -webkit-transition:0.5s ease-in-out;
  214. }
  215.  
  216. #heart {
  217. color:#bb3a3a;
  218. font-size:20px;
  219. text-align:center;
  220. position: absolute;
  221. -webkit-transition:0.5s ease-in-out;
  222. padding:35px;
  223. opacity:0;
  224. }
  225.  
  226. #heart:hover {
  227. color:#bb3a3a;
  228. font-size:20px;
  229. text-align:center;
  230. position: absolute;
  231. -webkit-transition:0.5s ease-in-out;
  232. opacity:100;
  233. padding:35px;
  234. }
  235.  
  236. #numbers1 {
  237. width:90px;
  238. font-family:courier;
  239. font-size:13px;
  240. text-align:center;
  241. font-weight:bold;
  242. letter-spacing:-1px;
  243. }
  244.  
  245. #postinfo1 {
  246. width:90px;
  247. font-size:8px;
  248. text-align:center;
  249. line-height:10px;
  250. }
  251.  
  252. #numbers2 {
  253. width:90px;
  254. font-family:courier;
  255. font-size:13px;
  256. text-align:center;
  257. font-weight:bold;
  258. letter-spacing:-1px;
  259. float:right;
  260. margin-right:92px;
  261. margin-top:-25px;
  262. }
  263.  
  264. #postinfo2 {
  265. width:90px;
  266. font-size:8px;
  267. text-align:center;
  268. line-height:10px;
  269. float:right;
  270. margin-right:92px;
  271. margin-top:-10px;
  272. }
  273.  
  274. #numbers3 {
  275. width:90px;
  276. font-family:courier;
  277. font-size:13px;
  278. text-align:center;
  279. font-weight:bold;
  280. letter-spacing:-1px;
  281. float:right;
  282. margin-right:4px;
  283. margin-top:-25px;
  284. }
  285.  
  286. #postinfo3 {
  287. width:90px;
  288. font-size:8px;
  289. text-align:center;
  290. line-height:10px;
  291. float:right;
  292. margin-right:4px;
  293. margin-top:-10px;
  294. }
  295.  
  296. #music {
  297. width:280px;
  298. height:60px;
  299. margin-top:20px;
  300. margin-left:60px;
  301. box-shadow: -6px 6px 1px 0px #eee;
  302. border-radius:5px;
  303. border: .5px solid #eee;
  304. padding:10px;
  305. }
  306.  
  307. #music img {
  308. width:60px;
  309. border-radius:5px;
  310. }
  311.  
  312. #musicinfo {
  313. width:200px;
  314. float:right;
  315. margin-right:5px;
  316. margin-top:5px;
  317. font-weight:bold;
  318. letter-spacing:2px;
  319. line-height:18px;
  320. text-align:left;
  321. }
  322.  
  323. #buttons {
  324. background-color:white;
  325. font-size:25px;
  326. letter-spacing:15px;
  327. float:right;
  328. margin-top:-40px;
  329. margin-right:2px;
  330. opacity:100;
  331. -webkit-transition:0.5s ease-in-out;
  332. }
  333.  
  334. #buttons:hover {
  335. background-color:white;
  336. font-size:25px;
  337. letter-spacing:15px;
  338. float:right;
  339. margin-top:-40px;
  340. margin-right:2px;
  341. opacity:0;
  342. -webkit-transition:0.5s ease-in-out;
  343. }
  344.  
  345. #play {
  346. background-color:white;
  347. font-size:25px;
  348. letter-spacing:15px;
  349. float:right;
  350. margin-top:-40px;
  351. margin-right:2px;
  352. -webkit-transition:0.5s ease-in-out;
  353. opacity:100;
  354. }
  355.  
  356. #play:hover {
  357. background-color:white;
  358. font-size:25px;
  359. letter-spacing:15px;
  360. float:right;
  361. margin-top:-40px;
  362. margin-right:2px;
  363. opacity:0;
  364. -webkit-transition:0.5s ease-in-out;
  365. }
  366.  
  367. #nav {
  368. position:fixed;
  369. left:25px;
  370. top:20px;
  371. font-family:avenir;
  372. font-size:9px;
  373. font-weight:500;
  374. text-transform:lowercase;
  375. letter-spacing:1px;
  376. height:32px;
  377. border-left:1px solid #000;
  378. padding-left:15px;
  379. }
  380.  
  381. #nav a {
  382. text-decoration:none;
  383. }
  384.  
  385. #credit {
  386. position:fixed;
  387. right:25px;
  388. bottom:15px;
  389. font-family:helvetica;
  390. font-size:15px;
  391. font-weight:bold;
  392. letter-spacing:-1px;
  393. }
  394.  
  395. #credit a {
  396. text-decoration:none;
  397. }
  398.  
  399. </style>
  400. </head>
  401.  
  402. <body>
  403.  
  404. <div id="nav">
  405. <a href="/">home</a>
  406. <br><a href="http://tumblr.com/dashboard">dashboard</a>
  407. </div>
  408.  
  409. <div id="container">
  410.  
  411. <!-- PHOTOS ON LEFT -->
  412.  
  413. <div id="photo"><img src="IMAGE URL HERE"></div>
  414. <div id="photo2"><img src="IMAGE URL HERE"></div>
  415. <div id="photo3"><img src="IMAGE URL HERE"></div>
  416.  
  417. <!-- END OF PHOTOS ON LEFT -->
  418.  
  419. <div id="right">
  420.  
  421. <div id="name">name.</div>
  422.  
  423. <hr>
  424.  
  425. <!-- TWITTER -->
  426.  
  427. <div id="twitter">
  428.  
  429. <img src="IMAGE URL HERE">
  430. <br><img src="IMAGE URL HERE">
  431. <br><img src="IMAGE URL HERE">
  432.  
  433. <div id="tweets">
  434.  
  435. <p><font style="font-weight:bold;">user</font>
  436. <font style="font-family:courier;color:#707070;font-weight:bold;font-style:italic;letter-spacing:-.5px;">@user</font>
  437. <br>tweet tweet
  438.  
  439. <p><font style="font-weight:bold;">user</font>
  440. <font style="font-family:courier;color:#707070;font-weight:bold;font-style:italic;letter-spacing:-.5px;">@user</font>
  441. <br>tweet tweet
  442.  
  443. <p><i class="fas fa-retweet" font style="color:#64bf55;"></i> <font style="font-weight:bold;">user</font>
  444. <font style="font-family:courier;color:#707070;font-weight:bold;font-style:italic;letter-spacing:-.5px;">@user</font>
  445. <br>tweet tweet
  446.  
  447. </div>
  448. </div>
  449.  
  450. <!-- END OF TWITTER -->
  451.  
  452. <!-- INSTAGRAM -->
  453.  
  454. <div id="insta">
  455.  
  456. <div id="insta1"><img src="IMAGE URL HERE"> <div id="heart"><i class="fas fa-heart"></i></div></div>
  457. <img src="IMAGE URL HERE">
  458. <img src="IMAGE URL HERE">
  459.  
  460. <div id="numbers1">#</div>
  461. <div id="postinfo1">posts</div>
  462.  
  463. <div id="numbers2">#</div>
  464. <div id="postinfo2">followers</div>
  465.  
  466. <div id="numbers3">#</div>
  467. <div id="postinfo3">following</div>
  468.  
  469. </div>
  470.  
  471. <!-- END OF INSTAGRAM -->
  472.  
  473. <!-- MUSIC -->
  474.  
  475. <div id="music">
  476. <img src="ALBUM ARTWORK HERE">
  477.  
  478. <div id="musicinfo">
  479. artist
  480. <br>song
  481. <br>album
  482. </div>
  483.  
  484. <div id="buttons">
  485. <i class="fas fa-backward"></i>
  486. <i class="far fa-play-circle"></i>
  487. <i class="fas fa-forward"></i>
  488. </div>
  489. <div id="play">
  490. <i class="fas fa-backward"></i>
  491. <i class="far fa-pause-circle"></i>
  492. <i class="fas fa-forward"></i>
  493. </div>
  494.  
  495. </div>
  496.  
  497. <!-- END OF MUSIC -->
  498.  
  499. <!-- INFO -->
  500.  
  501. <div id="info">
  502.  
  503. <table>
  504.  
  505. <tr><th>full name
  506. <div id="stat">full name</div>
  507.  
  508. <tr><th>faceclaim
  509. <div id="stat">faceclaim</div>
  510.  
  511. <tr><th>age
  512. <div id="stat">age</div>
  513.  
  514. <tr><th>sexual orientation
  515. <div id="stat">sexual orientation</div>
  516.  
  517. <tr><th>gender identity
  518. <div id="stat">gender identity</div>
  519.  
  520. <tr><th>pronouns
  521. <div id="stat">pronouns</div>
  522.  
  523. </th></tr>
  524. </table>
  525. </div></div></div>
  526.  
  527. <!-- END OF INFO -->
  528.  
  529. <div id="credit"><a href="http://erika-writes.tumblr.com">e.</a></div>
  530.  
  531. </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!