API tools faq
paste
Sky_Blue

DAYDREAM layout

Sky_Blue
Feb 12th, 2023 (edited)
595
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.48 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5.  
  6. <!-- viewport - for mobile screens -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <!-- favicon & title -->
  10. <link rel="shortcut icon" href="FAVICON LINK HERE">
  11. <title>TITLE HERE</title>
  12.  
  13. <!-- fonts -->
  14. <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&display=swap" rel="stylesheet">
  15. </head>
  16. <style>
  17. /****** fonts ******/
  18. @font-face{
  19. font-family:hug;
  20. src:url(https://dl.dropbox.com/s/lkx18y1mqiuxt63/Hug%20Me%20Tight%20-%20TTF.ttf);
  21. }
  22.  
  23. @font-face {
  24. src: url(https://dl.dropbox.com/s/hfc6fjqu9kkxbt5/Sweet%20Creamy.ttf);
  25. font-family: creamy;
  26. }
  27.  
  28. /****** scrollbar ******/
  29. ::-webkit-scrollbar{
  30. display:none;
  31. }
  32.  
  33. /****** select hightlight ******/
  34. ::selection {
  35. background: #83cae4;
  36. color:white;
  37. }
  38.  
  39. ::-moz-selection {
  40. background: #83cae4;
  41. color:white;
  42. }
  43.  
  44. /****** body ******/
  45. body {
  46. background-color:#ffebeb;
  47. background-image:url();
  48. background-repeat: repeat;
  49. background-position: 0 0;
  50. background-attachment: fixed;
  51. color:#7f6a68; /* default font color */
  52. font-family:'creamy'; /* default font */
  53. font-size:20px; /* default font size */
  54. padding:10px;
  55. }
  56.  
  57. /****** links ******/
  58. a{
  59. text-decoration: none;
  60. color:#7f6a68;
  61. transition:0.3s;
  62. text-shadow: -1px 0 #d9bbba, 0 1px #d9bbba, 1px 0 #d9bbba, 0 -1px #d9bbba;
  63. }
  64.  
  65. a:hover{
  66. cursor:help;
  67. transition:0.3s;
  68. color:#d9bbba;
  69. text-shadow: -1px 0 #7f6a68, 0 1px #7f6a68, 1px 0 #7f6a68, 0 -1px #7f6a68;
  70. }
  71.  
  72. /****** wrappers ******/
  73. #wrapper{
  74. position: fixed;
  75. top: 0;
  76. bottom: 0;
  77. left: 0;
  78. right: 0;
  79. animation: fadeEffect 1s;
  80. margin: auto;
  81. display:flex;
  82. align-items:center;
  83. justify-content:center;
  84. }
  85.  
  86. @keyframes fadeEffect {
  87. from {opacity: 0;}
  88. to {opacity: 1;}
  89. }
  90.  
  91. /****** containers ******/
  92. .container{
  93. width:500px;
  94. height:500px;
  95. border:5px solid #af8a94;
  96. background-color:#d9bbba;
  97. padding:10px;
  98. overflow:auto;
  99. }
  100.  
  101. .inner{
  102. border:2px dotted #af8a94;
  103. background-color:white;
  104. }
  105.  
  106. .icon{
  107. border:5px solid #af8a94;
  108. margin-right:50px;
  109. padding:10px;
  110. background-color:#d9bbba;
  111. }
  112.  
  113. .icon img{
  114. width:250px;
  115. height:auto;
  116. display:block;
  117. }
  118.  
  119. .links{
  120. display:flex;
  121. flex-direction:column;
  122. width:120px;
  123. }
  124.  
  125. .links a{
  126. border:5px solid #af8a94;
  127. background-color:#d9bbba;
  128. border-left:none;
  129. margin:20px 0px;
  130. padding:10px;
  131. width:100px;
  132. transition: all .3s ease-in-out;
  133. text-align:center;
  134. }
  135.  
  136. .one:hover, .two:hover, .three:hover, .four:hover, .five:hover{
  137. width:120px;
  138. transition: all .3s ease-in-out;
  139. }
  140.  
  141. .title{
  142. font-size:70px;
  143. position:absolute;
  144. color:#7f6a68;
  145. margin-top:-75px; /* change this if the title is too low */
  146. text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  147. }
  148. </style>
  149. <body>
  150.  
  151. <div id="wrapper">
  152.  
  153. <div class="icon">
  154. <img src="https://files.catbox.moe/qsv524.jpg" class="inner">
  155. </div>
  156.  
  157. <div class="container">
  158. <div class="title">title</div>
  159. <div class="inner" style="padding:10px;">
  160. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam erat velit scelerisque in dictum non consectetur. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Fermentum iaculis eu non diam phasellus vestibulum lorem. Dignissim diam quis enim lobortis scelerisque fermentum. Vulputate mi sit amet mauris commodo quis. Massa tincidunt nunc pulvinar sapien et. Morbi enim nunc faucibus a pellentesque. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Ut venenatis tellus in metus vulputate eu scelerisque felis. Scelerisque in dictum non consectetur. Duis at tellus at urna condimentum mattis pellentesque id nibh. Placerat in egestas erat imperdiet sed euismod nisi.
  161. <br><br>
  162. Libero nunc consequat interdum varius sit. Natoque penatibus et magnis dis parturient. Arcu non odio euismod lacinia at quis risus sed vulputate. Ridiculus mus mauris vitae ultricies leo. Sit amet cursus sit amet dictum sit amet justo. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Dictumst quisque sagittis purus sit amet. Mattis vulputate enim nulla aliquet porttitor lacus. Eget dolor morbi non arcu risus quis varius quam quisque. Sed vulputate mi sit amet mauris commodo. Consectetur adipiscing elit pellentesque habitant morbi. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Aliquet porttitor lacus luctus accumsan tortor. Ac tortor dignissim convallis aenean et tortor at. Enim facilisis gravida neque convallis a cras semper auctor. Interdum velit laoreet id donec. Non curabitur gravida arcu ac.
  163. </div>
  164. </div>
  165.  
  166. <div class="links">
  167. <a href="/" class="one">one</a>
  168. <a href="/" class="two">two</a>
  169. <a href="/" class="three">three</a>
  170. <a href="/" class="four">four</a>
  171. <a href="/" class="five">five</a>
  172. </div>
  173. </div>
  174.  
  175. </body>
  176. </html>
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!