API tools faq
paste
Advertisement
petroglyph

Tri-box Neocities Theme by Friendnetwork

petroglyph
Feb 29th, 2024
337
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.50 KB | Source Code | 0 0
raw download clone embed print report
  1. <head>
  2. <title> My Neocities Site </title>
  3. <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  4. <link rel="icon" type="image/x-icon" href="newfav.ico">
  5. </head>
  6. <!-- BASIC TRI-BOX NEOCITIES THEME BY HAL @FRIENDNETWORK! -->
  7. <!-- Make changes where needed, but do not remove credit! -->
  8. <!-- Have any concerns? Email me at [email protected]. All images displayed on this preview are hosted via my website, but I recommend hosting them on your own site if you intend to swap mine out. -->
  9. <!-- This puts space between your container and the top of the page. -->
  10. <br><br>
  11. <div id="container">
  12. <div id="header">
  13. <!-- A marquee inidcates that whatever text it's assigned to will move in a pre-determined direction along the screen. To change the direction in which a marquee moves, append 'direction="_"' to the end of the first marquee phrase. -->
  14. <p align="center"><marquee> SITE TITLE SITE TITLE SITE TITLE SITE TITLE SITE TITLE </marquee></p>
  15. <nav id="navbar">
  16. <ul>
  17. <li><a href="/"><em>Link One</em></a></li>
  18. <li><a href="/"><em>Link Two</em></a></li>
  19. <li><a href="/"><em>Link Three</em></a></li>
  20. <li><a href="/"><em>Link Four</em></a></li>
  21. </ul>
  22. </nav>
  23. </div>
  24.  
  25. <div id="flex">
  26. <aside id="sidebar" style="margin-right: 3px">
  27. <img src="https://drtheme.neocities.org/host/anenome.png" width="100%"/>
  28. <p align="center"> Content box 1! </p>
  29. </aside>
  30.  
  31.  
  32. <main>
  33. <p align="center"> Let's go <em> tidepooling!</em></p>
  34. <img src="https://drtheme.neocities.org/host/bluewave.gif" width="100%"/>
  35. <img src="https://drtheme.neocities.org/host/image.png" width="100%"/>
  36. </main>
  37.  
  38. </div>
  39. <div id="flex">
  40. <div style="width:800px;height:200px;overflow:auto;background-color:blue;border-right:5px dashed #5dd9ff;border-bottom:16px double cyan;border-left:10px solid #216eff;">
  41. <div id="bottombox">
  42. <h2 align="center"><em> Bottom Box Zone </em></h2>
  43. <p align="center"> It is here where important things can be placed; whatever you can imagine, you can create! For instance, you could use the above boxes for a myriad of purposes, and use this as an area for graphics. This site is infinitely scrolling, and so you can put anything of any length or size in this area! I wonder what you'll choose to include...
  44. <br><br>
  45. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  46. <br>
  47. Vitae turpis massa sed elementum. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Euismod lacinia at quis risus sed vulputate. Duis ut diam quam nulla. In arcu cursus euismod quis viverra. Felis bibendum ut tristique et egestas quis ipsum. Porttitor rhoncus dolor purus non. Nulla malesuada pellentesque elit eget. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Urna molestie at elementum eu facilisis sed odio morbi quis. Viverra vitae congue eu consequat ac felis. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Pellentesque eu tincidunt tortor aliquam nulla facilisi.
  48. <br>
  49. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Proin libero nunc consequat interdum varius. Proin libero nunc consequat interdum varius sit amet. Massa massa ultricies mi quis hendrerit dolor magna. In vitae turpis massa sed elementum tempus egestas sed sed. Donec ultrices tincidunt arcu non sodales neque sodales. Pellentesque id nibh tortor id aliquet. Congue eu consequat ac felis donec. Lacus luctus accumsan tortor posuere ac. Ac turpis egestas maecenas pharetra convallis. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Nulla facilisi morbi tempus iaculis urna id volutpat. Risus ultricies tristique nulla aliquet enim tortor at. Volutpat sed cras ornare arcu dui vivamus arcu. Viverra vitae congue eu consequat ac felis donec et. Pharetra magna ac placerat vestibulum lectus mauris ultrices.
  50. </p>
  51. </div>
  52.  
  53. <style>
  54. :root {
  55. /* This is the beginning of your style section, the portion of your website which defines how it appears! Any element defined in <style> will reflect in the body portion of your site, so long as you input the accompanying 'child' element to the 'parent' code. */
  56.  
  57. --body-bg-image: url('https://drtheme.neocities.org/host/starfisg.png');
  58. }
  59.  
  60. #flex {
  61. display: flex;
  62. }
  63.  
  64. #container {
  65. max-width: 800px;
  66.  
  67. margin: 0 auto;
  68. /* This centers your page. */
  69. }
  70.  
  71. /* Body refers to the text and background portions of your site. The custom cursor only requires you input a URL to your desired cursor image; ensure the photo you use is 32x32px, as most browsers won't accept a cursor that exceeds this sizing. Retain the auto in the cursor element, as this will act as a failsafe in the event your browser cannot load the selected image. */
  72.  
  73. body {
  74. font-family: 'Times New Roman', serif;
  75. color: #0081de;
  76. margin: 0;
  77. /* Affects the size and color of your background. For a larger background (less tiles), input a higher figure.*/
  78. background-color: #000000 ;
  79. background-size: 500px;
  80. background-image: var(--body-bg-image);
  81. cursor: url('cursor.gif'), auto;
  82. }
  83.  
  84. * {
  85. box-sizing: border-box;
  86. }
  87.  
  88.  
  89. main {
  90. background-image:url('https://drtheme.neocities.org/host/waves.gif');
  91. flex: 1;
  92. padding: 2px;
  93. order: 2;
  94. border: 2px dashed #005cf4;
  95. }
  96.  
  97. /* The container beneath your main box & sidebar. */
  98.  
  99. #bottombox {
  100. background-image:url('https://drtheme.neocities.org/host/computer.png');
  101. width: 100%;
  102. padding: 0px;
  103. font-size: 16px;
  104. border: 3px solid blue;
  105. }
  106.  
  107. /* The container next to your main block. */
  108.  
  109. #sidebar {
  110. background-image:url('https://drtheme.neocities.org/host/peacebg.gif');
  111. width: 200px;
  112. padding: 0px;
  113. font-size: 16px;
  114. border: 3px dashed blue;
  115.  
  116. }
  117.  
  118. #header {
  119. width: 100%;
  120. height: 90px;
  121. background-color: #72ebfe;
  122. background-size: 20%;
  123. }
  124.  
  125. #navbar {
  126. height: 40px;
  127. background-color: #4dadf2;
  128. width: 100%
  129. }
  130.  
  131. /* The display for links in your navbar. */
  132. #navbar ul {
  133. display: flex;
  134. padding: 0;
  135. margin: 0;
  136. list-style-type: none;
  137. justify-content: space-evenly;
  138. }
  139.  
  140.  
  141. /* The padding for elements in your navbar list. */
  142. #navbar li {
  143. padding-top: 10px;
  144. }
  145.  
  146. #navbar li a {
  147. color: #0056ff;
  148. font-weight: 800;
  149. text-decoration: none;
  150. }
  151.  
  152. /* link hover */
  153. #navbar li a:hover {
  154. color: cyan;
  155. text-decoration: underline;
  156. }
  157.  
  158. /* Makes your page adaptable to mobile formats. */
  159. #navbar ul {
  160. flex-wrap: wrap;
  161. }
  162.  
  163. .box {
  164. background-image:url('https://drtheme.neocities.org/host/peacebg.gif);
  165. border: 1px solid cyan;
  166. padding: 0px;
  167. }
  168.  
  169.  
  170. h1, h2, h3 {
  171. color: #1862f3;
  172. font-family: sans-serif;
  173. }
  174.  
  175. h1 {
  176. font-size: 20px;
  177. }
  178.  
  179.  
  180. p {
  181. font-size: 15px;
  182. }
  183.  
  184. strong {
  185. color: #ff8b00;
  186. }
  187.  
  188.  
  189.  
  190. </style>
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!