API tools faq
paste
Advertisement
Kawaii-Lau

Wheel of Dreams

Kawaii-Lau
Mar 18th, 2020
635
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.94 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <style>
  3.  
  4. /*  Hello!
  5. Thank you for using my code!
  6.  
  7. Rules to Follow:
  8.  
  9. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  10. ✶ Do not redistribute this code, no matter how much you edited it!
  11. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-Lau#6316). Major changes in code is not accepted.
  12. ✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  13.  
  14. If you like a custom code, check out my blog to see if commissions are open!
  15.  
  16.  
  17. xoxo, Kawaii-Lau   */
  18.  
  19.  
  20.     :root {
  21.     /* TEXT CSS */
  22.         --c-main-text:rgb(70, 70, 70);
  23.         --f-main-text:Arial;
  24.         --f-hb-title:No7;
  25.    
  26.     /* IMG CSS */
  27.         --img-background:url(https://i.pinimg.com/originals/8f/d5/fc/8fd5fc58469e9b7ec32373cdbd0bd48b.jpg);
  28.    
  29.     /* COLORS CSS */
  30.         --c-title:-webkit-linear-gradient(#E2ADFF, #C288F5, #EADC83, #EADC83);
  31.         --c-cHeader: linear-gradient(to right, #E3B0D7AA, #F7AD49AA);
  32.         --c-cH-text:white;
  33.         --c-con-bgcolor:white;
  34.         --c-footer1:#F7AD49 ;
  35.         --c-footer2:#FAB1ED ;
  36.  
  37.     /* CREDITS CSS */
  38.         --c-credits: #9E91F0 ;
  39.         --c-creditsH: pink;
  40.         --c-creditsbg:#3A5D89 ;
  41.     }
  42.  
  43. /* SCROLLBAR CSS */
  44.     ::-webkit-scrollbar {
  45.         background: transparent;
  46.         width: 4px;
  47.         height: 4px;
  48.     }
  49.  
  50.     ::-webkit-scrollbar-thumb {
  51.         background: #BC89EC;
  52.     }
  53.  
  54.  
  55. /* GENERAL CSS */
  56.     h1,
  57.     h2,
  58.     h3 {
  59.     margin: 0px }
  60.        
  61.         p {margin:5px}
  62.    
  63.     b {text-shadow:1px 1px var(--c-main-text)}
  64.  
  65. /* FLEXBOX CSS */
  66.     .flexbox {display: flex;}  .row {flex-direction: row}
  67. .col { flex-direction: column }
  68.  
  69. /* BACKGROUND CSS */
  70.     .background {
  71.         background: black var(--img-background) fixed top;background-size:100% ;
  72.         width: 590px;
  73.         margin-left: auto;
  74.         margin-right: auto;
  75.         color: var(--c-main-text); }
  76.  
  77.     .bg-box {
  78.         width: 590px;
  79.     }
  80.  
  81. /* PADDING CSS */
  82.     .pad {padding: 0px 20px} .pad2 {padding: 10px}
  83.  
  84. /* MAIN BOX CSS */
  85.     .main-box {
  86.         overflow: auto;
  87.         height: 610px;
  88.         font-family: var(--f-main-text)
  89.     }
  90.  
  91. /* HEADER CSS */
  92.     .header {
  93.         width: 100%;
  94.         height: 50px;
  95.         margin-bottom: 80px;
  96.         background: var(--c-cHeader);
  97.     }
  98.  
  99. /* TITLE CSS */    
  100.  
  101.     .hbox1 {
  102.         width: 420px;
  103.         height: 100px;margin: -10px 30px 0px 0px;
  104.    
  105.         font-family: var(--f-hb-title);
  106.         background: var(--c-title);
  107.         -webkit-background-clip: text;
  108.         -webkit-text-fill-color: transparent;
  109.         font-size: 30px;}
  110.  
  111. /* CONTENT CSS */
  112.     .content {
  113.         min-height: 300px;
  114.         margin: 40px 0px;
  115.         border-radius: 15px;
  116.         overflow: hidden;
  117.     }
  118.  
  119. /* CONTENT HEADER CSS */
  120.     .cHeader {
  121.         background: var(--c-cHeader);
  122.         padding: 10px;
  123.     }
  124.  
  125. /* CONTENT HEADER TITLE CSS */
  126.     .cH1 {
  127.         width: 530px; font-weight:bold; color:var(--c-cH-text); text-transform:uppercase
  128.     }
  129.  
  130. /* CONTENT INFORMATION CSS */
  131.  
  132.     .cBox {
  133.         background: var(--c-con-bgcolor); padding:10px 20px 30px
  134.     }
  135.  
  136. /* FOOTER CSS */
  137.     .foot-box {
  138.         height: 70px;
  139.         background: #D5F3EF99;
  140.         overflow: hidden;
  141.         font-family: var(--f-main-text)
  142.     }
  143.  
  144. /* FIRST FOOTER BOX CSS */
  145.     .fbox1 {
  146.         width: 310px;
  147.         height: 130px;
  148.         transform: rotate(10deg);
  149.         margin-top: -29px;
  150.         margin-left: -6px;
  151.         position: relative;
  152.         overflow: hidden;
  153.         background: var(--c-footer1);
  154.         z-index: 4
  155.     }
  156.  
  157. /* FIRST FOOTER BOX CONTENT CSS */
  158.     .fbox1-in {
  159.         width: 300px;
  160.         height: 70px;
  161.         transform: rotate(-10deg);
  162.         margin-top: 27px;
  163.         margin-left: 5px;
  164.         padding: 10px
  165.     }
  166.  
  167. /* SECOND FOOTER BOX CSS */
  168.     .fbox2 {
  169.         position: relative;
  170.         margin-left: -5px;
  171.         width: 295px;
  172.         height: 200px;
  173.         background:#D5F3EF99 ;
  174.     }
  175.  
  176. /* SECOND FOOTER BOX CONTENT CSS */
  177.     .fbox2-in {
  178.         padding: 15px 20px 0px;
  179.         height: 55px;
  180.         background:var(--c-creditsbg);
  181.     }
  182.  
  183.     .fbox2-in2 {
  184.         padding: 5px 20px;
  185.         height: 70px;
  186.         background: var(--c-footer2);
  187.         position: relative;
  188.     }
  189.  
  190. /* SECOND FOOTER BOX SLIDE CSS */
  191.     .fbox-down {
  192.         margin-top: -70px;
  193.         transition: 1s ease
  194.     }
  195.  
  196.     .fbox2 .fbox-down:hover {
  197.         margin-top: 0px;
  198.         transition: 1s ease
  199.     }
  200.  
  201. /* CREDITS CSS (DO NOT REMOVE) */
  202.     .credits {
  203.         margin: 20px 0px 0px 10px;
  204.         font-weight: bold;
  205.         color:
  206.     }
  207.  
  208.     .credits a {
  209.         text-decoration: none;
  210.         color: var(--c-credits);
  211.         transition: 1s ease
  212.     }
  213.  
  214.     .credits a:hover {
  215.         color: var(--c-creditsH);
  216.         transition: 1s ease
  217.     }
  218.  
  219. /* ICONS CSS (DO NOT REMOVE) */
  220.     .icon-crown {
  221.         -webkit-mask-image: url(https://img.icons8.com/plasticine/2x/crown.png);
  222.         -webkit-mask-size: 100% 100%;
  223.         width: 60px;
  224.         height: 60px;
  225.         background: linear-gradient(to bottom right, #FFF, #F0EDA5, #F7EF40);
  226.         margin: -20px auto -30px
  227.     }
  228.  
  229.     .icon-x {
  230.         -webkit-mask-image: url(https://image.flaticon.com/icons/svg/1617/1617543.svg);
  231.         -webkit-mask-size: 100% 100%;
  232.         width: 20px;
  233.         height: 25px;
  234.         background: black;
  235.         margin: -7px 0px -10px
  236.     }
  237.  
  238. /* CUSTOM FONTS */
  239.     /* ------------- */
  240.     @font-face {
  241.         font-family: No7;
  242.  
  243.         src: url(https://dl.dropbox.com/s/570v34dwhvpvbo6/No.%20Seven%20Regular.woff);
  244.  
  245.     }
  246. </style>
  247.  
  248.  
  249. <!-- CUSTOM FONTS --->
  250.  
  251. <link href="https://dl.dropbox.com/s/570v34dwhvpvbo6/No.%20Seven%20Regular.woff" rel="stylesheet" />
  252.  
  253.  
  254. <body>
  255.  
  256.     <div class="background">
  257.         <div class="bg-box">
  258.             <div class="main-box">
  259.                 <div class="header">
  260.                     <div class=" flexbox row pad2">
  261.                         <div class="hbox1">
  262.                             <h1>Wheel of Dreams</h1>
  263.                         </div>
  264.                         <div class="hbox2"><img src="https://image.flaticon.com/icons/svg/618/618986.svg" style="width:100px" alt="HOUSE LOGO"/></div>
  265.                     </div>
  266.                 </div>
  267.                 <div class="pad">
  268.  
  269.                 <!-- CONTENT STARTS HERE -->
  270.                     <div class="content">
  271.                         <div class="cHeader flexbox row">
  272.                             <div class="cH1">
  273.                             <!-- HEADER GOES HERE -->
  274.                                Header Goes here
  275.                             </div>
  276.                             <div class="cH2">
  277.                             <!-- MOCK X BUTTON -->
  278.                                 <div class="icon-x"></div>
  279.                             </div>
  280.                        
  281.                         <!-- END OF HEADER -->
  282.                         </div>
  283.                         <div class="cBox">
  284.                        
  285.                         <center><img src="https://i.pinimg.com/564x/f9/4f/4e/f94f4ec0b98aec84d2fe28f45e439d2f.jpg" style="width:70%"/></center>
  286.                         <br>
  287.                             Lorem ipsum dolor sit amet, ad vel illum vituperatoribus. Eos vide dolore maiorum et, at sed adipiscing theophrastus. Ei habeo affert repudiandae sit, mea ea enim quaerendum eloquentiam. Populo sententiae definiebas eu his. Eum tantas persecuti an, id discere vivendo vivendum qui.<br><br>
  288.  
  289. In eum corpora oportere, ad aliquid fastidii nec, no vis percipit expetendis. An sed vocibus referrentur reprehendunt. Iriure inimicus ad mea. Habeo abhorreant nec no.<br><br>
  290.  
  291. Id est putent audire nusquam, vis primis convenire dissentiet ei. Ad eum postulant erroribus, in qui mutat accusata. Est ut suscipit perfecto explicari, eum ei apeirian complectitur. Platonem splendide tincidunt cu duo. Minim legimus voluptatum nam ea. Eius liberavisse in per, mel ei dicunt cetero incorrupte, tritani minimum ex vix.
  292.                         </div>
  293.                     </div>
  294.                
  295.                 <!-- FIRST CONTENT ENDS HERE -->
  296.  
  297.                   <div class="content">
  298.                         <div class="cHeader flexbox row">
  299.                             <div class="cH1">
  300.                             <!-- HEADER GOES HERE -->
  301.                                MORE HEADERS
  302.                             </div>
  303.                             <div class="cH2">
  304.                             <!-- MOCK X BUTTON -->
  305.                                 <div class="icon-x"></div>
  306.                             </div>
  307.                        
  308.                         <!-- END OF HEADER -->
  309.                         </div>
  310.                         <div class="cBox">
  311.                        
  312.                         <img src="https://i.pinimg.com/564x/71/da/8b/71da8bb207796c33dd9836c131565535.jpg" style="width:50%;float:left;margin:0px 10px 10px 0px"/>
  313.                        
  314.                             Lorem ipsum dolor sit amet, ad vel illum vituperatoribus. Eos vide dolore maiorum et, at sed adipiscing theophrastus. Ei habeo affert repudiandae sit, mea ea enim quaerendum eloquentiam. Populo sententiae definiebas eu his. Eum tantas persecuti an, id discere vivendo vivendum qui.
  315.  
  316. In eum corpora oportere, ad aliquid fastidii nec, no vis percipit expetendis. An sed vocibus referrentur reprehendunt. Iriure inimicus ad mea. Habeo abhorreant nec no.<br><br>
  317.  
  318. Id est putent audire nusquam, vis primis convenire dissentiet ei. Ad eum postulant erroribus, in qui mutat accusata. Est ut suscipit perfecto explicari, eum ei apeirian complectitur. Platonem splendide tincidunt cu duo. Minim legimus voluptatum nam ea. Eius liberavisse in per, mel ei dicunt cetero incorrupte, tritani minimum ex vix.
  319.                         </div>
  320.                     </div>
  321.                
  322.                 <!--- END OF SECOND CONTENT -->
  323.                
  324.                 <div class="content">
  325.                         <div class="cHeader flexbox row">
  326.                             <div class="cH1">
  327.                             <!-- HEADER GOES HERE -->
  328.                                FUN FEATURES!!
  329.                             </div>
  330.                             <div class="cH2">
  331.                             <!-- MOCK X BUTTON -->
  332.                                 <div class="icon-x"></div>
  333.                             </div>
  334.                        
  335.                         <!-- END OF HEADER -->
  336.                         </div>
  337.                         <div class="cBox">
  338.                        
  339.                         <center><img src="https://i.pinimg.com/564x/22/07/16/2207169382a2c2b48681c65981f3685c.jpg" style="width:70%"/></center>
  340.                         <br>
  341.                             Lorem ipsum dolor sit amet, ad vel illum vituperatoribus. Eos vide dolore maiorum et, at sed adipiscing theophrastus. Ei habeo affert repudiandae sit, mea ea enim quaerendum eloquentiam. Populo sententiae definiebas eu his. Eum tantas persecuti an, id discere vivendo vivendum qui.<br><br>
  342.  
  343. In eum corpora oportere, ad aliquid fastidii nec, no vis percipit expetendis. An sed vocibus referrentur reprehendunt. Iriure inimicus ad mea. Habeo abhorreant nec no.<br><br>
  344.  
  345. Id est putent audire nusquam, vis primis convenire dissentiet ei. Ad eum postulant erroribus, in qui mutat accusata. Est ut suscipit perfecto explicari, eum ei apeirian complectitur. Platonem splendide tincidunt cu duo. Minim legimus voluptatum nam ea. Eius liberavisse in per, mel ei dicunt cetero incorrupte, tritani minimum ex vix.
  346.                         </div>
  347.                     </div>
  348.  
  349.                
  350.                
  351.                 <!-- CONTENT ENDS HERE -->
  352.                 </div>
  353.             </div>
  354.        
  355.        
  356.             <div class="foot-box flexbox row">
  357.                 <div class="fbox1">
  358.                     <div class="fbox1-in">
  359.                     <p style="font-size:14px">Footer Message goes here...</p>
  360.                     </div>
  361.                 </div>
  362.                 <div class="fbox2">
  363.                     <div class="fbox-down">
  364.                         <div class="fbox2-in">
  365.                        
  366.                         <!-- DO NOT REMOVE THE CREDIT **EVER** -->
  367.                             <div class="icon-crown"></div>
  368.                             <p class="credits">2020 &copy; Coding by <a href="https://kawaii-lau.tumblr.com/" target="_blank">Kawaii-lau</a></p>
  369.                         <!-- ADD EDITED BY SOMEWHERE -->
  370.                         </div>
  371.                         <div class="fbox2-in2">
  372.                            <center><img src="https://fontmeme.com/permalink/200318/3016065f081d0e229026f2dad4f14252.png" style="width:250px;margin-top:10px" alt="SIGNATURE"/></center>
  373.                         </div>
  374.                     </div>
  375.                 </div>
  376.             </div>
  377.        
  378.         <!-- FOOTER ENDS HERE -->
  379.        
  380.         </div>
  381.     </div>
  382. </body>
  383. </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!