API tools faq
paste
Advertisement
csloani

PAGE 07 | GROTESK

csloani
Jan 10th, 2016
1,008
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.73 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14. <!--
  15.  
  16.  
  17. page grotesk
  18. iliyon @ tumblr
  19.  
  20. -->
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31. <title>GR-OTESK</title> <!-- TITLE PAGE. CHANGE ACCORDINGLY. -->
  32. <link rel="shortcut icon" href="{Favicon}">
  33. <link href='http://static.tumblr.com/wb7siqo/jjdnjg8n6/cssnormalizer.css' rel='stylesheet' type='text/css'>
  34. <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/xwpa0i0ian0qsy9/fl-circled-adj-2.css?dl=0"><meta name="description" content="Humans in denial" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
  35. <link href='https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  36. <!--
  37.  
  38. NOTE:
  39. -----
  40.  
  41. this page has 4 columns by default. to change number of columns, find
  42. .entry in the css and change (100% / 4) accordingly (e.g. if you want
  43. a 5 column, change it to (100% / 5)).
  44.  
  45.  
  46. default orientation is landscape. if you wish to use the portrait
  47. instead, use CTRL + F / CMD + F function and look for "entry landscape"
  48. and replace each instance with "entry portrait". post size will adjust
  49. automatically.
  50.  
  51. -->
  52. <style type="text/css">
  53. body{
  54. background-color:#f7f7f7;
  55. color:#444444;
  56. font-size:16px;
  57. font-family:'Lato', 'Helvetica', 'Arial', sans-serif;
  58. }
  59. a{
  60. color:#aaaaaa;
  61. transition:.4s;
  62. -webkit-transition:.4s;
  63. text-decoration:none;
  64. }
  65. a:hover{
  66. color:#444444;
  67. transition:.4s;
  68. -webkit-transition:.4s;
  69. }
  70. .holder{
  71. width:100%;
  72. position:absolute;
  73. top:5%;
  74. }
  75. aside, footer{
  76. margin:40px auto;
  77. width:calc(90% - 60px);
  78. padding:30px;
  79. position:relative;
  80. background:rgba(0,0,0,.7);
  81. }
  82. aside header{
  83. font-size:225%;
  84. letter-spacing:1px;
  85. color:#f7f7f7;
  86. }
  87. aside nav{
  88. position:absolute;
  89. top:45%;
  90. right:20px;
  91. font-size:69%;
  92. letter-spacing:2px;
  93. }
  94. aside nav a{
  95. padding:5px;
  96. position:relative;
  97. display:inline-block;
  98. margin:0 10px;
  99. color:#f7f7f7;
  100. }
  101. aside nav a:hover{
  102. color:#aaaaaa;
  103. }
  104.  
  105. footer a:hover{
  106. color:#f7f7f7;
  107. }
  108. footer{
  109. color:#f7f7f7;
  110. line-height:150%;
  111. font-size:69%;
  112. }
  113. footer div{
  114. display:inline-block;
  115. vertical-align:top;
  116. width:20%;
  117. margin-right:2%;
  118. }
  119. footer div span.cap.bold{
  120. display:block!important;
  121. letter-spacing:1px;
  122. }
  123. footer div span.cap.bold:after{
  124. height:1px;
  125. background:#aaaaaa;
  126. width:10px;
  127. margin:7px 0;
  128. display:block;
  129. content:'';
  130. }
  131. footer div.more-link a{
  132. font-size:91%;
  133. }
  134. footer div.more-link a:after{
  135. display:block;
  136. margin:2px 0;
  137. content:'';
  138. }
  139.  
  140. footer .paging{
  141. position:absolute;
  142. right:15px;
  143. top:calc(50% - 10px);
  144. text-align:right;
  145. }
  146.  
  147. .postcont{
  148. width:calc(90% + 40px);
  149. margin:auto;
  150. text-align:center;
  151. counter-reset:post-number;
  152. }
  153. .entry{
  154. width:calc((100% / 4) - 2 * 22px);
  155. display:inline-block;
  156. margin:20px;
  157. text-align:left!important;
  158. position:relative;
  159. overflow:hidden;
  160. }
  161. .entry .textarea{
  162. padding:10px;
  163. background:#fff;
  164. height:calc(100% - 20px);
  165. width:calc(100% - 20px);
  166.  
  167. font-size:62.5%;
  168. letter-spacing:1px;
  169.  
  170. line-height:150%;
  171. }
  172.  
  173. .entry .photo{
  174.  
  175. background-size:cover;
  176. background-position:center center;
  177. background-repeat:no-repeat;
  178. width:100%;
  179. height:100%;
  180.  
  181. }
  182. .entry .photo img{
  183. max-width:100%;
  184. height:auto;
  185. }
  186.  
  187. .entry .photo img{
  188. display:none;
  189. }
  190.  
  191.  
  192.  
  193. .post-info{
  194. background:rgba(0,0,0,.7);
  195.  
  196. padding:10px 5px;
  197. width:calc(100% - 10px);
  198. color:#f7f7f7;
  199. bottom:-40px;
  200. font-size:56.25%;
  201. letter-spacing:2px;
  202.  
  203.  
  204. text-align:center;
  205. position:absolute;
  206. transition:.2s ease-out .1s;
  207. -webkit-transition:.2s ease-out .1s;
  208. z-index:90;
  209. }
  210.  
  211. .post-info a{
  212. color:#f7f7f7;
  213.  
  214. }
  215. .post-info a:hover{
  216. color:#aaaaaa;
  217. }
  218.  
  219. .post-numbering{
  220.  
  221. padding:7px;
  222. background:rgba(0,0,0,.7);
  223. top:0;
  224. left:0;
  225. line-height:24px;
  226. font-size:24px;
  227. top:-40px;
  228.  
  229.  
  230. position:absolute;
  231. color:#f7f7f7;
  232. transition:.2s ease-out;
  233. -webkit-transition:.2s ease-out;
  234. z-index:91;
  235. }
  236. .post-numbering:before{
  237. counter-increment:post-number;
  238. content:counter(post-number, decimal-leading-zero);
  239. }
  240.  
  241. .post-data.mobile{
  242. display:none;
  243. margin:15px 0;
  244. }
  245.  
  246. .entry:hover .post-info{
  247.  
  248. bottom:0;
  249.  
  250.  
  251. transition:.2s ease-out;
  252. -webkit-transition:.2s ease-out;
  253. }
  254. .entry:hover .post-numbering{
  255.  
  256. top:0;
  257.  
  258.  
  259. transition:.2s ease-out .1s;
  260. -webkit-transition:.2s ease-out .1s;
  261. }
  262.  
  263. .cap{
  264. text-transform:uppercase;
  265. }
  266. .lo{
  267. text-transform:lowercase;
  268. }
  269. .neut{
  270. text-transform:none;
  271. font-weight:400;
  272. font-style:normal;
  273. }
  274. .bold{
  275. font-weight:bold;
  276. font-weight:700;
  277. }
  278. .it{
  279. font-style:italic;
  280. }
  281. .font{
  282. font-family:'Montserrat', sans-serif;
  283. }
  284. .accent{
  285. color:;
  286. }
  287. .lt{
  288. font-weight:300;
  289. }
  290.  
  291. /* screed adjustments */
  292.  
  293. @media(min-width:0px) and (max-width:1025px){
  294. aside header,
  295. aside nav{
  296. position:relative;
  297. display:block;
  298. text-align:left;
  299. }
  300. aside nav{
  301. right:0;
  302. left:-3px;
  303. }
  304. aside nav a{
  305. margin:0 10px 0 0;
  306. }
  307. footer div{
  308. display:block;
  309. margin:20px 0;
  310. width:100%;
  311. }
  312. footer .paging{
  313. position:absolute!important;
  314. right:-5px;
  315. top:calc(100% + 15px);
  316. width:100%;
  317. }
  318. footer{
  319. margin-bottom:70px;
  320. position:relative;
  321. }
  322. .entry{
  323. height:auto;
  324. max-width:90%;
  325. width:500px;
  326. margin:10% auto;
  327. display:block;
  328. }
  329. .entry .photo img{
  330. display:block;
  331. }
  332. .entry .post-info,
  333. .entry .post-numbering{
  334. display:none;
  335. }
  336. .entry .textarea{
  337. padding:15px;
  338. }
  339. .mobile{
  340. display:block!important;
  341. font-size:87.5%;
  342. }
  343. .post-data.mobile a.icon-s{
  344. font-size:171%;
  345. margin-right:10px;
  346. position:relative;
  347. margin-right:7px;
  348. top:3px;
  349. }
  350. aside header:before{
  351. display:block;
  352. height:1px;
  353. background:#aaaaaa;
  354. width:.5em;
  355. margin:.3em 0 .1em 0;
  356. content:'';
  357. }
  358. }
  359.  
  360. </style>
  361. </head>
  362. <body>
  363. <section class="holder">
  364.  
  365. <aside>
  366. <nav class="cap"> <!-- LINKS, ADD MORE IF YOU NEED MORE -->
  367. <a href="/">back to blog</a>
  368. <a href="/ask">message</a>
  369. <a href="/archive">blog archive</a>
  370. <a href="http://iliyon.tumblr.com" target="_blank">&copy;</a>
  371. </nav>
  372. <header class="lt"> <!-- PAGE TITLE -->
  373. gr-otesk<!-- CHANGE TITLE ACCORDINGLY -->
  374. </header>
  375. </aside>
  376.  
  377. <article class="postcont">
  378.  
  379. <!-- BEGIN PANEL CODING -->
  380. <article class="entry landscape">
  381.  
  382. <!-- PANEL AREA. PLEASE NOTE TO FOLLOW THE PATTERN EXACTLY AS IT IS -->
  383.  
  384. <!-- ADD IMAGE URL TWICE: -->
  385.  
  386. <div class="photo" style="background-image:url('http://40.media.tumblr.com/7e502624f11726bd70d9cfe9a9327bc6/tumblr_niiza1yfFc1r15k8zo1_1280.jpg')"> <!-- FIRST HERE AFTER background-image:url -->
  387. <img src="http://40.media.tumblr.com/7e502624f11726bd70d9cfe9a9327bc6/tumblr_niiza1yfFc1r15k8zo1_1280.jpg" /> <!-- AND THEN HERE, FOR RESPONSIVENESS REASONS. -->
  388. </div>
  389.  
  390.  
  391. <!-- PANEL TITLE, CHANGE ACCORDINGLY. -->
  392. <div class="post-info cap">
  393. <!-- CHANGE URL ACCORDINGLY. -->
  394. <a href="/">Branding & Identity</a>
  395. </div>
  396.  
  397.  
  398. <!-- PANEL NUMBERING. YOU CAN OBLITERATE THIS BY GOING TO THE CSS SECTION AND FIND ".post-numbering" AND ADD A "display:none;" ON IT. -->
  399. <div class="post-numbering lt"></div>
  400.  
  401.  
  402. <!-- PANEL TITLE FOR MOBILE VERSION. CHANGE ACCORDINGLY AS WELL. -->
  403. <div class="post-data mobile cap">
  404. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Branding & Identity</b>
  405. </div>
  406. </article>
  407.  
  408. <!-- /CLOSE PANEL CODING -->
  409.  
  410. <article class="entry landscape">
  411.  
  412. <div class="photo" style="background-image:url('http://41.media.tumblr.com/ac0b7e374ff4c206c40dbfa039a10501/tumblr_nuloanY3M51r15k8zo1_1280.jpg')">
  413. <img src="http://41.media.tumblr.com/ac0b7e374ff4c206c40dbfa039a10501/tumblr_nuloanY3M51r15k8zo1_1280.jpg" />
  414. </div>
  415.  
  416. <div class="post-info cap">
  417. <a href="/">Publishing Design</a>
  418. </div>
  419.  
  420. <div class="post-numbering lt"></div>
  421. <div class="post-data mobile cap">
  422. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Publishing Design</b>
  423. </div>
  424.  
  425. </article>
  426.  
  427.  
  428.  
  429. <article class="entry landscape">
  430.  
  431. <div class="photo" style="background-image:url('http://40.media.tumblr.com/6f9060f436d195efe64b5b24939aadbd/tumblr_nza0yzoGu31r15k8zo1_1280.png')">
  432. <img src="http://40.media.tumblr.com/6f9060f436d195efe64b5b24939aadbd/tumblr_nza0yzoGu31r15k8zo1_1280.png" />
  433. </div>
  434.  
  435. <div class="post-info cap">
  436. <a href="/">Graphic Design</a>
  437. </div>
  438.  
  439. <div class="post-numbering lt"></div>
  440.  
  441. <div class="post-data mobile cap">
  442. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Graphic Design</b>
  443. </div>
  444.  
  445. </article>
  446.  
  447.  
  448. <article class="entry landscape">
  449.  
  450. <div class="photo" style="background-image:url('http://41.media.tumblr.com/53fd472d87b09771e368bf38127bd66e/tumblr_nwb84s1D4n1rmd51zo1_1280.jpg')">
  451. <img src="http://41.media.tumblr.com/53fd472d87b09771e368bf38127bd66e/tumblr_nwb84s1D4n1rmd51zo1_1280.jpg" />
  452. </div>
  453.  
  454. <div class="post-info cap">
  455. <a href="/">Monograms & Icons</a>
  456. </div>
  457.  
  458. <div class="post-numbering lt"></div>
  459.  
  460. <div class="post-data mobile cap">
  461. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Monograms & Icons</b>
  462. </div>
  463.  
  464. </article>
  465.  
  466.  
  467.  
  468. <article class="entry landscape">
  469.  
  470. <div class="photo" style="background-image:url('http://41.media.tumblr.com/7d3c35a181b789e36c1d5192d0fdcdde/tumblr_nsdvflBMEC1rpowflo1_1280.jpg')">
  471. <img src="http://41.media.tumblr.com/7d3c35a181b789e36c1d5192d0fdcdde/tumblr_nsdvflBMEC1rpowflo1_1280.jpg" />
  472. </div>
  473.  
  474. <div class="post-info cap">
  475. <a href="/">Photography</a>
  476. </div>
  477.  
  478. <div class="post-numbering lt"></div>
  479.  
  480. <div class="post-data mobile cap">
  481. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Photography</b>
  482. </div>
  483.  
  484. </article>
  485.  
  486.  
  487. <article class="entry landscape">
  488.  
  489. <div class="photo" style="background-image:url('http://41.media.tumblr.com/tumblr_m9kw6pgxus1rdhq6qo1_500.jpg')">
  490. <img src="http://41.media.tumblr.com/tumblr_m9kw6pgxus1rdhq6qo1_500.jpg" />
  491. </div>
  492.  
  493. <div class="post-info cap">
  494. <a href="/">Landscape</a>
  495. </div>
  496.  
  497. <div class="post-numbering lt"></div>
  498.  
  499. <div class="post-data mobile cap">
  500. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Landscape</b>
  501. </div>
  502.  
  503. </article>
  504.  
  505.  
  506. <article class="entry landscape">
  507.  
  508. <div class="photo" style="background-image:url('http://40.media.tumblr.com/tumblr_m2hvz4Vu501qkt9aoo1_500.jpg')">
  509. <img src="http://40.media.tumblr.com/tumblr_m2hvz4Vu501qkt9aoo1_500.jpg" />
  510. </div>
  511.  
  512. <div class="post-info cap">
  513. <a href="/">Human Interest</a>
  514. </div>
  515.  
  516. <div class="post-numbering lt"></div>
  517.  
  518. <div class="post-data mobile cap">
  519. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Human Interest</b>
  520. </div>
  521.  
  522. </article>
  523.  
  524.  
  525. <article class="entry landscape">
  526.  
  527. <div class="photo" style="background-image:url('http://40.media.tumblr.com/b33629b965cbc87e76e8fb5a3e53ca82/tumblr_nakr5l1NHH1sh1x48o1_500.jpg')">
  528. <img src="http://40.media.tumblr.com/b33629b965cbc87e76e8fb5a3e53ca82/tumblr_nakr5l1NHH1sh1x48o1_500.jpg" />
  529. </div>
  530.  
  531. <div class="post-info cap">
  532. <a href="/">Still Life</a>
  533. </div>
  534.  
  535. <div class="post-numbering lt"></div>
  536.  
  537. <div class="post-data mobile cap">
  538. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Still Life</b>
  539. </div>
  540.  
  541. </article>
  542.  
  543.  
  544.  
  545.  
  546.  
  547.  
  548. <article class="entry landscape">
  549.  
  550. <div class="photo" style="background-image:url('http://41.media.tumblr.com/083cb8b9ee20215e7e8e27b6553442aa/tumblr_mzjzkgTvQi1rpdy8wo1_1280.jpg')">
  551. <img src="http://41.media.tumblr.com/083cb8b9ee20215e7e8e27b6553442aa/tumblr_mzjzkgTvQi1rpdy8wo1_1280.jpg" />
  552. </div>
  553.  
  554. <div class="post-info cap">
  555. <a href="/">Illustration</a>
  556. </div>
  557.  
  558. <div class="post-numbering lt"></div>
  559.  
  560. <div class="post-data mobile cap">
  561. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Illustration</b>
  562. </div>
  563.  
  564. </article>
  565.  
  566.  
  567.  
  568. <article class="entry landscape">
  569.  
  570. <div class="photo" style="background-image:url('http://40.media.tumblr.com/9546aa5dfc18aa635b94cd4e055cd18c/tumblr_nwuoat0ix91qkv54go1_1280.jpg')">
  571. <img src="http://40.media.tumblr.com/9546aa5dfc18aa635b94cd4e055cd18c/tumblr_nwuoat0ix91qkv54go1_1280.jpg" />
  572. </div>
  573.  
  574. <div class="post-info cap">
  575. <a href="/">Fashion</a>
  576. </div>
  577.  
  578. <div class="post-numbering lt"></div>
  579.  
  580. <div class="post-data mobile cap">
  581. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Fashion</b>
  582. </div>
  583.  
  584. </article>
  585.  
  586.  
  587. <article class="entry landscape">
  588.  
  589. <div class="photo" style="background-image:url('http://40.media.tumblr.com/3a0673caa76e24ff9bd2ffa86bd54930/tumblr_niu7br3MMK1r62mjto1_540.jpg')">
  590. <img src="http://40.media.tumblr.com/3a0673caa76e24ff9bd2ffa86bd54930/tumblr_niu7br3MMK1r62mjto1_540.jpg" />
  591. </div>
  592.  
  593. <div class="post-info cap">
  594. <a href="/">Typography</a>
  595. </div>
  596.  
  597. <div class="post-numbering lt"></div>
  598.  
  599. <div class="post-data mobile cap">
  600. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Typography</b>
  601. </div>
  602.  
  603. </article>
  604.  
  605.  
  606. <article class="entry landscape">
  607.  
  608. <div class="photo" style="background-image:url('http://36.media.tumblr.com/4c2c5c1ab22aab65ee9d28cbca742b73/tumblr_nexw74oelm1spjf12o1_1280.jpg')">
  609. <img src="http://36.media.tumblr.com/4c2c5c1ab22aab65ee9d28cbca742b73/tumblr_nexw74oelm1spjf12o1_1280.jpg" />
  610. </div>
  611.  
  612. <div class="post-info cap">
  613. <a href="/">Visual Quotes</a>
  614. </div>
  615.  
  616. <div class="post-numbering lt"></div>
  617.  
  618. <div class="post-data mobile cap">
  619. <a href="/" class="fl-circled-search67 icon-s"></a> <b>Visual Quotes</b>
  620. </div>
  621.  
  622. </article>
  623.  
  624.  
  625. </article>
  626. <footer>
  627. <!-- A BACK TO TOP LINK. CHANGE ACCORDINGLY. -->
  628. <i>Grotesk Page by <a href="http://iliyon.tumblr.com/" target="_blank">iliyon</a>.</i>&nbsp; | &nbsp;<a class="more top" href="#">Top of Page</a>&nbsp; | &nbsp;<a href="http://tumblr.com">Dashboard</a>
  629. </footer>
  630.  
  631. </section>
  632.  
  633.  
  634.  
  635. <!-- NO YOU CAN'T TOUCH THIS -->
  636.  
  637. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  638. <script type="text/javascript">
  639. $(document).ready(function(){
  640. $(window).resize();
  641.  
  642. $('a.more.top').click(function(){
  643. $('body,html').animate({scrollTop: 0}, 1000);
  644. return false
  645. });
  646. });
  647.  
  648. $(window).resize(function(){
  649.  
  650. var sw = $(this).width();
  651. var w = $('.entry').width();
  652. var wl = w * .75;
  653. var wp = w * 1.33;
  654.  
  655. if(sw > 1000){
  656. $('body').find('.entry.portrait').each(function(){
  657. $('.entry.portrait').css({"height": wp});
  658. });
  659. $('body').find('.entry.landscape').each(function(){
  660. $('.entry.landscape').css({"height": wl});
  661. });
  662. }else{
  663.  
  664. $('body').find('.entry.portrait, .entry.landscape').each(function(){
  665. $(this).css({"height":"auto"});
  666. })
  667. }
  668. });
  669. </script>
  670. </body>
  671. </html>
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!