API tools faq
paste
recarmdra

Virtuoso Template

recarmdra
Sep 14th, 2025
7
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7. <style>
  8.  
  9. /* Virtuoso V.1.0 Template, send any questions to [email protected]! Powered by friendship and VGM. */
  10.  
  11.  
  12. /* Changes to the main div are made here.
  13. "border-radius:" is the property responsible for rounding the borders.
  14. "overflow: hidden;" is necessary for the scrollbar to be rounded. */
  15. .mainDiv {
  16. background-color: #fff6f9;
  17. max-width: 900px;
  18. color: #d62b3d;
  19. text-align: left;
  20. border: 6px dashed;
  21. border-color: #f8c7dd;
  22. border-radius: 50px;
  23. font-family: "ms ui gothic";
  24. font-size:16px;
  25. overflow: hidden;
  26. }
  27.  
  28. /* Style your paragraphs here. */
  29. p {
  30. padding: 10px;
  31. margin: 10px;
  32. }
  33.  
  34. /* Img class property utilized to round out the top left and right corners of the header image.
  35. the radius must match .mainDiv's radius.
  36. "vertical-align: middle;" gets rid of the space between the image and the bottom of the div. */
  37. .headerImg {
  38. border-top-right-radius: 50px;
  39. border-top-left-radius: 50px;
  40. vertical-align: middle;
  41. }
  42.  
  43. /* Contains the .headerText, responsible for making it display on top of the image. */
  44. .container {
  45. position: relative;
  46. text-align: center;
  47. }
  48.  
  49. /* Positions the .title text that displays on top of the .headerImg.
  50. You may need to change "bottom" and "left" depending on your font */
  51. .headerText {
  52. position: absolute;
  53. bottom: 0px;
  54. left: 20px;
  55. }
  56.  
  57. /* Changes the text that's placed on top of the header
  58. "text-shadow" is used to make a border, you are able to change the color. */
  59. .title {
  60. max-width: 900px;
  61. color: #d62b3d;
  62. font-family: "Cheshire";
  63. font-size: 80px;
  64. text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
  65. 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
  66. }
  67.  
  68. /* Changes the look of the div that contains the links.
  69. The padding and margin properties make it so the div touches the outer border. */
  70. .navigation {
  71. margin: 0;
  72. padding-left: -10px
  73. padding-right: -10px
  74. padding: 0;
  75. font-family: "ms gothic";
  76. background-color: #d62b3d;
  77. color: #fff6f9;
  78. }
  79.  
  80. /* Div that contains the main text.
  81. "max-height" makes it so the text is contained to a certain area, you can remove it you'd like.
  82. You can also change the look of the scrollbar here. */
  83. .mainText {
  84. max-height: 470px;
  85. overflow-y: auto;
  86. scrollbar-color: #efc815 #d62b3d;
  87. scrollbar-width: thin;
  88. }
  89.  
  90. /* Small div that displays below the main div. */
  91. .bottom {
  92. background-color: #d62b3d;
  93. max-width: 200px;
  94. color: #fff6f9;
  95. text-align: center;
  96. border: 1px solid;
  97. border-color: #fff6f9;
  98. border-radius: 50px;
  99. font-family: "ms ui gothic";
  100. font-size:14px;
  101.  
  102. }
  103.  
  104. /* You can change the look of links here. */
  105. a:link {
  106. color: #fff6f9;
  107. background-color: transparent;
  108. text-decoration: underline;
  109. font-weight: bold;
  110. }
  111.  
  112. /* Changes the look of visited links */
  113. a:visited {
  114. color: #fff6f9;
  115. background-color: transparent;
  116. text-decoration: underline;
  117. font-weight: bold;
  118. }
  119.  
  120. /* Changes the look of links when you hover on them. */
  121. a:hover {
  122. color: #f8c7dd;
  123. background-color: transparent;
  124. text-decoration: underline;
  125. font-weight: bold;
  126. }
  127.  
  128. /* Style h1 here */
  129. h1 {
  130. font-size:25px;
  131. font-family:"ms gothic";
  132. }
  133.  
  134. /* Style h2 here */
  135. h2 {
  136. font-size:18px;
  137. font-family:"ms gothic";
  138. padding-left: 20px;
  139. }
  140.  
  141. /* Body properties.
  142. The background repeats vertically and horizontally, please use a seamless pattern for the best look. */
  143. body {background-image: url('BACKGROUND URL');
  144. background-repeat: repeat;
  145. margin: 0;
  146. padding: 0;
  147. }
  148.  
  149.  
  150. /* You can add custom fonts here.
  151. "font-family" is the name you denote to your font, it can be anything, it doesn't have to match the file name.
  152. I recommend placing the font in a font sub-folder on your NeoCities dashboard. */
  153. @font-face {
  154. font-family: "FONT NAME";
  155. src: url(FONT URL);
  156. }
  157.  
  158.  
  159.  
  160.  
  161.  
  162.  
  163.  
  164. </style>
  165. <meta charset="UTF-8">
  166. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  167. <title>TITLE</title>
  168. <link rel="icon" type="image/x-icon" href="FAVICON URL">
  169. </head>
  170.  
  171.  
  172.  
  173. <center>
  174.  
  175. <br>
  176. <br>
  177.  
  178. <div class="mainDiv">
  179.  
  180. <div class="container">
  181.  
  182. <img class="headerImg" src="HEADER IMAGE URL" style="max-width:100%"> <!-- ATTENTION! For best results and responsiveness, re-size your image to be the same amount of pixels wide as the .mainDiv before uploading! -->
  183.  
  184. <div class="headerText"> <div class="title">Title</div></div>
  185.  
  186. </div>
  187.  
  188. <div class="navigation">
  189. <nav style="padding-left:10px">
  190. LINK 1 ♡ LINK 2 ♡ LINK 3 ♡ LINK 4 ♡ LINK 5 ♡ LINK 6 ♡ LINK 7
  191. </nav>
  192.  
  193. </div>
  194.  
  195. <div class="mainText">
  196.  
  197. <center><strong><h1>Secondary Title</h1></strong></center>
  198.  
  199.  
  200.  
  201.  
  202.  
  203.  
  204. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus, neque in aliquet vehicula, lacus nunc malesuada lorem, vitae convallis arcu leo ut elit. Aenean semper dui quis nunc vulputate venenatis. Phasellus molestie, est non volutpat consequat, metus augue consectetur sem, sit amet condimentum magna purus sit amet ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce tincidunt ipsum id turpis aliquam, in dapibus erat dignissim. Quisque sit amet erat ac quam malesuada ullamcorper. Aenean sit amet tincidunt purus. Nunc molestie sapien quis fermentum rutrum. Maecenas odio nisi, sollicitudin in justo vitae, mattis ullamcorper enim. Nullam suscipit fermentum nisi quis fringilla. Vivamus tristique felis a lectus hendrerit, vitae pharetra lacus accumsan. Sed ultricies pretium enim, ut fermentum turpis congue id. Mauris viverra lectus vel diam elementum, vitae euismod justo convallis. Sed ac ligula nec odio bibendum tincidunt. Nulla sed laoreet leo, eget dapibus nibh. Ut eu sapien consectetur, finibus neque vitae, finibus metus.</p>
  205.  
  206. <p>Fusce urna dui, interdum sit amet enim eget, lacinia consectetur dolor. Integer magna felis, ultricies a fermentum et, placerat et eros. Maecenas quis ipsum convallis, sollicitudin lorem vel, accumsan eros. Donec blandit condimentum nibh quis sodales. Cras at tristique orci. Nam accumsan arcu scelerisque, iaculis libero id, placerat tellus. Praesent rhoncus, sapien nec mattis vestibulum, enim tellus ornare justo, ac faucibus leo ante vitae risus. Nullam non ligula massa. In tempor eu erat nec finibus. In tempor dui eu suscipit placerat. Cras iaculis imperdiet turpis vel tincidunt. Aenean ut libero sodales, dictum ex sed, fermentum sapien. Sed consequat quam sed orci vestibulum, nec egestas enim congue.</p>
  207.  
  208. <p>Vestibulum rutrum varius tristique. Nunc vel lorem quam. Pellentesque tristique nec enim vel tincidunt. Quisque ac lacus in urna volutpat tristique. Phasellus malesuada neque non blandit sollicitudin. Maecenas aliquet, diam non eleifend accumsan, tortor risus auctor lacus, sed ultrices sem dui et risus. Aliquam quis mi urna. Proin malesuada suscipit augue at pulvinar. Duis volutpat nulla vitae ex sollicitudin gravida nec in lectus. Sed faucibus tellus massa, ac pretium leo tincidunt vitae. Ut non malesuada leo, et pulvinar eros.</p>
  209.  
  210. <p>Nulla mollis feugiat lorem, quis sodales ex pharetra ornare. Cras ultrices, nulla vel aliquam sagittis, felis ante laoreet elit, ut tempus dui ligula id risus. Donec rutrum mauris in libero tempor aliquet. Nam tincidunt sed sem ut commodo. Vestibulum vitae interdum turpis, sed feugiat turpis. Duis a ultricies nunc. Maecenas scelerisque tempor nunc et pharetra. Mauris at condimentum ex. Nulla a quam neque.</p>
  211.  
  212. <p>Mauris odio tortor, malesuada posuere viverra nec, varius eu enim. Aliquam ultrices maximus velit, et efficitur purus scelerisque eget. Proin cursus lacus nec quam rhoncus, nec pulvinar dolor tristique. Proin finibus risus vel vestibulum pretium. Quisque nec justo mi. Integer venenatis urna vitae felis maximus, eget volutpat velit finibus. Fusce at erat ut mi ultricies mollis nec et velit. Nam accumsan lectus eu lacus pellentesque, sed congue quam semper. Aenean non eleifend nunc. Curabitur purus tellus, ullamcorper varius arcu et, porta dictum lacus. Duis aliquet lacus ac risus interdum, at volutpat turpis pellentesque. Phasellus quis posuere ipsum. Etiam non posuere nisi. Proin in accumsan enim, tempus pharetra sem. Sed id magna facilisis neque lacinia mattis placerat sed turpis. </p>
  213.  
  214. <br>
  215.  
  216.  
  217.  
  218. </div>
  219. </div>
  220.  
  221. <br>
  222.  
  223.  
  224. <div class="bottom">
  225. Template by <a href="https://recarmdra.neocities.org/">recarmdra</a>.
  226. </div>
  227.  
  228. </center>
  229.  
  230.  
  231.  
  232.  
  233.  
  234.  
  235. </body>
  236. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!