API tools faq
paste
Advertisement
Miss_Dany

Sad news

Miss_Dany
Jun 22nd, 2021
362
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.73 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Sad news</title>
  6.     <link href='https://fonts.googleapis.com/css?family=Adamina' rel='stylesheet'>
  7. </head>
  8. <body>
  9.  
  10.     <style type="text/css">
  11.        
  12.         .box1 {background-attachment: fixed;
  13.             padding: 10px;
  14.             font-family: adamina;
  15.             border: 5px double #5D4037;
  16.             background-color: rgb(93, 64, 55, 0.2)}
  17.  
  18.         .header {height: 250px;
  19.             clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 50% 70%, 40% 100%, 0 100%);
  20.             background:  url('https://cdn.pixabay.com/photo/2017/08/06/09/29/people-2590655_960_720.jpg') center;
  21.             background-size: cover;
  22.             padding: 10px;}
  23.  
  24.         .title {width: 70%;
  25.             margin:30px auto;
  26.             background-color: rgb(255, 253, 231, 0.5);
  27.             padding: 30px 10px 10px 10px;
  28.             height: 50%;
  29.             border: 5px double #5D4037;
  30.             box-sizing: border-box;
  31.             text-align: center;
  32.             font-size:  35px;
  33.             color: #5D4037;}
  34.  
  35.         .edition {clip-path: polygon(50% 0%, 100% 30%, 50% 60%, 0% 30%);
  36.             background: #5D4037;
  37.             width: 15%;
  38.             height: 200px;
  39.             margin: -65px auto;
  40.             box-sizing: border-box;
  41.             padding-top: 40px;
  42.             font-size: 30px;
  43.             text-align: center;
  44.             color: #FFF3E0;}
  45.  
  46.         .article {margin-top: -130px;
  47.             padding: 10px;
  48.             text-align: justify;}
  49.  
  50.         .article::first-letter {font-size: 60px; color:#5D4037;}
  51.  
  52.         .footer {height: 250px;
  53.             box-shadow: 0 0 5px #5D4037;
  54.             padding: 10px;
  55.             display: flex;}
  56.  
  57.         .reporter {box-shadow: 0 0 5px #5D4037;
  58.             width: 20%;
  59.             background: url('https://cdn.pixabay.com/photo/2017/05/13/12/40/fashion-2309519__340.jpg') center;
  60.             background-size: cover;
  61.             padding-top: 200px;}
  62.  
  63.         .reporter span {font-size: 18px;
  64.             color: #FFF3E0;
  65.             background-color: #5D4037;
  66.             padding: 10px;}
  67.  
  68.         .ad {box-shadow: 0 0 5px #5D4037; width: 80%; margin-left: 2%;}
  69.     </style>
  70.  
  71.     <div class="box1">
  72.        
  73.         <div class="header">
  74.  
  75.             <div class="title">
  76.                 The great painter Peter Peterson left us this Friday
  77.             </div>
  78.    
  79.         </div>
  80.  
  81.         <div class="edition">Edition 1</div>
  82.  
  83.         <div class="article">
  84.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  85.             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  86.             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  87.             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  88.             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  89.             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  90.  
  91.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  92.             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  93.             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  94.             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  95.             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  96.             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  97.  
  98.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  99.             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  100.             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  101.             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  102.             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  103.             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  104.  
  105.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  106.             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  107.             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  108.             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  109.             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  110.             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  111.  
  112.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  113.             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  114.             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  115.             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  116.             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  117.             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  118.  
  119.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  120.             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  121.             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  122.             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  123.             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  124.             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  125.         </div>
  126.  
  127.         <div class="footer">
  128.            
  129.             <div class="reporter">
  130.                
  131.                 <span><b>Reporter Name</b></span>
  132.             </div>
  133.             <div class="ad">
  134.                
  135.                 <p style="font-family: adamina; font-size: 30px; letter-spacing: 0.8em; text-align: center; color: #5D4037;">We need you!<br>
  136.                     <b style="letter-spacing: 0; font-size: 50px;">The newspaper is recruiting!</b><br>
  137.  
  138.                     <i style="letter-spacing: 0; font-size: 20px;">Send your application to the following address</i><br>
  139.  
  140.                     <b style="font-size: 15px;">miss.dany@tumblr.com</b>
  141.  
  142.                 </p>
  143.                
  144.             </div>
  145.         </div>
  146.     </div>
  147.  
  148.     <!--DO NOT REMOVE THE CREDIT OR I EAT YOU -->
  149.  
  150.     <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>
  151.  
  152. </body>
  153. </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!