API tools faq
paste
nemurou

joshua page

nemurou
Mar 9th, 2018
3,175
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.08 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. tumblr page by nemurou
  4.  
  5. march 2018
  6.  
  7. TERMS OF USE: https://nemurou.tumblr.com/tou
  8.  
  9. --->
  10.  
  11. <!DOCTYPE html>
  12. <html>
  13. <head>
  14. <title>{Title}</title>
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. <link rel="shortcut icon" href="{Favicon}">
  17. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  18. <meta name="viewport" content="width=device-width, initial-scale=1">
  19.  
  20. <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,900|Nunito+Sans:400,400i,900" rel="stylesheet">
  21.  
  22. <style type="text/css">
  23.  
  24. /*tumblr controls by cyantists*/
  25. iframe.tmblr-iframe {
  26. z-index: 99999999999999!important;
  27. top: 0!important;
  28. right: 0!important;
  29. opacity: 0.4;
  30. filter: invert(1) contrast(150%);
  31. -webkit-filter: invert(1) contrast(150%);
  32. -o-filter: invert(1) contrast(150%);
  33. -moz-filter: invert(1) contrast(150%);
  34. -ms-filter: invert(1) contrast(150%);
  35. transform: scale(0.5);
  36. transform-origin: 100% 0;
  37. -webkit-transform: scale(.7);
  38. -webkit-transform-origin: 100% 0;
  39. -o-transform: scale(.7);
  40. -o-transform-origin: 100% 0;
  41. -moz-transform: scale(.7);
  42. -moz-transform-origin: 100% 0;
  43. -ms-transform: scale(.7);
  44. -ms-transform-origin: 100% 0;
  45. }
  46.  
  47. #s-m-t-tooltip {
  48. max-width:150px;
  49. background:#eee; /*tooltip background*/
  50. padding:1px 6px 2px 6px;
  51. z-index:999;
  52. margin:20px;
  53. }
  54.  
  55. body {
  56. background:#fff; /*background*/
  57. font-family: 'Lato', sans-serif;
  58. font-size:13px;
  59. line-height:180%;
  60. color:#474747; /*font color*/
  61. margin:0;
  62. padding:0;
  63. -moz-osx-font-smoothing:grayscale;
  64. -webkit-font-smoothing:antialiased;
  65. font-smoothing:antialiased;
  66. }
  67.  
  68. a {
  69. text-decoration:none;
  70. color:#474747; /*link color*/
  71. }
  72.  
  73. ::-webkit-scrollbar {
  74. width:17px;
  75. height:17px;
  76. background-color:rgb(255,255,255);
  77. }
  78.  
  79. ::-webkit-scrollbar-track {
  80. border:8px solid #fff; /*should be same color as ur bg*/
  81. background-color:#aaa;
  82. }
  83.  
  84. ::-webkit-scrollbar-thumb {
  85. border:8px solid #fff; /*should be same color as ur bg*/
  86. background-color:#000;
  87. min-height:24px;
  88. min-width:24px;
  89. }
  90.  
  91. #content {
  92. height:100%;
  93. overflow:auto;
  94. display:flex;
  95. justify-content:center;
  96. align-items:center;
  97. margin:150px auto;
  98. }
  99.  
  100. header {
  101. width:750px;
  102. padding:9px 50px 0px 50px;
  103. text-align:center;
  104. -webkit-box-sizing: border-box;
  105. -moz-box-sizing: border-box;
  106. box-sizing: border-box;
  107. }
  108.  
  109. #name {
  110. font-family: 'Nunito Sans', sans-serif;
  111. font-weight:900;
  112. font-size:43px;
  113. color:#474747;/*color of header title*/
  114. border-bottom:4px solid #474747; /*header border*/
  115. padding:0px 30px 25px 30px;
  116. }
  117.  
  118. #links {
  119. padding-top:15px;
  120. }
  121.  
  122. #links a {
  123. display:inline-block;
  124. text-transform:uppercase;
  125. font-weight:900;
  126. margin-left:7px;
  127.  
  128. }
  129.  
  130. #links a:first-of-type {
  131. margin-left:0px;
  132. }
  133.  
  134. #info {
  135. width:750px;
  136. margin-top:60px;
  137. column-count:2;
  138. column-gap:50px;
  139. padding:0px 50px;
  140. -webkit-box-sizing: border-box;
  141. -moz-box-sizing: border-box;
  142. box-sizing: border-box;
  143. }
  144.  
  145. .box {
  146. width:300px;
  147. break-inside:avoid;
  148. display:inline-block;
  149. -webkit-box-sizing: border-box;
  150. -moz-box-sizing: border-box;
  151. box-sizing: border-box;
  152. padding-top:50px;
  153.  
  154. }
  155.  
  156. .line {
  157. position:relative;
  158. width:100%;
  159. height:1px;
  160. background:#474747;/*color of section label line*/
  161. margin-bottom:20px;
  162. }
  163.  
  164. .line .label {
  165. position:absolute;
  166. font-weight:900;
  167. font-size:24px;
  168. background:#fff;/*should be the same color as your background*/
  169. margin-top:-12px;
  170. padding-right:10px;
  171. color:#474747; /*color of section titles*/
  172. font-family: 'Nunito Sans', sans-serif;
  173. }
  174.  
  175. .text {
  176. text-align:justify;
  177. }
  178.  
  179. #picture img{
  180. width:100%;
  181. -moz-border-radius:8px;
  182. -webkit-border-radius:8px;
  183. border-radius: 8px;
  184. }
  185.  
  186. #quote {
  187. line-height:200%;
  188. font-size:16px;
  189. font-style:italic;
  190. }
  191.  
  192. #source {
  193. font-size:12px;
  194. text-align:right;
  195. margin-top:10px;
  196. }
  197.  
  198. .meter {
  199. height:7px;
  200. position:relative;
  201. background:#ddd; /*background color of meter*/
  202. -moz-border-radius: 25px;
  203. -webkit-border-radius: 25px;
  204. border-radius:25px;
  205. padding:6px;
  206. }
  207.  
  208. .meter > span {
  209. display: block;
  210. height: 100%;
  211. border-radius:8px;
  212. background-color:#474747; /*this is the color of the meter itself*/
  213. position: relative;
  214. overflow: hidden;
  215. box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); /*some fancy shadowing to add a 3dish effect lol*/
  216. }
  217.  
  218. .stat {
  219. margin-top:30px;
  220. text-align:right;
  221. }
  222.  
  223. .stat-label {
  224. font-weight:900;
  225. text-transform:uppercase;
  226. margin-bottom:8px;
  227. font-size:12px;
  228. font-family: 'Nunito Sans', sans-serif;
  229. }
  230.  
  231. .testimonial {
  232. position:relative;
  233. margin-top:35px;
  234. }
  235.  
  236. .testimonial-icon {
  237. position:absolute;
  238. width:100px;
  239. }
  240.  
  241. .testimonial-icon img {
  242. width:80px;
  243. height:80px;
  244. border-radius:50%;
  245. -moz-border-radius:50%;
  246. -webkit-border-radius:50%;
  247. }
  248.  
  249. .testimonial-icon:before {
  250. content:'“';
  251. font-family: 'Nunito Sans', sans-serif;
  252. font-size:80px;
  253. /*color of quotation marks on top of ur testimonial icon*/
  254. color:#474747;
  255. position:absolute;
  256. margin:20px 0px 0px -5px;
  257. }
  258.  
  259. .testimonial-text {
  260. margin-left:100px;
  261. line-height:130%;
  262. font-size:11px;
  263. width:200px;
  264. max-height:110px;
  265. overflow:auto;
  266. -webkit-box-sizing: border-box;
  267. -moz-box-sizing: border-box;
  268. box-sizing: border-box;
  269. text-align:justify
  270. }
  271.  
  272. .test-user {
  273. font-family: 'Nunito Sans', sans-serif;
  274. font-weight:900;
  275. font-size:12px;
  276. margin-bottom:6px;
  277. }
  278.  
  279. table {
  280. margin:auto;
  281. width:100%;
  282. font-size:12px;
  283. font-family: 'Nunito Sans', sans-serif;
  284. border-collapse: collapse;
  285. -webkit-box-sizing: border-box;
  286. -moz-box-sizing: border-box;
  287. box-sizing: border-box;
  288. }
  289.  
  290. th {
  291. font-weight:600;
  292. vertical-align:top;
  293. text-align:left;
  294. font-weight:900;
  295. width:100px;
  296. }
  297.  
  298. td {
  299. padding-left:15px;
  300. text-align:right;
  301. }
  302.  
  303. .phc a{
  304. text-align:center;
  305. background:#fff;
  306. position:fixed;
  307. right:25px;
  308. bottom:25px;
  309. font-size:11px;
  310. font-family:calibri;
  311. color:#000;
  312. line-height:100%;
  313. z-index:999;
  314. border-radius:4px;
  315. -moz-border-radius:4px;
  316. -webkit-border-radius:4px;
  317. padding:5px 8px 6px 8px;
  318. }
  319.  
  320.  
  321. </style> </head> <body>
  322.  
  323. <!---
  324.  
  325. - i used css grid to position these sections so if one column looks longer than the other just move around the sections.
  326.  
  327.  
  328. - please, please pLEASE if u need help editing, send me a LINK to where the page is located. i cant help u if im not able to see the edits u made to the code....
  329.  
  330. --->
  331.  
  332.  
  333.  
  334. <div id="content">
  335. <div id="content-txt">
  336. <header>
  337. <div id="name">Hong Jisoo</div>
  338. <div id="links">
  339.  
  340. <!---
  341. the / (slash) is a placeholder, remove before adding your link
  342. ----->
  343. <!---start of header links--->
  344. <a href="/">link one</a>
  345. <a href="/">link two</a>
  346. <a href="/">link three</a>
  347. <a href="/">link four</a>
  348. <a href="/">link five</a>
  349. <a href="/">link six</a>
  350. <a href="/">link seven</a>
  351. <!---end of links--->
  352. </div>
  353. </header>
  354. <div id="info">
  355.  
  356. <div class="box">
  357. <div class="line"><div class="label">Profile</div></div>
  358. <div class="text">
  359. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia lorem in enim blandit hendrerit. Nullam iaculis metus non mollis pulvinar. Morbi est turpis, molestie venenatis pulvinar sit amet, viverra ullamcorper libero. Etiam nec felis et quam dictum consectetur. Vivamus semper metus sem, in scelerisque mauris laoreet nec. Nulla facilisi. Sed fringilla nisl sed odio porta accumsan. Vivamus nec fermentum diam. Suspendisse pulvinar euismod dui, sed sagittis magna venenatis eget.
  360. <!--end of profile--->
  361. </div>
  362. </div>
  363.  
  364.  
  365.  
  366. <div class="box">
  367. <div class="line"><div class="label">Motto</div></div>
  368. <div id="quote">
  369. <!--- use <br> to make linke breaks in ur quote --->
  370. Sunday morning, rain is falling <br>
  371. Steal some covers, share some skin
  372. <div id="source">
  373. &mdash; "Sunday Morning" covered by Hong Jisoo, since 2012
  374. <!---end of source--->
  375. </div>
  376. <!--end of motto--->
  377. </div>
  378. </div>
  379.  
  380. <div class="box">
  381. <div class="line"><div class="label">Stats</div></div>
  382. <div class="text">
  383.  
  384. <div class="stat">
  385. <!--- edit stat label here --->
  386. <div class="stat-label">vocals (100%)</div>
  387. <div class="meter">
  388. <!-- don't forgot to change pecentage in the width --->
  389. <span style="width:100%"></span>
  390. </div>
  391. <!---end of one stat--->
  392. </div>
  393.  
  394. <div class="stat">
  395. <div class="stat-label">footbag kicking (17%)</div>
  396. <div class="meter">
  397. <span style="width:17%"></span>
  398. </div>
  399. <!---end of one stat--->
  400. </div>
  401.  
  402. <div class="stat">
  403. <div class="stat-label">pin drop (90%)</div>
  404. <div class="meter">
  405. <span style="width:90%"></span>
  406. </div>
  407. <!---end of one stat--->
  408. </div>
  409.  
  410. <div class="stat">
  411. <div class="stat-label">rap legend hong jisoo (75%)</div>
  412. <div class="meter">
  413. <span style="width:75%"></span>
  414. </div>
  415. <!---end of one stat--->
  416. </div>
  417.  
  418. <div class="stat">
  419. <div class="stat-label">ping pong (80%)</div>
  420. <div class="meter">
  421. <span style="width:80%"></span>
  422. </div>
  423. <!---end of one stat--->
  424. </div>
  425.  
  426. <!--end of stat--->
  427. </div>
  428. </div>
  429.  
  430. <div class="box">
  431. <div id="picture">
  432. <!--- picture is 300px, will resize automatically --->
  433. <img src="https://static.tumblr.com/ukg9sji/NRvp5cfcb/joshua.jpg">
  434. <!--end of picture--->
  435. </div>
  436. </div>
  437.  
  438.  
  439. <div class="box">
  440. <div class="line"><div class="label">Info</div></div>
  441.  
  442. <table>
  443.  
  444. <!--- one info --->
  445. <tr>
  446. <th>Stage Name</th>
  447. <td>Joshua (조슈아)</td>
  448. </tr>
  449. <!--- end of one info --->
  450.  
  451. <tr>
  452. <th>Real Name</th>
  453. <td>Hong Jisoo (홍지수)</td>
  454. </tr>
  455.  
  456. <tr>
  457. <th>Date of Birth</th>
  458. <td>December 30, 1995</td>
  459. </tr>
  460.  
  461. <tr>
  462. <th>Hometown</th>
  463. <td>Los Angeles, California</td>
  464. </tr>
  465.  
  466. <tr>
  467. <th>Specialty</th>
  468. <td>Singing, Playing the guitar</td>
  469. </tr>
  470.  
  471. <tr>
  472. <th>Hobbies</th>
  473. <td>Reading, Guitar, Singing, Movies</td>
  474. </tr>
  475.  
  476. <tr>
  477. <th>Training Period</th>
  478. <td>2 years and 2 months</td>
  479. </tr>
  480.  
  481.  
  482. <!---end of info section--->
  483. </table>
  484.  
  485.  
  486. </div>
  487.  
  488.  
  489. <div class="box">
  490. <div class="line"><div class="label">Testimonials</div></div>
  491.  
  492. <!---start of one testimonial--->
  493. <div class="testimonial">
  494. <div class="testimonial-icon">
  495. <!--- change testimonial icon here, img should be a square, 80px--->
  496. <!--- replace the / (slash) placeholder with the link to ur attestant's blog. if you don't want to link anyone just remove the <a href="/"> and the </a> --->
  497. <a href="/"><img src="https://static.tumblr.com/ukg9sji/X7dp5ckz5/hansol.png"></a>
  498. </div>
  499. <div class="testimonial-text">
  500. <!---edit testimonial name here--->
  501. <div class="test-user">Hansol Vernon Chwe says:</div>
  502. <!---edit testimonial text here, add as much as you want a scrollbar wil appear if it gets too long--->
  503. Vestibulum at tincidunt turpis. Proin et nisl odio. Nullam auctor at sapien eu tincidunt. Nulla a nibh non erat sagittis lacinia non eu ipsum. Sed vitae iaculis odio. Sed luctus iaculis orci.
  504. </div>
  505. </div>
  506. <!---end of one testimonial--->
  507.  
  508. <!---start of one testimonial--->
  509. <div class="testimonial">
  510. <div class="testimonial-icon">
  511. <!--- i didnt link this icon example to ur attestant's blog. see example above if you want to add link-- you got this!!! :) --->
  512. <img src="https://static.tumblr.com/ukg9sji/SAdp5cl0l/jeonghan.png"></div>
  513. <div class="testimonial-text">
  514. <div class="test-user">Yoon Jeong Han says:</div>
  515. Phasellus in ullamcorper magna. Aliquam sit amet arcu eget ex semper egestas. Vestibulum fringilla nisi at nibh faucibus, imperdiet tristique arcu congue. Etiam mattis at velit et rhoncus.
  516. </div>
  517. </div>
  518. <!---end of one testimonial--->
  519.  
  520. <!---end of testimonial section--->
  521. </div>
  522.  
  523.  
  524.  
  525.  
  526.  
  527.  
  528.  
  529.  
  530. <!---end of info--->
  531. </div>
  532.  
  533.  
  534.  
  535.  
  536.  
  537.  
  538. <!---end of content txt--->
  539. </div>
  540. <!---end of content--->
  541. </div>
  542.  
  543.  
  544. </html>
  545.  
  546. <span class="phc"><a href="https://nemurou.tumblr.com/">theme by<br><b>nemurou</b></a></span>
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!