API tools faq
paste
Advertisement
littlexdove

SASUKE layout codes

littlexdove
Aug 29th, 2019
153
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.76 KB | None | 0 0
raw download clone embed print report
  1. <div class="container">
  2. <div class="leftbox">
  3. <img src="https://i.imgur.com/hr0inH0.png" class="leftimg">
  4. </div>
  5.  
  6.  
  7. <div class="textbox1">
  8. <h1>navigation</h1>
  9.  
  10. <h2>tabs & links</h2><br><br><br>
  11. <center>
  12. <a href="linkgoeshere" class="toggleone" title="home">LEAVE</a>
  13. <a href="linkgoeshere" class="toggletwo" title="message">MESSAGE</a>
  14. <a href="linkgoeshere" class="toggleone" title="comment">COMMENT</a>
  15. <a href="linkgoeshere" class="toggletwo" title="photo">IMAGES</a>
  16.  
  17. </center>
  18. </div>
  19.  
  20.  
  21. <ul class="tabs">
  22.  
  23. <li><input type="radio" checked name="tabs" id="tab1">
  24. <label for="tab1">main</label>
  25. <div id="tab-content1" class="tab-content animated fadeInDown">
  26. <div class="box">
  27. <h1>SASUKE UCHIHA</h1>
  28. <h2>display name here</h2>
  29. <a href="/">Yeah, you know what's funny?</a> Seems every time I try to <i>forget</i> about you, my feelings <b>pull you back in.</b> Y'know, 'cause I got <i>somebody else,</i> and you got <b>somebody else.</b> But you and I both know what it really
  30. is. <i>but still,</i> you know what i'm sayin', B?
  31. </div>
  32.  
  33. <div class="box">
  34. Ran across a picture you took of me, <b>and you crossed my mind.</b> And it got me thinkin' 'bout how it <i>used to be.</i>. It was just <b>you & me.</b> I still hear you saying <i>you love me</i> when I close my eyes. <b>Put no one else above me.</b> But that was back then; now you're just a <i>memory.</i> If I didn't go away for school, then where would we be? Probably still <b>together</b> and somewhere <i>happy.</i> If I'm supposed to be moved on in a new relationship strong, <i>then why are you still haunting me?</i>
  35. </div>
  36. </div>
  37. </li>
  38.  
  39. <li><input type="radio" name="tabs" id="tab2">
  40. <label for="tab2">TAB2</label>
  41. <div id="tab-content2" class="tab-content animated fadeInDown">
  42. <div class="box">
  43. <h2>heading two</h2> They say <i>if you love something, let it go.</i> And if it comes back, <b>then that's how you know.</b> I got to the stop light, then I made four rights, <i>now I'm back where I started</i> and you're back in my life. The further I go, the <b>closer I get back to you.</b> I say I moved on <i>'till I'm reminded of you.</i> Can somebody help me? <b>Help me get out of this circle.</b>
  44. </div>
  45. </div>
  46. </li>
  47.  
  48. <li><input type="radio" name="tabs" id="tab3">
  49. <label for="tab3">TAB3</label>
  50. <div id="tab-content3" class="tab-content animated fadeInDown">
  51. <div class="box">
  52. <h2>heading two</h2> I drove past your house the other day. <i>I didn't even mean to.</i> I went the wrong way. I ain't seen your mama in a awhile. When she looked at me <b>she smiled</b> and asked me if I'm doing okay. Took everything I had <i>not to bring up your name</i> and wonder if you came home for the holidays. She asked if I could stay awhile, <b>'cause you had come in town</b> and you were just <i>five minutes away.</i>
  53. </div>
  54.  
  55. <div class="box">
  56. you can add
  57. </div>
  58.  
  59. <div class="box">
  60. as many boxes
  61. </div>
  62. <!--start copying here for a new box-->
  63. <div class="box">
  64. as you need
  65. </div>
  66. <!--stop copying here for a new box-->
  67.  
  68. </div>
  69. </li>
  70.  
  71. </ul>
  72. </div>
  73. </div>
  74. </div>
  75.  
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83. <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
  84. <style>
  85.  
  86. .clearfix {
  87. margin-top: -125px;
  88. }
  89. br {
  90. line-height: 0px;
  91. }
  92. td td td br {
  93. line-height: auto;
  94. }
  95. table,
  96. tr,
  97. td {
  98. background-color: transparent !important;
  99. }
  100. table table {
  101. visibility: hidden;
  102. }
  103. table table table,
  104. table.blurbs td.text,
  105. span.orangetext15,
  106. #footerWarpper {
  107. display: none;
  108. }
  109. div table,
  110. table.blurbs,
  111. table.blurbs table {
  112. visibility: visible;
  113. display: table;
  114. _display: inline;
  115. }
  116. div div table div,
  117. div.clearfix a,
  118. input {
  119. display: none;
  120. }
  121. div.clearfix table div div,
  122. #footerWarpper {
  123. display: block;
  124. }
  125.  
  126. body {
  127. background-color: #181818;
  128. font-family: calibri;
  129. font-size: 8px;
  130. color: #7c7c7c;
  131. }
  132.  
  133. .container {
  134. background-color: #transparent;
  135. width: 560px;
  136. height: 500px;
  137. margin: auto;
  138. position: absolute;
  139. top: 0px;
  140. left: 0px;
  141. bottom: 0px;
  142. right: 0px;
  143. }
  144.  
  145.  
  146. .leftbox {
  147. position: fixed;
  148. background-color: #222222;
  149. width: 240px;
  150. height: 300px;
  151. padding: 5px;
  152. }
  153.  
  154. .leftimg {
  155. opacity: 0.8;
  156. }
  157.  
  158. .textbox1 {
  159. position: fixed;
  160. background-color: #222222;
  161. width: 240px;
  162. height: 100px;
  163. padding: 5px;
  164. margin-top: 330px;
  165. overflow: hidden;
  166. }
  167.  
  168. .textbox1 a {
  169. font-family: calibri;
  170. font-size: 8px;
  171. text-transform: uppercase;
  172. color: #ffffff;
  173. letter-spacing: 0px;
  174. text-decoration: none;
  175. -webkit-transition: all 0.5s ease-in-out;
  176. }
  177. .textbox1 a:hover {
  178. color: #ffffff;
  179. }
  180.  
  181.  
  182. .box a {
  183. font-family: calibri;
  184. font-size: 8px;
  185. text-transform: uppercase;
  186. color: #a20a01;
  187. letter-spacing: 0px;
  188. text-decoration: none;
  189. -webkit-transition: all 0.5s ease-in-out;
  190. }
  191. .box a:hover {
  192. color: #ffffff;
  193. }
  194.  
  195.  
  196. i {
  197. font-style: italic;
  198. font-size: 9px;
  199. font-family: georgia;
  200. text-transform: lowercase;
  201. font-weight: bold italics;
  202. letter-spacing: 1px;
  203. color: #ffffff;
  204. }
  205. b {
  206. color: #a20a01;
  207. font-family: calibri;
  208. font-size: 8px;
  209. line-height: 10px;
  210. text-transform: uppercase;
  211. }
  212. u {
  213. color: #a20a01;
  214. font-family: lucida console;
  215. font-size: 8px;
  216. text-transform: uppercase;
  217. letter-spacing: 0px;
  218. text-decoration: none;
  219. border-bottom: dashed 1px #44839a;
  220. }
  221. h1 {
  222. font-family: arial;
  223. font-size: 23px;
  224. letter-spacing: -2px;
  225. color: #a20a01;
  226. margin: 0px 0px -5px 0px;
  227. text-align: center;
  228. font-weight: lighter;
  229. }
  230. h2 {
  231. background-color: #a20a01;
  232. text-align: center;
  233. font-family: calibri;
  234. font-size: 8px;
  235. color: #ffffff;
  236. line-height: 8px;
  237. padding: 4px;
  238. margin: 0px 0px 5px 0px;
  239. text-transform: uppercase;
  240. letter-spacing: 2px;
  241. }
  242.  
  243. .tabs input[type="radio"] {
  244. position: absolute;
  245. top: -9999px;
  246. left: -9999px;
  247. }
  248.  
  249. .tabs {
  250. width: 185px;
  251. float: none;
  252. list-style: none;
  253. position: relative;
  254. padding: 0px;
  255. margin-top: 0px;
  256. margin-left: 440px;
  257. background-color: #transparent;
  258. }
  259.  
  260. .tabs li {
  261. float: left;
  262. }
  263.  
  264. .tabs label {
  265. text-align: center;
  266. display: inline-block;
  267. padding: 0px;
  268. background-color: #a20a01;
  269. color: #ffffff;
  270. font-size: 8px;
  271. line-height: 24px;
  272. letter-spacing: 0px;
  273. width: 53px;
  274. height: 25px;
  275. left: -400px;
  276. margin-right: 3px;
  277. top: 380px;
  278. text-transform: uppercase;
  279. font-family: calibri;
  280. position: relative;
  281. -webkit-transition: all 0.4s ease-in-out;
  282. -moz-transition: all 0.4s ease-in-out;
  283. -o-transition: all 0.4s ease-in-out;
  284. transition: all 0.4s ease-in-out;
  285. }
  286.  
  287. .tabs label:hover {
  288. background-color: #b13b34;
  289. color: #ffffff;
  290. }
  291.  
  292. [id^="tab"]:checked + label {
  293. background-color: #a20a01;
  294. color: #ffffff;
  295. letter-spacing: 2px;
  296. }
  297.  
  298. [id^="tab"]:checked ~ [id^="tab-content"] {
  299. display: block;
  300. }
  301.  
  302. .tab-content {
  303. z-index: 2;
  304. display: none;
  305. color: #a20a01;
  306. font-family: arial;
  307. font-size: 9px;
  308. letter-spacing: 0.6px;
  309. word-spacing: 3px;
  310. padding: 5px;
  311. width: 355px;
  312. height: auto;
  313. background-color: #transparent;
  314. position: absolute;
  315. left: -185px;
  316. top: 55px;
  317. overflow: auto;
  318. -webkit-animation-duration: 1.5s;
  319. -moz-animation-duration: 1.5s;
  320. -o-animation-duration: 1.5s;
  321. aniation-duration: 1.5s;
  322. }
  323.  
  324. @keyframes fadeInDown {
  325. from {
  326. opacity: 0;
  327. transform: translate3d(0, -100%, 0);
  328. }
  329. to {
  330. opacity: 1;
  331. transform: none;
  332. }
  333. }
  334.  
  335. .fadeInDown {
  336. animation-name: fadeInDown;
  337. }
  338.  
  339. @-webkit-keyframes fadeInRight {
  340. 0% {
  341. opacity: 0;
  342. -webkit-transform: translation3d(100%, 0, 0);
  343. transform: translate3d(100%, 0, 0);
  344. }
  345. 100% {
  346. opacity: 1;
  347. -wenkit-transform: none;
  348. transform: none;
  349. }
  350. }
  351.  
  352. @keyframes fadeInRight {
  353. 0% {
  354. opacity: 0;
  355. -webkit-transform: translation3d(100%, 0, 0);
  356. transform: translate3d(100%, 0, 0);
  357. }
  358. 100% {
  359. opacity: 1;
  360. -wenkit-transform: none;
  361. transform: none;
  362. }
  363. }
  364. .box {
  365. background-color: #222222;
  366. width: 250px;
  367. padding: 10px;
  368. height: autopx;
  369. margin-left: 8px;
  370. margin-bottom: 25px;
  371. text-align: justify;
  372. color: #7c7c7c;
  373. font-family: arial;
  374. font-size: 8.5px;
  375. letter-spacing: 0.6px;
  376. word-spacing: 3px;
  377. }
  378.  
  379. .box h1 {
  380. font-family: arial;
  381. font-size: 23px;
  382. letter-spacing: -2px;
  383. color: #a20a01;
  384. margin: 0px 0px -5px 0px;
  385. text-align: center;
  386. font-weight: lighter;
  387. }
  388.  
  389. .box h2 {
  390. background-color: #a20a01;
  391. text-align: center;
  392. font-family: calibri;
  393. font-size: 8px;
  394. color: #ffffff;
  395. line-height: 8px;
  396. padding: 4px;
  397. margin: 0px 0px 5px 0px;
  398. text-transform: uppercase;
  399. letter-spacing: 2px;
  400. }
  401.  
  402. .toggleone {
  403. color: #ffffff;
  404. display: inline-block;
  405. background-color: #a20a01;
  406. margin-right: 3px;
  407. margin-bottom: 3px;
  408. width: 50px;
  409. height: 20px;
  410. text-align: center;
  411. font-size: 8px;
  412. font-family: calibri;
  413. text-transform: uppercase;
  414. line-height: 20px;
  415. text-decoration: none;
  416. -webkit-transition: all 0.5s ease-in-out;
  417. }
  418. .toggleone:hover {
  419. background-color: #b13b34;
  420. color: #fff;
  421. }
  422. .toggletwo {
  423. display: inline-block;
  424. background-color: #a20a01;
  425. color: #ffffff;
  426. margin-right: 3px;
  427. margin-bottom: 3px;
  428. width: 50px;
  429. height: 20px;
  430. text-align: center;
  431. font-size: 8px;
  432. font-family: calibri;
  433. text-transform: uppercase;
  434. line-height: 20px;
  435. text-decoration: none;
  436. -webkit-transition: all 0.5s ease-in-out;
  437. }
  438. .toggletwo:hover {
  439. background-color: #b13b34;
  440. color: #fff;
  441. }
  442. </style>
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!