API tools faq
paste
foundcas

page 5: 화려한

foundcas
Jan 13th, 2021 (edited)
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--page theme five by foundcas/capecoding
  5. - do not use this as a base
  6. - do not remove the credit
  7. - do not steal/copy parts of the code
  8. - if you have any questions please send them to https://capecoding.tumblr.com
  9. -->
  10.  
  11. <!--title that shows up on the tab-->
  12. <title>화려한</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14.  
  15. <!--google fonts-->
  16. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  17.  
  18. <!--font awesome icons-->
  19. <script src="https://kit.fontawesome.com/e1c5fe38ac.js" crossorigin="anonymous"></script>
  20. <style type="text/css">
  21. /*change the color scheme here, you can check https://coolors.co/ for color palette ideas*/
  22. :root{
  23. --background:#fefefe;
  24. --main:#E3DAFF;
  25. --text:#444;
  26. --link:#3967aa;
  27. --accent:#FCF0CC;
  28. --accent-two:#f69880;
  29. --accent-three:#5ea;
  30. --accent-four:#f394f9;
  31. --accent-five:#f89032;
  32. --accent-six:#e3af84;
  33. --credit:#c3dfdf;
  34. }
  35. /*tumblr controls*/
  36. .iframe-controls--desktop {
  37. position:fixed;
  38. right:0px;
  39. z-index:999999999999;
  40. filter:invert(100%);
  41. -webkit-filter:invert(100%);
  42. -webkit-transform:scale(0.8,0.8);
  43. -webkit-transform-origin: 100% 0%;
  44. -ms-transform-origin:100% 0%;
  45. -ms-transform:scale(0.8,0.8);
  46. transform:scale(0.8,0.8);
  47. transform-origin:100% 0%;
  48. }
  49. /*selection*/
  50. ::selection{
  51. background:var(--main);
  52. }
  53. body{
  54. font-family:poppins;
  55. color:var(--text);
  56. background:var(--background);
  57. }
  58. /*this is the styling for the heading in each box*/
  59. h3{
  60. text-align:center;
  61. }
  62. /*link styling*/
  63. a{
  64. text-decoration:none;
  65. color:var(--link);
  66. -moz-transition:.5s ease-in-out;
  67. -webkit-transition:.5s ease-in-out;
  68. -o-transition:.5s ease-in-out;
  69. transition:.5s ease-in-out;
  70. }
  71. a:hover{
  72. color:var(--text);
  73. -moz-transition:.5s ease-in-out;
  74. -webkit-transition:.5s ease-in-out;
  75. -o-transition:.5s ease-in-out;
  76. transition:.5s ease-in-out;
  77. }
  78. main{
  79. width:90%;
  80. margin:auto;
  81. display:flex;
  82. flex-wrap:wrap;
  83. }
  84. header{
  85. width:100%;
  86. margin:50px auto;
  87. height:100px;
  88. text-align:center;
  89. background:var(--main);
  90. border-radius:30px;
  91. box-shadow:4px 4px var(--accent-two);
  92. }
  93. .title{
  94. padding:10px;
  95. font-size:50px;
  96. font-style:italic;
  97. background:linear-gradient(to right, var(--accent), var(--accent-two), var(--accent-three));
  98. -webkit-text-fill-color:transparent;
  99. -webkit-background-clip:text;
  100. }
  101. nav{
  102. width:25%;
  103. margin-right:5%;
  104. }
  105. nav a{
  106. display:block;
  107. text-align:center;
  108. padding:15px;
  109. margin-bottom:15px;
  110. letter-spacing:2px;
  111. border-radius:30px;
  112. }
  113. nav a:hover{
  114. box-shadow:2px 2px 0px var(--text);
  115. }
  116. .link-one{
  117. background:var(--accent);
  118. }
  119. .link-two{
  120. background:var(--accent-two);
  121. }
  122. .link-three{
  123. background:var(--accent-three);
  124. }
  125. .link-four{
  126. background:var(--accent-four);
  127. }
  128. .link-five{
  129. background:var(--accent-five);
  130. }
  131. .link-six{
  132. background:var(--accent-six);
  133. }
  134. .link-seven{
  135. background:var(--credit);
  136. }
  137. .box-grid{
  138. display:grid;
  139. width:70%;
  140. grid-gap:15px;
  141. }
  142. .box{
  143. border-radius:30px;
  144. padding:15px;
  145. overflow-y:auto;
  146. height:200px;
  147. word-wrap:break-word;
  148. -moz-transition:.5s ease-in-out;
  149. -webkit-transition:.5s ease-in-out;
  150. -o-transition:.5s ease-in-out;
  151. transition:.5s ease-in-out;
  152. }
  153. .box:hover{
  154. box-shadow:2px 2px 0px var(--text);
  155. -moz-transition:.5s ease-in-out;
  156. -webkit-transition:.5s ease-in-out;
  157. -o-transition:.5s ease-in-out;
  158. transition:.5s ease-in-out;
  159. }
  160. /*this is determining the grid layout*/
  161. .one{
  162. background:var(--accent);
  163. grid-column: 1 / span 2;
  164. grid-row: 1;
  165. }
  166. .two{
  167. background:var(--accent-two);
  168. height:445px;
  169. grid-column: 3;
  170. grid-row: 1 / span 2;
  171. }
  172. .three{
  173. background:var(--accent-three);
  174. }
  175. .four{
  176. background:var(--accent-four);
  177. }
  178. .five{
  179. background:var(--accent-five);
  180. }
  181. .six{
  182. background:var(--accent-six);
  183. grid-column: 2 / span 2;
  184. grid-row: 3;
  185. }
  186. /*styling for boxes with a links list*/
  187. .link-list a{
  188. text-align:center;
  189. display:block;
  190. padding:10px 0px;
  191. }
  192. .link-list{
  193. transform:translateY(-10px);
  194. }
  195. /*styling for images*/
  196. .box img{
  197. max-width:100%;
  198. height:auto;
  199. }
  200. /*styling for ordered and unordered lists*/
  201. ol, ul{
  202. transform:translateY(-10px);
  203. }
  204. ul li{
  205. padding:10px 0px;
  206. }
  207. ol li{
  208. padding:10px;
  209. }
  210. </style>
  211. </head>
  212. <body>
  213. <!--main container-->
  214. <main>
  215. <header>
  216. <!--page title-->
  217. <div class="title">page title</div>
  218. </header>
  219. <!-- link menu
  220. - to change any of the icons go to this website https://fontawesome.com/v4.7.0/icons/ to find the icon you want and change this part
  221. <i class="fa fa-envelope" aria-hidden="true"></i>
  222. to whatever icon you found
  223. -->
  224. <nav>
  225. <a class="link-one" href="/"><i class="fa fa-home" aria-hidden="true"></i> home </a>
  226. <!--if you have a custom ask/faq page change the link here-->
  227. <a class="link-two" href="/ask"><i class="fa fa-envelope" aria-hidden="true"></i> contact </a>
  228.  
  229. <a class="link-three" href="url here"><i class="fa fa-paper-plane" aria-hidden="true"></i> link 1</a>
  230.  
  231. <a class="link-four" href="url here"><i class="fa fa-link" aria-hidden="true"></i> link 2</a>
  232.  
  233. <a class="link-five" href="url here"><i class="fa fa-user-circle" aria-hidden="true"></i> link 3</a>
  234.  
  235. <a class="link-six" href="/archive"><i class="fa fa-archive" aria-hidden="true"></i> archive</a>
  236.  
  237. <a class="link-seven" href="https://capecoding.tumblr.com"><i class="fa fa-code" aria-hidden="true"></i> credit</a>
  238. </nav>
  239.  
  240. <!--box container-->
  241. <div class="box-grid">
  242. <!--these are the boxes where your content goes, the title of each box goes inside of the <h3></h3> tags and you can -->
  243. <!--content box-->
  244. <div class="box one">
  245. <h3>content 1</h3>
  246. <!--this is a paragraph-->
  247. <p>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.</p>
  248. </div>
  249.  
  250. <!--content box-->
  251. <div class="box two">
  252. <h3>content 2</h3>
  253. <p>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.</p>
  254. </div>
  255.  
  256. <!--content box-->
  257. <div class="box three">
  258. <h3>content 3</h3>
  259. <!--this is a list of links, you can copy and paste this into other boxes if you want to use this as a navigation page-->
  260. <div class="link-list">
  261. <!--copy and paste <a href="url">Lorem ipsum</a> to add more links-->
  262. <a href="url">Lorem ipsum</a>
  263. <a href="url">Lorem ipsum</a>
  264. <a href="url">Lorem ipsum</a>
  265. <a href="url">Lorem ipsum</a>
  266. <a href="url">Lorem ipsum</a>
  267. </div>
  268. <!--end of link list-->
  269. </div>
  270.  
  271. <!--content box-->
  272. <div class="box four">
  273. <h3>content 4</h3>
  274. <!--this is a bulleted list-->
  275. <ul>
  276. <li>Lorem ipsum</li>
  277. <li>Lorem ipsum</li>
  278. <li>Lorem ipsum</li>
  279. </ul>
  280. <!--end of bulleted list-->
  281. </div>
  282.  
  283. <!--content box-->
  284. <div class="box five">
  285. <h3>content 5</h3>
  286. <!--this is an image, if you add pictures they will resize to fit in the boxes, just change the link in the src="[url here]" to add your own image-->
  287. <img src="https://images.unsplash.com/photo-1550747528-cdb45925b3f7?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=670&q=80">
  288. </div>
  289.  
  290. <!--content box-->
  291. <div class="box six">
  292. <h3>content 6</h3>
  293. <!--this is an ordered list-->
  294. <ol>
  295. <li>Lorem ipsum</li>
  296. <li>Lorem ipsum</li>
  297. <li>Lorem ipsum</li>
  298. </ol>
  299. <!--end of ordered list-->
  300. </div>
  301. </div>
  302. </main>
  303.  
  304. </body>
  305. </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!