API tools faq
paste
Advertisement
cornetespoir

Family/Network page 02

cornetespoir
Nov 5th, 2016
648
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.49 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Family/Network page 02
  3.  
  4. //by espoirthemes
  5.  
  6. instructions are throughout the code
  7. do not remove credit
  8. edit as much as you want
  9. -->
  10. <html>
  11. <head>
  12.  
  13. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <!-- font awesome -->
  14.  
  15. <link rel="shortcut icon" href="{Favicon}" /> <!-- favicon -->
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  17. <!--change title here -->
  18. <title>{Title}</title>
  19.  
  20.  
  21. <!-- slider script start -->
  22. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  23. <script type="text/javascript" src="https://static.tumblr.com/lv6casp/aCNm74ixy/stepcarousel.js">
  24. /***********************************************
  25. * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  26. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  27. * This notice must stay intact for legal use
  28. ***********************************************/
  29. </script>
  30.  
  31. <script type="text/javascript">
  32. stepcarousel.setup({
  33. galleryid: 'mygallery', //id of carousel DIV
  34. beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  35. panelclass: 'panel', //class of panel DIVs each holding content
  36. autostep: {enable:false, moveby:1, pause:5000},
  37. panelbehavior: {speed:600, wraparound:true, wrapbehavior:'pushpull', persist:true},
  38. defaultbuttons: {enable:true, moveby: 1, leftnav: ['http://static.tumblr.com/svdghan/eThodz0ue/left-arrow.png', 20, 220], rightnav: ['http://static.tumblr.com/svdghan/dlAodz0v6/right-arrow.png', -70, 220]},
  39. statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
  40. contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
  41. })
  42. </script>
  43. <!-- slider script end -->
  44. </head>
  45.  
  46.  
  47. <style type="text/css">
  48.  
  49. /*delete this section if you want the follow/dashboard buttons to show */
  50. .tmblr-iframe {
  51. display:none;
  52. }
  53.  
  54. /* scroll bar */
  55. ::-webkit-scrollbar {
  56. width: 14px;
  57. height:6px;
  58.  
  59. }
  60. ::-webkit-scrollbar-button {
  61. width: 0px;
  62. height: 0px;
  63. }
  64. ::-webkit-scrollbar-thumb {
  65. background: #aaa; /*thumb background */
  66. border:6px solid #f8f8f8;
  67. border-top:2px solid #f8f8f8;
  68. border-bottom:2px solid #f8f8f8;
  69. cursor:pointer;
  70. border-radius: 8px;
  71. }
  72. ::-webkit-scrollbar-track {
  73. background:#dfdfdf; /*scrollbar background */
  74. border: 6px solid #f8f8f8;
  75. border-top:10px solid #f8f8f8;
  76. border-bottom:10px solid #f8f8f8;
  77.  
  78.  
  79. }
  80.  
  81. body {
  82. background:#f8f8f8; /*background color */
  83. margin:0;
  84. font-family:helvetica;
  85. word-wrap:break-word;
  86.  
  87. }
  88.  
  89. /*main container positioning */
  90. #container {
  91. position:fixed;
  92. top:100px;
  93. width:100%;
  94. }
  95.  
  96. /* carousel start */
  97. .stepcarousel{
  98. position:relative;
  99. background:#fff; /* carousel background (not visible) */
  100. border:1px solid #222; /*carousel border */
  101.  
  102. /*keep the height and width the same as the belt, panel, img, and info */
  103. width:960px;
  104. height:520px;
  105. margin:0px auto 80px auto;
  106. z-index:4;
  107. /*erase the following line if you don't want rounded borders */
  108. border-radius:4px;
  109. }
  110.  
  111. .stepcarousel .belt{
  112. position:absolute;
  113. left:0px;
  114. top:0px;
  115. /*keep the width the same as the carousel, panel, img, and info */
  116. width:940px;
  117.  
  118. }
  119. /*this is the "filter" that's on top of the background images. the color is a gradient from a pink to white, if you don't want this, erase this whole section */
  120. .stepcarousel .panel:before {
  121. width:100%;
  122. height:100%;
  123. content:'';
  124. /*the first color is the pink, the second is the white. if you don't want a gradient, erase
  125.  
  126. linear-gradient(to bottom, #fcd7c7, rgba(255,255,255,.8))
  127.  
  128. and replace it with a solid color */
  129. background:linear-gradient(to bottom, #fcd7c7, rgba(255,255,255,.8));
  130. opacity:0.6;
  131. position:absolute;
  132. }
  133. .stepcarousel .panel img{
  134. /*keep the height and width the same as the carousel, belt, panel, and info */
  135. width:960px;
  136. height:520px;
  137. /*erase the following line if you don't want rounded corners */
  138. border-radius:4px; }
  139. .stepcarousel .panel{float:left;overflow:hidden;margin:0px;width:960px; }
  140.  
  141.  
  142. .stepcarousel .panel .info{
  143. position:absolute;
  144. /*keep the width the same as the carousel, belt, panel, and panel img */
  145. width:940px;
  146. padding:0px 10px;
  147. color:#222; /*color of the info text */
  148. padding:10px;
  149. text-align:center;
  150. top:38%;
  151. /*erase the following line if you don't want a text shadow */
  152. text-shadow:1px 1px rgba(0,0,0,.2);
  153. overflow:hidden;
  154.  
  155.  
  156. }
  157. /*avatar images */
  158. .panel .info img {
  159. /*unless you aren't using icons, keep the height and width the same */
  160. width:70px;
  161. height:70px;
  162. padding:6px; /*erase this if you don't want white around the images*/
  163. background:white; /*background image revealed with the padding */
  164. border:1px solid #222; /*image border color */
  165. border-radius:100%; /*erase this if you want it as a square instead */
  166. }
  167.  
  168. /*info links */
  169. .stepcarousel .panel .info a{
  170. text-decoration:none; /*gets rid of default underline */
  171. color:black; /*link color */
  172. border-bottom:1px solid #222; /* custom underline (erase if you want no underline at all) */
  173. transition:.6s;
  174. }
  175.  
  176. .panel .info a:hover {
  177. transition:.6s;
  178. color:#fcd7c7; /*color of link on hover */
  179. }
  180.  
  181. /* info text */
  182. .text {
  183. background:rgba(255,255,255,.92); /*text background (this is partially transparent) */
  184. padding:20px;
  185. /*leave the width as is */
  186. width:80%;
  187. border:1px solid #222;
  188. max-height:120px; /*leave this as is, or the text will go off of the panel */
  189. overflow:auto;
  190. position:relative;
  191. margin:20px auto;
  192. }
  193.  
  194. /* navigation links */
  195. .top {
  196. /*keep this the same width as the carousel */
  197. width:960px;
  198. position:relative;
  199. margin:0px auto;
  200. z-index:99;
  201. border:none;
  202. padding:10px 0px;
  203. }
  204. .top a {
  205. margin:8px;
  206. text-decoration:none;
  207. border:none;
  208. color:#888; /*color of links */
  209. }
  210.  
  211.  
  212.  
  213. #egg { opacity:.8;left:10px; bottom:10px; position:fixed;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  214. font-family: "up";
  215. border:1px solid #888; z-index:4;}
  216. #egg:hover { animation-name: egg;
  217. animation-duration: 1s;
  218. animation-iteration-count: infinite;}
  219. @keyframes egg{
  220. 0%{}
  221. 10%{transform:rotate(6deg)}
  222. 80%{transform:rotate(-6deg)}
  223. 100%{}
  224. }
  225.  
  226.  
  227. /* layout of page on smaller screens, don't touch */
  228. @media screen and (max-width: 1400px) {
  229. .stepcarousel{
  230. position:relative;
  231. width:660px;
  232. height:320px;
  233. margin:0px auto 80px auto;
  234. z-index:4;
  235. }
  236.  
  237. .stepcarousel .belt{position:absolute;left:0px;top:0px; width:660px; }
  238.  
  239. .stepcarousel .panel img{width:660px;height:320px; border-radius:4px; }
  240. .stepcarousel .panel{float:left;overflow:hidden;margin:0px;width:660px; }
  241.  
  242.  
  243. .stepcarousel .panel .info{
  244. position:absolute;
  245. width:640px;
  246. padding:0px 10px;
  247. width:100%;
  248.  
  249. padding:10px;
  250. text-align:center;
  251. top:18%;
  252. overflow:hidden;
  253.  
  254.  
  255. }.panel .info img {
  256. width:70px;
  257. height:70px;
  258. border-radius:100%;
  259. }
  260.  
  261. .text {
  262. width:400px;
  263. padding:10px;
  264. max-height:90px;
  265.  
  266. }.top {
  267. width:660px;
  268. position:relative;
  269. margin:0px auto;
  270. z-index:99;
  271. border:none;
  272. padding:10px 0px;
  273. }
  274. }
  275.  
  276.  
  277. </style>
  278.  
  279. <body>
  280.  
  281.  
  282. <div id="container">
  283.  
  284. <!-- navigation links -->
  285.  
  286. <div class="top">
  287. <a href="/"> <i class="fa fa-arrow-left"></i> back</a>
  288. <a href="/archive"> <i class="fa fa-history"></i> archive </a>
  289. <!-- replace /url with the url of your extra link -->
  290. <a href="/url"> <i class="fa fa-navicon"></i> extra link</a>
  291. <!-- to add more links, copy and paste the previous link and fill in the new link's information -->
  292.  
  293.  
  294. </div><!--end navigation links -->
  295.  
  296. <!--carousel start -->
  297. <div id="mygallery" class="stepcarousel">
  298. <div class="belt">
  299.  
  300. <!-- first panel -->
  301. <div class="panel">
  302. <div class="info">
  303.  
  304. <!-- icon -->
  305. <img src="http://static.tumblr.com/vmteopo/2v2numqbc/pink_fash.jpg">
  306. <br>
  307. <!-- replace the url with the blog url and @username with the name -->
  308. <a href="url">@username</a>
  309.  
  310. <div class="text">
  311. <!-- this is where the description goes -->
  312.  
  313. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecaenas mattis egestas sem in sodales. <br>
  314. <a href="http://erised.co.vu/icons">icons credit</a> <br>
  315. <a href="http://www.designlovefest.com/2016/08/dress-your-tech-157/">background images credit</a>
  316.  
  317. <!--description end -->
  318. </div>
  319. </div>
  320.  
  321. <!--panel background image -->
  322. <img src="http://www.designlovefest.com/wp-content/uploads/downloads/2016/08/tropical.jpg">
  323.  
  324.  
  325. </div> <!--panel end -->
  326.  
  327. <!--panel 2 start -->
  328. <div class="panel">
  329. <div class="info">
  330.  
  331. <!-- icon -->
  332. <img src="http://static.tumblr.com/vmteopo/gTintdgfz/pink_girl2.jpg"> <br>
  333.  
  334. <!-- name -->
  335. <a href="url">@username</a>
  336.  
  337. <div class="text">
  338. <!--description goes here -->
  339. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis egestas sem in sodales. Suspendisse efficitur sodales lorem sed ornare. Donec convallis est sagittis, aliquam tellus vitae, condimentum ligula.
  340. <!--description end -->
  341. </div>
  342. </div>
  343.  
  344. <!-- panel background image -->
  345. <img src="http://www.designlovefest.com/wp-content/uploads/downloads/2016/08/spring.jpg">
  346.  
  347. </div> <!--panel end -->
  348.  
  349.  
  350. <!--panel 3 start -->
  351. <div class="panel">
  352. <div class="info">
  353.  
  354. <!-- icon -->
  355. <img src="http://static.tumblr.com/vmteopo/IPknt5l6u/wmo.png"> <br>
  356.  
  357. <!-- name -->
  358. <a href="url">@username</a>
  359.  
  360. <div class="text">
  361. <!--description goes here -->
  362. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis egestas sem in sodales. Suspendisse efficitur sodales lorem sed ornare. Donec convallis est sagittis, aliquam tellus vitae, condimentum ligula.
  363. <!--description end -->
  364. </div>
  365. </div>
  366.  
  367. <!--panel background image -->
  368. <img src="http://www.designlovefest.com/wp-content/uploads/downloads/2016/08/leaf.jpg">
  369.  
  370. </div> <!--panel end -->
  371.  
  372. <!--panel 4 start -->
  373. <div class="panel">
  374. <div class="info">
  375.  
  376. <!--icon -->
  377. <img src="http://static.tumblr.com/vmteopo/4RBo5z6hu/redhead.jpg"> <br>
  378.  
  379. <!-- name -->
  380. <a href="url">@username</a>
  381.  
  382. <div class="text">
  383. <!--description goes here -->
  384. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis egestas sem in sodales. Suspendisse efficitur sodales lorem sed ornare. Donec convallis est sagittis, aliquam tellus vitae, condimentum ligula.
  385. <!--description end -->
  386. </div>
  387. </div>
  388.  
  389. <!-- panel background image -->
  390. <img src="http://www.designlovefest.com/wp-content/uploads/downloads/2016/08/pastel-leaves.jpg">
  391. </div> <!-- panel end -->
  392.  
  393. <!--panel 5 start -->
  394. <div class="panel">
  395. <div class="info">
  396.  
  397. <!--icon -->
  398. <img src="http://static.tumblr.com/vmteopo/lD0o43s5v/sh_g_b.png"> <br>
  399.  
  400. <!-- name -->
  401. <a href="url">@username</a>
  402.  
  403. <div class="text">
  404. <!--description goes here -->
  405. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis egestas sem in sodales. Suspendisse efficitur sodales lorem sed ornare. Donec convallis est sagittis, aliquam tellus vitae, condimentum ligula.
  406. <!--description end -->
  407. </div>
  408. </div>
  409.  
  410. <!--panel background image -->
  411. <img src="http://www.designlovefest.com/wp-content/uploads/downloads/2016/08/cheese-leaf.jpg">
  412. </div><!--panel end -->
  413.  
  414. <!--to add another panel, copy and paste this after the last panel end:
  415.  
  416. <div class="panel">
  417. <div class="info">
  418. <img src="iconimage"> <br>
  419. <a href="url">@username </a>
  420. <div class="text">
  421. description text
  422. </div>
  423. </div>
  424. <img src="background image">
  425. </div>
  426.  
  427. and fill in the info for the panel.
  428. To erase a panel, erase an entire section between panel start and panel end. -->
  429.  
  430.  
  431.  
  432. </div> <!--belt end -->
  433. </div> <!--slider end -->
  434.  
  435. </div> <!-- container end -->
  436.  
  437. <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>
  438. </body>
  439. </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!