API tools faq
paste
sexycullen

theme 203 custom layout

sexycullen
Sep 2nd, 2019
1,578
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.84 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------------------
  2. tylergaciaposey's theme #203
  3. http://tylergaciaposey.tumblr.com/
  4.  
  5.  
  6. PLEASE DO NOT,
  7. remove the credits; claim as your own; use as a base, take parts
  8. of the theme.
  9. YOU CAN:
  10. edit as much as you want for your own personal use only.
  11.  
  12.  
  13. CREDITS,
  14. shythemes:
  15. scrollbar style
  16.  
  17. --------------------------------------------->
  18.  
  19. <!DOCTYPE html>
  20. <head>
  21.  
  22.  
  23. <!----- fonts ---->
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=Hind:400,700|Muli:400,400i,700,700i|Open+Sans:400,400i,700,700i|Lato:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
  26.  
  27. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  28.  
  29.  
  30.  
  31. <!----- scripts ---->
  32.  
  33. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  34.  
  35. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  36.  
  37. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  38.  
  39.  
  40.  
  41.  
  42.  
  43. <style type="text/css">
  44.  
  45.  
  46. ::-webkit-scrollbar {
  47. width:7px;
  48. height:7px;
  49. }
  50. ::-webkit-scrollbar {
  51. background-color:#fff;
  52. }
  53. ::-webkit-scrollbar-track {
  54. border:8px solid #fff;
  55. background-color:#fff;
  56. }
  57. ::-webkit-scrollbar-thumb {
  58. border:3px solid #fff;
  59. background-color:#e2e2e2;
  60. min-height:24px;
  61. min-width:24px;
  62. }
  63.  
  64.  
  65. body {
  66. -webkit-font-smoothing: antialiased;
  67. font-smoothing: antialiased;
  68. color:#252525;
  69. font-size:11px;
  70. font-family:'Open Sans', Calibri,sans-serif;
  71. word-wrap:break-word;
  72. margin:0;
  73. line-height:15px;
  74. background-color:#fff;
  75. }
  76.  
  77.  
  78. a {
  79. color:#9a9a9a;
  80. text-decoration:none;
  81. transition:all .3s linear;
  82. -webkit-transition:all .3s linear;
  83. -o-transition:all .3s linear;
  84. -moz-transition:all .3s linear;
  85. }
  86.  
  87.  
  88. a:hover {
  89. color:#000;
  90. text-decoration:none;
  91. }
  92.  
  93.  
  94.  
  95. b, strong {
  96. font-weight:bold;
  97. color: #252525!important;
  98. }
  99.  
  100.  
  101. i, italic {
  102. color: #d8dede;
  103. }
  104.  
  105.  
  106.  
  107.  
  108. /* tylergaciaposey's theme 202
  109. css part */
  110.  
  111.  
  112. .nav_container {
  113. width:540px;
  114. overflow: hidden;
  115. margin:25px auto;
  116. padding:2px;
  117. }
  118.  
  119.  
  120. .box_left {
  121. width:50%;
  122. overflow: hidden;
  123. float:left;
  124. padding:10px;
  125. box-sizing: border-box;
  126.  
  127. }
  128.  
  129. .box_right {
  130. width:50%;
  131. overflow: hidden;
  132. float:right;
  133. padding:10px;
  134. box-sizing: border-box;
  135. }
  136.  
  137. .nav_title {
  138. font-weight:bold;
  139. margin:2px 0 3px;
  140. padding:0 0 5px;
  141. }
  142.  
  143.  
  144. .nav_title:after {
  145. width:100px;
  146. content:'';
  147. border-bottom:1px dotted #e2e2e2;
  148. display:block;
  149. margin:5px 0;
  150. }
  151.  
  152.  
  153. .nav_list {
  154. margin:0 0 2px 5px;
  155. }
  156.  
  157.  
  158. .nav_list:before {
  159. content:'\e083';
  160. font-family:'saturnicons';
  161. margin-right:5px;
  162. font-size:7px;
  163. display:inline-block;
  164. vertical-align:middle;
  165. position:relative;
  166. }
  167.  
  168.  
  169. .nav_paragraph {
  170. margin:7px 0;
  171. }
  172.  
  173.  
  174. .nav_separator {
  175. clear:both;
  176. width:100%;
  177. display:block;
  178. border-bottom:1px dotted #e2e2e2;
  179. margin:25px 0;
  180. padding:0 0 25px;
  181. }
  182.  
  183.  
  184. /* tags aka links lis */
  185.  
  186. .nav_tags_title1 {
  187. font-weight:bold;
  188. margin:2px 10px 3px;
  189. padding:0 0 5px;
  190. }
  191.  
  192. .nav_tags_title1:after {
  193. width:100px;
  194. content:'';
  195. border-bottom:1px dotted #e2e2e2;
  196. display:block;
  197. margin:5px 0;
  198. }
  199.  
  200.  
  201. .nav_tags_title {
  202. margin:3px 0 3px;
  203. padding:0 0 5px;
  204. font-weight:bold;
  205. }
  206.  
  207. .nav_tags_title:after {
  208. content:'';
  209. border-bottom:0px dotted #e2e2e2;
  210. }
  211.  
  212. .nav_tags_box {
  213. height:180px;
  214. width:33.3%;
  215. margin-bottom:25px;
  216. overflow: hidden;
  217. float:left;
  218. padding:10px;
  219. box-sizing: border-box;
  220. overflow-y:auto;
  221. overflow-x:hidden;
  222. }
  223.  
  224.  
  225. .nav_tags_list {
  226. margin:0 0 2px 5px;
  227. }
  228.  
  229. .nav_tags_list:before {
  230. content:'\e08f';
  231. font-family:'saturnicons';
  232. margin-right:5px;
  233. font-size:7px;
  234. display:inline-block;
  235. vertical-align:middle;
  236. position:relative;
  237. }
  238.  
  239.  
  240. /* tylergaciaposey's theme 202
  241. css part */
  242.  
  243.  
  244.  
  245. /* DO NOT REMOVE */
  246.  
  247. .credito {
  248. position:fixed;
  249. right:5px;
  250. bottom:18px;
  251. padding:5px;
  252. outline:1px dotted #e2e2e2;
  253. background-color: #fff;
  254. }
  255.  
  256.  
  257. .credito a {
  258. text-transform:lowercase;
  259. text-align:center;
  260. font-size:10px;
  261. font-family:'Open Sans', Calibri, sans-serif;
  262. color:#252525;
  263. padding:3px;
  264. font-style:normal;
  265. padding:3px;
  266. -moz-transition-duration:0.5s;
  267. -webkit-transition-duration:0.5s;
  268. -o-transition-duration:0.5s;
  269. }
  270.  
  271.  
  272. </style>
  273. </head>
  274.  
  275.  
  276. <body><!-- tylergaciaposey's theme 202
  277. html part -->
  278.  
  279. <div class="nav_container">
  280. <!-- start box left 1 -->
  281. <div class="box_left">
  282. <div class="nav_title">Aliquam ut leo nulla</div>
  283. <div class="nav_list_box">
  284. <div class="nav_list"><a href="/link">lorem ipsum</a></div>
  285. <div class="nav_list"><a href="/link">dolor sit amet</a></div>
  286. <div class="nav_list"><a href="/link">consectetur adipiscings</a></div>
  287. </div>
  288. </div>
  289. <!-- end box left 1 -->
  290.  
  291. <!-- start box right 1 -->
  292. <div class="box_right">
  293. <div class="nav_title">Mauris non enim erat</div>
  294. <div class="nav_list_box">
  295. <div class="nav_list"><a href="/link">proin non dictum erat</a></div>
  296. <div class="nav_list"><a href="/link">at gravida velit</a></div>
  297. <div class="nav_list"><a href="/link">erat pharetra</a></div>
  298. </div>
  299. <div class="nav_paragraph">Aliquam ut leo nulla. Duis auctor ultricies tellus et porta. Mauris non enim erat. Nam nec dolor vel mauris auctor elementum in vitae nunc. Vestibulum hendrerit vehicula turpis, eu eleifend neque.</div>
  300. <div class="nav_paragraph">Nulla et sem sed ipsum ullamcorper imperdiet et nec massa. Nam nulla magna, mattis a porta ut, lacinia ac lectus.</div>
  301. </div>
  302. <!-- end box right 1 -->
  303.  
  304. <!-- start box left 2 -->
  305. <div class="box_left">
  306. <div class="nav_title">Suspendisse molestie</div>
  307. <div class="nav_list_box">
  308. <div class="nav_list"><a href="/link">maecenas mattis nisl</a></div>
  309. <div class="nav_list"><a href="/link">consequat accumsan</a></div>
  310. <div class="nav_list"><a href="/link">integer tempor</a></div>
  311. <div class="nav_list"><a href="/link">id finibus</a></div>
  312. <div class="nav_list"><a href="/link">malesuada dictum</a></div>
  313. </div>
  314. </div>
  315. <!-- end box left 2 -->
  316. <div class="nav_separator"></div>
  317. <div class="nav_tags_title1">Maecenas mattis</div>
  318.  
  319. <!-- start tags box 1 -->
  320. <div class="nav_tags_box">
  321. <div class="nav_tags_title">Lorem ipsum</div>
  322. <div class="nav_list_box">
  323. <div class="nav_tags_list"><a href="/tagged/link">nibh</a></div>
  324. <div class="nav_tags_list"><a href="/tagged/link">elementum</a></div>
  325. <div class="nav_tags_list"><a href="/tagged/link">ornare</a></div>
  326. <div class="nav_tags_list"><a href="/tagged/link">dignissim</a></div>
  327. <div class="nav_tags_list"><a href="/tagged/link">fermentum</a></div>
  328. <div class="nav_tags_list"><a href="/tagged/link">mauris</a></div>
  329. <div class="nav_tags_list"><a href="/tagged/link">pharetra</a></div>
  330. </div>
  331. </div>
  332. <!-- end tags box 1 -->
  333.  
  334. <!-- start tags box 2 -->
  335. <div class="nav_tags_box">
  336. <div class="nav_tags_title">Donec cursus</div>
  337. <div class="nav_list_box">
  338. <div class="nav_tags_list"><a href="/tagged/link">fermentum</a></div>
  339. <div class="nav_tags_list"><a href="/tagged/link">mauris</a></div>
  340. <div class="nav_tags_list"><a href="/tagged/link">pharetra</a></div>
  341. <br />
  342. <div class="nav_tags_title">Ornare turpis</div>
  343. <div class="nav_tags_list"><a href="/link">elementum</a></div>
  344. <div class="nav_tags_list"><a href="/link">mauris</a></div>
  345. <div class="nav_tags_list"><a href="/link">pharetra</a></div>
  346. <div class="nav_tags_list"><a href="/link">aliquam</a></div>
  347. <div class="nav_tags_list"><a href="/link">nibh</a></div>
  348. <div class="nav_tags_list"><a href="/link">elementum</a></div>
  349. </div>
  350. </div>
  351. <!-- end tags box 2 -->
  352.  
  353. <!-- start tags box 3 -->
  354. <div class="nav_tags_box">
  355. <div class="nav_tags_title">Fusce lobortis</div>
  356. <div class="nav_list_box">
  357. <div class="nav_tags_list"><a href="/tagged/link">nibh</a></div>
  358. <div class="nav_tags_list"><a href="/tagged/link">elementum</a></div>
  359. <div class="nav_tags_list"><a href="/tagged/link">ornare</a></div>
  360. <div class="nav_tags_list"><a href="/tagged/link">dignissim</a></div>
  361. <div class="nav_tags_list"><a href="/tagged/link">fermentum</a></div>
  362. <div class="nav_tags_list"><a href="/tagged/link">mauris</a></div>
  363. <div class="nav_tags_list"><a href="/tagged/link">pharetra</a></div>
  364. </div>
  365. </div>
  366. <!-- end tags box 3 -->
  367.  
  368.  
  369. <!-- copy what's between the comments and paste after this if you need more spots. i recommend copying the comments too and changing their names so you won't get lost editing them -->
  370. </div>
  371. <div class="credito">
  372. <a href="http://tylergaciaposey.tumblr.com/">tylergaciaposey</a>
  373. </div>
  374. </body></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!