1. 
 2.  
 3. 
 4.  
 5. 
 9.  
 10. 
 16.    
 17.  
 18. {Title}
 19. 
 20. 
 21. 
 22. 
 23.  
 24. 
 25.  
 26. 
 27.  
 28. 
 29.  
 30. 
 31.  
 32. 
 33.  
 34. :root {
 35.     --body-background:#eee; /* background color body */
 36.     --font-size:14px; /* font size for whole document */
 37.     --font-family:Nunito; /* font family - you can choose between:
 38.                                                     - Nunito
 39.                                                     - Oxygen
 40.                                                     - PT Sans
 41.                                                     - Rubik */
 42.     --text-color:#999; /* general color for text */
 43.     --link-color:#444; /* color for links + darker color */
 44.     --container-background:#fff; /* backround color book */
 45.     --background-pages:#fafafa; /* background color fake pages */
 46.     --accent-color:#b0a5ff; /* accent color */
 47.     --rgb-middle-fold:238,238,238; /* rgb color for the fold in the middle */
 48. }
 49.  
 50. /* DELETE THIS IF YOU WANT LIGHT TUMBLR CONTROLS */
 51.  
 52. div.status-indicator {
 53.     filter:invert(1)!important;
 54. }
 55. iframe.iframe-controls--desktop {
 56.     filter:invert(1) contrast(150%);
 57.     -webkit-filter:invert(1) contrast(150%);
 58.     -o-filter:invert(1) contrast(150%);
 59.     -moz-filter:invert(1) contrast(150%);
 60.     -ms-filter:invert(1) contrast(150%);
 61.     opacity:.7!important;
 62. }
 63.  
 64. /* END OF TUMBLR CONTROLS DELETE */
 65.  
 66. /* DELETE THIS IF YOU DON'T WANT A FADE IN EFFECT */
 67.  
 68. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 69. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 70. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 71. .fade-in {
 72.    opacity:0;
 73.    -webkit-animation:fadeIn ease-in 1;
 74.    -moz-animation:fadeIn ease-in 1;
 75.    animation:fadeIn ease-in 1;
 76.    -webkit-animation-fill-mode:forwards;
 77.    -moz-animation-fill-mode:forwards;
 78.    animation-fill-mode:forwards;
 79.    -webkit-animation-duration:1s;
 80.    -moz-animation-duration:1s;
 81.    animation-duration:1s;}
 82. .fade-in.one {
 83.    -webkit-animation-delay:0s;
 84.    -moz-animation-delay:0s;
 85.    animation-delay:0s;}
 86. .fade-in.two {
 87.    -webkit-animation-delay:0.8s;
 88.    -moz-animation-delay:0.8s;
 89.    animation-delay:0.8s;}
 90.  
 91. /* END OF FADE IN DELETE */
 92.  
 93. /* THIS IS THE REST OF THE CSS. PLEASE DON'T EDIT IT UNLESS YOU KNOW WHAT YOU'RE DOING */
 94.  
 95. body {
 96.     background:var(--body-background);
 97.     margin:0;
 98.     font-size:var(--font-size);
 99.     font-family:var(--font-family);
 100.     color:var(--text-color);
 101. }
 102.  
 103. ::-webkit-scrollbar {
 104.     width:12px;
 105.     height:12px;
 106.     background:var(--container-background);
 107. }
 108.  
 109. ::-webkit-scrollbar-thumb {
 110.     background:var(--accent-color);
 111.     border:3px solid var(--container-background);
 112.     border-radius:15px;
 113. }
 114.  
 115. ::selection {
 116.     background:var(--accent-color);
 117.     color:var(--link-color);
 118. }
 119.  
 120. ::-moz-selection {
 121.     background:var(--accent-color);
 122.     color:var(--link-color);
 123. }
 124.  
 125. iframe.iframe-controls--desktop {
 126.     white-space:nowrap!important;
 127.     z-index:99999999999999!important;
 128.     top:10px!important;
 129.     right:15px!important;
 130.     transition:all .5s ease-in-out;
 131.     -moz-transition:all .5s ease-in-out;
 132.     -o-transition:all .5s ease-in-out;
 133.     -webkit-transition:all .5s ease-in-out;
 134.     transform:scale(0.65);
 135.     transform-origin:100% 0;
 136.     -webkit-transform:scale(0.75);
 137.     -webkit-transform-origin:100% 0;
 138.     -o-transform:scale(0.75);
 139.     -o-transform-origin:100% 0;
 140.     -moz-transform:scale(0.75);
 141.     -moz-transform-origin:100% 0;
 142.     -ms-transform:scale(0.75);
 143.     -ms-transform-origin:100% 0;
 144. }
 145.  
 146. iframe.tmblr-iframe--app-cta-button, iframe.iframe-controls--phone-mobile {
 147.     display:none!important;
 148. }
 149.  
 150. #s-m-t-tooltip {
 151.     max-width:300px;
 152.     overflow-x:auto;
 153.     margin:15px;
 154.     padding:7px;
 155.     background:var(--accent-color);
 156.     color:var(--link-color);
 157.     box-shadow:0 0 4px rgba(0,0,0,.2);
 158.     border-radius:10px;
 159.     height:auto;
 160.     word-wrap:break-word;
 161.     z-index:9999!important;
 162.     text-transform:lowercase;
 163. }
 164.  
 165. a {
 166.     text-decoration:none;
 167.     transition:all .5s ease-in-out;
 168. }
 169.  
 170. section#container {
 171.     display:-webkit-box;
 172.     display:-ms-flexbox;
 173.     display:flex;
 174.     -webkit-box-align:center;
 175.     -ms-flex-align:center;
 176.     align-items:center;
 177.     -webkit-box-pack:center;
 178.     -ms-flex-pack:center;
 179.     justify-content:center;
 180.     height:100vh;
 181.     width:100%;
 182.     overflow:hidden;
 183.  
 184. }
 185.  
 186. article.container {
 187.     width:65vw;
 188.     height:85vh;
 189.     background:var(--container-background);
 190.     position:relative;
 191.     border-radius:30px;
 192.     box-shadow:0 0 8px rgba(0,0,0,0.2);
 193. }
 194.  
 195. article.container::before, article.container::after {
 196.     content:"";
 197.     height:99%;
 198.     position:absolute;
 199.     width:98%;
 200.     z-index:-1;
 201.     background:var(--background-pages);
 202.     box-shadow:0 0 8px rgba(0,0,0,0.2);
 203.     top:4px;
 204. }
 205.  
 206. article.container::before {
 207.     border-radius:30px 0px 0px 30px;
 208.     left:-15px;
 209. }
 210.  
 211. article.container::after {
 212.     border-radius:0px 30px 30px 0px;
 213.     right:-15px;
 214. }
 215.  
 216. article.container .facts {
 217.     height:100%;
 218.     width:50%;
 219.     display:inline-block;
 220.     padding:25px;
 221.     box-sizing:border-box;
 222. }
 223.  
 224. article.container .facts:before {
 225.     content:'';
 226.     position:absolute;
 227.     width:10px;
 228.     height:100%;
 229.     background:linear-gradient(to right, rgba(var(--rgb-middle-fold),0), rgb(var(--rgb-middle-fold)), rgba(var(--rgb-middle-fold),0));
 230.     margin-top:-25px;
 231.     margin-left:calc(50% - 30px);
 232. }
 233.  
 234. article.container .facts .img {
 235.     height:52vh;
 236.     background:var(--accent-color);
 237.     border-radius:20px;
 238.     overflow:hidden;
 239.     display:-webkit-box;
 240.     display:-ms-flexbox;
 241.     display:flex;
 242.     -webkit-box-align:center;
 243.     -ms-flex-align:center;
 244.     align-items:center;
 245.     -webkit-box-pack:center;
 246.     -ms-flex-pack:center;
 247.     justify-content:center;
 248. }
 249.  
 250. article.container .facts .img img {
 251.     border-radius:20px;
 252.     max-width:100%;
 253.     max-height:100%;
 254. }
 255.  
 256. article.container .about {
 257.     position:relative;
 258.     margin-top:25px;
 259. }
 260.  
 261. article.container .about .col {
 262.     display:inline-block;
 263.     position:absolute;
 264.     width:50%;
 265.     max-width:50%;
 266.     overflow:hidden;
 267. }
 268.  
 269. article.container .about .col:nth-of-type(2) {
 270.     margin-left:50%;
 271. }
 272.  
 273. article.container .about em {
 274.     display:block;
 275.     font-style:normal;
 276. }
 277.  
 278. article.container .about em b {
 279.     background:var(--accent-color);
 280.     color:var(--link-color);
 281.     text-transform:lowercase;
 282.     padding:5px;
 283.     border-radius:7px;
 284.     line-height:35px;
 285.     margin-right:5px;
 286.     white-space:nowrap;
 287. }
 288.  
 289. article.container .desc {
 290.     position:absolute;
 291.     width:50%;
 292.     display:inline-block;
 293.     padding:25px;
 294.     box-sizing:border-box;
 295.     height:100%;
 296. }
 297.  
 298. article.container .desc h2, article.container h2.mob {
 299.     text-align:center;
 300.     text-transform:uppercase;
 301.     margin:0;
 302.     padding-bottom:10px;
 303. }
 304.  
 305. article.container .desc .text {
 306.     overflow:auto;
 307.     max-height:calc(100% - 23px);
 308. }
 309.  
 310. article.container .desc .text p:first-of-type {
 311.     margin-top:0;
 312. }
 313.  
 314. article.container .desc .text a {
 315.     position:relative;
 316.     display:inline-block;
 317.     color:var(--link-color);
 318. }
 319.  
 320. article.container .desc .text a:before, article.container .desc .text a:after {
 321.     content:'';
 322.     position:absolute;
 323.     width:0%;
 324.     height:3px;
 325.     top:50%;
 326.     margin-top:-0.5px;
 327.     background:var(--accent-color);
 328. }
 329.  
 330. article.container .desc .text a:before {
 331.     left:0px;
 332. }
 333.  
 334. article.container .desc .text a:after {
 335.     right:2.5px;
 336.     background:var(--accent-color);
 337.     transition:width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
 338. }
 339.  
 340. article.container .desc .text a:hover:before {
 341.     background:var(--accent-color);
 342.     width:100%;
 343.     transition:width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
 344. }
 345.  
 346. article.container .desc .text a:hover:after {
 347.     background:transparent;
 348.     width:100%;
 349.     transition:0s;
 350. }
 351.  
 352. section#container nav {
 353.     position:absolute;
 354.     top:12.5vh;
 355.     margin-left:calc(32.5vw + 23px);
 356.     z-index:0;
 357. }
 358.  
 359. section#container nav a {
 360.     display:block;
 361.     background:var(--accent-color);
 362.     padding:5px;
 363.     margin-bottom:5px;
 364.     position:relative;
 365.     color:var(--link-color);
 366.     height:20px;
 367.     width:100%;
 368. }
 369.  
 370. section#container nav a:last-of-type {
 371.     margin-bottom:0px;
 372. }
 373.  
 374. section#container nav a:after {
 375.     content:'';
 376.     position:absolute;
 377.     top:0;
 378.     width:0;
 379.     height:0;
 380.     border-right:12px solid transparent;
 381.     border-top:15px solid var(--accent-color);
 382.     border-bottom:15px solid var(--accent-color);
 383.     right:-12px;
 384. }
 385.  
 386. section#container nav a:hover {
 387.     width:120%;
 388. }
 389.  
 390. /* CREDIT. DO NOT TOUCH */
 391.  
 392. #credz {
 393.     position:fixed;
 394.     bottom:15px;
 395.     right:20px;
 396.     width:30px;
 397.     height:30px;
 398.     padding:7px;
 399.     background:#fff;
 400.     border-radius:50px;
 401.     border:1px solid rgba(0,0,0,.1);
 402.     background-image:url('https://static.tumblr.com/uxq3xua/6i1p5p058/cactus_icon_green.png');
 403.     background-repeat:no-repeat;
 404.     background-position:center center;
 405.     background-size:25px;
 406.     transition:all .5s ease-in-out;
 407. }
 408.  
 409. a[href="http://cactusthemes.tumblr.com"]:hover > #credz {
 410.     transform:scale(1.1);
 411. }
 412.  
 413. /* END OF CREDIT */
 414.  
 415. @media only screen and (max-width:984px) and (min-width:800px) {
 416.     article.container {
 417.         width:83vw;
 418.     }
 419.    
 420.     section#container nav {
 421.         margin-left:calc(41.5vw + 23px);
 422.     }
 423.    
 424.     section#container nav a:hover {
 425.         width:100%;
 426.     }
 427. }
 428.  
 429.  
 430. @media only screen and (max-width: 799px) and (min-width:700px) {
 431.     article.container {
 432.         width:95vw;
 433.     }
 434.    
 435.     section#container nav {
 436.         display:none;
 437.     }
 438. }
 439.  
 440. @media only screen and (min-width:700px) {
 441.     article.container h2.mob {
 442.         display:none;
 443.     }
 444. }
 445.  
 446. @media only screen and (max-width:699px) {
 447.     section#container {
 448.         display:block;
 449.         overflow:auto;
 450.         height:auto;
 451.         width:auto;
 452.     }
 453.    
 454.     article.container {
 455.         width:95%;
 456.         height:auto;
 457.         margin:auto;
 458.     }
 459.    
 460.     article.container::before {
 461.         left:-9px;
 462.     }
 463.    
 464.     article.container::after {
 465.         right:-9px;
 466.     }
 467.    
 468.     article.container .facts {
 469.         display:block;
 470.         width:100%;
 471.         height:auto;
 472.     }
 473.    
 474.     article.container .facts:before {
 475.         display:none;
 476.     }
 477.    
 478.     article.container .facts .about {
 479.         height:140px;
 480.     }
 481.    
 482.     article.container .desc {
 483.         position:relative;
 484.         height:auto;
 485.         width:100%;
 486.         display:block;
 487.         margin-top:-20px;
 488.     }
 489.    
 490.     article.container .desc h2 {
 491.         display:none;
 492.     }
 493.    
 494.     article.container h2.mob {
 495.         padding-bottom:20px;
 496.     }
 497.    
 498.     section#container nav {
 499.         display:none;  
 500.     }
 501. }
 502.  
 503. 
 504.  
 505. 
 506.  
 507. 
 508.  
 509. 
 510.  
 511. 
 512.  
 513. 
 514.  
 515. about
 516.  
 517. 
 518.  
 519. 
 520.  
 521. 
 522.  
 523. 
 524.  
 525. 
 526.  
 527. 
 528.  
 529. namename
 530.  
 531. ageage
 532.  
 533. pronounspronouns
 534.  
 535. locationlocation
 536.  
 537. 
 538.  
 539. 
 540.  
 541. birthdaybday
 542.  
 543. mbtimbti
 544.  
 545. star signstar sign
 546.  
 547. occupationoccupation
 548.  
 549. 
 550.  
 551. 
 552.  
 553. 
 554.  
 555. 
 556.  
 557. 
 558.  
 559.

about

 
 560.  
 561. 
 562.  
 563. 
 564.  
 565.

This is where you put your description text! You can make this as long as you want, if it overflows a scrollbar appears automatically. This page was my first ever finished code, but I figured it needed a revamp so I wouldn't have to feel ashamed about it anymore. Now it's shaped like a book. Yay!


 566.  
 567.

I hope you enjoy what I've put together! It was a fun exercise and it's always nice to revisit old codes. I actually coded this while I was on a train because I didn't really have anything better to do, haha.


 568.  
 569.
    
 570.
  • This is what
    • 
 571.
  • A list looks like
    • 
 572.

 573.  
 574.
    
 575.
  1. Or it looks like this
    2. 
 576.
  2. If you want numbers 
    3. 
 577.

 578.  
 579.

Maybe you want some bold text though? Or italic text? Maybe a little underline if you're feeling fancy


 580.  
 581.

This is what a link looks like by the way! I hope you like it ^^ Also, please be sure to put your paragraphs in a <p> </p>. It'll look like this if you do, which I think/hope is what you want?


 582.  
 583.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dui at eleifend facilisis. Praesent magna magna, eleifend non iaculis at, consectetur ut felis. Aliquam erat volutpat. Mauris porttitor magna mollis, ullamcorper enim convallis, pulvinar ipsum. Phasellus aliquam velit ante, nec tempus felis fermentum vitae. Aenean euismod iaculis dignissim. Proin id accumsan erat. Nulla consectetur diam nibh, a blandit nibh pulvinar eu. Nulla leo magna, blandit a dolor ac, fringilla porta eros. Etiam dignissim dui et sapien interdum, sit amet sollicitudin ligula lobortis.


 584.  
 585. 
 586.  
 587. 
 588.  
 589. 
 590.  
 591. 
 592.  
 593. 
 594.  
 595. 
 596.  
 597. home
 598.  
 599. ask
 600.  
 601. link
 602.  
 603. link
 604.  
 605. 
 606.  
 607. 
 608.  
 609. 
 610.  
 611. 
 612.  
 613. 
 614. 
 615. 
 616. 
 617.  
 618. 
 619.  
 620.