silbrigthemes

Meeresbrise (Page #25)

Dec 5th, 2019
811
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.35 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. MEERESBRISE
  7. Page #25 by silbrigthemes
  8.  
  9. Meeresbrise is a responsive network page based on Pantone®'s color of the year 2020, Classic Blue.
  10.  
  11. ----------
  12.  
  13. Rules:
  14.  
  15. 1) Do not use as base code.
  16. 2) Do not customize beyond recognition.
  17. 3) Do not steal (parts of) the code.
  18. 4) Do not claim as your own.
  19. 5) Do not delete or alter the credit.
  20. 6) Do not redistribute to other sites.
  21.  
  22. ----------
  23.  
  24. Useful comments to this code have been made.
  25.  
  26. If you need any help for a problem , feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  27.  
  28. Have fun!
  29.  
  30. Love,
  31. Julia <3
  32.  
  33. ----------
  34.  
  35. Note:
  36.  
  37. This work is protected by a creative commons
  38. Attribution-NonCommercial-NoDerivatives 4.0 International
  39. (CC BY-NC-ND 4.0)
  40. license.
  41.  
  42. -->
  43.  
  44. <head>
  45.  
  46. <meta charset="utf-16">
  47. <title>{Title} | Meeresbrise</title> <!-- {Title} is your blog title. Change after the "|". -->
  48. <link rel="shortcut icon" href="{Favicon}"/>
  49. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  50. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  51.  
  52. <!-- Changes the toolbar color on mobile. -->
  53. <meta name="theme-color" content="#0f4c81"/>
  54.  
  55. <!-- Necessary for the theme to be responsive. -->
  56. <meta name="viewport" content="width=device-width, initial-scale=1">
  57.  
  58. <!-- Icon font, by fontawesome -->
  59. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  60.  
  61. <!-- Necessary for the scripts to work. -->
  62. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  63.  
  64. <!-- Masonry Libraries -->
  65. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  66. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  67.  
  68. <!-- OTHER FONTS -->
  69. <!-- Cormorant Garamond -->
  70. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  71. <!-- Dancing Script -->
  72. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  73.  
  74. <!-- MAIN FONTS -->
  75. <!-- Title Font | Roboto Slab -->
  76. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap" rel="stylesheet">
  77. <!-- Body Font | Roboto -->
  78. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  79. <!-- Accent Font | Roboto Mono -->
  80. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  81.  
  82. <style>
  83.  
  84. body{
  85. margin:0;
  86. top:0;
  87. left:0;
  88. background-color:#0f4c81; /* background color */
  89. font-size:1em; /* font-size */
  90. color:#333; /* text color */
  91. font-family:"Roboto", Verdana; /* font */
  92. overflow-x:hidden;
  93. }
  94.  
  95. /* Custom Scrollbar */
  96. ::-webkit-scrollbar{
  97. width:10px;
  98. }
  99.  
  100. ::-webkit-scrollbar-thumb{
  101. width:10px;
  102. border-radius:5px; /* rounded corners */
  103. background-color:white; /* background color */
  104. }
  105.  
  106. /* Custom Text Selection */
  107. ::selection{
  108. background-color:#0f4c81; /* background color */
  109. color:white; /* text color */
  110. }
  111.  
  112. ::-moz-selection{
  113. background-color:#0f4c81; /* background color */
  114. color:white; /* text color */
  115. }
  116.  
  117. ::-o-selection{
  118. background-color:#0f4c81; /* background color */
  119. color:white; /* text color */
  120. }
  121.  
  122. ::-webkit-selection{
  123. background-color:#0f4c81; /* background color */
  124. color:white; /* text color */
  125. }
  126.  
  127. /* Custom Tooltips */
  128. .tippy-tooltip.meeresbrise-theme {
  129. background-color:#0f4c81; /* background color */
  130. color:white; /* text color */
  131. text-align:left; /* alt.: center, right, justify */
  132. }
  133.  
  134. .tippy-tooltip.meeresbrise-theme .tippy-svg-arrow {
  135. fill:#0f4c81; /* background color */
  136. }
  137.  
  138. /* ––– END GENERAL | START TEXT STYLES ––– */
  139.  
  140. /* Bold Text */
  141. b, strong{
  142. font-weight:bold;
  143. font-weight:700;
  144. color:#555; /* text color */
  145. }
  146.  
  147. /* Italic Text */
  148. i, em{
  149. font-weight:300; /* alt.: 400 */
  150. font-style:italic; /* alt.: normal */
  151. color:#111; /* text color */
  152. }
  153.  
  154. /* Marked Text */
  155. mark{
  156. background-color:#0f4c81; /* background color */
  157. color:white; /* text color */
  158. padding:0 8px;
  159. border-radius:1em; /* round corners */
  160. }
  161.  
  162. /* Preformatted Text */
  163. pre{
  164. font-family:"Roboto Mono", Courier; /* font */
  165. font-size:calc(1em - 2px);
  166. word-wrap:break-all;
  167. white-space:pre-wrap;
  168. color:#0f4c81; /* text color */
  169. padding:16px;
  170. }
  171.  
  172. /* Small Text */
  173. small{
  174. font-size:calc(1em - 4px);
  175. }
  176.  
  177. /* Underlined Text */
  178. u{
  179. text-decoration:none;
  180. border-bottom:2px solid #333; /* strength style color */
  181. }
  182.  
  183. /* Text Line */
  184. hr{
  185. width:80%;
  186. height:4px;
  187. border:none;
  188. border-radius:4px; /* round corners */
  189. background-color:#0f4c81; /* background color */
  190. }
  191.  
  192. /* Empty Paragraphs */
  193. p:empty{
  194. display:none;
  195. }
  196.  
  197. /* Embedded Media */
  198. #about img, #about iframe{
  199. max-width:100%;
  200. }
  201.  
  202. /* Blockquote */
  203. blockquote{
  204. border-left:4px solid #0f4c81; /* strength style color */
  205. padding-left:16px;
  206. }
  207.  
  208. /* LINKS */
  209. /* Link */
  210. a{
  211. text-decoration:none;
  212. color:#0f4c81; /* text color */
  213. border-bottom:2px solid #0f4c81; /* strength style color */
  214. }
  215.  
  216. /* Link on Hover */
  217. a:hover{
  218. color:#333; /* text color */
  219. }
  220.  
  221. /* Transitions */
  222. a, a:hover{
  223. transition:0.5s;
  224. -moz-transition:0.5s;
  225. -o-transition:0.5s;
  226. -webkit-transition:0.5s;
  227. }
  228.  
  229. /* COLORED TEXT */
  230. /* Red Text */
  231. .npf_color_joey {
  232. color:#820f22; /* text color */
  233. }
  234.  
  235. /* Orange Text */
  236. .npf_color_monica {
  237. color:#82310f; /* text color */
  238. }
  239.  
  240. /* Yellow Text */
  241. .npf_color_phoebe {
  242. color:#c98e18; /* text color */
  243. }
  244.  
  245. /* Green Text */
  246. .npf_color_ross {
  247. color:#0f8237; /* text color */
  248. }
  249.  
  250. /* Blue Text */
  251. .npf_color_rachel {
  252. color:#0f4c81; /* text color */
  253. }
  254.  
  255. /* Purple Text */
  256. .npf_color_chandler {
  257. color:#690f82; /* text color */
  258. }
  259.  
  260. /* Pink Text */
  261. .npf_color_niles {
  262. color:#820f50; /* text color */
  263. }
  264.  
  265. /* SPECIAL FONTS */
  266. /* Quirky Font */
  267. .npf_quirky{
  268. font-family: "Dancing Script", cursive; /* font */
  269. font-size:1.5em;
  270. }
  271.  
  272. /* Chat Font */
  273. .npf_chat{
  274. font-family:"Roboto Mono", Courier; /* font */
  275. }
  276.  
  277. /* Quote Font */
  278. .npf_quote{
  279. font-family:"Cormorant Garamond", "Palatino"; /* font */
  280. font-size:1.25em;
  281. }
  282.  
  283. /* HEADINGS */
  284. /* First Heading */
  285. h1{
  286. font-size:1.75em;
  287. font-weight:400; /* alt.: 300, 700 */
  288. }
  289.  
  290. /* Second Heading */
  291. h2{
  292. font-size:1.5em;
  293. font-weight:300; /* alt.: 400, 700 */
  294. }
  295.  
  296. h1, h2{
  297. font-family:"Raleway", Georgia; /* font */
  298. }
  299.  
  300. /* Third Heading */
  301. h3{
  302. font-size:1.25em;
  303. }
  304.  
  305. /* Fourth Heading */
  306. h4{
  307. font-size:1em;
  308. }
  309.  
  310. /* Fifth Heading */
  311. h5{
  312. font-size:calc(1em - 2px);
  313. }
  314.  
  315. /* Sixth Heading */
  316. h6{
  317. font-size:calc(1em - 4px);
  318. }
  319.  
  320. h5, h6{
  321. text-transform:uppercase;
  322. /* alt.: capitalize, none, lowercase */
  323. }
  324.  
  325. body.access h5, body.access h6{
  326. text-transform:none;
  327. /* alt.: uppercase, capitalize, lowercase */
  328. }
  329.  
  330. h3, h4{
  331. font-family:"Open Sans", Verdana; /* font */
  332. }
  333.  
  334. h5, h6{
  335. font-family:"Roboto Mono", Courier; /* font */
  336. }
  337.  
  338. /* ––– END TEXT STYLES | START LAYOUT ––– */
  339.  
  340. /* CONTAINER */
  341. #container{
  342. width:calc(60vw - 2em);
  343. margin-top:10vh;
  344. margin-bottom:10vh;
  345. margin-left:calc(20vw - 1em);
  346. padding:2em;
  347. background-color:white; /* background colors */
  348. border-radius:1em; /* rounded corners */
  349. }
  350.  
  351. /* Title */
  352. #title{
  353. font-size:2em;
  354. color:#0f4c81; /* text color */
  355. font-family:"Roboto Slab", Georgia; /* font */
  356. margin-bottom:8px;
  357. }
  358.  
  359. /* Description */
  360. #desc{
  361. border-bottom:2px solid #0f4c81; /* strength style color */
  362. margin-bottom:8px;
  363. padding-bottom:8px;
  364. }
  365.  
  366. /* Network Element */
  367. .net{
  368. width:calc(18vw - 2em);
  369. padding:1em;
  370. margin-right:8px;
  371. margin-bottom:8px;
  372. }
  373.  
  374. /* Network Link */
  375. a.netlink{
  376. text-decoration:none;
  377. color:#333; /* text color */
  378. border-bottom:none;
  379. display:flex;
  380. align-items:flex-start;
  381. }
  382.  
  383. /* Network Icon */
  384. .net-icon img{
  385. width:64px;
  386. height:64px;
  387. margin-right:8px;
  388. }
  389.  
  390. /* Network Title */
  391. .net-title{
  392. font-size:calc(1em + 2px);
  393. font-family:"Roboto Slab", Georgia; /* font */
  394. color:#0f4c81; /* text color */
  395. }
  396.  
  397. /* Network Username */
  398. .net-username{
  399. font-size:calc(1em - 2px);
  400. font-family:"Roboto Mono", Courier; /* font */
  401. }
  402.  
  403. /* ––– END LAYOUT | START EXTRAS ––– */
  404.  
  405. /* Hides the tumblr app button, by @yeoli-thm */
  406. .tmblr-iframe--app-cta-button {
  407. display:none!important;
  408. }
  409.  
  410. /* CUSTOM CONTROLS */
  411. /* Container */
  412. #custom-controls{
  413. position:fixed;
  414. top:1em;
  415. right:calc(1em + 10px);
  416. width:calc(2 * 36px + 4px);
  417. height:calc(2 * 36px + 8px);
  418. display:flex;
  419. flex-wrap:wrap;
  420. justify-content:space-between;
  421. align-items:space-between;
  422. }
  423.  
  424. /* Control Link */
  425. a.conlink{
  426. border-bottom:none;
  427. box-shadow:none;
  428. text-decoration:none;
  429. }
  430.  
  431. /* Control Element */
  432. .cont{
  433. background-color:white; /* background color */
  434. color:#0f4c81; /* text color */
  435. border-radius:50%; /* round corners */
  436. font-size:calc(1em - 2px);
  437. width:36px;
  438. height:36px;
  439. display:flex;
  440. align-items:center;
  441. justify-content:center;
  442. }
  443.  
  444. /* Control Element on Hover */
  445. .cont:hover{
  446. color:#333; /* background color */
  447. transform:scale(0.98); /* smaller */
  448. }
  449.  
  450. /* Transitions */
  451. .cont, .cont:hover{
  452. transition:0.5s;
  453. -moz-transition:0.5s;
  454. -o-transition:0.5s;
  455. -webkit-transition:0.5s;
  456. }
  457.  
  458. /* Hides standard tumblr controls */
  459. body > iframe:first-child {
  460. display: none !important;
  461. }
  462.  
  463. /* Credit – Don't touch! */
  464. #cd{
  465. position:fixed;
  466. bottom:1em;
  467. right:1em;
  468. }
  469.  
  470. /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
  471.  
  472. /* LARGE SCREENS | DESKTOP */
  473. @media only screen and (min-width:800px){
  474. /* Mobile Footer */
  475. #mobile-footer{
  476. display:none;
  477. }
  478. }
  479.  
  480. /* SMALL SCREENS | TABLETS */
  481. @media only screen and (max-width:800px){
  482. /* Custom Scrollbar */
  483. ::-webkit-scrollbar-thumb{
  484. background-color:#0f4c81; /* background color */
  485. }
  486.  
  487. /* Container */
  488. #container{
  489. width:calc(100vw - 4em);
  490. margin-top:0;
  491. margin-left:0;
  492. border-radius:0;
  493. }
  494.  
  495. /* Network Element */
  496. .net{
  497. width:calc(28vw - 2em);
  498. padding:1em;
  499. margin-right:8px;
  500. margin-bottom:8px;
  501. }
  502.  
  503. /* Mobile Footer */
  504. #mobile-footer{
  505. display:flex;
  506. align-items:center;
  507. justify-content:space-evenly;
  508. background-color:#0f4c81; /* background color */
  509. position:fixed;
  510. bottom:0;
  511. left:0;
  512. width:100vw;
  513. height:10vh;
  514. }
  515.  
  516. /* Navigation Element */
  517. .mf-nav{
  518. width:36px;
  519. height:36px;
  520. font-size:calc(1em - 2px);
  521. border-radius:8px; /* rounded corners */
  522. background-color:white; /* background color */
  523. color:#0f4c81; /* text color */
  524. display:flex;
  525. align-items:center;
  526. justify-content:center;
  527. }
  528.  
  529. /* Navigation Element on Hover */
  530. .mf-nav:hover{
  531. color:#333; /* text color */
  532. cursor:pointer;
  533. transform:scale(0.98); /* smaller */
  534. }
  535.  
  536. /* Navigation Element Transitions */
  537. .mf-nav, .mf-nav:hover{
  538. transition:0.5s;
  539. -moz-transition:0.5s;
  540. -o-transition:0.5s;
  541. -webkit-transition:0.5s;
  542. }
  543.  
  544. /* Navigation Element Links */
  545. .mf-link, body.night .mf-link{
  546. border-bottom:none;
  547. }
  548.  
  549. /* Credit, Custom Controls */
  550. #cd, #custom-controls{
  551. display:none;
  552. }
  553. }
  554.  
  555. /* SMALL SCREENS | PHONES */
  556. @media only screen and (max-width:450px){
  557. /* Network Element */
  558. .net{
  559. width:calc(80vw - 2em);
  560. padding:1em;
  561. margin-right:8px;
  562. margin-bottom:8px;
  563. }
  564. }
  565.  
  566. </style>
  567. </head>
  568.  
  569. <body>
  570.  
  571. <!-- CONTAINER -->
  572. <div id="container">
  573. <!-- TITLE -->
  574. <div id="title">Meeresbrise</div>
  575. <!-- DESCRIPTION -->
  576. <div id="desc">
  577. Und ich stehe am Strand, eine sanfte Meeresbrise spielt mit meinem Haar, und ich erinnere mich daran, wie es mit dir war.
  578. </div>
  579. <!-- NETWORK CONTAINER -->
  580. <div id="network">
  581. <!-- Network Element -->
  582. <div class="net">
  583. <!-- Network Link -->
  584. <a href="/" title="username" class="netlink">
  585. <!-- Network Icon -->
  586. <div class="net-icon">
  587. <img src="https://66.media.tumblr.com/e30064aa147e88182421ca6758010032/tumblr_pgacndSzEE1xc8miro1_500.png" alt="user icon"/>
  588. </div>
  589. <!-- Network Info -->
  590. <div class="net-info">
  591. <!-- Network Title -->
  592. <div class="net-title">Blog Title</div>
  593. <!-- Network Username -->
  594. <div class="net-username">@username</div>
  595. <!-- Network Description -->
  596. <div class="net-desc">
  597. Description goes here! Keep it short, make it long – doesn't matter.
  598. </div>
  599. </div> <!-- // end network info -->
  600. </a> <!-- // end network link -->
  601. </div>
  602.  
  603. <!-- Copy, paste, and uncomment the code below to add more elements. -->
  604. <!--
  605. <div class="net">
  606. <a href="/" title="username" class="netlink">
  607. <div class="net-icon">
  608. <img src="https://66.media.tumblr.com/e30064aa147e88182421ca6758010032/tumblr_pgacndSzEE1xc8miro1_500.png" alt="user icon"/>
  609. </div>
  610. <div class="net-info">
  611. <div class="net-title">Blog Title</div>
  612. <div class="net-username">@username</div>
  613. <div class="net-desc">
  614. Description goes here! Keep it short, make it long – doesn't matter.
  615. </div>
  616. </div>
  617. </a>
  618. </div>
  619. -->
  620.  
  621. </div> <!-- // end network container -->
  622. </div> <!-- // end container -->
  623.  
  624. <!-- MOBILE FOOTER -->
  625. <div id="mobile-footer">
  626. <!-- Desktop Link -->
  627. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="mf-link">
  628. <div class="mf-nav">
  629. <span class="fab fa-tumblr" aria-hidden="true"></span>
  630. </div>
  631. </a>
  632.  
  633. <!-- Message -->
  634. <!-- Takes people to dashboard to send you a message. -->
  635. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="mf-link">
  636. <div class="mf-nav">
  637. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  638. </div>
  639. </a>
  640.  
  641. <!-- Home Link -->
  642. <a href="/" title="return to blog" class="mf-link">
  643. <div class="mf-nav">
  644. <span class="fas fa-home" aria-hidden="true"></span>
  645. </div>
  646. </a>
  647.  
  648. <!-- Follow -->
  649. <!-- Takes people to a page so that they can follow you. -->
  650. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="mf-link">
  651. <div class="mf-nav">
  652. <span class="fas fa-plus" aria-hidden="true"></span>
  653. </div>
  654. </a>
  655.  
  656. <!-- Credit – Do not touch! -->
  657. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mf-link">
  658. <div class="mf-nav">
  659. <span class="fas fa-code" aria-hidden="true"></span>
  660. </div>
  661. </a>
  662. </div> <!-- // end mobile footer -->
  663.  
  664. <!-- CUSTOM CONTROLS -->
  665. <div id="custom-controls">
  666. <!-- Dashboard Link -->
  667. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  668. <div class="cont">
  669. <span class="fab fa-tumblr" aria-hidden="true"></span>
  670. </div>
  671. </a>
  672.  
  673. <!-- Message -->
  674. <!-- Takes people to dashboard to send you a message. -->
  675. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  676. <div class="cont">
  677. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  678. </div>
  679. </a>
  680.  
  681. <!-- Customize -->
  682. <!-- Takes you, the blog owner, to the customization. -->
  683. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="conlink">
  684. <div class="cont">
  685. <span class="fas fa-palette" aria-hidden="true"></span>
  686. </div>
  687. </a>
  688.  
  689. <!-- Follow -->
  690. <!-- Takes people to a page so that they can follow you. -->
  691. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  692. <div class="cont">
  693. <span class="fas fa-plus" aria-hidden="true"></span>
  694. </div>
  695. </a>
  696. </div> <!-- // end custom controls -->
  697.  
  698. <!-- CREDIT -->
  699. <!-- Do not touch! -->
  700. <div id="cd">
  701. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="conlink">
  702. <div class="cont">
  703. <span class="fas fa-code" aria-hidden="true"></span>
  704. </div>
  705. </a>
  706. </div>
  707.  
  708. <!-- Masonry for Tags -->
  709. <script type="text/javascript" charset="utf-8">$(document).ready(function(){
  710. var $grid = $("#network").masonry({
  711. itemSelector: ".net",
  712. initLayout: 1
  713. });
  714. $grid.imagesLoaded().progress(function() {
  715. $grid.masonry("layout")
  716. });
  717. });
  718. </script>
  719.  
  720. <!-- Tooltips, TippyJs -->
  721. <script src="https://unpkg.com/popper.js@1"></script>
  722. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  723. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  724.  
  725. <script>
  726. tippy('a[title]', {
  727. theme: 'meeresbrise',
  728. arrow: tippy.roundArrow,
  729. zIndex: 9999999999,
  730. maxWidth: 300,
  731.  
  732. content(reference) {
  733. const title = reference.getAttribute('title');
  734. reference.removeAttribute('title');
  735. return title;
  736. },
  737. });
  738. </script>
  739.  
  740. </body>
  741. </html>
Advertisement
Add Comment
Please, Sign In to add comment