API tools faq
paste
Advertisement
Kawaii-Lau

Sweet Peace

Kawaii-Lau
Apr 13th, 2020
1,121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.49 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3. /* NOTE FROM KAWAII-LAU:
  4.  
  5.     To be honest, I'm too lazy to fix this to make this understandable, so there's no label to these CSS. So if you only know HMTL, it's probably best to choose another code ^^'
  6.  
  7. */
  8.  
  9.  
  10.    
  11. .flexbox {display:flex} .row {flex-direction:row} .col {flex-direction:col} .ppad {padding:10px 20px}
  12.  
  13. ::-webkit-scrollbar {width:6px; height:6px;
  14.                 background:var(--color-1)}
  15.  
  16. ::-webkit-scrollbar-thumb {
  17.   background:var(--color-4) ;
  18. }
  19.  
  20.  
  21.  
  22. /* Changing of Colors */
  23.  
  24. :root {--color-1:#D8C6FA;
  25.         --color-2:white ;
  26.         --color-3:white ;
  27.         --color-4:#9DD5F9  ;
  28.         --color-5:#128ED9;
  29.  
  30.         --shadow:rgba(0, 0, 0, 0.3);
  31.        
  32.         --main-font-family:'Bree Serif';
  33.     --2-font-family:'Lora'}
  34.  
  35.     .background {
  36.             background: var(--color-2) url(https://i.pinimg.com/564x/73/55/c3/7355c34e2812ed92e8a70c34439cb0da.jpg) center;
  37.             background-size:50% 100%;  }
  38.  
  39.     .main-box {margin-left:auto;
  40.             margin-right:auto;
  41.             width:600px; height:1000px;  
  42.             background:var(--color-2);
  43.             font-family:var(--main-font-family);
  44.             letter-spacing:0.2px}
  45.  
  46.     .hh1 {  width:100%; height:200px;  
  47.         background:var(--color-1);}
  48.  
  49.     .side-bar {width:200px;
  50.             margin:10px 10px 10px 10px;                
  51.             }
  52.     .bar-1 {    background:var(--color-3);
  53.             width:100%; height:60px;
  54.             border-radius:30px;
  55.             box-shadow:0px 0px 25px var(--shadow)}
  56.  
  57.         .icons {justify-content:center}
  58.  
  59.             .soMe1, .soMe2, .soMe3 {margin:0px 2px}
  60.             .soMe1 img, .soMe2 img, .soMe3 img {width:40px}
  61.  
  62.     .info {margin-bottom:0px}
  63.  
  64.     .caption {
  65.             height:130px;
  66.             padding:10px;
  67.             font-family:var(--2-font-family);
  68.             font-size:14px;
  69.             font-style:italic; }
  70.  
  71.  
  72.         .author {
  73.                     text-align:center;
  74.                     font-weight:bold    }
  75.  
  76.         .author img {
  77.                 border-radius:20px;
  78.                 width:150px             }
  79.  
  80.         .pfp {  padding:5px;
  81.                 border:3px dashed var(--color-1);
  82.                 border-radius:20px;
  83.                 margin-bottom:8px; }
  84.  
  85.         .issNo {
  86.             background:var(--color-1);
  87.             margin:10px 0px;
  88.             padding:2px 0px;
  89.             text-align:center}
  90.  
  91.         .bar-footer {
  92.             background:var(--color-1);
  93.             height:30px;
  94.             ; margin-top:30px}
  95.  
  96.  
  97.     .bar-2 {background:var(--color-3);
  98.             width:100%; height:500px;  
  99.             margin:30px 0px 0px 0px;
  100.             border-radius:30px;
  101.             box-shadow:0px 0px 25px var(--shadow);
  102.             overflow:hidden}
  103.  
  104.     .right-box {width:360px; height:960px}
  105.  
  106.     .article {
  107.                 height:610px;
  108.                 overflow:hidden;
  109.                 text-align:justify;
  110.         margin-top:10px}
  111.     .article:hover {overflow:auto;}
  112.  
  113.     .article img {
  114.             width:95%;
  115.             margin-left:auto;
  116.             margin-right:auto;
  117.             display:block   }
  118.  
  119.     .images {justify-content:center;
  120.             overflow:auto; }
  121.     .images img {width:100px;  }
  122.  
  123.     .header {width:100%; height:120px;
  124.             margin:25px 0px 60px 0px;
  125.             padding:10px 10px 0px 10px;
  126.             align-items:center;
  127.             justify-content:center  }
  128.        
  129.  
  130.         .credits {
  131.             width:100%;
  132.             padding:5px 0px;
  133.             background:var(--color-1);
  134.             text-indent:10px;}
  135.  
  136.         .credits a {color:var(--color-5);
  137.                     text-decoration:none;
  138.                     transition:0.7s ease}
  139.  
  140.         .credits a:hover {color:#EF952F; }
  141.  
  142.  
  143. </style>
  144. <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Comic+Neue:wght@700&display=swap" rel="stylesheet">
  145. <link href="https://fonts.googleapis.com/css2?family=Lora" rel="stylesheet">
  146.  
  147. <body>
  148. <div class="background">
  149. <div class="main-box">
  150.  
  151.     <header class="hh1">
  152.    
  153.         <div class="flexbox row">
  154.             <div class="side-bar">
  155.                 <div class="bar-1">
  156.                     <div class="icons ppad flexbox row">
  157.                    
  158.                    
  159.                     <!-- SoMe PAGES BUTTONS -->
  160.                         <div class="soMe1">
  161.                                 <a href="https://www.facebook.com/pages/category/Website/World-of-Meta-Humans-2665326473542588/" target="_blank"><img  src="https://image.flaticon.com/icons/svg/2111/2111398.svg" /></a>
  162.                         </div>
  163.                         <div class="soMe2">
  164.                         <a href="https://worldofmetahumans.com" target="_blank"><img src="https://image.flaticon.com/icons/svg/124/124021.svg"/></a>
  165.                         </div>
  166.                         <div class="soMe3">
  167.                             <a href="https://worldofmetahumans.com" target="_blank"><img src="https://image.flaticon.com/icons/svg/2111/2111463.svg"/></a>
  168.                         </div>
  169.                     </div>
  170.                 </div>
  171.            
  172.             <!-- START OF BAR 2 -->
  173.            
  174.                 <div class="bar-2">
  175.                     <div class="info ppad flexbox col" style="justify-content:center">
  176.                         <div class="author">
  177.                             <div class="pfp">
  178.                            
  179.                             <!-- AUTHOR IMAGE -->
  180.                         <img src="https://66.media.tumblr.com/54f139810a3d45b7dc4078ec758c321d/tumblr_pvzq7cZSVn1sxfhf6o4_400.gif"/></div>
  181.                        
  182.                         <!-- AUTHOR NAME -->
  183.                         <div class="name">
  184.                         Written by:<br>
  185.                             <span style="color:#E8139B;font-size:19px">Soojin Bae</span></div>
  186.                         </div>
  187.                     </div>
  188.                
  189.                
  190.                 <div class="caption">
  191.                         " I'm singing for you to make you fall deeper for me... "
  192.                     </div>
  193.                    
  194.                
  195.                 <!-- ISSUE NO AND DATE -->
  196.                
  197.                         <div class="issNo">
  198.                             Issue No. 20
  199.                         </div>
  200.                         <div class="issNo">
  201.                             April 13, 2020
  202.                         </div>
  203.                
  204.                         <div class="bar-footer"></div>
  205.                
  206.                 <!-- END OF BAR 2 -->
  207.                 </div>
  208.             </div>
  209.        
  210.        
  211.         <!-- HEADER HTML -->
  212.             <div class="right-box">
  213.                
  214.                 <div class="header flexbox row">
  215.                 <!-- HEADER PICTURE -->
  216.                     <img src="https://fontmeme.com/permalink/200413/54cb9df766c83c42c56630097eee7576.png" alt="HEADER"/>
  217.                 </div>
  218.            
  219.            
  220.                 <div class="content">
  221.                    
  222.                
  223.                 <!-- AESTHETIC CONTENT -->
  224.                     <div class="images flexbox row">
  225.                         <img src="https://media1.tenor.com/images/0333686357d080ba8cb72fb2da4db3c5/tenor.gif?itemid=14081022"/>
  226.                         <img src="https://66.media.tumblr.com/07d6a06b04b844bbeb9cb81ae8470a0b/1e3075e0129400c3-55/s400x600/3113f7769af446cafc0674284fa7fea8edd677ab.gif"/>
  227.                         <img src="https://media1.tenor.com/images/1a51cff2f0ee5c61c4816a07634c13c1/tenor.gif?itemid=13856817"/>
  228.                         <img src="https://media1.tenor.com/images/6c321ff0da4a990690a726e91cc8c763/tenor.gif?itemid=14507565"/>
  229.                     </div>
  230.                
  231.                
  232.                 <!-- ARTICLE CONTENT -->
  233.                     <div class="article">
  234.                         <div class="ppad">
  235.                        
  236.                        
  237.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id aliquam leo. Proin ut ante arcu. Morbi quis augue eu neque blandit viverra quis vel orci. Maecenas at diam vitae ante tincidunt iaculis vel in risus. Integer ornare ornare lectus. Vestibulum molestie, velit ut tempor aliquam, odio quam eleifend leo, ut dapibus risus velit at dolor. Cras venenatis,<br><br>
  238.                        
  239.                         <img src="https://66.media.tumblr.com/3b23a722f0dfaafe52daaefb252e9245/tumblr_p83mmuJ78N1vicq0go2_500.gif"/><br><br>
  240.                        
  241.                         enim eu vulputate convallis, tortor turpis suscipit dui, vitae faucibus nibh dui at mauris. Morbi euismod, ex id pharetra venenatis, metus lorem aliquam metus, sed semper tellus lorem in nunc. Curabitur molestie sem risus, id porttitor orci laoreet id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris consectetur pulvinar massa in vulputate. Phasellus eget neque nunc. Cras a orci convallis, rutrum dolor eget, fringilla lorem.
  242.                         </div>
  243.                     </div>
  244.                
  245.                
  246.                 </div>
  247.                
  248.             </div>
  249.        
  250.         </div>
  251.        
  252.     <!-- DO NOT REMOVE THE CREDITS WHATSOVER -->
  253.         <footer class="credits">
  254.      • • • • • • •  2020 &copy; Coding by <a href="https://kawaii-lau.tumblr.com" target="_blank">Kawaii-Lau</a> • • • • • • • • • • • • • • • •  • • • • • • • • •
  255.     </footer>
  256.     </header>
  257.    
  258.    
  259.  
  260. </div>
  261. </div>
  262. </body>
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!