mididump

neocities y2k zebra girly blog layout

Feb 7th, 2025
95
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.25 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>zebra girly</title>
  7.     <style>
  8.         body {
  9.             display: flex;
  10.             margin: 0;
  11.             padding: 0;
  12.             font-family: ms gothic;
  13.             color: #f0f0f0;
  14.             background-color: #121212;
  15.             background-image: url('https://wallpaperaccess.com/full/894613.jpg');
  16.             background-size: cover;
  17.         }
  18.         a {
  19.         color: #f0f0f0;
  20.        }
  21.         .container {
  22.             display: flex;
  23.             width: 100%;
  24.             margin: 0 auto;
  25.             padding: 20px;
  26.             backdrop-filter: blur(5px);
  27.         }
  28.  
  29.         .profile {
  30.             flex: 1;
  31.             max-width: 300px;
  32.             margin-left: 20px;
  33.             background-color: rgba(30, 30, 30, 0.9);
  34.             padding: 20px;
  35.             border-radius: 10px;
  36.             box-shadow: 0 0 10px #888;
  37.         }
  38.  
  39.         .profile img {
  40.             width: 100%;
  41.             border-radius: 50%;
  42.         }
  43.  
  44.         .article {
  45.             flex: 3;
  46.             overflow-y: auto;
  47.             height: 85vh;
  48.             padding-right: 20px;
  49.         }
  50.  
  51.         .post {
  52.             margin-bottom: 30px;
  53.             background-color: rgba(30, 30, 30, 0.9);
  54.             padding: 20px;
  55.             border-radius: 10px;
  56.             box-shadow: 0 0 10px #888;
  57.         }
  58.  
  59.         .post h2 {
  60.             margin-top: 0;
  61.             font-family: ms gothic;
  62.             color: #ff0080;
  63.         }
  64.  
  65.         .tags {
  66.             margin-top: 10px;
  67.         }
  68.  
  69.         .tag {
  70.             display: inline-block;
  71.             background-color: #333;
  72.             color: #ff0080;
  73.             padding: 5px 10px;
  74.             border-radius: 5px;
  75.             margin-right: 5px;
  76.             font-size: 0.85em;
  77.             font-family: ms gothic;
  78.         }
  79.    
  80.         p {
  81.             text-align: center;
  82.         }
  83.  
  84.     </style>
  85. </head>
  86. <body>
  87.     <div class="container">
  88.         <div class="article">
  89.             <div class="post">
  90.                 <h2>another blog post</h2>
  91.                 <p>
  92.                        <img src="https://mididump.neocities.org/prince00.png" style="width: 20%; height: 20%;">
  93. <br>                    Once when I was six years old I saw a magnificent picture in a book, called
  94. True Stories from Nature, about the primeval forest. It was a picture of a boa
  95. constrictor in the act of swallowing an animal. Here is a copy of the drawing.
  96. In the book it said: "Boa constrictors swallow their prey whole, without chewing
  97. it. After that they are not able to move, and they sleep through the six months
  98. that they need for digestion."
  99. I pondered deeply, then, over the adventures of the jungle. And after some
  100. work with a colored pencil I succeeded in making my first drawing. My Drawing
  101. Number One. It looked like this:<br>
  102. <img src="https://mididump.neocities.org/prince001.png" style="width: 20%; height: 20%;"><br>
  103.  
  104. I showed my masterpiece to the grown-ups, and asked them whether the
  105. drawing frightened them.
  106. But they answered: "Frighten? Why should any one be frightened by a hat?"
  107. My drawing was not a picture of a hat. It was a picture of a boa constrictor
  108. digesting an elephant. But since the grown-ups were not able to understand it,
  109. I made another drawing: I drew the inside of the boa constrictor, so that the
  110. grown-ups could see it clearly. They always need to have things explained. My
  111. Drawing Number Two looked like this:<br>
  112. <img src="https://mididump.neocities.org/prince03.png" style="width: 20%; height: 20%;"><br>
  113.  
  114. </p>
  115.                 <div class="tags">
  116.                     <span class="tag"><a href="tagspagehere.html">Tag1</a></span> <!-----------add links to pages here----->
  117.                     <span class="tag"><a href="tagspagehere.html">Tag2</a></span>
  118.                 </div>
  119.             </div>
  120.             <div class="post">
  121.                 <h2>blog post here</h2>
  122.                 <p>The grown-ups' response, this time, was to advise me to lay aside my
  123. drawings of boa constrictors, whether from the inside or the outside, and
  124. devote myself instead to geography, history, arithmetic and grammar. That is
  125. why, at the age of six, I gave up what might have been a magnificent career as
  126. a painter. I had been disheartened by the failure of my Drawing Number One
  127. and my Drawing Number Two. Grown-ups never understand anything by
  128. themselves, and it is tiresome for children to be always and forever explaining
  129. things to them.
  130. So then I chose another profession, and learned to pilot airplanes. I have flown
  131. a little over all parts of the world; and it is true that geography has been very
  132. useful to me. At a glance I can distinguish China from Arizona. If one gets lost
  133. in the night, such knowledge is valuable.
  134. In the course of this life I have had a great many encounters with a great many
  135. people who have been concerned with matters of consequence. I have lived a
  136. great deal among grown-ups. I have seen them intimately, close at hand. And
  137. that hasn't much improved my opinion of them.
  138. Whenever I met one of them who seemed to me at all clear-sighted, I tried the
  139. experiment of showing him my Drawing Number One, which I have always
  140. kept. I would try to find out, so, if this was a person of true understanding. But,
  141. whoever it was, he, or she, would always say:
  142. "That is a hat."</p>
  143.                 <div class="tags">
  144.                     <span class="tag"><a href="tagspagehere.html">Tag3</a></span>
  145.                     <span class="tag"><a href="tagspagehere.html">Tag4</a></span>
  146.                 </div>
  147.             </div>
  148.         </div>
  149.         <div class="profile">
  150.             <img src="https://mididump.neocities.org/s-l500.jpg" alt="Profile Picture" title="welcome to my blog">
  151.             <h2>blog title here &hearts;</h2>
  152.             <p>Profile blurb goes here. <br>
  153.                 SAINT-EXUPÉRY, Antoine de
  154. (1900-44). An adventurous pilot
  155. and a lyrical poet, Antoine de
  156. Saint-Exupéry conveyed in his
  157. books the solitude and mystic
  158. grandeur of the early days of
  159. flight. He described dangerous
  160. adventures in the skies and also
  161. wrote the whimsical children's
  162. fable 'The Little Prince'.</p>
  163.         </div>
  164.     </div>
  165. </body>
  166. </html>
  167.  
Tags: html
Advertisement
Comments
Add Comment
Please, Sign In to add comment