API tools faq
paste
pjo06

FT201 backup

pjo06
Feb 7th, 2017
305
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.91 KB | None | 0 0
raw download clone embed print report
  1. <!--MAIN PAGE-->
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4.  
  5. <html>
  6. <head>
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10.  
  11. <meta name="image:icon" content=""/>
  12. <meta name="image:tv" content=""/>
  13.  
  14.  
  15. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  16. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  17. <link rel="stylesheet" href="http://static.tumblr.com/ev0x8sk/Sv9ohgcx6/imoon.css">
  18.  
  19. <!--FONTS-->
  20. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  21. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  22. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  23. <link href="https://fonts.googleapis.com/css?family=Anton|Catamaran" rel="stylesheet">
  24. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  25. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
  26. <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
  27.  
  28.  
  29. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  30.  
  31.  
  32. <!--TOOLTIPS-->
  33. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  34. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  35. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  36. <script>
  37. (function($){
  38. $(document).ready(function(){
  39. $("[title]").style_my_tooltips({
  40. tip_follows_cursor:true,
  41. tip_delay_time:100,
  42. tip_fade_speed:200
  43. });
  44. });
  45. })(jQuery);
  46. </script>
  47.  
  48.  
  49. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  51. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  52.  
  53. <!--Dropdown-->
  54. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  55. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  56.  
  57. <script>
  58. $(document).ready(function(){
  59. $(".menubars").click(function(){
  60. $("#navbar").slideToggle("slow");
  61. });
  62. });
  63. </script>
  64.  
  65. <script>
  66. $(document).ready(function(){
  67. $("#navx").click(function(){
  68. $("#navbar").slideToggle("slow");
  69. });
  70. });
  71. </script>
  72.  
  73. <script>
  74. $(document).ready(function(){
  75. $(".menubars").click(function(){
  76. $(".mainmenu").slideToggle("slow");
  77. });
  78. });
  79. </script>
  80.  
  81.  
  82.  
  83. <style type="text/css">
  84.  
  85.  
  86.  
  87. #s-m-t-tooltip {
  88. max-width:300px;
  89. margin:15px;
  90. padding:4px 8px 4px 8px;
  91. border-radius:2px;
  92. background:{color:accent};
  93. border:1px solid {color:outline};
  94. color:{color:text};
  95. z-index:999999;
  96. font-size:7px;
  97. font-style:none;
  98. font-weight:lighter;
  99. letter-spacing:.6px;
  100. font-family:'montserrat';
  101. text-transform:uppercase;
  102. box-shadow:0px 0px 0px #f2f2f2;
  103. }
  104.  
  105. ::-webkit-scrollbar-thumb:vertical {
  106. background-color:#000;
  107. height:5px;
  108. }
  109.  
  110. ::-webkit-scrollbar-thumb:horizontal {
  111. background-color:#000;
  112. height:5px!important;
  113. }
  114.  
  115. ::-webkit-scrollbar {
  116. background-color:transparent;
  117. height:3px;
  118. width:3px;
  119. }
  120.  
  121.  
  122.  
  123. body {
  124. font-family:'Karla';
  125. font-size:10px;
  126. color:#fff;
  127. background-color:#000;
  128. }
  129.  
  130. #headtitle {
  131. font-family:'Roboto Condensed';
  132. font-size:43px;
  133. color:#dadada;
  134. text-transform:uppercase;
  135. letter-spacing:6px;
  136. position:absolute;
  137. left:35%;
  138. top:75px;
  139. }
  140.  
  141. .images {
  142.  
  143. }
  144.  
  145. #headerimage {
  146. text-align:center;
  147. margin-top:30px;
  148. margin-left:-15px;
  149. }
  150.  
  151. #headerimage img {
  152. margin-top:70px;
  153. user-drag: none;
  154. user-select: none;
  155. -moz-user-select: none;
  156. -webkit-user-drag: none;
  157. -webkit-user-select: none;
  158. -ms-user-select: none;
  159. }
  160.  
  161. .menubars{
  162. font-size:45px;
  163. position:fixed;
  164. left:30px;
  165. opacity:0.4;
  166. cursor:pointer;
  167. -moz-transition-duration: 0.4s;
  168. -o-transition-duration: 0.4s;
  169. -webkit-transition-duration: 0.4s;
  170. transition-duration: 0.4s;
  171. }
  172.  
  173. .menubars:hover {
  174. opacity:0.7;
  175. -moz-transition-duration: 0.4s;
  176. -o-transition-duration: 0.4s;
  177. -webkit-transition-duration: 0.4s;
  178. transition-duration: 0.4s;
  179. }
  180.  
  181. #nametitle {
  182. text-transform:uppercase;
  183. font-family:'Roboto Condensed';
  184. letter-spacing:3px;
  185. display:inline;
  186. position:fixed;
  187. font-size:43px;
  188. right:30px;
  189. margin-top:-2px;
  190. color:#fff;
  191. }
  192.  
  193. #nametitle a{
  194. color:#dadada;
  195. opacity:0.6;
  196. }
  197.  
  198. #nametitle a:hover{
  199. opacity:0.9;
  200. }
  201.  
  202. /*.mainmenu {
  203. background-color:#fff;
  204. width:200px;
  205. height:200px;
  206. margin-top:100px;
  207. left:30px;
  208. font-size:20px;
  209. color:black;
  210. text-transform:uppercase;
  211. }*/
  212.  
  213.  
  214. .menudown {
  215. font-size:45px;
  216. left:49%;
  217. opacity:0.5;
  218. cursor:pointer;
  219. position:absolute;
  220. -moz-transition-duration: 0.4s;
  221. -o-transition-duration: 0.4s;
  222. -webkit-transition-duration: 0.4s;
  223. transition-duration: 0.4s;
  224. }
  225.  
  226.  
  227. .menudown:hover {
  228. padding-top:5px;
  229. -moz-transition-duration: 0.4s;
  230. -o-transition-duration: 0.4s;
  231. -webkit-transition-duration: 0.4s;
  232. transition-duration: 0.4s;
  233. }
  234.  
  235.  
  236. /*BEGIN NAV BAR*/
  237. #navbar {
  238. width:100%;
  239. height:100px;
  240. background-color:#000;
  241. position:fixed;
  242. top:0;
  243. left:0;
  244. border-bottom:1px solid #3d3d3d;
  245. z-index:999998;
  246. /*box-shadow: rgba(0,0,0,.05) 1px 1px 3px;*/
  247. display:none;
  248. }
  249.  
  250. #title {
  251. text-transform:uppercase;
  252. position:absolute;
  253. font-size:20px;
  254. top:40px;
  255. left:100px;
  256. font-family:'Roboto Condensed';
  257. letter-spacing:4px;
  258. }
  259.  
  260. #title a{
  261. }
  262.  
  263. #subtitle {
  264. font-size:12px;
  265. opacity:0.5;
  266. }
  267.  
  268. .nav-p img {
  269. width:60px;
  270. margin:20px 20px 0px 20px;
  271. }
  272.  
  273. /*SIDELINKS*/
  274.  
  275. .sidelinks {
  276. font-family:'lato';
  277. font-size:10px;
  278. text-transform:uppercase;
  279. position:absolute;
  280. font-size:13px;
  281. top:40px;
  282. right:60px;
  283. }
  284.  
  285.  
  286. .sidelinks a{
  287. margin-left:20px;
  288. color:#dadada;
  289. }
  290.  
  291. .sidelinks a:hover {
  292. color:#707070;
  293. }
  294.  
  295. #navx {
  296. font-size:45px;
  297. color:#fff;
  298. position:absolute;
  299. top:110px;
  300. left:30px;
  301. opacity:0.5;
  302. cursor:pointer;
  303. -moz-transition-duration: 0.4s;
  304. -o-transition-duration: 0.4s;
  305. -webkit-transition-duration: 0.4s;
  306. transition-duration: 0.4s;
  307. }
  308.  
  309. #navx:hover {
  310. opacity:0.7;
  311. margin-top:0px;
  312. -moz-transition-duration: 0.4s;
  313. -o-transition-duration: 0.4s;
  314. -webkit-transition-duration: 0.4s;
  315. transition-duration: 0.4s;
  316. }
  317.  
  318. a {
  319. text-decoration:none;
  320. color:#000;
  321. -moz-transition-duration: 0.4s;
  322. -o-transition-duration: 0.4s;
  323. -webkit-transition-duration: 0.4s;
  324. transition-duration: 0.4s;
  325. }
  326.  
  327. a:hover {
  328. -moz-transition-duration: 0.4s;
  329. -o-transition-duration: 0.4s;
  330. -webkit-transition-duration: 0.4s;
  331. transition-duration: 0.4s;
  332.  
  333. }
  334.  
  335. #tumblr_controls,
  336. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls {
  337. position:fixed!important;
  338. top:65px!important;
  339. right:10px!important;
  340. opacity:.5!important;
  341. -webkit-filter:invert(100%);
  342. -webkit-backface-visibility:hidden;
  343. /*padding:65px 10px 10px 10px;*/
  344. -webkit-transition:opacity .3s ease-out;
  345. transition:opacity .3s ease-out;
  346. display:none;
  347. }
  348.  
  349.  
  350.  
  351. #eternalsrc {
  352. font-family:'karla';
  353. font-size:9px;
  354. letter-spacing:1px;
  355. text-transform:uppercase;
  356. opacity:0.5;
  357. position:fixed;
  358. bottom:5px;
  359. right:5px;
  360. }
  361.  
  362.  
  363.  
  364.  
  365.  
  366.  
  367. {CustomCSS}</style>
  368. </head>
  369. <body>
  370.  
  371. <div class="menubars">
  372. <i class="fa fa-bars" aria-hidden="true"></i>
  373. </div>
  374.  
  375. <div id="nametitle">
  376. <a href="/">
  377. Sarah Crenella
  378. </a>
  379. </div>
  380.  
  381.  
  382. <div id="navbar">
  383.  
  384. <span class="nav-p">
  385. <!--<img src="https://68.media.tumblr.com/3bafb70bd5c0664c4dc013d6195c8a5e/tumblr_oks977eNlX1r9s5p2o1_100.png">-->
  386. <img src="{image:icon}">
  387. </span>
  388.  
  389. <div id="title">
  390. sarah crenella
  391. </div>
  392.  
  393.  
  394.  
  395. <div class="sidelinks">
  396.  
  397. <a href="/"></a>
  398. <span style="opacity:0.2;">
  399. home
  400. </span>
  401.  
  402. <a href="/projects">
  403. projects
  404. </a>
  405.  
  406. <a href="/prevwork">
  407. past work
  408. </a>
  409.  
  410. <a href="/about">
  411. about
  412. </a>
  413.  
  414. <a href="/contact">
  415. contact
  416. </a>
  417.  
  418. </div>
  419.  
  420. <div id="navx">
  421. <i class="fa fa-times" aria-hidden="true"></i>
  422. </div>
  423.  
  424.  
  425. </div>
  426.  
  427. <!--END NAVBAR-->
  428.  
  429.  
  430.  
  431.  
  432.  
  433. <!--<div id="headtitle">sarah crenella</div>-->
  434.  
  435.  
  436. <div id="headerimage">
  437. <img src="{image:tv}">
  438. <!--<img src="https://s25.postimg.org/8r5en2l4v/weebly2_tv.png">-->
  439. <img src="https://s25.postimg.org/80cohairj/weebly2_tvscreen.gif" style="position:absolute;z-index:-999;margin-left:-750px;margin-top:170px;">
  440. <!--http://oi66.tinypic.com/24lmo8k.jpg-->
  441. </div>
  442.  
  443. <div id="eternalsrc">
  444. <i class="fa fa-copyright" aria-hidden="true"></i> Sarah Crenella 2017
  445. </div>
  446.  
  447.  
  448.  
  449. </body>
  450. </html>
  451.  
  452.  
  453.  
  454.  
  455.  
  456. <!--PROJECTS -->
  457.  
  458. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  459.  
  460. <html>
  461. <head>
  462. <title>{Title}</title>
  463. <link rel="shortcut icon" href="{Favicon}">
  464. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  465.  
  466. <meta name="viewport" content="width=device-width, initial-scale=1">
  467. <link rel="stylesheet" href="/lib/w3.css">
  468.  
  469. <meta name="image:slide1" content=""/>
  470.  
  471.  
  472. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  473. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  474. <link rel="stylesheet" href="http://static.tumblr.com/ev0x8sk/Sv9ohgcx6/imoon.css">
  475.  
  476. <!--FONTS-->
  477. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  478. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  479. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  480. <link href="https://fonts.googleapis.com/css?family=Anton|Catamaran" rel="stylesheet">
  481. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  482. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
  483. <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
  484.  
  485.  
  486. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  487.  
  488.  
  489. <!--TOOLTIPS-->
  490. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  491. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  492. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  493. <script>
  494. (function($){
  495. $(document).ready(function(){
  496. $("[title]").style_my_tooltips({
  497. tip_follows_cursor:true,
  498. tip_delay_time:100,
  499. tip_fade_speed:200
  500. });
  501. });
  502. })(jQuery);
  503. </script>
  504.  
  505.  
  506. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  507. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  508. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  509.  
  510. <!--Dropdown-->
  511. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  512. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  513.  
  514. <script>
  515. $(document).ready(function(){
  516. $(".menudown").click(function(){
  517. $(".main").slideToggle("slow");
  518. });
  519. });
  520. </script>
  521.  
  522. <script>
  523. $(document).ready(function(){
  524. $(".menuup").click(function(){
  525. $(".main").slideToggle("slow");
  526. });
  527. });
  528. </script>
  529.  
  530.  
  531. <style type="text/css">
  532.  
  533.  
  534.  
  535. #s-m-t-tooltip {
  536. max-width:300px;
  537. margin:15px;
  538. padding:4px 8px 4px 8px;
  539. border-radius:2px;
  540. background:{color:accent};
  541. border:1px solid {color:outline};
  542. color:{color:text};
  543. z-index:999999;
  544. font-size:7px;
  545. font-style:none;
  546. font-weight:lighter;
  547. letter-spacing:.6px;
  548. font-family:'montserrat';
  549. text-transform:uppercase;
  550. box-shadow:0px 0px 0px #f2f2f2;
  551. }
  552.  
  553. ::-webkit-scrollbar-thumb:vertical {
  554. background-color:#000;
  555. height:5px;
  556. }
  557.  
  558. ::-webkit-scrollbar-thumb:horizontal {
  559. background-color:#000;
  560. height:5px!important;
  561. }
  562.  
  563. ::-webkit-scrollbar {
  564. background-color:transparent;
  565. height:3px;
  566. width:3px;
  567. }
  568.  
  569.  
  570.  
  571. body {
  572. font-family:'Karla';
  573. font-size:10px;
  574. color:#fff;
  575. background-color:#000;
  576. }
  577.  
  578.  
  579. a {
  580. text-decoration:none;
  581. color:#000;
  582. }
  583.  
  584. a:hover {
  585.  
  586. }
  587.  
  588. #tumblr_controls,
  589. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls {
  590. position:fixed!important;
  591. top:65px!important;
  592. right:10px!important;
  593. opacity:.5!important;
  594. -webkit-filter:invert(100%);
  595. -webkit-backface-visibility:hidden;
  596. /*padding:65px 10px 10px 10px;*/
  597. -webkit-transition:opacity .3s ease-out;
  598. transition:opacity .3s ease-out;
  599. display:none;
  600. }
  601.  
  602. #eternalsrc {
  603. font-family:'karla';
  604. font-size:9px;
  605. letter-spacing:1px;
  606. text-transform:uppercase;
  607. opacity:0.5;
  608. position:fixed;
  609. bottom:5px;
  610. right:5px;
  611. }
  612.  
  613.  
  614. /*BEGIN NAV BAR*/
  615. #navbar {
  616. width:100%;
  617. height:100px;
  618. background-color:#000;
  619. position:fixed;
  620. top:0;
  621. left:0;
  622. border-bottom:0px solid #eeeeee;
  623. z-index:999998;
  624. /*box-shadow: rgba(0,0,0,.05) 1px 1px 3px;*/
  625. }
  626.  
  627. #navbar::after{
  628. content: "";
  629. background:url("https://68.media.tumblr.com/695490663cd86ba0361a5cc43f9b3a63/tumblr_omqdgvTTRj1r9s5p2o1_1280.gif");
  630. /*https://s25.postimg.org/e546umav3/weebly3_header1.gif*/
  631. opacity: 0.3;
  632. top: 0;
  633. left: 0;
  634. bottom: 0;
  635. right: 0;
  636. position: absolute;
  637. z-index: -1;
  638. -webkit-background-size: cover;
  639. -moz-background-size: cover;
  640. -o-background-size: cover;
  641. background-size: cover;
  642. }
  643.  
  644. #title {
  645. text-transform:uppercase;
  646. position:absolute;
  647. font-size:17px;
  648. top:40px;
  649. left:100px;
  650. letter-spacing:3px;
  651. font-family:'Roboto Condensed';
  652. }
  653.  
  654. #title a{
  655. }
  656.  
  657. #subtitle {
  658. font-size:12px;
  659. opacity:0.5;
  660. }
  661.  
  662. .nav-p img {
  663. width:60px;
  664. margin:20px 20px 0px 20px;
  665. }
  666.  
  667. /*SIDELINKS*/
  668.  
  669. .sidelinks {
  670. font-family:'lato';
  671. font-size:10px;
  672. text-transform:uppercase;
  673. position:absolute;
  674. font-size:13px;
  675. top:40px;
  676. right:60px;
  677. }
  678.  
  679.  
  680. .sidelinks a{
  681. margin-left:20px;
  682. color:#dadada;
  683. }
  684.  
  685. .sidelinks a:hover {
  686. color:#707070;
  687. }
  688.  
  689.  
  690.  
  691. a {
  692. text-decoration:none;
  693. color:#252525;
  694. -moz-transition-duration: 0.3s;
  695. -o-transition-duration: 0.3s;
  696. -webkit-transition-duration: 0.3s;
  697. transition-duration: 0.3s;
  698. }
  699.  
  700. a:hover {
  701. color:#eeeeee;
  702. -moz-transition-duration: 0.3s;
  703. -o-transition-duration: 0.3s;
  704. -webkit-transition-duration: 0.3s;
  705. transition-duration: 0.3s;
  706. }
  707.  
  708.  
  709. .main {
  710. margin-top:170px;
  711. left:25%;
  712. }
  713.  
  714. .title {
  715. text-transform:uppercase;
  716. font-size:40px;
  717. font-family:'Roboto Condensed';
  718. text-align:center;
  719. color:#dadada;
  720. }
  721.  
  722. #mainbody {
  723. padding:10px 50px 70px 50px;
  724. font-size:16px;
  725. font-family:'Lato';
  726. }
  727.  
  728. #contents {
  729. text-align:center;
  730. text-transform:uppercase;
  731. font-size:14px;
  732. margin-top:20px;
  733. }
  734.  
  735.  
  736. .mySlides {display:none}
  737. .demo {cursor:pointer}
  738.  
  739. .w3-row-padding{
  740.  
  741. }
  742.  
  743. .w3-row-padding img{
  744. max-width:140px;
  745. display:inline-block;
  746. margin:2px;
  747. }
  748.  
  749. .w3-col img{
  750. }
  751.  
  752. .mainframe{
  753. }
  754.  
  755. #what {
  756. position:absolute;
  757. font-size:16px;
  758. color:white;
  759. opacity:0.7;
  760. margin:5px 0px 0px 10px;
  761. background-color:black;
  762. padding:3px;
  763. }
  764. .w3-col {
  765.  
  766. }
  767.  
  768.  
  769.  
  770. {CustomCSS}</style>
  771. </head>
  772. <body>
  773.  
  774.  
  775. <div id="navbar">
  776.  
  777. <span class="nav-p">
  778. <img src="https://secure.static.tumblr.com/f70e8e6ab335949bf5fe6c3bd16b3133/da5nwny/F3Uoktpb6/tumblr_static_exw2iqjnhcg8s0gggw00sck4o.png">
  779. </span>
  780.  
  781. <div id="title">
  782. sarah crenella
  783. </div>
  784.  
  785.  
  786.  
  787. <div class="sidelinks">
  788.  
  789. <a href="/">
  790. home
  791. </a>
  792.  
  793. <a href="/projects"></a>
  794. <span style="opacity:0.2;">
  795. projects
  796. </span>
  797.  
  798. <a href="/prevwork">
  799. past work
  800. </a>
  801.  
  802. <a href="/about">
  803. about
  804. </a>
  805.  
  806. <a href="/contact">
  807. contact
  808. </a>
  809.  
  810. </div>
  811.  
  812.  
  813. </div>
  814.  
  815. <!--END NAVBAR-->
  816.  
  817.  
  818.  
  819. <div class="main">
  820. <div class="title" id="portraits">projects</div>
  821. <div class="title" style="font-size:22px; font-style:italic;display:none;">for ft201</div>
  822. <div id="mainbody">
  823.  
  824.  
  825.  
  826. <div id="contents">
  827. <a href="#montage" style="color:#dadada;"><i class="fa fa-camera-retro" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Photo Montage</a>
  828. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  829. <a href="#portraits" style="color:#dadada;"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Photo Portrait</a>
  830. </div>
  831.  
  832.  
  833. <div style="width:100%; height:2px; background-color:#cecece;margin:30px 0px 10px 0px;opacity:0.2;"></div>
  834.  
  835.  
  836.  
  837.  
  838. <table style="width:100%;margin-top:40px;color:#cecece">
  839.  
  840. <tr>
  841.  
  842. <td style="float:left;padding-right:50px;width:630px;">
  843. <div class="w3-content" style="max-width:630px">
  844.  
  845. <div class="mainframe">
  846. <img class="mySlides" src="https://68.media.tumblr.com/21db2475b3eb4ca655951d138f12b371/tumblr_omqaziGbqV1r9s5p2o5_1280.jpg" style="width:100%">
  847. <img class="mySlides" src="https://68.media.tumblr.com/4f99e8be048c264bd037932e2a91d692/tumblr_omqaziGbqV1r9s5p2o3_1280.jpg" style="width:100%">
  848. <img class="mySlides" src="https://68.media.tumblr.com/06b79e552c9c5e78785930f7fe91a0df/tumblr_omqaziGbqV1r9s5p2o4_1280.jpg" style="width:100%">
  849. <img class="mySlides" src="https://68.media.tumblr.com/fdffd5a818c4bc457e3e8b41ce83e7ff/tumblr_omqaziGbqV1r9s5p2o6_1280.jpg" style="width:100%">
  850. <img class="mySlides" src="https://68.media.tumblr.com/badea3595058f992b808b9f51d0fa3d1/tumblr_omqaziGbqV1r9s5p2o1_1280.jpg" style="width:100%">
  851. <img class="mySlides" src="https://68.media.tumblr.com/3f79ee3cdc02409ee93b4525be58b29c/tumblr_omqaziGbqV1r9s5p2o2_1280.jpg" style="width:100%">
  852. </div>
  853.  
  854. </div>
  855.  
  856.  
  857. <!--<div class="w3-row-padding">
  858. <span class="w3-col s4">
  859. <img class="demo w3-opacity w3-hover-opacity-off" src="http://68.media.tumblr.com/2dc0f9d2c7fd116962839af9375d9036/tumblr_nxk78q1F1G1qe0nolo2_1280.jpg" style="width:100%" onclick="currentDiv(1)">
  860. </span>
  861. <span class="w3-col s4">
  862. <img class="demo w3-opacity w3-hover-opacity-off" src="http://68.media.tumblr.com/89da5db1433e42243f27dc62a6f982c7/tumblr_nxk78q1F1G1qe0nolo1_1280.jpg" style="width:100%" onclick="currentDiv(2)">
  863. </span>
  864. <span class="w3-col s4">
  865. <img class="demo w3-opacity w3-hover-opacity-off" src="http://68.media.tumblr.com/19a4d77bd7d7459840b5932a6119f809/tumblr_nxk78q1F1G1qe0nolo4_1280.jpg" style="width:100%" onclick="currentDiv(3)">
  866. </span>
  867.  
  868. <span class="w3-col s4">
  869. <img class="demo w3-opacity w3-hover-opacity-off" src="http://68.media.tumblr.com/2dc0f9d2c7fd116962839af9375d9036/tumblr_nxk78q1F1G1qe0nolo2_1280.jpg" style="width:100%" onclick="currentDiv(4)">
  870. </span>
  871. <span class="w3-col s4">
  872. <img class="demo w3-opacity w3-hover-opacity-off" src="https://s25.postimg.org/xeayj137j/IMG_0071_edit.jpg" style="width:100%" onclick="currentDiv(5)">
  873. </span>
  874. <span class="w3-col s4">
  875. <img class="demo w3-opacity w3-hover-opacity-off" src="http://68.media.tumblr.com/19a4d77bd7d7459840b5932a6119f809/tumblr_nxk78q1F1G1qe0nolo4_1280.jpg" style="width:100%" onclick="currentDiv(6)">
  876. </span>
  877. </div>
  878.  
  879.  
  880.  
  881. <script>
  882. var slideIndex = 1;
  883. showDivs(slideIndex);
  884.  
  885. function plusDivs(n) {
  886. showDivs(slideIndex += n);
  887. }
  888.  
  889. function currentDiv(n) {
  890. showDivs(slideIndex = n);
  891. }
  892.  
  893. function showDivs(n) {
  894. var i;
  895. var x = document.getElementsByClassName("mySlides");
  896. var dots = document.getElementsByClassName("demo");
  897. if (n > x.length) {slideIndex = 1}
  898. if (n < 1) {slideIndex = x.length}
  899. for (i = 0; i < x.length; i++) {
  900. x[i].style.display = "none";
  901. }
  902. for (i = 0; i < dots.length; i++) {
  903. dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  904. }
  905. x[slideIndex-1].style.display = "block";
  906. dots[slideIndex-1].className += " w3-opacity-off";
  907. }
  908. </script>-->
  909.  
  910.  
  911.  
  912.  
  913. </td>
  914.  
  915. <td style="">
  916.  
  917. <div class="title" style="font-size:30px;text-align:left;">Photo Portrait: Jailyn Duong</div>
  918. Take six portraits that demonstrate: opposite colors, unnatural lighting, cool/warm color palette, edge of the frame, dimensionality, and detail.
  919.  
  920.  
  921.  
  922. <div class="w3-row-padding" style="margin-top:20px;">
  923. <span class="w3-col s4">
  924. <!--<div id="what">opposite</div>-->
  925. <img class="demo w3-opacity w3-hover-opacity-off" src="https://68.media.tumblr.com/fab956819e42e71ba66bd40f20e99f3a/tumblr_omzc8weNs41r9s5p2o2_1280.jpg" style="width:100%;opacity:1;" onclick="currentDiv(1)">
  926. </span>
  927. <span class="w3-col s4">
  928. <img class="demo w3-opacity w3-hover-opacity-off" src="https://68.media.tumblr.com/31854bd863939e853ea3e25d7f47256d/tumblr_omzc8weNs41r9s5p2o4_1280.jpg" style="width:100%" onclick="currentDiv(2)">
  929. </span>
  930. <span class="w3-col s4">
  931. <img class="demo w3-opacity w3-hover-opacity-off" src="https://68.media.tumblr.com/01eaa40da339b63a732a7f0353bb6be9/tumblr_omzc8weNs41r9s5p2o5_1280.jpg" style="width:100%" onclick="currentDiv(3)">
  932. </span>
  933. <br>
  934. <span class="w3-col s4">
  935. <img class="demo w3-opacity w3-hover-opacity-off" src="https://68.media.tumblr.com/af53b0b313cfe32df23d17d1fa2bf5a0/tumblr_omzc8weNs41r9s5p2o1_1280.jpg" style="width:100%" onclick="currentDiv(4)">
  936. </span>
  937. <span class="w3-col s4">
  938. <img class="demo w3-opacity w3-hover-opacity-off" src="https://68.media.tumblr.com/e05635b5ca8e8f64d513dc85c98f2b34/tumblr_omzc8weNs41r9s5p2o3_1280.jpg" style="width:100%" onclick="currentDiv(5)">
  939. </span>
  940. <span class="w3-col s4">
  941. <img class="demo w3-opacity w3-hover-opacity-off" src="https://68.media.tumblr.com/b75cfaed5326a0b908cb436066e74028/tumblr_omzc8weNs41r9s5p2o6_1280.jpg" style="width:100%" onclick="currentDiv(6)">
  942. </span>
  943. </div>
  944.  
  945.  
  946.  
  947. <script>
  948. var slideIndex = 1;
  949. showDivs(slideIndex);
  950.  
  951. function plusDivs(n) {
  952. showDivs(slideIndex += n);
  953. }
  954.  
  955. function currentDiv(n) {
  956. showDivs(slideIndex = n);
  957. }
  958.  
  959. function showDivs(n) {
  960. var i;
  961. var x = document.getElementsByClassName("mySlides");
  962. var dots = document.getElementsByClassName("demo");
  963. if (n > x.length) {slideIndex = 1}
  964. if (n < 1) {slideIndex = x.length}
  965. for (i = 0; i < x.length; i++) {
  966. x[i].style.display = "none";
  967. }
  968. for (i = 0; i < dots.length; i++) {
  969. dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  970. }
  971. x[slideIndex-1].style.display = "block";
  972. dots[slideIndex-1].className += " w3-opacity-off";
  973. }
  974. </script>
  975.  
  976. </td>
  977.  
  978. </tr>
  979.  
  980.  
  981. </table>
  982.  
  983.  
  984. <div style="width:100%; height:2px; background-color:#cecece;margin:50px 0px 10px 0px;opacity:0.2;" id="montage"></div>
  985.  
  986.  
  987.  
  988. <table style="width:100%;margin-top:40px;color:#cecece">
  989.  
  990. <tr>
  991.  
  992. <td style="text-align:right;padding-right:70px;">
  993. <div class="title" style="font-size:30px;text-align:right;">Photo Montage: Post Card from the City</div>
  994. Select an unfamiliar small outdoor area within Greater Boston. Create a photo montage based on this location. Capture the distinctive character of the place.Reveal the place gradually, using the progression of images to create rhythm, tension and momentum.
  995. </td>
  996.  
  997. <td style="">
  998. <iframe width="500" height="282" src="https://www.youtube.com/embed/iInUA9l5l_0?ecver=2" frameborder="0" allowfullscreen style=""></iframe>
  999. </td>
  1000.  
  1001. </tr>
  1002. </table>
  1003.  
  1004.  
  1005.  
  1006. </div>
  1007. </div>
  1008.  
  1009.  
  1010.  
  1011. <div id="eternalsrc">
  1012. <i class="fa fa-copyright" aria-hidden="true"></i> Sarah Crenella 2017
  1013. </div>
  1014.  
  1015.  
  1016.  
  1017. </body>
  1018. </html>
  1019.  
  1020.  
  1021.  
  1022.  
  1023. <!--PREV WORKS -->
  1024.  
  1025. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  1026.  
  1027. <html>
  1028. <head>
  1029. <title>{Title}</title>
  1030. <link rel="shortcut icon" href="{Favicon}">
  1031. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  1032.  
  1033.  
  1034. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  1035. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  1036. <link rel="stylesheet" href="http://static.tumblr.com/ev0x8sk/Sv9ohgcx6/imoon.css">
  1037.  
  1038. <!--FONTS-->
  1039. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  1040. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  1041. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  1042. <link href="https://fonts.googleapis.com/css?family=Anton|Catamaran" rel="stylesheet">
  1043. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  1044. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
  1045. <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
  1046.  
  1047.  
  1048. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  1049.  
  1050.  
  1051. <!--TOOLTIPS-->
  1052. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  1053. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1054. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  1055. <script>
  1056. (function($){
  1057. $(document).ready(function(){
  1058. $("[title]").style_my_tooltips({
  1059. tip_follows_cursor:true,
  1060. tip_delay_time:100,
  1061. tip_fade_speed:200
  1062. });
  1063. });
  1064. })(jQuery);
  1065. </script>
  1066.  
  1067.  
  1068. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1069. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1070. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1071.  
  1072. <!--Dropdown-->
  1073. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  1074. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  1075.  
  1076. <script>
  1077. $(document).ready(function(){
  1078. $(".menudown").click(function(){
  1079. $(".main").slideToggle("slow");
  1080. });
  1081. });
  1082. </script>
  1083.  
  1084. <script>
  1085. $(document).ready(function(){
  1086. $(".menuup").click(function(){
  1087. $(".main").slideToggle("slow");
  1088. });
  1089. });
  1090. </script>
  1091.  
  1092.  
  1093.  
  1094.  
  1095. <style type="text/css">
  1096.  
  1097.  
  1098.  
  1099. #s-m-t-tooltip {
  1100. max-width:300px;
  1101. margin:15px;
  1102. padding:4px 8px 4px 8px;
  1103. border-radius:2px;
  1104. background:{color:accent};
  1105. border:1px solid {color:outline};
  1106. color:{color:text};
  1107. z-index:999999;
  1108. font-size:7px;
  1109. font-style:none;
  1110. font-weight:lighter;
  1111. letter-spacing:.6px;
  1112. font-family:'montserrat';
  1113. text-transform:uppercase;
  1114. box-shadow:0px 0px 0px #f2f2f2;
  1115. }
  1116.  
  1117. ::-webkit-scrollbar-thumb:vertical {
  1118. background-color:#000;
  1119. height:5px;
  1120. }
  1121.  
  1122. ::-webkit-scrollbar-thumb:horizontal {
  1123. background-color:#000;
  1124. height:5px!important;
  1125. }
  1126.  
  1127. ::-webkit-scrollbar {
  1128. background-color:transparent;
  1129. height:3px;
  1130. width:3px;
  1131. }
  1132.  
  1133.  
  1134.  
  1135. body {
  1136. font-family:'Karla';
  1137. font-size:10px;
  1138. color:#fff;
  1139. background-color:#000;
  1140. }
  1141.  
  1142.  
  1143. a {
  1144. text-decoration:none;
  1145. color:#000;
  1146. }
  1147.  
  1148. a:hover {
  1149.  
  1150. }
  1151.  
  1152. #tumblr_controls,
  1153. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls {
  1154. position:fixed!important;
  1155. top:65px!important;
  1156. right:10px!important;
  1157. opacity:.5!important;
  1158. -webkit-filter:invert(100%);
  1159. -webkit-backface-visibility:hidden;
  1160. /*padding:65px 10px 10px 10px;*/
  1161. -webkit-transition:opacity .3s ease-out;
  1162. transition:opacity .3s ease-out;
  1163. display:none;
  1164. }
  1165.  
  1166. #eternalsrc {
  1167. font-family:'karla';
  1168. font-size:9px;
  1169. letter-spacing:1px;
  1170. text-transform:uppercase;
  1171. opacity:0.5;
  1172. position:fixed;
  1173. bottom:5px;
  1174. right:5px;
  1175. }
  1176.  
  1177.  
  1178. /*BEGIN NAV BAR*/
  1179. #navbar {
  1180. width:100%;
  1181. height:100px;
  1182. background-color:#000;
  1183. position:fixed;
  1184. top:0;
  1185. left:0;
  1186. border-bottom:0px solid #eeeeee;
  1187. z-index:999998;
  1188. /*box-shadow: rgba(0,0,0,.05) 1px 1px 3px;*/
  1189. }
  1190.  
  1191. #navbar::after{
  1192. content: "";
  1193. background:url("https://s25.postimg.org/e546umav3/weebly3_header1.gif");
  1194. opacity: 0.3;
  1195. top: 0;
  1196. left: 0;
  1197. bottom: 0;
  1198. right: 0;
  1199. position: absolute;
  1200. z-index: -1;
  1201. -webkit-background-size: cover;
  1202. -moz-background-size: cover;
  1203. -o-background-size: cover;
  1204. background-size: cover;
  1205. }
  1206.  
  1207. #title {
  1208. text-transform:uppercase;
  1209. position:absolute;
  1210. font-size:17px;
  1211. top:40px;
  1212. left:100px;
  1213. letter-spacing:3px;
  1214. font-family:'Roboto Condensed';
  1215. }
  1216.  
  1217. #title a{
  1218. }
  1219.  
  1220. #subtitle {
  1221. font-size:12px;
  1222. opacity:0.5;
  1223. }
  1224.  
  1225. .nav-p img {
  1226. width:60px;
  1227. margin:20px 20px 0px 20px;
  1228. }
  1229.  
  1230. /*SIDELINKS*/
  1231.  
  1232. .sidelinks {
  1233. font-family:'lato';
  1234. font-size:10px;
  1235. text-transform:uppercase;
  1236. position:absolute;
  1237. font-size:13px;
  1238. top:40px;
  1239. right:57px;
  1240. }
  1241.  
  1242.  
  1243. .sidelinks a{
  1244. margin-left:20px;
  1245. color:#dadada;
  1246. }
  1247.  
  1248. .sidelinks a:hover {
  1249. color:#707070;
  1250. }
  1251.  
  1252.  
  1253.  
  1254. a {
  1255. text-decoration:none;
  1256. color:#252525;
  1257. -moz-transition-duration: 0.3s;
  1258. -o-transition-duration: 0.3s;
  1259. -webkit-transition-duration: 0.3s;
  1260. transition-duration: 0.3s;
  1261. }
  1262.  
  1263. a:hover {
  1264. color:#eeeeee;
  1265. -moz-transition-duration: 0.3s;
  1266. -o-transition-duration: 0.3s;
  1267. -webkit-transition-duration: 0.3s;
  1268. transition-duration: 0.3s;
  1269. }
  1270.  
  1271.  
  1272. .main {
  1273. margin-top:170px;
  1274. left:25%;
  1275. }
  1276.  
  1277. .title {
  1278. text-transform:uppercase;
  1279. font-size:40px;
  1280. font-family:'Roboto Condensed';
  1281. text-align:center;
  1282. color:#dadada;
  1283. }
  1284.  
  1285. #mainbody {
  1286. padding:10px 50px 70px 50px;
  1287. text-align:center;
  1288. font-size:16px;
  1289. font-family:'Lato';
  1290. }
  1291.  
  1292. #contents {
  1293. text-align:center;
  1294. display:inline;
  1295. text-transform:uppercase;
  1296. font-size:14px;
  1297. }
  1298.  
  1299. #unit1 {
  1300. margin-top:40px;
  1301. }
  1302.  
  1303. #unitbody2 {
  1304. float:left;
  1305. }
  1306.  
  1307. #web1 {
  1308. width:300px;
  1309. height:200px;
  1310. background-image: url("http://68.media.tumblr.com/0e73ae6b71c680bd864569e56fc19805/tumblr_ojaevmxtlu1r9s5p2o1_r1_500.png");
  1311. background-size:cover;
  1312. background-position: 50% 50%;
  1313. }
  1314.  
  1315. #web2 {
  1316. width:300px;
  1317. height:200px;
  1318. background-image: url("http://68.media.tumblr.com/541d6fd6d7fb7bba4448f35de6dbb8b4/tumblr_oghvz0sWdJ1r9s5p2o1_1280.png");
  1319. background-size:cover;
  1320. background-position: 50% 50%;
  1321. }
  1322.  
  1323. #web3 {
  1324. width:300px;
  1325. height:200px;
  1326. background-image: url("http://68.media.tumblr.com/b8cff2b347621b17e715872bbb20fb21/tumblr_of1u5qHBBl1r9s5p2o1_500.png");
  1327. background-size:cover;
  1328. background-position: 50% 50%;
  1329. }
  1330.  
  1331. #web4 {
  1332. width:300px;
  1333. height:200px;
  1334. background-image: url("http://68.media.tumblr.com/100b2043b5075a74a790189ad030029e/tumblr_o91lazfdZH1r9s5p2o3_1280.png");
  1335. background-size:cover;
  1336. background-position: 50% 50%;
  1337. }
  1338.  
  1339. #web5 {
  1340. width:300px;
  1341. height:200px;
  1342. background-image: url("http://68.media.tumblr.com/da5a87c50399f1510d8f997dd0a268f2/tumblr_o47cspe3lY1r9s5p2o1_r2_500.png");
  1343. background-size:cover;
  1344. background-position: 50% 50%;
  1345. }
  1346.  
  1347. #web6 {
  1348. width:300px;
  1349. height:200px;
  1350. background-image: url("http://68.media.tumblr.com/05b6cddc1d2fd7c904d3e8caba3ac25d/tumblr_o7rgx6ryl21r9s5p2o3_r1_1280.png");
  1351. background-size:cover;
  1352. background-position: 50% 50%;
  1353. }
  1354.  
  1355. /*{CustomCSS}*/</style>
  1356. </head>
  1357. <body>
  1358.  
  1359.  
  1360. <div id="navbar">
  1361.  
  1362. <span class="nav-p">
  1363. <img src="https://secure.static.tumblr.com/f70e8e6ab335949bf5fe6c3bd16b3133/da5nwny/F3Uoktpb6/tumblr_static_exw2iqjnhcg8s0gggw00sck4o.png">
  1364. </span>
  1365.  
  1366. <div id="title">
  1367. sarah crenella
  1368. </div>
  1369.  
  1370.  
  1371.  
  1372. <div class="sidelinks">
  1373.  
  1374. <a href="/">
  1375. home
  1376. </a>
  1377.  
  1378. <a href="/projects">
  1379. projects
  1380. </a>
  1381.  
  1382. <a href="/prevwork"></a>
  1383. <span style="opacity:0.2;">
  1384. past work
  1385. </span>
  1386.  
  1387. <a href="/about">
  1388. about
  1389. </a>
  1390.  
  1391. <a href="/contact">
  1392. contact
  1393. </a>
  1394.  
  1395. </div>
  1396.  
  1397.  
  1398. </div>
  1399.  
  1400. <!--END NAVBAR-->
  1401.  
  1402.  
  1403.  
  1404. <div class="main">
  1405. <div id="filmography" class="title" style="margin-bottom:20px;">past work</div>
  1406. <div id="mainbody">
  1407. <!--CONTENT HERE-->
  1408.  
  1409. <div id="contents">
  1410. <!--<span class="title" style="font-size:20px;text-align:left;font-style:italic;margin-bottom:5px;margin-right:30px;">contents</span>-->
  1411. <a href="#filmography" style="color:#dadada;"><i class="fa fa-video-camera" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filmography</a>
  1412. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1413. <a href="#webdesign" style="color:#dadada;"><i class="fa fa-mouse-pointer" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;web design</a>
  1414. </div>
  1415.  
  1416. <!--FILMOGRAPHY-->
  1417. <div style="width:100%; height:2px; background-color:#cecece;margin:30px 0px 10px 0px;opacity:0.2;"></div>
  1418.  
  1419. <table style="width:100%;margin-top:30px;color:#cecece">
  1420. <tr>
  1421. <div class="title" style="font-size:34px;margin-top:40px;">filmography</div>
  1422. </tr>
  1423. <tr>
  1424. <td>
  1425. <iframe width="500" height="282" src="https://www.youtube.com/embed/TfUd-ft8PZI" frameborder="0" allowfullscreen style="float:left;padding-right:50px;"></iframe>
  1426. </td>
  1427. <td style="text-align:left;">
  1428. <div class="title" style="font-size:30px;text-align:left;">short film</div>
  1429. director.&nbsp;&nbsp;&nbsp;co-producer.&nbsp;&nbsp;&nbsp;co-editor.
  1430. <p></p>
  1431. Class ranks are everything in this high school. The pressure to be the best is everything. When Quinn finds out she is number three in her class, just how far is she willing to take it.
  1432. <br><br>
  1433. <span style="font-style:italic;">Winner of the HKTV 2016 Film Festival</span>
  1434. </td>
  1435. </tr>
  1436. <tr></tr>
  1437.  
  1438. <tr>
  1439. <td style="text-align:right;padding-right:70px;">
  1440. <div class="title" style="font-size:30px;text-align:right;">Documentary</div>
  1441. co-producer.&nbsp;&nbsp;&nbsp;co-director.&nbsp;&nbsp;&nbsp;co-editor.
  1442. <p></p>
  1443. A documentary on the socio-economic impact of the Durham fair on the local community.
  1444. </td>
  1445. <td>
  1446. <iframe width="500" height="282" src="https://www.youtube.com/embed/s4EkZWbxpFk" frameborder="0" allowfullscreen></iframe>
  1447. </td>
  1448. </tr>
  1449.  
  1450. <tr>
  1451. <td>
  1452. <iframe width="500" height="282" src="https://www.youtube.com/embed/N3bW68jL0MA" frameborder="0" allowfullscreen style="float:left;padding-right:50px;"></iframe>
  1453. </td>
  1454. <td style="text-align:left;">
  1455. <div class="title" style="font-size:30px;text-align:left;">short film</div>
  1456. writer.&nbsp;&nbsp;&nbsp;co-producer.
  1457. <p id="webdesign"></p>
  1458. STN competition short. Prompt: Late Bloomer.
  1459. </td>
  1460. </tr>
  1461. </table>
  1462.  
  1463. <!--WEB DESIGN-->
  1464.  
  1465. <div style="width:100%; height:2px; background-color:#cecece;margin:70px 0px 10px 0px;opacity:0.2;text-align:center"></div>
  1466.  
  1467. <table id="table1" style="width:85%;margin-top:30px;margin-left:9%;color:#cecece;">
  1468. <tr><div class="title" style="font-size:34px;margin-top:40px;margin-bottom:10px;">web design</div></tr>
  1469. <tr>I like to design websites with HTML and CSS in my free time. Here are a few examples of my designs. Click each image for a static preview!</tr>
  1470.  
  1471. <tr>
  1472. <td><a href="http://lauraholliis.tumblr.com/th19"><div id="web1"></div></a></td>
  1473. <td><a href="http://lauraholliis.tumblr.com/th18v2"><div id="web2"></div></a></td>
  1474. <td><a href="http://lauraholliis.tumblr.com/th18"><div id="web3"></div></a></td>
  1475. </tr>
  1476.  
  1477. <!--<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>-->
  1478.  
  1479. <tr height="250">
  1480. <td><a href="http://lauraholliis.tumblr.com/th15two"><div id="web4"></div></a></td>
  1481. <td><a href="http://lauraholliis.tumblr.com/th11"><div id="web5"></div></a></td>
  1482. <td><a href="http://lauraholliis.tumblr.com/th14two"><div id="web6"></div></a></td>
  1483. </tr>
  1484. </table>
  1485.  
  1486.  
  1487.  
  1488. </div>
  1489. </div>
  1490.  
  1491.  
  1492.  
  1493. <div id="eternalsrc">
  1494. <i class="fa fa-copyright" aria-hidden="true"></i> Sarah Crenella 2017
  1495. </div>
  1496.  
  1497.  
  1498.  
  1499. </body>
  1500. </html>
  1501.  
  1502.  
  1503.  
  1504.  
  1505. <!--ABOUT-->
  1506.  
  1507. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  1508.  
  1509. <html>
  1510. <head>
  1511. <title>{Title}</title>
  1512. <link rel="shortcut icon" href="{Favicon}">
  1513. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  1514.  
  1515.  
  1516. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  1517. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  1518. <link rel="stylesheet" href="http://static.tumblr.com/ev0x8sk/Sv9ohgcx6/imoon.css">
  1519.  
  1520. <!--FONTS-->
  1521. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  1522. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  1523. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  1524. <link href="https://fonts.googleapis.com/css?family=Anton|Catamaran" rel="stylesheet">
  1525. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  1526. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
  1527. <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
  1528.  
  1529.  
  1530. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  1531.  
  1532.  
  1533. <!--TOOLTIPS-->
  1534. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  1535. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1536. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  1537. <script>
  1538. (function($){
  1539. $(document).ready(function(){
  1540. $("[title]").style_my_tooltips({
  1541. tip_follows_cursor:true,
  1542. tip_delay_time:100,
  1543. tip_fade_speed:200
  1544. });
  1545. });
  1546. })(jQuery);
  1547. </script>
  1548.  
  1549.  
  1550. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1551. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1552. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1553.  
  1554. <!--Dropdown-->
  1555. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  1556. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  1557.  
  1558. <script>
  1559. $(document).ready(function(){
  1560. $(".menudown").click(function(){
  1561. $(".main").slideToggle("slow");
  1562. });
  1563. });
  1564. </script>
  1565.  
  1566. <script>
  1567. $(document).ready(function(){
  1568. $(".menuup").click(function(){
  1569. $(".main").slideToggle("slow");
  1570. });
  1571. });
  1572. </script>
  1573.  
  1574.  
  1575. <style type="text/css">
  1576.  
  1577.  
  1578.  
  1579. #s-m-t-tooltip {
  1580. max-width:300px;
  1581. margin:15px;
  1582. padding:4px 8px 4px 8px;
  1583. border-radius:2px;
  1584. background:{color:accent};
  1585. border:1px solid {color:outline};
  1586. color:{color:text};
  1587. z-index:999999;
  1588. font-size:7px;
  1589. font-style:none;
  1590. font-weight:lighter;
  1591. letter-spacing:.6px;
  1592. font-family:'montserrat';
  1593. text-transform:uppercase;
  1594. box-shadow:0px 0px 0px #f2f2f2;
  1595. }
  1596.  
  1597. ::-webkit-scrollbar-thumb:vertical {
  1598. background-color:#000;
  1599. height:5px;
  1600. }
  1601.  
  1602. ::-webkit-scrollbar-thumb:horizontal {
  1603. background-color:#000;
  1604. height:5px!important;
  1605. }
  1606.  
  1607. ::-webkit-scrollbar {
  1608. background-color:transparent;
  1609. height:3px;
  1610. width:3px;
  1611. }
  1612.  
  1613.  
  1614.  
  1615. body {
  1616. font-family:'Karla';
  1617. font-size:10px;
  1618. color:#fff;
  1619. background-color:#000;
  1620. }
  1621.  
  1622.  
  1623. a {
  1624. text-decoration:none;
  1625. color:#000;
  1626. }
  1627.  
  1628. a:hover {
  1629.  
  1630. }
  1631.  
  1632. #tumblr_controls,
  1633. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls {
  1634. position:fixed!important;
  1635. top:65px!important;
  1636. right:10px!important;
  1637. opacity:.5!important;
  1638. -webkit-filter:invert(100%);
  1639. -webkit-backface-visibility:hidden;
  1640. /*padding:65px 10px 10px 10px;*/
  1641. -webkit-transition:opacity .3s ease-out;
  1642. transition:opacity .3s ease-out;
  1643. display:none;
  1644. }
  1645.  
  1646. #eternalsrc {
  1647. font-family:'karla';
  1648. font-size:9px;
  1649. letter-spacing:1px;
  1650. text-transform:uppercase;
  1651. opacity:0.5;
  1652. position:fixed;
  1653. bottom:5px;
  1654. right:5px;
  1655. }
  1656.  
  1657.  
  1658. /*BEGIN NAV BAR*/
  1659. #navbar {
  1660. width:100%;
  1661. height:100px;
  1662. background-color:#000;
  1663. position:fixed;
  1664. top:0;
  1665. left:0;
  1666. border-bottom:0px solid #eeeeee;
  1667. z-index:999998;
  1668. /*box-shadow: rgba(0,0,0,.05) 1px 1px 3px;*/
  1669. }
  1670.  
  1671. #navbar::after{
  1672. content: "";
  1673. background:url("https://s25.postimg.org/e546umav3/weebly3_header1.gif");
  1674. opacity: 0.3;
  1675. top: 0;
  1676. left: 0;
  1677. bottom: 0;
  1678. right: 0;
  1679. position: absolute;
  1680. z-index: -1;
  1681. -webkit-background-size: cover;
  1682. -moz-background-size: cover;
  1683. -o-background-size: cover;
  1684. background-size: cover;
  1685. }
  1686.  
  1687. #title {
  1688. text-transform:uppercase;
  1689. position:absolute;
  1690. font-size:17px;
  1691. top:40px;
  1692. left:100px;
  1693. letter-spacing:3px;
  1694. font-family:'Roboto Condensed';
  1695. }
  1696.  
  1697. #title a{
  1698. }
  1699.  
  1700. #subtitle {
  1701. font-size:12px;
  1702. opacity:0.5;
  1703. }
  1704.  
  1705. .nav-p img {
  1706. width:60px;
  1707. margin:20px 20px 0px 20px;
  1708. }
  1709.  
  1710. /*SIDELINKS*/
  1711.  
  1712. .sidelinks {
  1713. font-family:'lato';
  1714. font-size:10px;
  1715. text-transform:uppercase;
  1716. position:absolute;
  1717. font-size:13px;
  1718. top:40px;
  1719. right:57px;
  1720. }
  1721.  
  1722.  
  1723. .sidelinks a{
  1724. margin-left:20px;
  1725. color:#dadada;
  1726. }
  1727.  
  1728. .sidelinks a:hover {
  1729. color:#707070;
  1730. }
  1731.  
  1732.  
  1733.  
  1734. a {
  1735. text-decoration:none;
  1736. color:#252525;
  1737. -moz-transition-duration: 0.3s;
  1738. -o-transition-duration: 0.3s;
  1739. -webkit-transition-duration: 0.3s;
  1740. transition-duration: 0.3s;
  1741. }
  1742.  
  1743. a:hover {
  1744. color:#eeeeee;
  1745. -moz-transition-duration: 0.3s;
  1746. -o-transition-duration: 0.3s;
  1747. -webkit-transition-duration: 0.3s;
  1748. transition-duration: 0.3s;
  1749. }
  1750.  
  1751.  
  1752. .main {
  1753. margin-top:170px;
  1754. left:25%;
  1755. }
  1756.  
  1757. .title {
  1758. text-transform:uppercase;
  1759. font-size:40px;
  1760. font-family:'Roboto Condensed';
  1761. text-align:center;
  1762. color:#dadada;
  1763. }
  1764.  
  1765.  
  1766. #mainbody {
  1767. padding:10px 50px 70px 0px;
  1768. font-size:16px;
  1769. font-family:'Lato';
  1770. }
  1771.  
  1772. #unit1 {
  1773. margin-top:40px;
  1774. }
  1775.  
  1776. #unitbody2 {
  1777. float:left;
  1778. }
  1779.  
  1780.  
  1781.  
  1782. {CustomCSS}</style>
  1783. </head>
  1784. <body>
  1785.  
  1786.  
  1787. <div id="navbar">
  1788.  
  1789. <span class="nav-p">
  1790. <img src="https://secure.static.tumblr.com/f70e8e6ab335949bf5fe6c3bd16b3133/da5nwny/F3Uoktpb6/tumblr_static_exw2iqjnhcg8s0gggw00sck4o.png">
  1791. </span>
  1792.  
  1793. <div id="title">
  1794. sarah crenella
  1795. </div>
  1796.  
  1797.  
  1798.  
  1799. <div class="sidelinks">
  1800.  
  1801. <a href="/">
  1802. home
  1803. </a>
  1804.  
  1805. <a href="/projects">
  1806. projects
  1807. </a>
  1808.  
  1809. <a href="/prevwork">
  1810. past work
  1811. </a>
  1812.  
  1813. <a href="/about"></a>
  1814. <span style="opacity:0.2;">
  1815. about
  1816. </span>
  1817.  
  1818. <a href="/contact">
  1819. contact
  1820. </a>
  1821.  
  1822. </div>
  1823.  
  1824.  
  1825. </div>
  1826.  
  1827. <!--END NAVBAR-->
  1828.  
  1829.  
  1830.  
  1831. <div class="main">
  1832. <div class="title">about me</div>
  1833. <div id="mainbody">
  1834. <table style="width:100%;margin-top:30px;color:#cecece">
  1835. <tr>
  1836. <td id="abtimg" style="width:450px;">
  1837. <img src="https://scontent.fzty2-1.fna.fbcdn.net/v/t1.0-9/12376089_931180086972688_2758174193149418681_n.jpg?oh=6386d03c3bde97eb01c8956384cd213f&oe=5902A827" style="width:450px;padding-left:100px;">
  1838. </td>
  1839. <td style="text-align:left;padding-left:70px;">
  1840. <div class="title" style="font-size:30px;text-align:left;">biography</div>
  1841. Currently studying film and television at Boston University with a minor in computer science. I am constantly disappointing people but it's okay because I'm having fun while doing it.
  1842. <br><br>
  1843. P.S. If you saw someone fall off their skateboard on bay state is was probably me.
  1844. <br><br><br>
  1845. <span style="font-style:italic;">(Pictured left: Carl the car and I after a minor incident)</span>
  1846. </td>
  1847. </tr>
  1848. </table>
  1849. </div>
  1850. </div>
  1851.  
  1852.  
  1853.  
  1854. <div id="eternalsrc">
  1855. <i class="fa fa-copyright" aria-hidden="true"></i> Sarah Crenella 2017
  1856. </div>
  1857.  
  1858.  
  1859.  
  1860. </body>
  1861. </html>
  1862.  
  1863.  
  1864.  
  1865. <!--CONTACT-->
  1866.  
  1867. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  1868.  
  1869. <html>
  1870. <head>
  1871. <title>{Title}</title>
  1872. <link rel="shortcut icon" href="{Favicon}">
  1873. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  1874.  
  1875.  
  1876. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  1877. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  1878. <link rel="stylesheet" href="http://static.tumblr.com/ev0x8sk/Sv9ohgcx6/imoon.css">
  1879.  
  1880. <!--FONTS-->
  1881. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  1882. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  1883. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  1884. <link href="https://fonts.googleapis.com/css?family=Anton|Catamaran" rel="stylesheet">
  1885. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  1886. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
  1887. <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
  1888.  
  1889.  
  1890. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  1891.  
  1892.  
  1893. <!--TOOLTIPS-->
  1894. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  1895. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1896. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  1897. <script>
  1898. (function($){
  1899. $(document).ready(function(){
  1900. $("[title]").style_my_tooltips({
  1901. tip_follows_cursor:true,
  1902. tip_delay_time:100,
  1903. tip_fade_speed:200
  1904. });
  1905. });
  1906. })(jQuery);
  1907. </script>
  1908.  
  1909.  
  1910. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1911. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1912. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1913.  
  1914. <!--Dropdown-->
  1915. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  1916. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  1917.  
  1918. <script>
  1919. $(document).ready(function(){
  1920. $(".menudown").click(function(){
  1921. $(".main").slideToggle("slow");
  1922. });
  1923. });
  1924. </script>
  1925.  
  1926. <script>
  1927. $(document).ready(function(){
  1928. $(".menuup").click(function(){
  1929. $(".main").slideToggle("slow");
  1930. });
  1931. });
  1932. </script>
  1933.  
  1934.  
  1935. <style type="text/css">
  1936.  
  1937.  
  1938.  
  1939. #s-m-t-tooltip {
  1940. max-width:300px;
  1941. margin:15px;
  1942. padding:4px 8px 4px 8px;
  1943. border-radius:2px;
  1944. background:{color:accent};
  1945. border:1px solid {color:outline};
  1946. color:{color:text};
  1947. z-index:999999;
  1948. font-size:7px;
  1949. font-style:none;
  1950. font-weight:lighter;
  1951. letter-spacing:.6px;
  1952. font-family:'montserrat';
  1953. text-transform:uppercase;
  1954. box-shadow:0px 0px 0px #f2f2f2;
  1955. }
  1956.  
  1957. ::-webkit-scrollbar-thumb:vertical {
  1958. background-color:#000;
  1959. height:5px;
  1960. }
  1961.  
  1962. ::-webkit-scrollbar-thumb:horizontal {
  1963. background-color:#000;
  1964. height:5px!important;
  1965. }
  1966.  
  1967. ::-webkit-scrollbar {
  1968. background-color:transparent;
  1969. height:3px;
  1970. width:3px;
  1971. }
  1972.  
  1973.  
  1974.  
  1975. body {
  1976. font-family:'Karla';
  1977. font-size:10px;
  1978. color:#fff;
  1979. background-color:#000;
  1980. }
  1981.  
  1982.  
  1983. a {
  1984. text-decoration:none;
  1985. color:#000;
  1986. }
  1987.  
  1988. a:hover {
  1989.  
  1990. }
  1991.  
  1992. #tumblr_controls,
  1993. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls {
  1994. position:fixed!important;
  1995. top:65px!important;
  1996. right:10px!important;
  1997. opacity:.5!important;
  1998. -webkit-filter:invert(100%);
  1999. -webkit-backface-visibility:hidden;
  2000. /*padding:65px 10px 10px 10px;*/
  2001. -webkit-transition:opacity .3s ease-out;
  2002. transition:opacity .3s ease-out;
  2003. display:none;
  2004. }
  2005.  
  2006. #eternalsrc {
  2007. font-family:'karla';
  2008. font-size:9px;
  2009. letter-spacing:1px;
  2010. text-transform:uppercase;
  2011. opacity:0.5;
  2012. position:fixed;
  2013. bottom:5px;
  2014. right:5px;
  2015. }
  2016.  
  2017.  
  2018. /*BEGIN NAV BAR*/
  2019. #navbar {
  2020. width:100%;
  2021. height:100px;
  2022. background-color:#000;
  2023. position:fixed;
  2024. top:0;
  2025. left:0;
  2026. border-bottom:0px solid #eeeeee;
  2027. z-index:999998;
  2028. /*box-shadow: rgba(0,0,0,.05) 1px 1px 3px;*/
  2029. }
  2030.  
  2031. #navbar::after{
  2032. content: "";
  2033. background:url("https://s25.postimg.org/e546umav3/weebly3_header1.gif");
  2034. opacity: 0.3;
  2035. top: 0;
  2036. left: 0;
  2037. bottom: 0;
  2038. right: 0;
  2039. position: absolute;
  2040. z-index: -1;
  2041. -webkit-background-size: cover;
  2042. -moz-background-size: cover;
  2043. -o-background-size: cover;
  2044. background-size: cover;
  2045. }
  2046.  
  2047. #title {
  2048. text-transform:uppercase;
  2049. position:absolute;
  2050. font-size:17px;
  2051. top:40px;
  2052. left:100px;
  2053. letter-spacing:3px;
  2054. font-family:'Roboto Condensed';
  2055. }
  2056.  
  2057. #title a{
  2058. }
  2059.  
  2060. #subtitle {
  2061. font-size:12px;
  2062. opacity:0.5;
  2063. }
  2064.  
  2065. .nav-p img {
  2066. width:60px;
  2067. margin:20px 20px 0px 20px;
  2068. }
  2069.  
  2070. /*SIDELINKS*/
  2071.  
  2072. .sidelinks {
  2073. font-family:'lato';
  2074. font-size:10px;
  2075. text-transform:uppercase;
  2076. position:absolute;
  2077. font-size:13px;
  2078. top:40px;
  2079. right:60px;
  2080. }
  2081.  
  2082.  
  2083. .sidelinks a{
  2084. margin-left:20px;
  2085. color:#dadada;
  2086. }
  2087.  
  2088. .sidelinks a:hover {
  2089. color:#707070;
  2090. }
  2091.  
  2092.  
  2093.  
  2094. a {
  2095. text-decoration:none;
  2096. color:#252525;
  2097. -moz-transition-duration: 0.3s;
  2098. -o-transition-duration: 0.3s;
  2099. -webkit-transition-duration: 0.3s;
  2100. transition-duration: 0.3s;
  2101. }
  2102.  
  2103. a:hover {
  2104. color:#eeeeee;
  2105. -moz-transition-duration: 0.3s;
  2106. -o-transition-duration: 0.3s;
  2107. -webkit-transition-duration: 0.3s;
  2108. transition-duration: 0.3s;
  2109. }
  2110.  
  2111.  
  2112. .main {
  2113. margin-top:170px;
  2114. }
  2115.  
  2116. .title {
  2117. text-transform:uppercase;
  2118. font-size:40px;
  2119. font-family:'Roboto Condensed';
  2120. text-align:center;
  2121. color:#dadada;;
  2122. }
  2123.  
  2124. .icons {
  2125. font-size:50px;
  2126. text-align:center;
  2127. margin-top:70px;
  2128. }
  2129.  
  2130. .icons a:hover {
  2131. opacity:0.5;
  2132. }
  2133.  
  2134.  
  2135. {CustomCSS}</style>
  2136. </head>
  2137. <body>
  2138.  
  2139.  
  2140. <div id="navbar">
  2141.  
  2142. <span class="nav-p">
  2143. <img src="https://secure.static.tumblr.com/f70e8e6ab335949bf5fe6c3bd16b3133/da5nwny/F3Uoktpb6/tumblr_static_exw2iqjnhcg8s0gggw00sck4o.png">
  2144. </span>
  2145.  
  2146. <div id="title">
  2147. sarah crenella
  2148. </div>
  2149.  
  2150.  
  2151.  
  2152. <div class="sidelinks">
  2153.  
  2154. <a href="/">
  2155. home
  2156. </a>
  2157.  
  2158. <a href="/projects">
  2159. projects
  2160. </a>
  2161.  
  2162. <a href="/prevwork">
  2163. past work
  2164. </a>
  2165.  
  2166. <a href="/about">
  2167. about
  2168. </a>
  2169.  
  2170. <a></a>
  2171. <span style="opacity:0.2;">
  2172. contact
  2173. </span>
  2174.  
  2175. </div>
  2176.  
  2177.  
  2178. </div>
  2179.  
  2180. <!--END NAVBAR-->
  2181.  
  2182.  
  2183.  
  2184. <div class="main">
  2185. <div class="title">contact</div>
  2186. <div class="icons">
  2187. <a href="mailto:[email protected]" >
  2188. <i class="fa fa-envelope-o" aria-hidden="true" style="color:#d54b3d"></i>
  2189. </a>
  2190. &nbsp;&nbsp;&nbsp;
  2191. <a href="https://www.instagram.com/sarahc/">
  2192. <i class="fa fa-instagram" aria-hidden="true" style="color:#af438f"></i>
  2193. </a>
  2194. &nbsp;&nbsp;&nbsp;
  2195. <a href="https://twitter.com/Pjo06">
  2196. <i class="fa fa-twitter" aria-hidden="true" style="color:#1da1f2"></i>
  2197. </a>
  2198. &nbsp;&nbsp;&nbsp;
  2199. <a href="https://www.facebook.com/profile.php?id=100012122612393&ref=bookmarks">
  2200. <i class="fa fa-facebook" aria-hidden="true" style="color:#3b5998"></i>
  2201. </a>
  2202. </div>
  2203. <!--<div class="title">connect</div>
  2204. <div class="icons">
  2205. <a href="https://open.spotify.com/user/pjo06">
  2206. <i class="fa fa-spotify" aria-hidden="true"></i>
  2207. </a>
  2208. </div>-->
  2209. </div>
  2210.  
  2211.  
  2212.  
  2213. <div id="eternalsrc">
  2214. <i class="fa fa-copyright" aria-hidden="true"></i> Sarah Crenella 2017
  2215. </div>
  2216.  
  2217.  
  2218.  
  2219. </body>
  2220. </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!