API tools faq
paste
Advertisement
amboise

angèle

amboise
Sep 26th, 2019 (edited)
8,649
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.62 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. page angèle by amboise n.n
  4.  
  5. important:
  6.  
  7. - i left one too many notes on this code so it may look disorganized and even unfinished but it's all for the sake of helping you.
  8.  
  9. - i wouldn't recommend changing sizes of any kind (only font size) so if you really want to do it i won't provide you help with it.
  10.  
  11. - responsiveness cannot be removed.
  12.  
  13. - make sure you follow the terms of use.
  14.  
  15.  
  16. -->
  17. <!DOCTYPE html>
  18. <head>
  19.  
  20. <title>angèle</title> <!-- window title -->
  21.  
  22. <link rel="shortcut icon" href="{favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.  
  25. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.  
  27. <!-- font -->
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet">
  30.  
  31. <!-- css customization -->
  32.  
  33. <style type="text/css">
  34.  
  35. /* tumblr controls by@cyantists */
  36.  
  37. iframe.tmblr-iframe {
  38. z-index:999!important;
  39. top:19px!important;
  40. right:17.5px!important;
  41. opacity:0;
  42. padding-right:38px;
  43. /* delete invert(1) from here */
  44. filter:invert(1) contrast(150%);
  45. -webkit-filter:invert(1) contrast(150%);
  46. -o-filter:invert(1) contrast(150%);
  47. -moz-filter:invert(1) contrast(150%);
  48. -ms-filter:invert(1) contrast(150%);
  49. /* to here if your blog has a dark background */
  50. transform:scale(0.65);
  51. transform-origin:100% 0;
  52. -webkit-transform:scale(0.65);
  53. -webkit-transform-origin:100% 0;
  54. -o-transform:scale(0.65);
  55. -o-transform-origin:100% 0;
  56. -moz-transform:scale(0.65);
  57. -moz-transform-origin:100% 0;
  58. -ms-transform:scale(0.65);
  59. -ms-transform-origin:100% 0;
  60. }
  61.  
  62. iframe.tmblr-iframe:hover {
  63. opacity:0.6!important;
  64. }
  65.  
  66. .hcontrols {
  67. position:fixed;
  68. top:21px!important;
  69. right:17.5px!important;
  70. z-index:999;
  71. }
  72.  
  73. .hcontrols svg {
  74. width:14px;
  75. height:14px;
  76. padding:9px;
  77. color:#000; /* tumblr controls icon color */
  78. }
  79.  
  80. /* scrollbar */
  81.  
  82. ::-webkit-scrollbar {
  83. width:.4em;
  84. }
  85.  
  86. ::-webkit-scrollbar,
  87. ::-webkit-scrollbar-thumb {
  88. overflow:visible;
  89. border-radius:4px;
  90. }
  91.  
  92. ::-webkit-scrollbar-thumb {
  93. background:#f8f8f8; /* scrollbar color */
  94. }
  95.  
  96. /* main structure */
  97.  
  98. body {
  99. color:#000; /* text color excluding sidebar */
  100. line-height:1.5em;
  101. font-size:13px; /* font size */
  102. font-weight:400;
  103. font-family: 'PT Sans', sans-serif; /* font */
  104. letter-spacing:.75px;
  105. word-wrap:break-word;
  106. text-align:left;
  107. margin:0;
  108. background:#f8f8f8; /* background color */
  109. -moz-osx-font-smoothing:grayscale;
  110. -webkit-font-smoothing:antialiased;
  111. font-smoothing:antialiased;
  112. }
  113.  
  114. b, strong {
  115. font-weight:700;
  116. }
  117.  
  118. a {
  119. color:inherit;
  120. text-decoration:none;
  121. transition:all .3s linear;
  122. -webkit-transition:all .3s linear;
  123. -o-transition:all .3s linear;
  124. -moz-transition:all .3s linear;
  125. }
  126.  
  127. a, a img {
  128. cursor:pointer;
  129. }
  130.  
  131. a:hover {
  132. text-decoration:none;
  133. }
  134.  
  135. img {
  136. opacity:1;
  137. border:0;
  138. text-decoration:none;
  139. max-width:100%;
  140. height:auto;
  141. display:block;
  142. }
  143.  
  144. section {
  145. width:100%;
  146. margin:0 auto;
  147. }
  148.  
  149. /* title on top of the square */
  150.  
  151. .title {
  152. font-weight:700;
  153. font-size:14px;
  154. text-align:center;
  155. margin:7.5px auto -15px auto;
  156. overflow:hidden;
  157. white-space:nowrap;
  158. text-overflow:ellipsis;
  159. }
  160.  
  161. /* sidebar image */
  162.  
  163. .side {
  164. color:white; /* sidebar text color - includes text and icons */
  165. background-size:cover;
  166. background-color:#bdd6de; /* sidebar background */
  167. background-image:url('url of you image goes here'); /* sidebar img */
  168. background-repeat:no-repeat;
  169. background-position:center;
  170. }
  171.  
  172. /* square */
  173.  
  174. .square {
  175. border:2px solid;
  176. border-color:white; /* sidebar square color */
  177. position:relative;
  178. top:25px;
  179. margin:0 25px 25px 25px;
  180. }
  181.  
  182. /* icons bellow square */
  183.  
  184. .heart {
  185. display:inline-block;
  186. }
  187.  
  188. .heart svg {
  189. fill:red; /* heart icons color */
  190. }
  191.  
  192. .icons {
  193. margin:35px 0 0 25px;
  194. }
  195.  
  196. .icons svg {
  197. width:18px;
  198. height:18px;
  199. margin-right:10px;
  200. }
  201.  
  202. .icons .i-r {
  203. float:right;
  204. right:0;
  205. }
  206.  
  207. .icons .i-r svg {
  208. margin:0 -6px 0 0;
  209. }
  210.  
  211. /* text below icons */
  212.  
  213. .like {
  214. margin:5px 0 0 25px;
  215. max-width:100%;
  216. overflow:hidden;
  217. white-space:nowrap;
  218. text-overflow:ellipsis;
  219. }
  220.  
  221. /* post */
  222.  
  223. .post {
  224. background:white; /* post background */
  225. border:1px solid;
  226. border-color:#eee; /* post border */
  227. position:absolute;
  228. top:50%;
  229. transform:translate(0,-50%);
  230. left:50%;
  231. }
  232.  
  233. /* icon */
  234.  
  235. .avatar {
  236. width:25px;
  237. height:25px;
  238. overflow:hidden;
  239. border-radius:50%;
  240. border:1px solid;
  241. border-color:#eee; /* your avatar border */
  242. background-color:#bdd6de; /* your avatar background */
  243. background-image:url('url of you icon goes here'); /* your avatar img */
  244. }
  245.  
  246. .avatar {
  247. margin:25px;
  248. }
  249.  
  250. .post h1 {
  251. margin:-50px 25px 25px 70px;
  252. font-size:13px;
  253. }
  254.  
  255. .info a {
  256. border-bottom:2px solid #bdd6de; /* links */
  257. }
  258.  
  259. /* follow button */
  260.  
  261. .follow {
  262. float:right;
  263. margin:-44px 25px;
  264. color:#a4a3a3;
  265. }
  266.  
  267. .line {
  268. border-top:1px solid;
  269. border-color:#eee;
  270. width:100%;
  271. height:1px;
  272. }
  273.  
  274. .info {
  275. margin:25px;
  276. -webkit-overflow-scrolling: touch;
  277. }
  278.  
  279. .info h2 {
  280. font-size:13px;
  281. margin-top:0;
  282. }
  283.  
  284. .info p {
  285. margin-top:0px;
  286. }
  287.  
  288. .links {
  289. color:#a4a3a3;
  290. text-align:right;
  291. }
  292.  
  293. .links a {
  294. margin-left:10px;
  295. }
  296.  
  297. /* media queries - don't touch this unless you really know what you're doing */
  298.  
  299. @media (min-width:901px) {
  300. .side {
  301. width:350px;
  302. height:425px;
  303. color:white;
  304. position:absolute;
  305. top:50%;
  306. transform:translate(0,-50%);
  307. left:calc(50% - 350px);
  308. }
  309.  
  310. .square {
  311. width:296px;
  312. height:296px;
  313. }
  314.  
  315. .icons, .like, .title {
  316. width:296px;
  317. }
  318.  
  319. .post {
  320. width:348px;
  321. height:422px;
  322. }
  323.  
  324. .info {
  325. height:227px;
  326. overflow:hidden;
  327. padding-right:5px;
  328. }
  329.  
  330. .info:hover {
  331. overflow-y:scroll;
  332. }
  333.  
  334. .links {
  335. position:absolute;
  336. right:25px;
  337. bottom:30px;
  338. }
  339. }
  340.  
  341. @media (max-width:900px) {
  342. iframe.tmblr-iframe, .hcontrols {display:none!important;}
  343.  
  344. section {
  345. padding-bottom:100px;
  346. min-height:100%;
  347. }
  348.  
  349. .side {
  350. width:540px;
  351. height:615px;
  352. position:absolute;
  353. top:100px;
  354. transform:translate(-50%,0);
  355. left:50%;
  356. }
  357.  
  358. .square {
  359. width:486px;
  360. height:486px;
  361. }
  362.  
  363. .icons, .like, .title {
  364. width:486px;
  365. }
  366.  
  367. .post {
  368. width:538px;
  369. min-height:225px;
  370. position:absolute;
  371. top:715px;
  372. transform:translate(-50%,0);
  373. left:50%;
  374. margin-bottom:100px;
  375. }
  376.  
  377. .info {
  378. min-height:25px;
  379. margin-bottom:25px;
  380. }
  381.  
  382. .links {
  383. margin:20px 25px 25px 25px;
  384. }
  385. }
  386.  
  387. @media (max-width:568px) {
  388.  
  389. .title {
  390. width:85%;
  391. margin:15px auto -30px auto;
  392. }
  393.  
  394. .side {
  395. width:100%;
  396. height:100%;
  397. top:0;
  398. }
  399.  
  400. .square {
  401. top:7.5%;
  402. left:7.5%;
  403. margin:0;
  404. width:calc(85% - 4px);
  405. padding-top:calc(85% - 4px);
  406. height:0;
  407. }
  408.  
  409. .icons {
  410. margin:15% 7.5% 0 7.5%;
  411. width:calc(85% - 4px);
  412. }
  413.  
  414. .like {
  415. width:85%;
  416. margin-left:7.5%;
  417. }
  418.  
  419. .post {
  420. width:calc(100% - 2px);
  421. top:100%;
  422. margin-bottom:0;
  423. }
  424. }
  425.  
  426. </style>
  427. </head>
  428.  
  429. <body>
  430. <section>
  431.  
  432. <!-- sidebar begins -->
  433. <div class="side">
  434.  
  435. <!-- title on top of square - keep it short -->
  436. <div class="title">short and sweet or it'll overflow </div>
  437.  
  438. <!-- don't touch -->
  439. <div class="square"></div>
  440.  
  441. <!-- change icons if you wish -->
  442. <div class="icons">
  443.  
  444. <div class="heart"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> </div>
  445.  
  446. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
  447.  
  448. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
  449.  
  450. <!-- right icon -->
  451. <div class="i-r"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg> </div>
  452.  
  453. </div>
  454. <!-- icons end -->
  455.  
  456. <!-- keep it short, one line long -->
  457. <div class="like">
  458. whoever liked this keep it short and sweet or it'll overflow
  459. </div>
  460.  
  461. </div>
  462. <!-- sidebar end -->
  463.  
  464. <!-- post begins -->
  465. <div class="post">
  466.  
  467. <div class="avatar"></div>
  468. <h1>the other title</h1> <!-- title next to icon -->
  469.  
  470. <!-- if you don't want this to show you can delete it-->
  471. <div class="follow">
  472. <!-- replace name with your username -->
  473. <a href="https://tumblr.com/follow/name">follow</a>
  474. </div>
  475.  
  476. <!-- don't touch -->
  477. <div class="line"></div>
  478.  
  479. <!-- your text goes here, write as much as you like
  480. don't keep it to short -->
  481. <div class="info">
  482. <h2>a small title</h2>
  483.  
  484. <p>a small paragraph<br>
  485. with some space in between
  486. </p>
  487.  
  488. <p>a link looks like <a href="your-link">this</a> <br>
  489. something <b>bold</b> for the brave<br>
  490. or <i>italic</i> for the fancy<br>
  491. plenty of options so you may as well just google it my friendo.</p>
  492. </div>
  493.  
  494. <!-- don't touch -->
  495. <div class="line"></div>
  496.  
  497. <!-- your links go here, don't add too many -->
  498. <div class="links">
  499. <a href="/">home</a>
  500. <a href="/ask">msg</a>
  501. <a href="https://wwww.tumblr.com/dashboard">exit</a>
  502.  
  503. <!-- follow my terms of use and don't (re) move credit please -->
  504. <a href="https://amboise.tumblr.com/">credit.</a>
  505. </div>
  506.  
  507. </div>
  508. <!-- post end -->
  509.  
  510. </section>
  511.  
  512. <!-- icon for tumblr controls - change if you wish -->
  513. <div class="hcontrols"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></div>
  514.  
  515. </body>
  516. </html>
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!