API tools faq
paste
Advertisement
Miss_Dany

Pink & Sweet BS

Miss_Dany
Aug 6th, 2022
1,229
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.34 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Pink & Sweet BS</title>
  7.     <link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet'>
  8. </head>
  9.  
  10. <style type="text/css">
  11.  
  12.     ::-webkit-scrollbar {width: 3px;}
  13.     ::-webkit-scrollbar-track {background-color: #88625F;}
  14.     ::-webkit-scrollbar-thumb {background-color: #D2AA9E;}
  15.  
  16.     :root {
  17.         --main-box-shadow : 0 0 10px #A08375;
  18.  
  19.         /*TEXT*/
  20.         --title : 'Aldrich';
  21.         --title-size : 40px;
  22.         --title-color: #a9817d;
  23.         --text-shadow : -2px -2px #f2e1e8;
  24.  
  25.         /*FACE CLAIM*/
  26.         --frame : polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  27.         --frame-bg : #a9817d;
  28.  
  29.         /*NAVIVATION*/
  30.         --nav-shadow : 0 0 20px #88625F;
  31.         --nav-border-witdh :  0 7px 0 7px;
  32.         --nav-border-style : double #a9817d;
  33.     }
  34.  
  35.     .all {
  36.         margin: auto;
  37.         padding: 5px;
  38.         box-sizing: border-box;
  39.     }
  40.  
  41.     .main-box {
  42.         width: 950px;
  43.         height: 600px;
  44.         background: url('https://cdn.pixabay.com/photo/2015/10/04/11/14/pink-970854_960_720.jpg')center;
  45.         background-size: cover;  
  46.         box-shadow: var(--main-box-shadow);
  47.         font-size: 18px;
  48.         display: flex;
  49.     }
  50.  
  51.     .sides {
  52.         width: 200px;
  53.     }
  54.  
  55.     /*FACE CLAIM*/
  56.  
  57.     .frame {
  58.         clip-path: var(--frame);
  59.         background: var(--frame-bg);
  60.     }
  61.  
  62.     .fc {
  63.         width: 100%;
  64.         height: 150px;
  65.         clip-path: var(--frame);
  66.     }
  67.  
  68.     #fc-01 {
  69.         background: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F66.media.tumblr.com%2F3cdfe42cbb0a168da296782fdc9b2fc4%2Ftumblr_pmja8oA4Ad1vam7veo7_540.gifv&f=1&nofb=1')center;
  70.         background-size: cover;
  71.     }
  72.  
  73.     /*NAVIGATION*/
  74.  
  75.     .nav {
  76.         width: 70px;  
  77.         border: var(--nav-border-style);
  78.         border-width: var(--nav-border-witdh);
  79.         box-shadow: var(--nav-shadow);
  80.     }
  81.  
  82.  
  83.     a {
  84.         font-family: var(--title);
  85.         font-size: var(--title-size);
  86.         text-align: center;
  87.         text-shadow: var(--text-shadow);
  88.         color: var(--title-color);
  89.         text-decoration: none;
  90.         position: relative;
  91.         left: 7px;
  92.         }
  93.  
  94.     a:hover {opacity: 70%;}
  95.  
  96.     .middle {
  97.         width: 600px;
  98.         height: 420px;
  99.         margin: 70px 0 0 0;
  100.         overflow: hidden;
  101.         box-sizing: border-box;
  102.     }
  103.  
  104.     .info {
  105.         overflow: hidden;
  106.         height: 100%;
  107.         box-sizing: border-box;
  108.     }
  109.  
  110.     .page {
  111.         height: 100%;
  112.         box-sizing: border-box;
  113.  
  114.     }
  115.  
  116.     .title {
  117.         height: 80px;
  118.         color: var(--title-color);
  119.         text-shadow: var(--text-shadow);
  120.         font-family: var(--title);
  121.         font-size: var(--title-size);
  122.         text-align: center;
  123.     }
  124.  
  125.     .content {
  126.         box-shadow: var(--main-box-shadow);
  127.         text-align: justify;           
  128.         height: 300px;
  129.         overflow: auto;
  130.         border: 7px var(--nav-border-style);
  131.         background: rgba(228, 220, 229, 0.5);
  132.         border-radius: 10px;
  133.     }
  134.  
  135. </style>
  136.  
  137.  
  138. <body>
  139.  
  140.     <div class="main-box all">
  141.        
  142.         <div class="sides all">
  143.            
  144.             <div class="frame all"><div class="fc" id="fc-01"></div></div>
  145.  
  146.             <div class="nav all">
  147.                
  148.                 <div><a href="#Page1">O</a></div>
  149.                 <div><a href="#Page2">O</a></div>
  150.                 <div><a href="#Page3">O</a></div>
  151.                 <div><a href="#Page4">O</a></div>
  152.                 <div><a href="#Page5">O</a></div>
  153.             </div>
  154.  
  155.             <div class="frame all"><div class="fc" id="fc-01"></div></div>
  156.         </div>
  157.  
  158.         <!--Main box -->
  159.  
  160.         <div class="middle">
  161.  
  162.             <div class="info">
  163.  
  164.                 <!--Chap 01 -->
  165.  
  166.                 <div class="page" >
  167.  
  168.                     <div class="title all" id="Page1">Chapiter 01</div>
  169.  
  170.                     <div class="content all">
  171.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  172.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  173.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  174.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  175.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  176.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  177.  
  178.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  179.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  180.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  181.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  182.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  183.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  184.                     </div>
  185.                 </div>
  186.  
  187.                 <!--Chap 02 -->
  188.  
  189.                 <div class="page" >
  190.                     <div class="title all" id="Page2">Chapiter 02</div>
  191.  
  192.                     <div class="content all">
  193.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  194.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  195.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  196.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  197.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  198.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  199.  
  200.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  201.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  202.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  203.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  204.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  205.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  206.                     </div>
  207.                 </div>
  208.  
  209.                 <!--Chap 03 -->
  210.  
  211.                 <div class="page" >
  212.                     <div class="title all" id="Page3">Chapiter 03</div>
  213.  
  214.                     <div class="content all">
  215.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  216.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  217.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  218.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  219.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  220.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  221.  
  222.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  223.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  224.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  225.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  226.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  227.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  228.                     </div>
  229.                 </div>
  230.  
  231.                 <!--Chap 04 -->
  232.  
  233.                 <div class="page" >
  234.                     <div class="title all" id="Page4">Chapiter 04</div>
  235.  
  236.                     <div class="content all">
  237.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  238.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  239.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  240.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  241.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  242.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  243.  
  244.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  245.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  246.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  247.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  248.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  249.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  250.                     </div>
  251.                 </div>
  252.  
  253.                 <!--Chap 05 -->
  254.  
  255.                 <div class="page" >
  256.                     <div class="title all" id="Page5">Chapiter 05</div>
  257.  
  258.                     <div class="content all">
  259.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  260.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  261.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  262.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  263.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  264.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  265.  
  266.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  267.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  268.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  269.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  270.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  271.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  272.                     </div>
  273.                 </div>
  274.  
  275.                 <!--Chap 06 -->
  276.  
  277.                 <div class="page" >
  278.                     <div class="title all" id="Page6">Chapiter 06</div>
  279.  
  280.                     <div class="content all">
  281.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  282.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  283.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  284.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  285.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  286.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  287.  
  288.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  289.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  290.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  291.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  292.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  293.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  294.                     </div>
  295.                 </div>
  296.  
  297.                 <!--Chap 07 -->
  298.  
  299.                 <div class="page" >
  300.                     <div class="title all" id="Page7">Chapiter 07</div>
  301.  
  302.                     <div class="content all">
  303.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  304.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  305.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  306.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  307.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  308.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  309.  
  310.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  311.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  312.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  313.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  314.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  315.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  316.                     </div>
  317.                 </div>
  318.  
  319.                 <!--Chap 08 -->
  320.  
  321.                 <div class="page" >
  322.                     <div class="title all" id="Page8">Chapiter 08</div>
  323.  
  324.                     <div class="content all">
  325.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  326.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  327.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  328.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  329.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  330.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  331.  
  332.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  333.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  334.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  335.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  336.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  337.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  338.                     </div>
  339.                 </div>
  340.  
  341.                 <!--Chap 09 -->
  342.  
  343.                 <div class="page" >
  344.                     <div class="title all" id="Page9">Chapiter 09</div>
  345.  
  346.                     <div class="content all">
  347.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  348.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  349.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  350.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  351.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  352.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  353.  
  354.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  355.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  356.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  357.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  358.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  359.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  360.                     </div>
  361.                 </div>
  362.  
  363.                 <!--Chap 10 -->
  364.  
  365.                 <div class="page" >
  366.                     <div class="title all" id="Page10">Chapiter 10</div>
  367.  
  368.                     <div class="content all">
  369.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  370.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  371.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  372.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  373.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  374.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  375.  
  376.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  377.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  378.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  379.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  380.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  381.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  382.                     </div>
  383.                 </div>
  384.  
  385.             </div>
  386.         </div>
  387.  
  388.         <div class="sides all">
  389.            
  390.             <div class="frame all"><div class="fc" id="fc-01"></div></div>
  391.  
  392.             <div class="nav all">
  393.                
  394.                 <div><a href="#Page6">O</a></div>
  395.                 <div><a href="#Page7">O</a></div>
  396.                 <div><a href="#Page8">O</a></div>
  397.                 <div><a href="#Page9">O</a></div>
  398.                 <div><a href="#Page10">O</a></div>
  399.             </div>
  400.  
  401.             <div class="frame all"><div class="fc" id="fc-01"></div></div>
  402.         </div>
  403.     </div>
  404.  
  405.     <!--DO NOT REMOVE THE CREDIT OR I EAT YOU -->
  406.  
  407.     <center><a href="https://missy-dany.tumblr.com/" target="_blank" style="text-decoration: none; font-family: 'courier new'; font-size: 15px; color: #000; letter-spacing: 0.3em; font-weight: 900;">*--Miss Dany--*</a></center>
  408. </body>
  409. </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!