techmaturgy

anjodois(navigation)

Jun 13th, 2019
451
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.69 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!----------------------------------------------------------------------------
  4.  
  5. ANJODOIS by codematurgy. don't claim this code as your own. feel free to point out any issues or suggest any changes to make it easier to use and browse through.
  6.  
  7. DIRECTION INSTRUCTIONS
  8. > if you're using any language script that should have a right to left order, head to the <html></html> tag(it's just below!) and change dir="ltr" to dir="rtl".
  9.  
  10. STYLING INSTRUCTIONS
  11. > go to "GENERAL STYLING" and change the colors/values for the appropriate labels.
  12. > it is possible to edit the smaller list box white background color but not recommended as it might not fit with most browsers default scrollbar, and not all browsers allow scrollbar customization either.
  13. > the gap-filling rectangles you may see when there is spare space have matching colors with the elements surrounding them, but with a lower opacity. its opacity can be changed going further down into the code.
  14. > go to "PAGE TITLE" to find the main page title, sitting at the top of your links. you can change it by changing the text between <h1> and </h1>.
  15.  
  16. STRUCTURE INSTRUCTIONS
  17. > go to "MAIN NAVIGATION SECTION" and start adding code anywhere from there to "END MAIN NAVIGATION SECTION".
  18. > use <article></article> for creating major boxes.
  19. > use <section></section> inside the major boxes to create the smaller boxes where the lists go.
  20. > use <a href="linkurl">linkname</a> inside the smaller list boxes to add links. switch linkurl to your link URL and linkname to the name you want displayed for the link.
  21. > use <*header>heading</header>(without that *, which is there for a reason) to create a header both for the major box and the smaller list boxes; switch heading to whatever name you wish to give your heading. <article></article> should always have one header as its first element; a header at the start of smaller list boxes are optional.
  22. > use <aside>info</aside> inside the major boxes to create a box allowing for a little additional information; switch info to the desired text. keep it short, but use as many boxes as you wish.
  23. > use <figure style="background-image:url('imageurl')"></figure> inside the major boxes to add an image; switch imageurl to your image URL. it will be automatically cropped if the image isn't square.
  24. > note that except for the <*header></header> always coming as the first element, there are no requirements to the order of the elements inside any major <article></article> box.
  25. > example:
  26. <article>
  27. <*header>Heading</header>
  28. <section>
  29. <a href="/">Link</a>
  30. <a href="/">Link</a>
  31. </section>
  32. </article>
  33. <article>
  34. <*header>Heading</header>
  35. <section>
  36. <*header>Section Heading</header>
  37. <a href="/">Link</a>
  38. </section>
  39. <section>
  40. <a href="/">Link</a>
  41. <a href="/">Link</a>
  42. </section>
  43. </article>
  44.  
  45. ----------------------------------------------------------------------------->
  46.  
  47. <html dir="ltr" lang="{block:English}en{/block:English}{block:German}de-DE{/block:German}{block:French}fr-FR{/block:French}{block:Italian}it-IT{/block:Italian}{block:Japanese}ja-JP{/block:Japanese}{block:Turkish}tr-TR{/block:Turkish}{block:Spanish}es-ES{/block:Spanish}{block:Russian}ru-RU{/block:Russian}{block:Polish}pl-PL{/block:Polish}{block:PortuguesePT}pt-PT{/block:PortuguesePT}{block:PortugueseBR}pt-BR{/block:PortugueseBR}{block:Dutch}nl-NL{/block:Dutch}{block:Korean}ko-KR{/block:Korean}{block:ChineseSimplified}zh-CN{/block:ChineseSimplified}{block:ChineseTraditional}zh-TW{/block:ChineseTraditional}{block:ChineseHK}zh-HK{/block:ChineseHK}{block:Indonesian}id-ID{/block:Indonesian}{block:Hindi}hi-IN{/block:Hindi}">
  48. <head>
  49. <title>{Title}</title>
  50. <link rel="shortcut icon" href="{Favicon}">
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  52. <meta name="description" content="{MetaDescription}"/>
  53.  
  54. <meta name="viewport" content="width=device-width"/>
  55.  
  56. <style>
  57. /*********************** GENERAL STYLING ***********************/
  58.  
  59. /* FONTS */
  60.  
  61. body {
  62. font-size:13px; /* base font size */
  63. font-family:Lucida Console, Consolas, Menlo, monospace; /* base font used. notice the default font comes with more than one value, because the following ones are "fallbacks" in case a font isn't available in that system. */
  64. }
  65.  
  66. /* COLORS */
  67.  
  68. body { background-color:#f8d4a9; } /* main background color */
  69.  
  70. #main_menu > h1 {
  71. background-color:#5e120e; /* background color for page title */
  72. color:white; /* font color for page title */
  73. }
  74.  
  75. /*** article ***/
  76.  
  77. #main_menu > nav a, #main_footer #codematurgy, #directory > article, #directory > article::after {
  78. background-color:#8a1e17; /* background color for larger boxes and navigation links not inserted by users */
  79. color:white; /* font color for larger boxes and navigation links not inserted by users */
  80. }
  81.  
  82. /*** article sections ***/
  83.  
  84. /* section box inner elements */
  85.  
  86. #directory > article > section > a { color:#8a1e17; } /* font color for section box links */
  87.  
  88. #directory > article > section > * { border-color:#dddddd; } /* border color between section box items */
  89.  
  90. #directory > article > section > a:hover, #directory > article > section > a:focus { background-color:#efefef; } /* background color for section box items on hover */
  91.  
  92. /*** article aside ***/
  93.  
  94. #directory > article > aside { border-color:rgba(255, 255, 255, 0.3); } /* border color for aside box */
  95.  
  96. /* ROUND BORDERS */
  97.  
  98. #main_menu > h1, #main_menu > nav a, #main_footer #codematurgy { border-radius:3px; } /* title and navigation links */
  99.  
  100. #directory > article, #directory > article::after, #directory > article > header ~ *, #directory > article > header:not(:nth-last-child(2)):not(:nth-last-child(3)):not(:nth-last-child(4))::after, #directory > article > aside::before, #directory > article > aside::after { border-radius:5px; } /* all the other rounded borders */
  101.  
  102. /**************** EDITABLE, BUT NOT RECOMMENDED ****************/
  103.  
  104. /*** article sections ***/
  105.  
  106. /* background color for section boxes */
  107.  
  108. #directory > article > section, #directory > article > header:not(:nth-last-child(2)):not(:nth-last-child(3)):not(:nth-last-child(4))::after, #directory > article > aside::before, #directory > article > aside::after { background-color:white; }
  109. #directory > article > section { border-color:white; }
  110.  
  111. /* section box inner elements */
  112.  
  113. #directory > article > section { color:#606060; } /* font color for section boxes */
  114.  
  115. /********************* END GENERAL STYLING *********************/
  116.  
  117. iframe.tmblr-iframe { display:none; }
  118. .tmblr-iframe-pushdown { padding-top:0!important; }
  119.  
  120. body {
  121. margin:0;
  122. line-height:1.75em;
  123. }
  124.  
  125. main, header, article, aside, section, figure { display:block; }
  126.  
  127. /* WRAPPER */
  128.  
  129. #wrapper { overflow:hidden; }
  130.  
  131. /* MENU AND FOOTER */
  132.  
  133. #main_menu { line-height:1.5em; }
  134.  
  135. #main_menu > h1 {
  136. display:inline-block;
  137. margin:0;
  138. padding:0.4em 0.5em;
  139. font-size:1.75em;
  140. }
  141.  
  142. #main_footer { text-align:center; }
  143.  
  144. #main_menu > nav {
  145. margin:-0.3em;
  146. margin-top:0.75em;
  147. }
  148.  
  149. #main_menu > nav a { margin:0.3em; }
  150.  
  151. #main_menu > nav a, #main_footer #codematurgy {
  152. display:inline-block;
  153. padding:0.3em 0.6em;
  154. text-decoration:none;
  155. }
  156.  
  157. #main_menu > nav a:hover, #main_menu > nav a:focus, #main_footer #codematurgy:hover, #main_footer #codematurgy:focus { text-decoration:underline; }
  158.  
  159. /* DIRECTORY */
  160.  
  161. #directory > article, #directory > article > * {
  162. display:inline-block;
  163. vertical-align:top;
  164. box-sizing:border-box;
  165. }
  166.  
  167. #directory > article { position:relative; }
  168.  
  169. /* inner spare rectangles */
  170.  
  171. #directory > article::after {
  172. content:"";
  173. position:absolute;
  174. top:0;
  175. width:100%;
  176. height:100%;
  177. opacity:0.5;
  178. }
  179.  
  180. html[dir="ltr"] #directory > article::after { left:100%; }
  181. html[dir="rtl"] #directory > article::after { right:100%; }
  182.  
  183. /* article header */
  184.  
  185. #directory > article > header {
  186. display:block;
  187. font-size:1.2em;
  188. padding:0 0.5em;
  189. }
  190.  
  191. #directory > article > header:nth-last-child(3) {
  192. display:inline-block;
  193. margin-bottom:0;
  194. }
  195.  
  196. /* article further description */
  197.  
  198. #directory > article > aside {
  199. padding:1em;
  200. border-width:1px;
  201. border-style:solid;
  202. overflow:hidden;
  203. }
  204.  
  205. /* article figures */
  206.  
  207. #directory > article > figure {
  208. background-size:cover;
  209. background-position:center;
  210. }
  211.  
  212. /* article section */
  213.  
  214. #directory > article > section {
  215. overflow:auto;
  216. padding:0.5em;
  217. border-width:0.5em;
  218. border-style:solid;
  219. padding-top:0;
  220. padding-bottom:0;
  221. border-left-width:0;
  222. border-right-width:0;
  223. }
  224.  
  225. /* article section header */
  226.  
  227. #directory > article > section > header {
  228. padding:0.5em 0.75em;
  229. box-sizing:border-box;
  230. }
  231.  
  232. #directory > article > section > header:first-child {
  233. position:-webkit-sticky;
  234. position:sticky;
  235. top:0;
  236. background-color:inherit;
  237. }
  238.  
  239. #directory > article > section > * {
  240. border-width:0;
  241. border-style:solid;
  242. border-bottom-width:1px;
  243. }
  244.  
  245. /* article links */
  246.  
  247. #directory > article > section > a {
  248. display:block;
  249. padding:0.2em 0.75em;
  250. }
  251.  
  252. #directory > article > section > a { text-decoration:none; }
  253.  
  254. #directory > article > section > a:hover, #directory > article > section > a:focus { text-decoration:underline; }
  255.  
  256. /* inner spare rectangles */
  257.  
  258. #directory > article > header:not(:nth-last-child(2)):not(:nth-last-child(3)):not(:nth-last-child(4))::after, #directory > article > aside::before, #directory > article > aside::after {
  259. position:absolute;
  260. opacity:0.15;
  261. }
  262.  
  263. #directory > article > header:nth-last-child(3n + 2):not(:nth-last-child(2))::after, #directory > article > header:nth-last-child(3n + 3):not(:nth-last-child(3))::after { content:""; }
  264.  
  265. /* STRUCTURE STYLING
  266. don't touch this unless you know what you're doing! */
  267.  
  268. /* sizes */
  269.  
  270. #wrapper { width:762px; }
  271.  
  272. #directory > article > header:nth-last-child(2), #directory > article > header:nth-last-child(2) + * { width:329px; }
  273.  
  274. #directory > article > header:nth-last-child(2) + * { height:170px; }
  275.  
  276. #directory > article > *:nth-child(2):not(:last-child), #directory > article > *:nth-child(2):not(:last-child) ~ *, #directory > article > header::after, #directory > article > header:nth-last-child(3) {
  277. width:226px;
  278. height:226px;
  279. }
  280.  
  281. #directory > article > header:nth-last-child(3n + 2)::after { width:calc(226px * 2); }
  282.  
  283. /* outer margins */
  284.  
  285. #wrapper, #directory > article { margin:10px; }
  286. #wrapper > *:not(#directory) { margin:calc(2 * 10px) 10px; }
  287. html[dir="ltr"] #directory > article::after { margin-left:calc(2 * 10px); }
  288. html[dir="rtl"] #directory > article::after { margin-right:calc(2 * 10px); }
  289.  
  290. #wrapper {
  291. margin-left:auto;
  292. margin-right:auto;
  293. }
  294.  
  295. #directory {
  296. margin-top:0;
  297. margin-bottom:0;
  298. }
  299.  
  300. /* inner margins */
  301.  
  302. #directory > article { padding:8px; }
  303. #directory > article > * { margin:8px; }
  304.  
  305. #directory > article > header:not(:nth-last-child(2)):not(:nth-last-child(3)):not(:nth-last-child(4))::after { bottom:calc(2 * 8px); }
  306. html[dir="ltr"] #directory > article > header:not(:nth-last-child(2)):not(:nth-last-child(3)):not(:nth-last-child(4))::after { right:calc(2 * 8px); }
  307. html[dir="rtl"] #directory > article > header:not(:nth-last-child(2)):not(:nth-last-child(3)):not(:nth-last-child(4))::after { left:calc(2 * 8px); }
  308.  
  309. /* RESPONSIVE STYLING
  310. also don't touch this if you don't know what you're doing! */
  311.  
  312. @media (max-width: 799px) {
  313. /* inner spare rectangles */
  314.  
  315. #directory > article > header:nth-last-child(3n + 2):not(:nth-last-child(2))::after, #directory > article > header:nth-last-child(3n + 3):not(:nth-last-child(3))::after { content:none; }
  316.  
  317. #directory > article > header:nth-last-child(2n + 2):not(:nth-last-child(2))::after { content:""; }
  318.  
  319. /* sizes */
  320.  
  321. #wrapper { width:600px; }
  322.  
  323. #directory > article > header:nth-last-child(2), #directory > article > header:nth-last-child(2) + * { width:248px; }
  324.  
  325. #directory > article > *:nth-child(2):not(:last-child), #directory > article > *:nth-child(2):not(:last-child) ~ *, #directory > article > header::after {
  326. width:266px;
  327. height:266px;
  328. }
  329.  
  330. #directory > article > header:nth-last-child(3) {
  331. display:block;
  332. width:auto;
  333. height:auto;
  334. }
  335.  
  336. /* inner margins */
  337.  
  338. #directory > article > header:nth-last-child(3) { margin-bottom:8px; }
  339. }
  340.  
  341. @media (max-width: 637px) {
  342. /* outer spare rectangles */
  343.  
  344. #directory > article::after { content:none; }
  345.  
  346. /* sizes */
  347.  
  348. #wrapper { width:calc(100vw - 10px - 10px - 17px); }
  349.  
  350. #directory > article { width:calc(100vw - 10px - 10px - 10px - 10px - 17px); }
  351.  
  352. #directory > article > header:nth-last-child(2), #directory > article > header:nth-last-child(2) + * { width:calc(100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - 17px); }
  353.  
  354. #directory > article > *:nth-child(2):not(:last-child), #directory > article > *:nth-child(2):not(:last-child) ~ *, #directory > article > header::after {
  355. width:calc((100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - (2 * 8px) - 17px)/ 2);
  356. height:calc((100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - (2 * 8px) - 17px)/ 2);
  357. }
  358. }
  359.  
  360. @media (max-width: 557px) {
  361. /* inner spare rectangles */
  362.  
  363. #directory > article > header:not(:nth-last-child(2)):not(:nth-last-child(3)):not(:nth-last-child(4))::after { content:none; }
  364.  
  365. #directory > article > aside, #directory > article > aside:nth-child(2):not(:last-child), #directory > article > *:nth-child(2):not(:last-child) ~ aside {
  366. overflow:visible;
  367. }
  368.  
  369. #directory > article > aside:not(:nth-child(2))::before, #directory > article > aside:last-of-type:not(:last-child)::after {
  370. content:"";
  371. z-index:0;
  372. }
  373.  
  374. #directory > article > *:not(aside) {
  375. position:relative;
  376. z-index:1;
  377. }
  378.  
  379. #directory > article > aside:not(:nth-child(2))::before {
  380. margin-top:calc(((100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - (2 * 8px) - 17px)/ -2) - (2 * 8px) - 1px - 1em);
  381. }
  382.  
  383. /* sizes */
  384.  
  385. #directory > article > aside, #directory > article > aside:nth-child(2):not(:last-child), #directory > article > *:nth-child(2):not(:last-child) ~ aside {
  386. width:calc(100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - 17px);
  387. height:auto;
  388. }
  389.  
  390. #directory > article > aside::before, #directory > article > aside::after {
  391. width:calc((100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - (2 * 8px) - 17px)/ 2);
  392. height:calc((100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - (2 * 8px) - 17px)/ 2);
  393. }
  394.  
  395. /* inner margins */
  396.  
  397. #directory > article > aside:not(:nth-child(2))::before { margin-bottom:calc(2 * 8px); }
  398. #directory > article > aside:last-of-type:not(:last-child)::after { bottom:calc(2 * 8px); }
  399. html[dir="ltr"] #directory > article > aside:not(:nth-child(2))::before, html[dir="ltr"] #directory > article > aside:last-of-type:not(:last-child)::after { right:calc(2 * 8px); }
  400. html[dir="rtl"] #directory > article > aside:not(:nth-child(2))::before, html[dir="rtl"] #directory > article > aside:last-of-type:not(:last-child)::after { left:calc(2 * 8px); }
  401. }
  402.  
  403. @media (max-width: 516px) {
  404. /* inner spare rectangles */
  405. #directory > article > aside:not(:nth-child(2))::before, #directory > article > aside:last-of-type:not(:last-child)::after { content:""; }
  406.  
  407. /* sizes */
  408.  
  409. #directory > article > *:nth-child(2):not(:last-child), #directory > article > *:nth-child(2):not(:last-child) ~ * { width:calc(100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - 17px); }
  410.  
  411. #directory > article > *:not(figure):nth-child(2):not(:last-child), #directory > article > *:nth-child(2):not(:last-child) ~ *:not(figure), #directory > article > header:nth-last-child(2) + * { height:auto; }
  412.  
  413. #directory > article > figure:nth-child(2):not(:last-child), #directory > article > *:nth-child(2):not(:last-child) ~ * { height:calc(100vw - 10px - 10px - 10px - 10px - (2 * 8px) - (2 * 8px) - 17px); }
  414. }
  415. </style>
  416. </head>
  417. <body>
  418. <div id="wrapper">
  419. <header id="main_menu">
  420. <!------------------------------- PAGE TITLE ------------------------------->
  421. <h1>Page Title</h1>
  422. <!----------------------------- END PAGE TITLE ----------------------------->
  423. <nav>
  424. <a href="{BlogURL}">{lang:Home}</a>
  425. <a href="{BlogURL}archive">{lang:Archive}</a>
  426. {block:AskEnabled}<a href="{BlogURL}ask">{AskLabel}</a>{/block:AskEnabled}
  427. {block:SubmissionsEnabled}<a href="{BlogURL}submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}
  428. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  429. </ul>
  430. </nav>
  431. </header>
  432. <main role="main" id="directory">
  433. <!---------------------------- MAIN TEXT SECTION ---------------------------->
  434. <article>
  435. <header>
  436. Early Works(2008 & 2012)
  437. </header>
  438. <aside>
  439. The following works are Charli's first album plus mixtapes released independently, giving a taste of what would be her proper debut album, True Romance.
  440. </aside>
  441. <section>
  442. <header>
  443. 14
  444. </header>
  445. <a href="/tagged/audio">!Franchesckaar!</a>
  446. <a href="/">Lucy</a>
  447. <a href="/">Chas's Song</a>
  448. <a href="/">Leave Me</a>
  449. <a href="/">I'll Teach You a Lesson</a>
  450. <a href="/">Machines</a>
  451. <a href="/">Supermodels and Holiday Stunners</a>
  452. <a href="/">Watch the Rain</a>
  453. <a href="/">Live Life</a>
  454. <a href="/">Neon Fashion and Glowstix</a>
  455. <a href="/">Mauritius</a>
  456. <a href="/">Alcoholic</a>
  457. <a href="/">Yet Again</a>
  458. <a href="/">14</a>
  459. </section>
  460. <figure style="background-image:url('https://prettymuchamazing.com/.image/ar_8:10%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cg_faces:center%2Cq_auto:good%2Cw_620/MTMwMTU3NzgyMTE5ODA0ODk4/charli-xcx.jpg')"></figure>
  461. <section>
  462. <header>
  463. Heartbreaks and earthquakes
  464. </header>
  465. <a href="/">Champagne Coast</a>
  466. <a href="/">How Can I</a>
  467. <a href="/">Grins</a>
  468. <a href="/">So Far Away</a>
  469. <a href="/">Dreams Money Can Buy</a>
  470. <a href="/">Lock You Up</a>
  471. <a href="/">Spoons</a>
  472. <a href="/">You're The One (Odd Future's the Internet Remix) (feat. The Internet & Mike G)</a>
  473. </section>
  474. <section>
  475. <header>
  476. Super Ultra
  477. </header>
  478. <a href="/">Cloud Aura (feat. Brooke Candy)</a>
  479. <a href="/">Moments In Love</a>
  480. <a href="/">Velvet Dreaming (Luv)</a>
  481. <a href="/">Dance 4 U</a>
  482. <a href="/">Glow</a>
  483. <a href="/">Heatwave</a>
  484. <a href="/">Cold Nites (Remix)</a>
  485. <a href="/">Forgiveness</a>
  486. </section>
  487. </article>
  488. <article>
  489. <header>
  490. True Romance(2013)
  491. </header>
  492. <aside>True Romance is a favorite to synth-pop fans. Showing a production untraceable to her other eras and relistenable still, this dreamy record is her true debut.</aside>
  493. <section>
  494. <a href="/">Nuclear Seasons</a>
  495. <a href="/">You (Ha Ha Ha)</a>
  496. <a href="/">Take My Hand</a>
  497. <a href="/">Stay Away</a>
  498. <a href="/">Set Me Free</a>
  499. <a href="/">Grins</a>
  500. <a href="/">So Far Away</a>
  501. <a href="/">Cloud Aura (feat. Brooke Candy)</a>
  502. <a href="/">What I Like</a>
  503. <a href="/">Black Roses</a>
  504. <a href="/">You're the One</a>
  505. <a href="/">How Can I</a>
  506. <a href="/">Lock You Up</a>
  507. </section>
  508. </article>
  509. <article>
  510. <header>
  511. Sucker(2014)
  512. </header>
  513. <section>
  514. <a href="/">Sucker</a>
  515. <a href="/">Break The Rules</a>
  516. <a href="/">London Queen</a>
  517. <a href="/">Breaking Up</a>
  518. <a href="/">Gold Coins</a>
  519. <a href="/">Boom Clap</a>
  520. <a href="/">Doing It</a>
  521. <a href="/">Body Of My Own</a>
  522. <a href="/">Famous</a>
  523. <a href="/">Hanging Around</a>
  524. <a href="/">Die Tonight</a>
  525. <a href="/">Caught in the Middle</a>
  526. <a href="/">Need Ur Luv</a>
  527. </section>
  528. </article>
  529. <article>
  530. <header>
  531. Vroom Vroom EP(2016)
  532. </header>
  533. <section>
  534. <a href="/">Vroom Vroom</a>
  535. <a href="/">Paradise (feat. Hannah Diamond)</a>
  536. <a href="/">Trophy</a>
  537. <a href="/">Secret (Shh)</a>
  538. </section>
  539. </article>
  540. <article>
  541. <header>
  542. Latest Mixtapes(2017)
  543. </header>
  544. <aside>
  545. The following works were released under A.G. Cook's production, as well as other producers, showing Charli XCX's great relationship with PC music.
  546. </aside>
  547. <img src="https://lastfm-img2.akamaized.net/i/u/770x0/e844b53835a7485de7e607f47f4ce6d6.jpg">
  548. <section>
  549. <header>
  550. Number 1 Angel
  551. </header>
  552. <a href="/">Dreamer (feat. RAYE & Starrah)</a>
  553. <a href="/">3AM (Pull Up) (feat. MØ)</a>
  554. <a href="/">Blame It On U</a>
  555. <a href="/">Roll With Me</a>
  556. <a href="/">Emotional</a>
  557. <a href="/">ILY2</a>
  558. <a href="/">White Roses</a>
  559. <a href="/">Babygirl (feat. Uffie)</a>
  560. <a href="/">Drugs (feat. ABRA)</a>
  561. <a href="/">Lipgloss (feat. CupcakKe)</a>
  562. </section>
  563. <section>
  564. <header>
  565. Pop 2
  566. </header>
  567. <a href="/">Backseat (feat. Carly Rae Jepsen</a>
  568. <a href="/">Out of My Head (feat. ALMA & Tove Lo)</a>
  569. <a href="/">Lucky</a>
  570. <a href="/">Tears (feat. Caroline Polachek)</a>
  571. <a href="/">I Got It (feat. Brooke Candy, CupcakKe & Pabllo Vittar)</a>
  572. <a href="/">Femmebot (feat. Dorian Electra & Mykki Blanco)</a>
  573. <a href="/">Delicious (feat. TOMM¥ €A$H)</a>
  574. <a href="/">Unlock It (feat. Jay Park & Kim Petras)</a>
  575. <a href="/">Porsche (feat. MØ)</a>
  576. <a href="/">Track 10</a>
  577. </section>
  578. <figure style="background-image:url('https://www.musicjournal.com.br/wp-content/uploads/2017/12/[email protected]')"></figure>
  579. </article>
  580. <!-------------------------- END MAIN TEXT SECTION -------------------------->
  581. </main>
  582. <footer id="main_footer">
  583. <a href="https://codematurgy.tumblr.com" id="codematurgy">Codematurgy</a>
  584. </footer>
  585. </div>
  586. </body>
  587. </html>
Advertisement
Add Comment
Please, Sign In to add comment