#999; font-family: Helvetica | Explore Tumblr Posts and Blogs

meghannportfolio · 6 years

Photo

Dit is de basis code

<!DOCTYPE html> <html> <head> <title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>

<meta name="if:Show bar on top" content="1"/> <meta name="if:Show blog title" content="1"/> <meta name="if:Show blog description" content="1"/> <meta name="if:Show profile photo" content="1"/> <meta name="if:Use endless scrolling" content="1"/>

<link rel="stylesheet" href="http://static.tumblr.com/thpaaos/DIcklyl4z/reset.css" type="text/css">

<style type="text/css" media="screen"> body { -webkit-font-smoothing: antialiased; font-size: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0; padding: 0; }

*:active, *:focus { outline-width: 0px; } img { max-width: 100% } .post .top.media img { width: 100%; } a { text-decoration: none; color: {Color:Accent}; } a img { border-width: 0px; } strong { font-weight: bold; } em { font-style: italic; }

.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } * html .group { zoom: 1; } /* IE6 */ *:first-child+html .group { zoom: 1; } /* IE7 */

iframe#tumblr_controls { top: 12px !important; }

#color_bar { height: 12px; background: {Color:Accent}; }

#container { width: 950px; margin: 0 auto; padding: 60px 20px; }

#header { height: 48px; margin: 0 0 60px 0; }

#blog_info { width: 700px; margin: 0 60px 0 0; float: left; }

#blog_info h1 { font-size: 36px; font-weight: bold; letter-spacing: -1px; line-height: 36px; margin: 8px 0 0 0; }

#blog_info h1 a { color: #333333; }

#blog_info h1 a:hover { color: #000; }

#blog_info h1 a:active { position: relative; top: 1px; }

#blog_info p, #blog_info .cont { color: #646464; margin-top: 7px; }

.cont { margin-bottom: 7px; }

#blog_avatar { width: 188px; position: relative; float: right; {block:IfNotShowBlogTitle}float: left;{/block:IfNotShowBlogTitle} }

#blog_avatar a { width: 48px; height: 48px; {block:IfShowImageShadows} -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .21); box-shadow: 0px 1px 3px rgba(0, 0, 0, .21); {/block:IfShowImageShadows} position: absolute; top: 0; left: 0; display: block; }

#blog_avatar img { width: 48px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

#blog_avatar a::before { content: " "; width: 46px; height: 46px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid rgba(0,0,0,.1); position: absolute; top: 0px; left: 0px; z-index: 999; display: block; }

#blog_avatar:hover a { width: 64px; height: 64px; top: -8px; left: -8px; }

#blog_avatar:hover a img { width: 64px; }

#blog_avatar:hover a::before { width: 62px; height: 62px; }

#blog_avatar:active a { top: -7px; -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, .21); box-shadow: 0px 0px 1px rgba(0, 0, 0, .21); }

#posts { width: 700px; color: #4C4C4C; margin: 0 60px 0 0; float: left; }

#posts .post { list-style-type: none; border-bottom: 1px solid #E6E6E6; margin: 0 0 45px 0; padding: 0 0 45px 0; }

{block:IfDisqusShortname} #posts .post #disqus_thread { border-top: 1px solid #E6E6E6; margin: 20px 0 0 0; padding: 25px 0 0 0; }

#posts .post .caption a.disquscomments { font-size: 12px; font-family: 'Times New Roman', Times, serif; letter-spacing: 2px; text-transform: uppercase; -webkit-font-smoothing: subpixel-antialiased; } {/block:IfDisqusShortname}

.top.audio * { width: 700px; height: 91px }

.top.media { line-height: 0; {block:IfShowImageShadows} -webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27); box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27); {/block:IfShowImageShadows} position: relative; display: inline-block; }

.top.media.photoset { line-height: 0; {block:IfShowImageShadows} -webkit-box-shadow: none; box-shadow: none; {/block:IfShowImageShadows} position: relative; display: inline-block; }

.media img { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

.link_post .link { color: {Color:Accent}; font-size: 21px; font-weight: bold; border: 1px solid rgba({RGBcolor:Accent}, 0.13); background: rgba({RGBcolor:Accent}, 0.13); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 15px 53px 15px 20px; position: relative; display: block; }

.link .arrow { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid {Color:Accent}; position: absolute; top: 50%; right: 20px; margin-top: -8px; display: block; }

.link_post .link:hover { border: 1px solid rgba({RGBcolor:Accent}, 0.2); background: rgba({RGBcolor:Accent}, 0.2); }

.link_post .link:active { position: relative; top: 1px; }

#posts .post .caption_and_post_info.after_top_part { border-top: 0; margin: 30px auto auto auto; padding-top: 0; }

.post .caption { width: auto; float: none; }

{block:IfPlaceTimestampInLeftColumn} .post .caption { width: 513px; float: right; } {/block:IfPlaceTimestampInLeftColumn}

.content_source { margin-bottom: 20px; }

.content_source img { margin: 0 0 0 4px !important; opacity: 0.7; vertical-align: middle; }

.caption a, .description a { color: {Color:Accent}; padding: 0 1px; }

.caption a:hover, .description a:hover { background: rgba({RGBcolor:Accent}, 0.13); }

.caption a:active, .description a:active { background: rgba({RGBcolor:Accent}, 0.2); }

.caption h2 { font-size: 32px; line-height: 33px; margin: 0 0 18px 0; }

.caption h2 a { color: #333; font-weight: bold; letter-spacing: -1px; }

.caption h2 a:hover { color: {Color:Accent}; background: transparent; }

.caption blockquote { border-left: 2px solid #E6E6E6; padding: 1px 0 1px 20px; }

.caption pre { background: #eee; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Anonymous Pro", "Courier New", monospace, serif; overflow: scroll; padding: 10px; border-radius: 3px; font-size: 13px; line-height: 19px; }

.caption p, .caption ol, .caption ul, .caption pre, .caption h1, .caption h2, .post h3, .caption h4, .caption h5, .caption blockquote, .caption img, .caption embed, .caption object { margin: 0 0 20px 0; }

.caption p:empty { display: none; }

.caption iframe { display: block !important; }

.post .caption ul, .post .caption ol { margin-left: 18px; }

.caption .question { display: block; padding: 15px; font-size: 15px; }

.caption .answer { margin-top: 20px; }

.caption .asker { line-height: 24px; margin: 25px 20px 0 23px; }

.caption .asker img { float: left; margin: 0 7px 0 0; }

.caption .asker a { margin-left: 0; }

.caption .quote { color: #333; font-weight: bold; }

.quote span { display: inline-block; }

.quote.short_text { font-size: 50px; letter-spacing: -2px; line-height: 48px; margin: 0 0 18px 0; }

.quote.short_text span { margin: 0 0 0 -22px; }

.quote.medium_text { font-size: 36px; letter-spacing: -1px; line-height: 36px; margin: 0 0 20px 0; }

.quote.medium_text span { margin: 0 0 0 -13px; }

.quote.long_text, .quote.text { font-size: 24px; line-height: 27px; margin: 0 0 20px 0; }

.quote.long_text span { margin: 0 0 0 -9px; }

.quote.larger_text { font-size: 50px !important; letter-spacing: -2px !important; line-height: 48px !important; margin: 0 0 18px 0 !important; }

.quote.larger_text span { margin: 0 0 0 -22px !important; }

.quote_source { margin: 0 0 20px 0 !important; }

.caption .conversation { margin-left: 0 !important; margin-bottom: 30px; list-style-type: none; }

.conversation .chat_line { padding: 10px 16px; }

.conversation .chat_line.user1 { background: #f5f5f5; }

.conversation .chat_line.user2 { background: #fff; }

.conversation .chat_line.user3 { background: #ddd; }

.conversation .chat_line.user4 { background: #ccc; }

.post .post_info { width: auto; font-size: 12px; font-family: 'Times New Roman', Times, serif; letter-spacing: 2px; text-transform: uppercase; list-style-type: none; -webkit-font-smoothing: subpixel-antialiased; margin: 1px 0 0 -3px; overflow: hidden; }

.post_info li { line-height: 14px; margin: 10px 0; float: left; }

.post_info li a { margin: 0 10px 0 0; padding: 0 2px 0 5px; }

.post_info .timestamp { color: #4c4c4c; padding: 0 2px 0 5px; display: inline-block; }

.post_info .timestamp:hover { background: rgba(0,0,0,.08); }

.post_info .timestamp:active { background: rgba(0,0,0,.1); }

.post_info .notecount { color: #4c4c4c; padding: 0 2px 0 5px; display: inline-block; }

.post_info .notecount:hover { background: rgba(0,0,0,.08); }

.post_info .notecount:active { background: rgba(0,0,0,.1); }

/* Post controls */

.post_controls { border: 1px solid #e8e8e8; border-radius: 3px; float: left; list-style: none; margin: -10px 15px 15px 0; }

/* requires high specificity */ .post .post_info .post_controls li, .post .post_info.floating .post_controls li { float: left; margin: 0; padding: 7px 15px; height: 21px; }

.post_controls li:first-child { border-right: 1px solid #e8e8e8; }

.post .post_info .post_controls li a, .post .post_info.floating .post_controls li a { margin: 0; padding: 0; }

/* Baselines */

.tag { color: {Color:Accent}; display: table; }

.tag span { color: #4c4c4c; display: table-cell; }

.tag:hover { background: rgba({RGBcolor:Accent}, 0.13); }

.tag:hover span { color: {Color:Accent}; }

.tag:active { background: rgba({RGBcolor:Accent}, 0.2); }

.post .post_info.floating { width: 157px; float: left; }

.post .post_info.floating li { float: none; }

.post_notes { clear: both; }

ol.notes { color: #4C4C4C; font-size: 13px; text-shadow: 0px 1px 0px rgba(255,255,255,.7); text-align: left; list-style-type: none; border-top: solid 1px #E6E6E6; -webkit-font-smoothing: subpixel-antialiased !important; margin: 40px auto auto auto; }

ol.notes li.note { border-bottom: solid 1px #E6E6E6; padding: 9px 0 10px 0; }

ol.notes li.note img.avatar { width: 16px; height: 16px; border-radius: 3px; vertical-align: -4px; margin-right: 6px; }

ol.notes a { color: #4C4C4C; text-decoration: underline; }

ol.notes a:hover { color: #4C4C4C; }

ol.notes li.note blockquote { border-color: #eee; padding: 4px 10px; margin: 10px 0px 0px 25px; }

ol.notes li.note blockquote a { text-decoration: none; }

ol.notes li.note:last-child { border-width: 0px; }

#sidebar { width: 188px; color: #4c4c4c; font-size: 14px; margin: -8px 0 0 0; float: right; }

#sidebar .description { line-height: 21px; border-bottom: 1px solid #E6E6E6; margin: 3px 0 20px 0; padding: 0 0 20px 0; }

#sidebar .links { font-size: 12px; font-family: 'Times New Roman', Times, serif; letter-spacing: 2px; text-transform: uppercase; list-style-type: none; -webkit-font-smoothing: subpixel-antialiased; margin: 0 0 20px 0; line-height: 20px; }

#sidebar .links a { color: #4c4c4c; }

#sidebar .links a:hover { color: {Color:Accent}; }

.links .icon { width: 12px; height: 12px; background: #383838 url('http://static.tumblr.com/thpaaos/1xRm66voi/icons_sprite.png'); margin: 0 8px 0 0; display: inline-block; }

.links a:hover .icon { background-color: {Color:Accent}; }

.ask .icon { background-position: 0 0; margin-bottom: -2px; } .submit .icon { background-position: 0 -12px; margin-bottom: -1px; } .rss .icon { background-position: 0 -24px; } .archive .icon { background-position: 0 -36px; }

.bubble { color: #6f6f6f; font-size: 13px; line-height: 20px; background: #f5f5f5; border: 1px solid #d5d5d5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 8px 12px; position: relative; display: none; }

#twitter_container .bubble:first-child { display: block; }

.bubble .arrow { width: 0; height: 0; position: absolute; display: block; }

.bubble .arrow.fill { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #f5f5f5; bottom: -8px; left: 25px; }

.bubble .arrow.border { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #d5d5d5; bottom: -10px; left: 23px; }

.bubble:hover { background: #f2f2f2; border-color: #CFCFCF; }

.bubble:hover .arrow.fill { border-top-color: #F1F1F1; }

.bubble:hover .arrow.border { border-top-color: #d5d5d5; }

.twitter_username { max-width: 166px; color: #4c4c4c; font-size: 12px; font-family: 'Times New Roman', Times, serif; letter-spacing: 0.4em; text-transform: uppercase; text-overflow: ellipsis; -webkit-font-smoothing: subpixel-antialiased; margin: 11px 0 0 22px; overflow: hidden; display: inline-block; opacity: 1; }

.twitter_username:hover { color: {Color:Accent}; }

#footer { width: 700px; color: #4C4C4C; font-size: 12px; font-family: 'Times New Roman', Times, serif; letter-spacing: 2px; text-transform: uppercase; -webkit-font-smoothing: subpixel-antialiased; }

#footer .copyright { width: 50%; float: left; }

#footer .pagination { width: 230px; text-align: right; float: right; position: relative; }

.pagination .count { float: left; }

.pagination .buttons { width: 113px; height: 30px; margin: -2px 0 0 30px; float: right; position: absolute; top: 0; right: 0; z-index: 10; }

.pagination .buttons.disabled { z-index: 9; }

.buttons a, .buttons li { width: 56px; height: 28px; line-height: 999px; text-align: center; border: 1px solid #C8C8C8; -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1); background: #f1f1f1; /* Old browsers */ background: -moz-linear-gradient(top, #f1f1f1 0%, #e8e8e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f1f1f1 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f1f1f1 0%,#e8e8e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f1f1f1 0%,#e8e8e8 100%); /* IE10+ */ background: linear-gradient(top, #f1f1f1 0%,#e8e8e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e8e8e8',GradientType=0 );/* IE6-9 */ list-style-type: none; overflow: hidden; position: relative; display: block; }

.buttons.disabled li { background: #f5f5f5; }

.buttons a:active { -webkit-box-shadow: none; box-shadow: none; background: #E6E6E6; }

.buttons .arrow { width: 10px; height: 14px; position: absolute; top: 50%; display: block; background-image: url(http://static.tumblr.com/ogedyaw/xu1m8jxnf/arrow_sprite.png); }

.buttons .left { -webkit-border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-bottomleft: 2px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; position: absolute; left: 0; }

.left .arrow { background-position: 0 15px; margin: -7px auto auto 20px; }

.disabled .left .arrow { background-position: 0 0; }

.buttons .right { border-left-width: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; position: absolute; right: 0; }

.right .arrow { background-position: 10px -71px; margin: -7px auto auto 24px; }

.disabled .right .arrow { background-position: 10px -56px; }

/* Protection for parents that have floating children */ #header:after, #container:after, .caption_and_post_info:after, #footer:after .buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style>

{block:PermalinkPage}  <style type="text/css" media="screen"> #container { width: 700px; }

#header { width: 700px; }

#blog_info { width: 513px; margin: 0; }

#blog_avatar { width: 48px; height: 48px; backround-color: red; }

#blog_avatar a { position: absolute; left: auto; right: 0; }

#blog_avatar:hover a { left: auto; right: -8px; }

#sidebar { display: none; }

#blog_info { {block:IfNotShowBlogTitle} width: 632px; margin-top: -7px; float: right; {/block:IfNotShowBlogTitle} }

#blog_info .description { margin-bottom: 60px; }

.post .post_info, .post .post_info.floating, .post .caption { width: auto !important; float: none; }

.post .post_info { margin-top: 45px; }

.post .post_info li, .post .post_info.floating li { line-height: 14px; margin-bottom: 10px; float: left; }

.post .post_info li a, .post .post_info.floating li a { margin: 0 10px 0 0; padding: 0 2px 0 5px; } </style> {block:PermalinkPage}

{block:IfNotShowRightColumn}  <style type="text/css" media="screen"> #container { width: 700px; }

#header { width: 700px; }

#blog_info { width: 513px; margin: 0; }

#blog_avatar { width: 48px; height: 48px; backround-color: red; }

#blog_avatar a { position: absolute; left: auto; right: 0; }

#blog_avatar:hover a { left: auto; right: -8px; }

#sidebar { display: none; }

#blog_info { {block:IfNotShowBlogTitle} width: 632px; margin-top: -7px; float: right; {/block:IfNotShowBlogTitle} }

#blog_info .description { margin-bottom: 60px; }

.post .post_info, .post .post_info.floating, .post .caption { width: auto !important; float: none; }

.post .post_info { margin-top: 45px; }

.post .post_info li, .post .post_info.floating li { line-height: 14px; margin-bottom: 10px; float: left; }

.post .post_info li a, .post .post_info.floating li a { margin: 0 10px 0 0; padding: 0 2px 0 5px; } </style> {/block:IfNotShowRightColumn}

<style type="text/css" media="screen"> {CustomCSS} </style>

</head> <body> {block:IfShowBarOnTop}<section id="color_bar"></section>{/block:IfShowBarOnTop}

<section id="container" class="group"> <header id="header"> <section id="blog_info"> {block:IfShowBlogTitle}<h1><a href="/">{Title}</a></h1>{/block:IfShowBlogTitle} {block:PermalinkPage}{block:IfShowBlogDescription}{block:Description}<div class="description cont">{Description}</div>{/block:Description}{/block:IfShowBlogDescription}{/block:PermalinkPage} {block:IfNotShowRightColumn}{block:IfShowBlogDescription}<div class="cont description"{block:PermalinkPage} style="display:none"{/block:PermalinkPage}>{Description}</div>{/block:IfShowBlogDescription}{/block:IfNotShowRightColumn} </section>

{block:IfShowProfilePhoto} <section id="blog_avatar"> <a href="/" class="avatar"><img src="{PortraitURL-64}"></a> </section> {/block:IfShowProfilePhoto} </header>

<aside id="sidebar"> {block:IfShowBlogDescription}{block:Description}<div class="cont description group">{Description}</div>{/block:Description}{/block:IfShowBlogDescription}

{block:HasPages} <ul class="links"> {block:Pages} <li><a href="{URL}">{Label}</a></li> {/block:Pages} </ul> {/block:HasPages}

<ul class="links" style="display:none;{block:AskEnabled} display:block;{/block:AskEnabled}{block:SubmissionsEnabled} display:block;{/block:SubmissionsEnabled}"> {block:AskEnabled}<li><a href="/ask" class="ask"><span class="icon"></span>ask me anything</a></li>{/block:AskEnabled} {block:SubmissionsEnabled}<li><a href="/submit" class="submit"><span class="icon"></span>submit a post</a></li>{/block:SubmissionsEnabled} </ul>

<ul class="links"> <li><a href="{RSS}" class="rss"><span class="icon"></span>rss</a></li> <li><a href="/archive" class="archive"><span class="icon"></span>archive</a></li> </ul>

{block:Twitter} <aside id="twitter_container" style="display:none"></aside>

document.getElementById("twitter_container").style.display = 'block'; } </script> {/block:Twitter} </aside>

<ul id="posts">  {block:Posts}

{block:Photo} <section class="top media" style="display:block;"> {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"> {LinkCloseTag}{Question} </section> {/block:Photo}

{block:Photoset} <section class="top media photoset"> {Photoset-700} </section> {/block:Photoset}

{block:Link} <section class="top link_post"> <a href="{URL}" class="link">{Name}<span class="arrow"></span></a> </section> {/block:Link}

{block:Audio} <section class="top audio"> {AudioPlayerBlack} </section> {/block:Audio}

{block:Video} <section class="top media"> {Video-700} </section> {/block:Video}

<section class="group caption_and_post_info {block:Photo} after_top_part isphoto{/block:Photo} {block:Photoset} after_top_part isphoto{/block:Photoset} {block:Link} after_top_part islink{/block:Link} {block:Audio} after_top_part isaudio{/block:Audio} {block:Video} after_top_part isvideo{/block:Video} "> {block:Text} <section class="caption group"> {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title} <div class="cont group">{Body}</div> {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Text}

{block:Answer} <section class="caption group"> <div class="cont group">

<div class="question bubble"> {Question} <span class="arrow border"></span> <span class="arrow fill"></span> </div> <div class="asker group"> <img src="{AskerPortraitURL-24}" width="24" height="24" /> {Asker} </div> <div class="answer cont">{Answer}</div> </div> {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Answer}

{block:Photo} <section class="caption group"> {block:Caption} <div class="cont">{Caption}</div> {/block:Caption} {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Photo}

{block:Photoset} <section class="caption group"> {block:Caption} <div class="cont">{Caption}</div> {/block:Caption} {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Photoset}

{block:Quote} <section class="caption group"> <section class="quote {Length}_text {block:IfUseLargerFontForQuotes}larger_text{/block:IfUseLargerFontForQuotes}"><span>“</span>{Quote}”</section> {block:Source} <div class="cont quote_source">— {Source}</div> {/block:Source} {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Quote}

{block:Link} {block:Description} <section class="caption group"> <div class="cont">{Description}</div> {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Description} {/block:Link}

{block:Chat} <section class="caption group"> {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title} <ul class="conversation"> {block:Lines} <li class="chat_line user{UserNumber}"> {block:Label} <strong>{Label}</strong> {/block:Label} {Line} </li> {/block:Lines} </ul> {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Chat}

{block:Audio} {block:Caption} <section class="caption group"> <div class="cont">{Caption}</div> {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Caption} {/block:Audio}

{block:Video} <section class="caption group"> {block:Caption} <div class="cont">{Caption}</div> {/block:Caption} {block:ContentSource} <div class="cont content_source"> <a href="{SourceURL}"> {lang:Source}: {block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo} {SourceTitle} {/block:NoSourceLogo} </a> </div> {/block:ContentSource} </section> {/block:Video}

<ul class=" post_info {block:IfPlaceTimestampInLeftColumn} {block:Text} floating{/block:Text} {block:Answer} floating{/block:Answer} {block:Photo}{block:Caption} floating{/block:Caption}{/block:Photo} {block:Photo}{block:ContentSource} floating{/block:ContentSource}{/block:Photo} {block:Photoset}{block:Caption} floating{/block:Caption}{/block:Photoset} {block:Photoset}{block:ContentSource} floating{/block:ContentSource}{/block:Photoset} {block:Quote} floating{/block:Quote} {block:Link}{block:Description} floating{/block:Description}{/block:Link} {block:Link}{block:ContentSource} floating{/block:ContentSource}{/block:Link} {block:Chat} floating{/block:Chat} {block:Audio}{block:Caption} floating{/block:Caption}{/block:Audio} {block:Audio}{block:ContentSource} floating{/block:ContentSource}{/block:Audio} {block:Video}{block:Caption} floating{/block:Caption}{/block:Video} {block:Video}{block:ContentSource} floating{/block:ContentSource}{/block:Video} {/block:IfPlaceTimestampInLeftColumn} "> {block:Date} <li> <ul class="post_controls group"> <li>{ReblogButton size="21"}</li> <li>{LikeButton size="21"}</li> </ul> </li> {/block:Date} <li><a href="{Permalink}" class=" timestamp {block:Text}has_caption{block:Title} with_title{/block:Title}{/block:Text} {block:Photo}{block:Caption}has_caption{/block:Caption}{/block:Photo} {block:Photoset}{block:Caption}has_caption{/block:Caption}{/block:Photoset}

{block:Quote} {block:Source} {Length}_quote {/block:Source} {/block:Quote}

{block:Link}{block:Description}has_caption{/block:Description}{/block:Link} {block:Chat}chat{block:Title} with_title{/block:Title}{/block:Chat} {block:Audio}{block:Caption}has_caption{/block:Caption}{/block:Audio} {block:Video}{block:Caption}has_caption{/block:Caption}{/block:Video} ">{block:IndexPage}{TimeAgo}{/block:IndexPage}{block:PermalinkPage}{block:Date}{Month} {DayOfMonth}, {Year} ({12Hour}:{Minutes} {AmPm}){/block:Date}{/block:PermalinkPage}</a></li>{block:PermalinkPage}{block:HasTags}{/block:HasTags}{/block:PermalinkPage}

{block:IfShowPostNotes} {block:NoteCount} <li><a class="notecount" href="{Permalink}#notes">{NoteCount} notes</a></li> {/block:NoteCount} {/block:IfShowPostNotes}

{block:IfShowTags} {block:Tags} <li><a class="tag" href="{TagURL}"><span>#</span>{Tag}</a></li> {/block:Tags} {/block:IfShowTags} </ul> {block:PostNotes} <section class="post_notes"> <a name="notes"> {PostNotes} </a> </section> {/block:PostNotes}

{block:IfDisqusShortname}{block:IndexPage} <section class="caption group"> <a class="disquscomments" href="{Permalink}#disqus_thread">{NoteCount} Comments</a> </section> {/block:IndexPage}{/block:IfDisqusShortname} {block:IfDisqusShortname}{block:Permalink} <div id="disqus_thread"></div> <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script> <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript> {/block:Permalink}{/block:IfDisqusShortname}

</section> </li>

{/block:Posts}  </ul>

{block:IfDisqusShortname} <script type="text/javascript"> //<![CDATA[ (function() { var links = document.getElementsByTagName('a'); var query = '?'; for(var i = 0; i < links.length; i++) { if(links[i].href.indexOf('#disqus_thread') >= 0) { query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; } } document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>'); })(); //]]> </script> {/block:IfDisqusShortname}

<footer id="footer"> {block:IfShowCopyrightInFooter} <section class="copyright">© {CopyrightYears} {Title}</section> {/block:IfShowCopyrightInFooter} {block:Pagination} <nav class="pagination"> <section class="buttons"> {block:PreviousPage}<a href="{PreviousPage}" class="left">{lang:Previous page}<span class="arrow"></span></a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" class="right">{lang:Next page}<span class="arrow"></span></a>{block:NextPage} </section> <section class="disabled buttons"> <li class="left"><span class="arrow"></span></li> <li class="right"><span class="arrow"></span></li> </section> <section class="count">Page {CurrentPage} / {TotalPages}</section> </nav> {/block:Pagination} </footer> </section>

{block:IfUseEndlessScrolling} <script type="text/javascript" src="http://assets.tumblr.com/assets/scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript"> var Tumblelog = {};

// AJAX Tumblelog.Ajax = (function(url, callbackFunction) { this.bindFunction = function (caller, object) { return function() { return caller.apply(object, [object]); }; };

this.stateChange = function (object) { if (this.request.readyState==4) this.callbackFunction(this.request.responseText); };

this.getRequest = function() { if (window.ActiveXObject) return new ActiveXObject('Microsoft.XMLHTTP'); else if (window.XMLHttpRequest) return new XMLHttpRequest(); return false; };

this.postBody = (arguments[2] || ""); this.callbackFunction=callbackFunction; this.url=url; this.request = this.getRequest();

if(this.request) { var req = this.request; req.onreadystatechange = this.bindFunction(this.stateChange, this);

if (this.postBody!=="") { req.open("POST", url, true); req.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); req.setRequestHeader('Connection', 'close'); } else { req.open("GET", url, true); }

req.send(this.postBody); } });

// Infinite Scroll Tumblelog.Infinite = (function() {

var _$window = $(window); var _$posts = $('#posts'); var _trigger_post = null;

var _current_page = {CurrentPage}; var _total_pages = {TotalPages}; var _url = document.location.href.split("#")[0]; var _infinite_timeout = null; var _is_loading = false; var _posts_loaded = false;

var _Ajax = Tumblelog.Ajax;

function init() { set_trigger(); enable_scroll(); }

function set_trigger () { var $all_posts = _$posts.find('li.post');

if (!_posts_loaded) { _posts_loaded = $all_posts.length; }

if (_posts_loaded >= 4) { _trigger_post = _$posts.find('li.post:eq(' + ($all_posts.length - 4) + ')').get(0); } else if (_posts_loaded >= 3) { _trigger_post = _$posts.find('li.post:eq(' + ($all_posts.length - 3) + ')').get(0); } else { _trigger_post = _$posts.find('li.post:last').get(0); } };

function in_viewport (el) { if (el == null) return; var top = el.offsetTop; var height = el.offsetHeight;

while (el.offsetParent) { el = el.offsetParent; top += el.offsetTop; }

return (top < (window.pageYOffset + window.innerHeight)); };

function enable_scroll() { $('#footer .pagination').hide(); _$window.scroll(function(){ clearTimeout(_infinite_timeout); infinite_timeout = setTimeout(infinite_scroll, 100); }); }

function disable_scroll() { clearTimeout(_infinite_timeout); $(window).unbind('scroll'); }

function infinite_scroll() { if (_is_loading) return;

if (in_viewport(_trigger_post)) { load_more_posts(); // w00t } };

function load_more_posts() { if (_is_loading) return; _is_loading = true;

// Build URL if (_url.charAt(_url.length - 1) != '/') _url += '/'; if (_current_page === 1) _url += 'page/1'; _current_page++; _url = _url.replace('page/' + (_current_page - 1), 'page/' + _current_page);

// Fetch _Ajax(_url, function(data) { var new_posts_html = data.split('')[1].split('')[0]; var $new_posts = $('#posts', data);

// Insert posts and update counters $('#posts').append(new_posts_html); _posts_loaded = $new_posts.find('li.post').length;

if (_posts_loaded) { var post_ids = []; var like_buttons = $('#posts', data).find('.like_button'); for (var i = 0; i < like_buttons.length; i++) { var button = like_buttons[i]; if ($(button).attr('data-post-id')) { post_ids.push($(button).attr('data-post-id')); } } if (post_ids.length > 0) Tumblr.LikeButton.get_status_by_post_ids(post_ids); }

if ((_posts_loaded > 0) && (_current_page < _total_pages)) { set_trigger(); _is_loading = false;

} else { disable_scroll(); } });

// Stats {block:IfGoogleAnalyticsID} if (typeof window._gaq != 'undefined') { _gaq.push(['_trackPageview', _url]); } {/block:IfGoogleAnalyticsID} }

return { init: init }; });

$(function() { {block:IndexPage} if ( !($.browser.msie && (parseInt($.browser.version, 10) < 9) ) ) { var InfiniteScroll = new Tumblelog.Infinite; InfiniteScroll.init(); } {/block:IndexPage} }); </script> {/block:IfUseEndlessScrolling}

{block:Twitter} <script type="text/javascript" src="/tweets.js"></script> {/block:Twitter}

{block:IfGoogleAnalyticsID} <script type="text/javascript"> var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); </script> {/block:IfGoogleAnalyticsID} </body> </html>

1 note · View note

sdesignermagazine · 4 years

Photo

Level Up Your CSS Skills with these 20 Pro CSS Tips

Front-end development is quickly becoming more and more focused on efficiency – faster loading and rendering through selector choice and minimizing code. Pre-processors like Less and SCSS go a long way in doing some of the work for us, but there are plenty of ways to write minimal, quick CSS the native way. This guide covers 20 Pro CSS Tips to help you cut down on duplicate rules and overrides, standardize the flow of styling across your layouts and will help you create a personal starting framework that is not only efficient, but solves many common problems.

1 – Use a CSS Reset

CSS reset libraries like normalize.css have been around for years, providing a clean slate for your site’s styles that help ensure better consistency across browsers. Most projects don’t really need all of the rules these libraries include, and can get by with one simple rule to remove all the margins and paddings applied to most elements in your layout by the browser’s default box-model:

* { box-sizing: border-box; margin: 0; padding: 0; }

Using the box-sizing declaration is optional – if you follow the Inherit box-sizing tip below, you can skip it.

2 – Inherit box-sizing

Let box-sizing be inherited from html:

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

This makes it easier to change box-sizing when code is introduced through 3rd party plugins or applications that use different behavior.

3 – Get Rid of Margin Hacks With Flexbox

How many times have you tried designing a grid, such as a portfolio or image gallery, where you used floats and then had to clear them or reset margins to get the columns to break into the number of rows you want? Get rid of nth-, first-, and last-child hacks by using the space-between property value in flexbox:

.flex-container { display: flex; justify-content: space-between; } .flex-container .item { flex-basis: 23%; }

4 – Use :not() to Style Borders on Lists

A very common practice in web design has been to use :last-child or :nth-child selectors to undo a style previously declared on the parent selector. Think of a navigation menu that uses borders to create a separator between each link, and the second rule added to take that border off the end:

.nav li { border-right: 1px solid #666; } .nav li:last-child { border-right: none; }

This is quite messy as it not only forces the browser to render things one way, then undo it for a specific selector. Resetting styles this way is sometimes unavoidable, but for the most part, you can use the :not() pseudo-class to only apply a style to the elements you want in one single statement:

.nav li:not(:last-child) { border-right: 1px solid #666; }

This says, put a border on all the .nav list items except the last one. Simple!

Sure, you can also use .nav li + li or even .nav li:first-child ~ li, but :not() will always be more semantic and easy to understand.

5 – Add line-height to body

The one thing that leads to inefficient stylesheets is repeating declarations over and over again. The better you get at planning your project and combining rules, the more fluid your CSS will be. One way to do this is understanding the cascade and how the styles you write for general selectors can be inherited elsewhere. Line height is one property you can set for your entire project, not only to minimize lines of code but to enforce a standard look to your site’s typography.

Rather than add line-height to each <p>, <h*> and so on, add it to body:

body { line-height: 1.5; }

Note we don’t declare a unit here – we just tell it to make the line height one and a half times more than the font size for the rendered text.

6 – Vertically-Center Anything

Setting a global rule to vertically center your layout is a great way to set a foundation for elegantly set content layouts where you’re not ready to use CSS Grid.

html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

7 – Use SVG for Icons

SVG scales well for all resolution types and is supported in all browsers. So ditch your .png, .jpg, or .gif-jif-whatev files. Even FontAwesome now offers SVG Icon Fonts in FontAwesome 5. Setting SVG works just like any other image type:

.logo { background: url("logo.svg"); }

Accessibility tip:If you use SVGs for interactable elements such as buttons, and the SVG fails to load, a rule like this one will help maintain accessibility (make sure it has the appropriate aria attributes set in the HTML):

.no-svg .icon-only:after { content: attr(aria-label); }

8 – Use the “Owl” Selector

Using the universal selector (*) with the adjacent sibling selector (+) provides a powerful CSS capability that allows us to set rules for all elements in the flow of the document that specifically follow other elements:

* + * { margin-top: 1.5rem; }

This is another great trick that can help you create more uniform type and spacing. In the example above, all elements that follow other elements, like an H4 that follows an H3, or a paragraph following another paragraph, will each have at least 1.5rems of space (equal to about 30px.)

9 – Consistent Vertical Rhythm

Consistent vertical rhythm provides a visual aesthetic that makes content far more readable. Where the owl selector may be too general, use a universal selector (*) within an element to create a consistent vertical rhythm for specific sections of your layout:

.intro > * { margin-bottom: 1.25rem; }

10 – Use box-decoration-break For Prettier Wrapped Text

Say you want to apply uniform spacing, margins, highlights or background colors to long lines of text that wrap to more than one line, but don’t want the whole paragraph or heading to look like one large block. The box-decoration-break property allows you to apply styles to just the text while keeping padding and margins intact. This is particularly useful if you want to apply highlights on hover, or style sub-text in a slider to have a highlighted look:

.p { display: inline-block; box-decoration-break: clone; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone; }

The inline-block declaration allows the colors, backgrounds, margins and padding to be applied to each line of text rather than the entire element, and the clone declaration makes sure those styles are applied consistently to each line equally.

11 – Equal-Width Table Cells

Tables can be a pain to work with so try using table-layout: fixed to keep cells at equal width:

.calendar { table-layout: fixed; }

12 – Force Empty Links to Show with Attribute Selectors

This is especially useful for links that are inserted via a CMS, which don’t usually have a class attribute and helps you style them specifically without generically affecting the cascade. For example, the <a> element has no text value but the href attribute has a link:

a[href^="http"]:empty::before { content: attr(href); }

13 – Style “Default” Links

Speaking of link styling, you can find a generic a style in just about every stylesheet. This forces you to write additional overrides and style rules for any links in a child element, and when working with a CMS like WordPress can lead to problems with your king link style trumping a button text color, for example. Try this less-intrusive way to add a style for “default” links:

a[href]:not([class]) { color: #999; text-decoration: none; transition: all ease-in-out .3s; }

Now the style will only apply itself to links that otherwise have no other style rule.

14 – Intrinsic Ratio Boxes

To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:

.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

15 – Style Broken Images

This tip is less about code reduction and more about refining the detail of your designs. Broken images happen for a number of reasons, and are either unsightly or lead to confusion (just an empty element). Create more aesthetically-pleasing with this little bit of CSS:

img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; } img:before { content: "We're sorry, the image below is missing :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }

16 – Use rem for Global Sizing; Use em for Local Sizing

After setting the base font size at the root, for example html{font-size: 15px;}, you can set font-size for containing elements to rem:

article { font-size: 1.25rem; } aside { font-size: .9rem; }

Then set the font size for textual elements to em:

h2 { font-size: 2em; } p { font-size: 1em; }

Now each containing element becomes compartmentalized and easier to style, more maintainable, and flexible.

17 – Hide Autoplay Videos That Aren’t Muted

This is a great trick for a custom user stylesheet when working with content you can’t easily control from the source. This trick will help you avoid annoying your visitors with sound from an auto-playing video when the page is loaded, and again features the wonderful :not() pseudo-selector:

video[autoplay]:not([muted]) { display: none; }

18 – Use :root for Flexible Type

The font size in a responsive layout should be able to adjust to the viewport automatically, saving you the work of writing media-queries just to deal with font sizing. You can calculate the font size based on the viewport height and width using :root: and viewport units:

:root { font-size: calc(1vw + 1vh + .5vmin); }

Now you can utilize the root em unit based on the value calculated by :root:

body { font: 1rem/1.6 sans-serif; }

19 – Set font-size on Form Elements for a Better Mobile Experience

To avoid mobile browsers (iOS Safari, etc.) from zooming in on HTML form elements when a <select> drop-down is tapped, add font-size to the input styles:

input[type="text"], input[type="number"], select, textarea { font-size: 16px; }

20 – Use CSS Variables!

Last but not least, the most powerful CSS level-up comes from CSS variables, which allow you to declare a set of common property values that can be reused via a keyword anywhere in the stylesheet. Your brand may have a set of colors to be used across the project to keep things consistent. Repeating these color values over and over again in your CSS is not only a chore, but also error prone. If a color needs to be changed at some point, your forced to find-and-replace, which is not reliable or fast, and when building products for end-users, variables make customization that much easier. For example:

:root { --main-color: #06c; --accent-color: #999; } h1, h2, h3 { color: var(--main-color); } a[href]:not([class]), p, footer span{ color: var(--accent-color); }

#webdesign #tips & tricks

0 notes

anyhs-themes · 7 years

Text

SlideDown FAQ (English Version)

Click here to preview;

Don't forget to like and/or reblog this post after reading, if it end up being useful to you.

This is the English translation for my "SlideDown FAQ" tutorial. If you want to see the original version, in Portuguese, click here.

For begginers on Tumblr:

Go to the Customize page of your blog and click in "Edit HTML" to open the code of your theme.

In the following steps I will talk about some codes that you'll need to find in your theme code (like </head>, <body> and some others). To find them more easily click in any part of the HTML of your theme (just to "focus/select" the code window) and then press CTRL+F (this command is for Windows, but if you use another operational system it must be someting very similar). This command will open a search bar, like this:

And then, through this search bar, you can search for the codes that you need to find.

Scripts:

You'll need to have the JQuery library in your code, so if you don't have, copy the following code e paste it before </head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

You'll also need to add the Font Awesome icons script, so that those little arrows of the questions will appear. But this step is optional, if you don't want those arrows you don't need to add this code. However, if you want, paste it right below the JQuery code (before </head>):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Right below the Font Awesome icons code (still before </head>) paste the script that will make the answers open when you click on the questions, this is the code:

<script> $(window).ready(function(){ var question = $(".faq").find(".question"); var answer = $(".faq").find(".answer"); question.append('<i class="fa fa-angle-down" aria-hidden="true"></i>'); answer.hide(); question.click(function(){ $(this).next().slideToggle(); $(this).find(".fa").toggleClass("fa-angle-down"); $(this).find(".fa").toggleClass("fa-angle-up"); });}); </script>

CSS:

Now, to make sure that the FAQ will look organized properly, paste its style settings right before </style>:

/** Slide Down FAQ (by https://anyhs-themes.tumblr.com) **/ /** faq container **/ ol.faq {width: 500px; list-style: decimal; margin: 0px auto; padding: 0px; padding-left: 30px;} /** every row of the faq (questions + answers) **/ ol.faq li {margin-bottom: 5px; font-family: 'Helvetica', sans-serif; color: #844d3d; font-size: 14px;} /** questions and answers **/ ol.faq .question, ol.faq .answer {display: block; padding: 10px; margin-left: -30px; border: 1px solid #222; position: relative;} ol.faq .question {text-indent: 25px; color: #999; cursor: pointer; letter-spacing: .5px; background: #1a1a1a;} .answer {color: #777; border-top: none;} /** arrows **/ ol.faq li .fa {position: absolute; top: 0px; right: 0px; padding: 10px;} /** Slide Down FAQ (by https://anyhs-themes.tumblr.com) **/

The code above has the same settings of the preview (same colors, same font, etc.), but you can customize it as your wish, of course.

But I won't be teaching how to customize it to not make this tutorial too extensive, so if you don't know how to change colors, fonts, sizes and etc. in CSS, you will need to learn at least the basics about CSS (I recommend W3Schools.com if you want to learn it).

HTML:

Now, paste the following code in the place of your HTML that you want the FAQ to be (between <body> and </body>):

<ol class="faq"> <li> <span class="question">Question 1</span> <span class="answer">Answer 1</span> </li> <li> <span class="question">Question 2</span> <span class="answer">Answer 2</span> </li> <li> <span class="question">Question 3</span> <span class="answer">Answer 3</span> </li> </ol>

To know where you should put this code you'll also need to understand a little bit about HTML. If you don't, again I recommend W3Schools.com if you want to learn.

Where I wrote "Question 1", in the code above, is where you must write the first question of your FAQ, and where I wrote "Answer 1" is where you must write the answer for this question. And the same goes to the second and third question.

If you want to add more questions to the FAQ, simply copy the following code and paste it before “</ol>”:

<li> <span class="question">Question</span> <span class="answer">Answer</span> </li>

And then you can customize it the same way I just explained to you: write you answer in the place where I wrote "Question" and the answer in the place where I wrote "Answer".

Like or reblog this post if it was useful to you;

In case of any doubt or if you find a error in the tutorial/code, contact me here.

#tutorial #english #faq #slidedown faq #faq style #html #css #javascript #jquery #scripts #codes #code #script

26 notes · View notes

money-insider-1-blog · 4 years

Text

Die 5 besten SEO-Plugins für deine WordPress Website

In diesem Artikel erfährst du was Die besten SEO-Plugins für WordPress Webseiten sind. Die meisten SEO-Plugin sind kostenlos und bieten dir in der Basic Version alle nötigen Funktionen für die Onepage-Optimierung. Die hier vorgestellten Plugins habe ich zum Teil selbst ausprobiert und nutze sie schon seit Jahren für meine WordPress Webseiten.

1. Yoast

Ich arbeite bereits seit 2017 mit dem SEO Plugin Yoast, dazwischen habe ich auch Plugins wie All in one wp SEO und Delucks SEO gestetset. Yoast gehört nicht nur zu den bekanntesten SO Plugins, sondern auch zu den beliebtesten SEO-Plugins. Die kostenlose Basic Version reicht dabei vollkommen aus. Du kannst die Keyword Suche optimieren, die Lesbarkeit von Artikeln verbessern, die Metallbeschreibung anpassen und Permalinks bearbeiten. Bei der Basic Version von Yoast kannst du ein Fokus Keyword festlegen, zu dem der Artikel ranken soll. Das Plugin bieten sehr umfangreiche Funktionen zur Onapage-Optimierung.

2. Rank Math

Rank Math ist bei Bloggern inzwischen bekannt, ich habe allerdings das erste Mal im April diesen Jahres davon gehört. Ich hatte einige SEO-Plugins getestet unter anderem Delucks SEO und Squirrly SEO, aber Rank Math hat mich überzeugt. Es bietet dir alle Funktionen die Yoast auch mit an Bord hat. Und das sogar in der kostenlosen Version. Rank Math bietet dir sogar mehr als die Basic Version von SEO unter anderem eine Schnittstelle zur Google Search Console. Kurz es ist das Schweizer Taschenmesser und der Geheimtipps unter den SEO Tools. Es enthält alles Features, die du für eine Onpage-Optimierung benötigst. Alle Informationen über deine Keyword-Optimierung die Daten aus der Google Search Consoel findest du im Dashboard. So siehst du auf einen Blick, welche Fehler deine Webseite hat und wo noch Optimierungsbedarf besteht. Rank Math biete aber mehr als die das Festlegen von einem Fokuskeyword, du kannst damit bis zu 5 Keywords

3. Delucks SEO

Eigentlich habe ich mit Delucks SEO recht gern gearbeitet und plante sogar ein Wechsel von Yoast zu Delucks SEO, aber das war bevor ich rank Math kannte. Denn Delucks SEO mag gerade für Laien etwas verwirrend wirken. Die Metadaten finden sich direkt auf dem Dashboard und können bearbeitet werden, ohne die Inhalte zu öffnen. Du kannst also Artikel optimieren und Inhalte aus der Übersicht anpassen. Das coole ist das dieses Plugin kostenlos genutzt werden kann und komplett auf Deutsch ist. Auch die Premium Version für 60 Euro finde ich akzeptabel. Die Basic Version bietet aber deutlich weniger Funktionen als wie bei Yoast oder Rank Math. Erst mit der Premium Version kommt man in den Genuss von Bildoptimierung, Mikrodaten, Sterne-Bewertungen und Bradcrumbs. Das Plugin gibt es sowohl auf Deutsch als auch in Englisch und was mir bei Delucks SEO gut gefallen hat, ist das du bestehende Arten von wpSEO und Yoast einfach übernehmen kannst.

4. All. in Wp SEO

Das all in One SEO Pack ist nach Yoast das bekannteste SEO-Plugin. Ich habe es mir näher angesehen und kann dazu sagen, dass es sich perfekt für Einsteiger eignet. Das Plugin bietet eine gute Übersicht über alle Funktionen und einfache Bedingung. Zudem werden viele Onepage Optimierungen automatisch generiert. Den das Plugin biete alle Funktionen für die Onpeage Optimierung mit Support. Die Pro-Version für Einzelunternehmer aber relativ teuer und eignet sich in erster Linie auch für Online-Shop Betreiber. Ansonsten sind sich All n SEO und Yoast vom Funktionsumfang her relativ ähnlich. Das Plugin verfügt aber über besonders Features um schädliche Bots blockieren, um Spam zu verhindern und Meta-descriptons automatisch zu generieren. Auch die Überprüfung von Duplicate Content ist eine Funktion dies das Plugin bereits mitliefert.

5. wp.seo

Das wpSEO stammt von deutschen Entwicklern und bezeichnet sich selbst als Schweizer Taschenmesser für SEO. Das kostenpflichtige SEO Plugin gibt es bereits für einmalige 39 €. Es kann aber auch für 30 Tage kostenlos getestet werden. das Plugin bietet dabei die wichtigsten Funktionen für eine gute Onepage Optimierung, darunter Title, Meta Descirpotn, und Sitemap. Ob als Laie oder Profi, wpSEO ist eines der besten Plugins für die Suchmaschinenoptimierung. Viele Einstellungen die wpSEO vorschlägt können einfach automatisch übernommen werden. Im Gegensatz zu anderen wpSEO Plugins benötigt wp SEO weniger Arbeitsspeicher und ist sogar etwas schneller als Yoast.

Fazit - Warum ich mich für Rank Math entschieden habe Durch meine Aufgaben als Virtuelle Assistenz lernte ich das Plugin Yoast SEO intensiver kennen und schätzen. Nahezu auf allen Nischenseiten arbeitete ich mit Yoast oder Delucks SEO. Trotzdem nervten mich die grünen Ampeln manchmal und es bleib immer so ein Bauchgefühl ob Yoast die richtige Wahl ist oder nicht. Anfang April bin ich dann auf Rank Math gestoßen und habe das Plugin einem Test unterzogen. Den Wechsel habe ich nicht bereut, den bei Rank Math wurde mir genau gezeigt, wo ich meine Inhalte optimieren kann und wie ich mein Ranking verbessern kann. Mehr vom Money Insider 1 Blog Du hast eine Frage zum aktuellen Artikel oder möchtest etwas ergänzen, dann nutze die Kommentarfunktion Hast du eine persönliche Anfrage?, dann schreib an [email protected] Folge mir auf Facebook oder Twitter Abonniere meinen YouTube Kanal div#sib_embed_signup .needsfilled input {border-color: #B94A48 !important; color: #B94A48 !important;} div#sib_embed_signup .needsfilled {color: #B94A48 !important;} div#sib_embed_signup input {border: 1px solid #CCCCCC;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;} div#sib_embed_signup input::-webkit-inner-spin-button, div#sib_embed_signup input::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none; margin:0; } div#sib_embed_signup input {-moz-appearance: textfield;} div#sib_embed_signup div.message_area {position: relative;padding: 10px 30px 10px 10px; margin: 0px 0px 10px 0px;font-size:14px; border-radius: 5px;-webkit-border-radius: 5px; -moz-border-radius: 5px;box-sizing: border-box;} div#sib_embed_signup div.message_area button.close {position: absolute;right: 8px;top: 8px;color: inherit;background: 0 0;border: 0;padding: 0px;-webkit-appearance: none;cursor: pointer;font-weight: bold;font-size: 14px;} .tipicon{cursor: pointer;padding: 3px 7px;font-size: 12px;font-weight: bold;line-height: 1.2;color: #fff;text-align: center;vertical-align: baseline;background-color: #999;border-radius: 10px;text-decoration: none;} .tooltip{display: inline;position: absolute;left: 97%;} .tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;color: #fff;content: attr(data-title);right: -2px;bottom: 26px;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;} .tooltip_small:hover:after{padding: 5px 5px; width: 150px;} .tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 1px;position: absolute;z-index: 99;} .sib-dropdown-menu.flag-icon {display: none;height: 100px;overflow-x: hidden;min-width: 230px;font-size: 13px;list-style: none;padding-left:14px;border:1px solid rgba(0,0,0,.15);background: white;border-radius: 4px;margin-top:10px;} .sib-dropdown-menu.flag-icon li a{display: block;white-space: nowrap;text-decoration: none;color: rgba(0,0,0,0.87);box-shadow: none;} .sms_field .country-block{margin-right: 3px !important;float: left;width:56px;} .icon-arrow{display: inline-block;width:0px;height: 0px;margin-left:2px;margin-top:5px;border-top:4px dashed;border-right:4px solid transparent;border-left:4px solid transparent;vertical-align: text-top;} .sib-dropdown-toggle.country-flg{display: inline-block;font-size: 13px;} body {background-Image: url('');} body {background-color: #ffffff;} div#sib_embed_signup .sib-container {background: rgba(214,255,223,1);} div#sib_embed_signup .sib-container h1 {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;} div#sib_embed_signup h1.title {font-size: 28px;} div#sib_embed_signup .sib-container .forms-builder-footer, div#sib_embed_signup .sib-container .description, div#sib_embed_signup .sib-container .fake-label, div#sib_embed_signup .sib-container .row, div#sib_embed_signup .sib-container #company-name{font-family: Palatino, 'Palatino Linotype', 'Hoefler Text', Times, 'Times New Roman', serif;} div#sib_embed_signup .forms-builder-footer,div#sib_embed_signup div.description,div#sib_embed_signup .fake-label,div#sib_embed_signup .row {font-size: 15px;} div#sib_embed_signup .sib-container .button {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;} div#sib_embed_signup .button{font-size: 12px;} div#sib_embed_signup input {font-size: 13px;} div#sib_embed_signup .sib-containter h1 {color: #917223;} div#sib_embed_signup .sib-container {color: #343434;} div#sib_embed_signup .sib-container .button{color: #ffffff;} div#sib_embed_signup .sib-container .button{background: #917a3f;} div#sib_embed_signup .forms-builder-wrapper{ max-width: 350px;} div#sib_embed_signup .sib-container{ padding: 25px 15px 15px;} div#sib_embed_signup .header{ padding: 0 10px;} div#sib_embed_signup h1.title{ lineHeight: 40px;} div#sib_embed_signup h3.company-name{ lineHeight: 20px;} div#sib_embed_signup div.description{ padding: 10px 15px;} div#sib_embed_signup div.row{ padding: 10px;} div#sib_embed_signup input{ padding: 8px 4px; width:100% !important;box-sizing: border-box;} div#sib_embed_signup input{ padding: 8px 4px; width:100% !important;box-sizing: border-box;} div#sib_embed_signup .tooltip{ left: 98%;} div#sib_embed_signup div.message_area{ font-size: 12px;}

Erhalte die besten Tipps und Strategien für WordPress & Online Marketing Read the full article

0 notes

jonasmaurer · 5 years

Text

7-day reset signup!

Hi friends! Happy Monday! I hope you’re having a lovely day. I’ll be back soon with some adventures from the weekend, plus some other fun posts I have ready to go (a raw brownie recipe + a super random vulnerable post), but in the meantime, I wanted to share the signup for the 7-day reset.

This starts 1 week from today and I’m so excited to share it with you all!

Here’s what the 7-day reset is:

– A chance to reset healthy habits as we head into the holiday season. We set our intentions for the week and really dial into what our body is needing to feel energized and amazing as we begin October and the catapult into the end of the year. With everything we have going on, it can be really easy to let our strategies and habits slide at a time when we need them the most. (For example, I probably meditate the least in December and that’s when I could easily use it the most.)

Here’s what you’ll get:

– A 7-day workout plan with quick video tutorials for each day. This is where I’ll share modification and postpartum options. All workouts can be completed at home using a pair of dumbbells and a killer playlist.

– 7 days of healthy meal ideas. I’ll share some of the staples I’ve been loving lately, which include lots of plant-based and gluten-free options.

– Daily emails from me with your workout tutorial or tip for the day, plus a sprinkle of motivation mojo.

– A Facebook group to stay accountable throughout the week where you can check in, ask questions, and get support from fitness-loving friends all over the world. This is where I’ll do next week’s live workout and also share some of my tips for fueling throughout the day, decreasing sugar intake, and answer any live questions.

– The cost? Free fifty.

This is all at no charge and I’m super pumped to work out, connect with ya’ll, and share some of my favorite healthy tips as we head into this crazy amazing season.

Here’s how to sign up:

Simply add your email address to the widget below or this link here! I’ll email you the 7-day workout plan, Facebook group info, and meal ideas this Friday so we’re ready to rock and roll on Monday.

.formkit-form[data-uid="fa4d487f10"] *{font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;box-sizing:border-box;}.formkit-form[data-uid="fa4d487f10"]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.formkit-form[data-uid="fa4d487f10"] legend{border:none;font-size:inherit;margin-bottom:10px;padding:0;position:relative;display:table;}.formkit-form[data-uid="fa4d487f10"] fieldset{border:0;padding:0.01em 0 0 0;margin:0;min-width:0;}.formkit-form[data-uid="fa4d487f10"] body:not(:-moz-handler-blocked) fieldset{display:table-cell;}.formkit-form[data-uid="fa4d487f10"] h1,.formkit-form[data-uid="fa4d487f10"] h2,.formkit-form[data-uid="fa4d487f10"] h3,.formkit-form[data-uid="fa4d487f10"] h4,.formkit-form[data-uid="fa4d487f10"] h5,.formkit-form[data-uid="fa4d487f10"] h6{color:inherit;font-size:inherit;font-weight:inherit;}.formkit-form[data-uid="fa4d487f10"] p{color:inherit;font-size:inherit;font-weight:inherit;}.formkit-form[data-uid="fa4d487f10"][data-format="modal"]{display:none;}.formkit-form[data-uid="fa4d487f10"][data-format="slide in"]{display:none;}.formkit-form[data-uid="fa4d487f10"] .formkit-input,.formkit-form[data-uid="fa4d487f10"] .formkit-select,.formkit-form[data-uid="fa4d487f10"] .formkit-checkboxes{width:100%;}.formkit-form[data-uid="fa4d487f10"] .formkit-button,.formkit-form[data-uid="fa4d487f10"] .formkit-submit{border:0;border-radius:5px;color:#ffffff;cursor:pointer;display:inline-block;text-align:center;font-size:15px;font-weight:500;cursor:pointer;margin-bottom:15px;overflow:hidden;padding:0;position:relative;vertical-align:middle;}.formkit-form[data-uid="fa4d487f10"] .formkit-button:hover,.formkit-form[data-uid="fa4d487f10"] .formkit-submit:hover,.formkit-form[data-uid="fa4d487f10"] .formkit-button:focus,.formkit-form[data-uid="fa4d487f10"] .formkit-submit:focus{outline:none;}.formkit-form[data-uid="fa4d487f10"] .formkit-button:hover > span,.formkit-form[data-uid="fa4d487f10"] .formkit-submit:hover > span,.formkit-form[data-uid="fa4d487f10"] .formkit-button:focus > span,.formkit-form[data-uid="fa4d487f10"] .formkit-submit:focus > span{background-color:rgba(0,0,0,0.1);}.formkit-form[data-uid="fa4d487f10"] .formkit-button > span,.formkit-form[data-uid="fa4d487f10"] .formkit-submit > span{display:block;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;padding:12px 24px;}.formkit-form[data-uid="fa4d487f10"] .formkit-input{background:#ffffff;font-size:15px;padding:12px;border:1px solid #e3e3e3;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;line-height:1.4;margin:0;-webkit-transition:border-color ease-out 300ms;transition:border-color ease-out 300ms;}.formkit-form[data-uid="fa4d487f10"] .formkit-input:focus{outline:none;border-color:#1677be;-webkit-transition:border-color ease 300ms;transition:border-color ease 300ms;}.formkit-form[data-uid="fa4d487f10"] .formkit-input::-webkit-input-placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="fa4d487f10"] .formkit-input::-moz-placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="fa4d487f10"] .formkit-input:-ms-input-placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="fa4d487f10"] .formkit-input::placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="fa4d487f10"] [data-group="dropdown"]{position:relative;display:inline-block;width:100%;}.formkit-form[data-uid="fa4d487f10"] [data-group="dropdown"]::before{content:"";top:calc(50% - 2.5px);right:10px;position:absolute;pointer-events:none;border-color:#4f4f4f transparent transparent transparent;border-style:solid;border-width:6px 6px 0 6px;height:0;width:0;z-index:999;}.formkit-form[data-uid="fa4d487f10"] [data-group="dropdown"] select{height:auto;width:100%;cursor:pointer;color:#333333;line-height:1.4;margin-bottom:0;padding:0 6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:15px;padding:12px;padding-right:25px;border:1px solid #e3e3e3;background:#ffffff;}.formkit-form[data-uid="fa4d487f10"] [data-group="dropdown"] select:focus{outline:none;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"]{text-align:left;margin:0;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"]{margin-bottom:10px;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] *{cursor:pointer;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"]:last-of-type{margin-bottom:0;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] input[type="checkbox"]{display:none;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] input[type="checkbox"] + label::after{content:none;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] input[type="checkbox"]:checked + label::after{border-color:#ffffff;content:"";}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] input[type="checkbox"]:checked + label::before{background:#10bf7a;border-color:#10bf7a;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] label{position:relative;display:inline-block;padding-left:28px;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] label::before,.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] label::after{position:absolute;content:"";display:inline-block;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] label::before{height:16px;width:16px;border:1px solid #e3e3e3;background:#ffffff;left:0px;top:3px;}.formkit-form[data-uid="fa4d487f10"] [data-group="checkboxes"] [data-group="checkbox"] label::after{height:4px;width:8px;border-left:2px solid #4d4d4d;border-bottom:2px solid #4d4d4d;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);left:4px;top:8px;}.formkit-form[data-uid="fa4d487f10"] .formkit-alert{background:#f9fafb;border:1px solid #e3e3e3;border-radius:5px;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;list-style:none;margin:25px auto;padding:12px;text-align:center;width:100%;}.formkit-form[data-uid="fa4d487f10"] .formkit-alert:empty{display:none;}.formkit-form[data-uid="fa4d487f10"] .formkit-alert-success{background:#d3fbeb;border-color:#10bf7a;color:#0c905c;}.formkit-form[data-uid="fa4d487f10"] .formkit-alert-error{background:#fde8e2;border-color:#f2643b;color:#ea4110;}.formkit-form[data-uid="fa4d487f10"] .formkit-spinner{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:0px;width:0px;margin:0 auto;position:absolute;top:0;left:0;right:0;width:0px;overflow:hidden;text-align:center;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}.formkit-form[data-uid="fa4d487f10"] .formkit-spinner > div{margin:auto;width:12px;height:12px;background-color:#fff;opacity:0.3;border-radius:100%;display:inline-block;-webkit-animation:formkit-bouncedelay-formkit-form-data-uid-fa4d487f10- 1.4s infinite ease-in-out both;animation:formkit-bouncedelay-formkit-form-data-uid-fa4d487f10- 1.4s infinite ease-in-out both;}.formkit-form[data-uid="fa4d487f10"] .formkit-spinner > div:nth-child(1){-webkit-animation-delay:-0.32s;animation-delay:-0.32s;}.formkit-form[data-uid="fa4d487f10"] .formkit-spinner > div:nth-child(2){-webkit-animation-delay:-0.16s;animation-delay:-0.16s;}.formkit-form[data-uid="fa4d487f10"] .formkit-submit[data-active] .formkit-spinner{opacity:1;height:100%;width:50px;}.formkit-form[data-uid="fa4d487f10"] .formkit-submit[data-active] .formkit-spinner ~ span{opacity:0;}.formkit-form[data-uid="fa4d487f10"] .formkit-powered-by[data-active="false"]{opacity:0.35;}@-webkit-keyframes formkit-bouncedelay-formkit-form-data-uid-fa4d487f10-{0%,80%,100%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}40%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes formkit-bouncedelay-formkit-form-data-uid-fa4d487f10-{0%,80%,100%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}40%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}} .formkit-form[data-uid="fa4d487f10"]{max-width:700px;}.formkit-form[data-uid="fa4d487f10"] [data-style="clean"]{width:100%;}.formkit-form[data-uid="fa4d487f10"] .formkit-fields{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 auto;}.formkit-form[data-uid="fa4d487f10"] .formkit-field,.formkit-form[data-uid="fa4d487f10"] .formkit-submit{margin:0 0 15px 0;-webkit-flex:1 0 100%;-ms-flex:1 0 100%;flex:1 0 100%;}.formkit-form[data-uid="fa4d487f10"] .formkit-powered-by{color:#7d7d7d;display:block;font-size:12px;margin:0;text-align:center;}.formkit-form[data-uid="fa4d487f10"][min-width~="700"] [data-style="clean"],.formkit-form[data-uid="fa4d487f10"][min-width~="800"] [data-style="clean"]{padding:10px;}.formkit-form[data-uid="fa4d487f10"][min-width~="700"] .formkit-fields[data-stacked="false"],.formkit-form[data-uid="fa4d487f10"][min-width~="800"] .formkit-fields[data-stacked="false"]{margin-left:-5px;margin-right:-5px;}.formkit-form[data-uid="fa4d487f10"][min-width~="700"] .formkit-fields[data-stacked="false"] .formkit-field,.formkit-form[data-uid="fa4d487f10"][min-width~="800"] .formkit-fields[data-stacked="false"] .formkit-field,.formkit-form[data-uid="fa4d487f10"][min-width~="700"] .formkit-fields[data-stacked="false"] .formkit-submit,.formkit-form[data-uid="fa4d487f10"][min-width~="800"] .formkit-fields[data-stacked="false"] .formkit-submit{margin:0 5px 15px 5px;}.formkit-form[data-uid="fa4d487f10"][min-width~="700"] .formkit-fields[data-stacked="false"] .formkit-field,.formkit-form[data-uid="fa4d487f10"][min-width~="800"] .formkit-fields[data-stacked="false"] .formkit-field{-webkit-flex:100 1 auto;-ms-flex:100 1 auto;flex:100 1 auto;}.formkit-form[data-uid="fa4d487f10"][min-width~="700"] .formkit-fields[data-stacked="false"] .formkit-submit,.formkit-form[data-uid="fa4d487f10"][min-width~="800"] .formkit-fields[data-stacked="false"] .formkit-submit{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}

xoxo,

Gina

The post 7-day reset signup! appeared first on The Fitnessista.

7-day reset signup! published first on https://olimpsportnutritionde.tumblr.com/

0 notes

go-redgirl · 7 years

Text

CONFUSION: Maxine Waters accuses Ben Carson of being ‘white-wing nationalist’ August 18, 2017 By Kyle Olson

Maxine Waters’s latest rant against Donald Trump and his administration was so unhinged, it amounted to word spittle that could be hear on any street corner in L.A.

Appearing before the Los Angeles Community Review Board, Waters launched into Trump, Treasury Secretary Steve Mnuchin and HUD Secretary Ben Carson.

Complaining there is “uncertainty” because of the Trump administration, Waters said, “Mr. Mnuchin, who is the Treasury Secretary, who is responsible for over 36,000 foreclosures in this area, is now the Secretary of the Treasury,” repeating herself.

“Standing next to him just yesterday, or day before yesterday, I’m getting these days mixed up,” the 79-year-old California congresswoman said.

She continued, “While the president was defending the white-wing (sic) nationalists and the KKK and all of those alt-right groups that were basically out there in Virginia literally beating and marching and ranting about Jews and black people, etc., etc.,” she said.

“But, this is what this Cabinet looks like,” she added, turning to Trump’s personnel, “where we talking about Mnuchin or Ben Carson,” as the audience whooped on the attack.

Waters then promised she would skewer him soon.

“He’s got to come before my committee. If you think ‘reclaiming my time’ that I did with Mnuchin, you wait till Ben Carson comes,” she said as the crowd erupted.

1 note · View note

ebuymore · 3 years

Text

Daisy Flower Storage Extension High Speed Memory Disk Shockproof Flash Drive

img{max-width:100%} *{margin:0;padding:0;} .wrapper{width:99.5%;height:auto;border:1px solid #ccc;margin:0 auto;} #desc_div iframe{width:1430px!important;} .clear{clear:both;} .clear10{clear:both;height:10px;} .fl{float:left;} .fr{float:right;} @media screen and (min-width:769px){ .box{width:1430px;margin:0 auto;overflow-x: scroll;overflow-y: hidden;} .bottombanner{width:97.8%;border:1px solid #ccc;height:200px;padding: 8px 0px 10px 22px;margin:0 auto;} .bottombanner-img{width:100%;height:100%;} .bottombanner-img ul li{float:left;list-style:none;margin-right:1.5%;margin-left:1%;border:1px solid #ccc;width:230px; height:190px;padding:5px;} .bottombanner-img ul{margin:0;padding:0;} .bottombanner-img ul li img{width:220px;height:180px;padding:5px;} .logo{border:1px solid #ccc;width:260px;height:200px;} .logo img{width:240px;height:190px;} .right-info_conleft{width:48%;float:left;} #also-like .like-pro2{width:25%;float:left;margin-right:20px;} } @media screen and (max-width:768px) { .box{width:100%;margin:0 auto;overflow-x: scroll;overflow-y: hidden;} .bottombanner{width:95.6%;margin:0 auto;border:1px solid #ccc;height:auto;padding:10px;display:none;} .bottombanner-img{border:1px solid #ccc;width:100%;} .bottombanner-img ul li{float:left;list-style:none;margin-right:3%;margin-bottom:3%;border:1px solid #ccc;width:200px;height:200px;} .bottombanner-img ul li img{ } .logo{border:1px solid #ccc;width:260px;height:150px;} .like-pro2,like-pro-buy2{width:99%;margin:0 auto;} .right-info_conleft{width:100%%;clear:both;} #also-like .like-pro-buy2{ line-height: 30px;width:98%;} #also-like .like-pro2{width:99%; margin-right:20px;text-align:center;} } .shipping h4 { background: url("https://p.ebaystatic.com/aw/pics/cmp/ui/sprPanelGrads.gif") repeat-x scroll 0 -130px transparent; margin-left: -20px; border-bottom: 1px solid #CCCCCC; padding: 3px 5px 3px; font-size: 13px; line-height: 24px; } /*----- base -----*/ body {font-family:Verdana, Geneva, sans-serif; color:#333;} * {font-size:12px; line-height:24px;} a {text-decoration:none; color:#0654BA;} a:hover {text-decoration:underline;} #no-border {border:0 none;} body,h1,h2,h3,h4,ul,li,dl,dt,dd,p {margin:0; padding:0;} /*----- ul,li {list-style:none;}-----*/ table{border-collapse:collapse;} /*----- main -----*/ .main {padding:0 0 10px 0; max-width:100%; width:100%;} .top {margin-bottom:20px;} .top-nav {height:20px; width:98%; background-color:#999; padding:10px 9px 8px 17px; color:#FFF;} .top-nav-logo {float:left;} .top-nav-icon {float:right;} .top-content {padding:25px 21px 16px 29px; background-color:#F1F1F1; margin-top:1px;} .top-content hr {height:1px; border:0; border-bottom:1px solid #ccc;} .top-content-list a {border-right:1px solid #111; padding:0 10px;} .left-content {width:18%; padding-bottom:30px; float:left;} .left-content a {color:#7b7b7b;} .left-nav-list {border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; color: #333333; font-family: Arial; font-size: small; vertical-align: top; padding:10px; word-wrap:break-word;} .left-content dl dt {list-style-position:inside;list-style-type: square; font-weight:bolder;} .left-content dl dd {padding-left:5px;} .right-content {float:right;width:81%;*width:79% !important;*width:79%;width:expression_r(document.body.clientWidth > 79%? "79%": "auto" );} .right-banner {border-top:4px solid #999; clear:both; margin-bottom:10px;} .right-logo {float:left;} .right-nav {float:right; margin-top:47px;} .right-nav ul li {float:left; width:173px; height:39px; margin-left:18px;} .right-nav a {background:url(https://linkca.bosity.com/picture/Thestylehome/test/nav-bg.jpg); display:block; color:#5c5c5c; font-weight:bolder; text-align:center; line-height:39px;} .right-nav a:hover {text-decoration:none; background:url(https://linkca.bosity.com/picture/Thestylehome/test/nav-bg-hover.jpg);} .right-pro {border:1px solid #CCCCCC; padding:1em; margin:0 0 20px 0;display:inline-block;} #bigImg img, .bigImg img {border:1px solid #d7d7d7;height:auto;width:360px;width:100%;} .bigImg img {max-width:500px !important;} #smallImg img, .smallImg img { border:1px solid #d7d7d7; cursor:pointer;height:80px;} #smallImg{margin:0 auto;} .description li, .right-info-content li {list-style:inside disc; padding-left:20px;} .description p, .right-info-content p {margin:10px;} .description ul li{width: 95%;word-wrap: break-word;word-break: break-all;white-space: normal;} .description ul li p{display:inline;} .right-info-title {background-color:#e2e2e2; height:33px; line-height:33px; color:#666666;} .right-info-title h3 {float:left; background:url(https://linkca.bosity.com/picture/Thestylehome/test/box-title-bg.jpg) center right no-repeat #cecece; padding:0 58px 0 20px; min-width:120px; text-shadow:1px 1px rgba(255, 255, 255, 0.5); line-height:33px;} .back-top a {float:right; margin-right:20px; color:#666;} .pro-like {height:1px; border:none; border-top:1px solid #CCC; margin:20px 0;} #also-like li {list-style:none;} #also-like h3 {padding-left:38px; position:relative;} #also-like h3:before {content:""; background:url(https://linkca.bosity.com/picture/Thestylehome/test/also-like-icon.jpg); height:33px; width:38px; display:block; position:absolute; left:0;} #also-like .like-pro {float:left; margin-right:20px;} #also-like .plus {text-align: center; padding: 0 5px 0 5px; font-size: 150%; font-weight: bold; color: #999;} #also-like .like-pro-buy {line-height:30px; float:left;} #also-like #all-price {font-size:18px;} #also-like .like-pro-price, .right-pro .like-pro-price {font-size:14px; font-weight:bolder; color:#666;} #also-like .like-pro-title-price {color:#666; padding-left:20px;} #also-like .tg-price, .right-pro .tg-price {color:#333; font:bold medium Trebuchet,"Trebuchet MS";} #also-like .tg-price-no, .right-pro .tg-price-no{color:#222; text-decoration:line-through;} #also-like .tg-price-save, .right-pro .tg-price-save {color:#5BA71B; font-family:'Helvetica neue', Helvetica, Arial, sans-serif !important; font-weight:bolder; font-size:12px;} #also-like .tg-button-box {margin-top:10px;} #also-like .tg-button {background-color:#4189CC; background-image:-webkit-gradient(linear,0 0,0 100%,from(#6EBDE2),to(#003DAD)); background-image:-moz-linear-gradient(top,#6EBDE2,#003DAD); background-image:linear-gradient(top,#6EBDE2,#003DAD); color:#FFF; border-radius:3px; font-family: 'Trebuchet MS'; font-size:15px; font-weight:bolder; padding:5px 16px;} #also-like .tg-button:hover {background:-webkit-gradient(linear,0 0,0 100%,from(#75CDF7),to(#003DAD)); background:-moz-linear-gradient(top,#75CDF7,#003DAD); background:linear-gradient(top,#75CDF7,#003DAD); text-decoration:none;} .left-content h3{background-color:none;color:#000;padding:0} .asqHeader{background: url("https://p.ebaystatic.com/aw/pics/cmp/ui/sprPanelGrads.gif") repeat-x scroll 0 -130px transparent; border: 1px solid #CCCCCC; border-bottom:none; padding: 3px 5px 3px;} .sh-info-lnk{margin-top:8px;*margin-top:-10px !important;*margin-top:-10px;} .asqFooter{background: url("https://p.ebaystatic.com/aw/pics/cmp/ui/sprPanelGrads.gif") repeat-x scroll 0 -780px #E8E8E8; border: 1px solid #CCCCCC; font-size: 12px; line-height: 16px; margin-top: 0; padding: 2px 10px 2px;} #also-like p{text-align:left;margin:0; padding:0;} .right-info-content{padding:20px 10px; background:#EBF7E9;} .asqContent{border: 1px solid #CCCCCC; border-top:none;} .bigImg {text-align:center;} .minImgList{margin-left:2px;} .asqContent ul{padding:10px 0 0 10px;margin:0px 20px 10px 20px;} .mid_menu{height:52px;} .menu_logo{width:15%; float:left;} .menu_right{width:80%; float:right;} .menu_right ul{padding-top:16px; padding-right:20px;} .menu_right ul li{float:right; list-style:none; background:url("https://pics.ebaystatic.com/aw/pics/cmp/ds2/sprTabs.png") repeat-x scroll 0 0 transparent; margin:0 2px; border:1px solid #bbb;border-radius:5px; width:16%;} .menu_right ul li:hover{background:#f6f6f6;} .menu_right ul li a{color:#000; font-weight:bold;display:block; height:30px; line-height:30px; text-align:center;} .menu_right ul li a:hover{color:#002398; text-decoration:none;} .right_title{text-align:center; padding-bottom:15px;} .right_title p{font-size:16px; font-weight: bold;} .right_ul{padding: 0px 0px 0px 25px; margin: 0px; list-style-type: disc;} .like-pro-price-both{clear:both; *margin-bottom:-10px !important;*margin-bottom:-10px;} .like-pro-price-style{line-height:50px;text-align:left;padding-top:20px} .like-pro-buy-float{width:400px; float:left} .like-pro-float{float:left} .like-pro-center{text-align:center} .sh-info-sch{width:65%; margin-right:5px;} .like-pro2 img{width:120px; height:120px;} .like-pro-buy2 h2{font-size:12px;height:70px; font-weight:normal;} top_ad a, top_ad a:link{text-decoration:none} top_ad a:focus, top_ad a:hover{text-decoration:underline} .stk_ad h3{color: #333333;float: left;font-family: "Helvetica neue",Helvetica,Arial,Verdana,sans-serif;font-size: 20px;font-weight: normal;margin: 0;padding:10px 0 2px 2px; height:45px;} .clearFloat{clear:both; *margin-top:0px !important;*margin-top:0px} .stk_ad{overflow:hidden;} .top_ad{border-collapse: collapse;margin: 0;padding: 0;width: 100%;position: relative;} .top_ad td{vertical-align: top;} .top_adone{/*float:left;margin-left:5.5%;*/width:140px;border: 1px solid transparent;border-radius: 1px 1px 1px 1px;margin-bottom: 3px;overflow: hidden;padding: 10px 15px 0 10px;height:245px;position: relative;} .top_adone:hover{background:#fff;border:1px solid #ddd;border-radius:3px;box-shadow:4px 4px 1px #eee;} .top_adonetop{font-family: helvetica;font-size: 12px;height: 15px;margin: 1px 0 12px;text-align: center;visibility: hidden;} .top_adone:hover .top_adonetop{visibility:visible;} .top_adonemin{color: #0077D2;cursor: pointer;display: block;font: 12px arial;text-decoration: none;} .top_adonemint{background:#FFFFFF;height: 140px;min-height: 140px;width: 140px;border: 1px solid #DBDBDB;display: table-cell;text-align: center;text-decoration: none;vertical-align: middle;} .top_adoneminf{color: #0654BA;font-family: "Helvetica neue",Helvetica,Arial,Verdana,sans-serif;font-size: 12px;height: 32px;line-height: 16px;margin: 6px 0 0;overflow: hidden;padding-left: 2px;text-align: left;} .top_adonefot{clear: both;overflow: hidden;} .top_adonefotl{color: #333333;float: left;font-family: "Helvetica neue",Helvetica,Arial,Verdana,Sans-serif !important;font-size: 16px !important;font-weight: bold;line-height: 18px;margin: 8px 0 0;} .top_adonefotr{float: left;height: 18px;margin: 7px 0 0;width: 29px;} .top_adonefotmat{padding-top: 1px;text-align: left;} .top_adonefotmat span{clear: both;color: #777777;font: 10px verdana !important;} .top_adonefotr img{border:none;margin:0;padding:0;} .top_adoneimg{width:140px; height:140px;height:140px !important;} .top_adonefoticon{ background: url("https://rtm.ebaystatic.com/0/RTMS/Image/merch_sprite.png") no-repeat scroll -5px -34px transparent; height: 19px;vertical-align: bottom;width: 14px;} .top_adonefotping{font: 10px/18px verdana !important;text-align: left;} /*newImg tags start*/ .ebay-table{width:100%;height:auto;} .clear{clear:both;height:10px;} .fl{float:left;} .fr{float:right;} .ebay-con{font-size:12px; line-height:24px;width:100%;} .ebay-title{font-size:16px;font-weight:bold;height:60px;padding:0 0 10px 0;text-align:center;} .ebay-description{width:100%;clear:both;margin:10px auto;} .ebay-tag-leftimg{width:50%;height:auto;} .ebay-tag-rightmain{padding-left:15px;text-align:left;font-size:12px; line-height:24px;} #ebay-content{width:485px;height:auto;margin:0 auto;position:relative;text-align:left;} #ebay-content input{display: none;} #ebay-content input~img{width: 500px;position: absolute;top:0px;left:0px;opacity: 0;height: 500px;/*transform:scale(1.1);*/transition:all 1s; border:1px solid #ccc;} #ebay-content input:checked +label + img{opacity: 1; transform:scale(1.0); } #ebay-content :checked +label img{border:1px solid red; opacity: 1.0; /*transition: all 1s;*/} #ebay-content label {display: inline-block;max-width: 110px;margin: 10px 8px 5px 0px; cursor:pointer;} #ebay-content label img{ /*opacity:0.5;*/ max-width: 110px; margin-top:500px; max-height: 110px;border:1px solid #ccc;top:500px;} #ebay-content .small-img{margin-top:0px;top:-400px;} /*newImg tags end*/ /*newBannerImgTag start*/ .description_title{text-align:center;min-height:40px;font-size:16px;font-weight:bold;clear:both;} .bigImg_fl{float:left;width:38%;} .description_fr{float:right;width:60%;} /* CSS media queries start */ @media screen and (max-width:767px) { .mid_menu,.right-banner,.stk_ad,.asqMain,.left-content{display:none;} .ebay-table tr:nth-child(2) td:nth-child(2){width:100%;} .right-content{width:100%;} .right-content *{font-size:16px;} /*tuijian start buy's btn center */ .like-pro-buy-float{width:100%;margin-top:-40px;} .like-pro-buy p{line-height:22px!important;text-align:center!important;} .like-pro,.tg-button-box{text-align:center;} .like-pro-buy-float,.like-pro-buy,.like-pro-buy p,.like-pro{width:100%;clear:both;} /*tuijian end*/ /*newBannerImgTag start*/ .bigImg_fl{width:100%;margin-top:3%; } .bigImg img{width:50%;text-align:center;} .description_fr{width:95%;margin-top:15px;} /*newBannerImgTag end*/ } @media screen and (min-width:768px){ .menu_logo{width:15%;} .menu_right{width:80%;} .left-content{width:18%;} .right-content{width:81%;} .right-pro{ width:97.5%;} } /* CSS media queries end*/ Store Home | Sporting Goods | Vehicle Parts & Accessories | Jewellery & Watches | Health & Beauty | Computers/Tablets & Networking | Home, Furniture & DIY | Business, Office & Industrial | Mobile Phones & Communication | Clothes, Shoes & Accessories Daisy Flower Storage Extension High Speed Memory Disk Shockproof Flash Drive Description:Metal Daisy Flower Design USB 2.0 Flash Drives Full metal design. USB2.0 port interface, allows you share all kinds of documents. Compatible with Windows/Mac support USB2.0 and USB 1.1,low power consumption,durable solid-state storage. Supports Windows 7/ Windows 8 /Vista/XP/2000/ME/NT Linux and Mac OS. Specification:Material: Metal Size: 4cm*1.5cm*0.5cmPackage Includes:1 Piece USB Flash Drive -

Shipping And Handling Policy - The buyer is responsible for any applicable import duties and local taxes. Please verify with your customs before making your purchase. - Please verify your address during checkout. We are not responsible for any wrong or undeliverable addresses. People always bought together with Read the full article

0 notes

anyhs-themes · 7 years

Text

SlideDown FAQ

Clique aqui para pré-visualizar;

Não esqueça de dar like e/ou reblogar este post depois, se ele acabar sendo útil pra você.

(If you speak English, I have an English version for this tutorial right here)

Scripts:

Você vai precisar ter JQuery instalado no código do seu tema, se você não tiver, copie o código a seguir e cole-o antes de </head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Você também vai precisar instalar o script dos icons Font Awesome para que as setinhas das perguntas apareçam. Mas esse passo é opcional, se você não quiser que as setinhas apareçam então não precisa colocar esse script. Porém se quiser, cole-o logo abaixo do código do JQuery (ainda antes de </head>):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Logo abaixo do código dos icons (ainda antes de </head>) cole o script que vai fazer as respostas da FAQ abrirem quando você clicar nas perguntas, que é este aqui:

<script> $(window).ready(function(){ var pergunta = $(".faq").find(".pergunta"); var resposta = $(".faq").find(".resposta"); pergunta.append('<i class="fa fa-angle-down" aria-hidden="true"></i>'); resposta.hide(); pergunta.click(function(){ $(this).next().slideToggle(); $(this).find(".fa").toggleClass("fa-angle-down"); $(this).find(".fa").toggleClass("fa-angle-up"); }) ;}); </script>

CSS:

Agora, para que a FAQ fique organizada do jeito certo, cole as suas configurações de estilo antes de </style>:

/** Slide Down FAQ (by https://anyhs-themes.tumblr.com) **/ /** container das perguntas **/ ol.faq {width: 500px; list-style: decimal; margin: 0px auto; padding: 0px; padding-left: 30px;} /** cada linha da faq (pergunta + resposta) **/ ol.faq li {margin-bottom: 5px; font-family: 'Helvetica', sans-serif; color: #844d3d; font-size: 14px;} /** perguntas e respostas **/ .pergunta, .resposta {display: block; padding: 10px; margin-left: -30px; border: 1px solid #222; position: relative;} .pergunta {text-indent: 25px; color: #999; cursor: pointer; letter-spacing: .5px; background: #1a1a1a;} .resposta {color: #777; border-top: none;} /** setinha **/ ol.faq li .fa {position: absolute; top: 0px; right: 0px; padding: 10px;} /** Slide Down FAQ (by https://anyhs-themes.tumblr.com) **/

O código acima está com as mesmas configurações do preview (mesmas cores, mesma fonte e etc.), mas você pode personalizá-lo do jeito que quiser, é claro.

Porém eu não vou estar ensinando a personalizar para não deixar este tutorial muito extenso, então se você não souber como fazer para mudar as cores, fontes, tamanhos, etc. você precisará aprender pelo menos o básico de CSS para conseguir fazer isso (e você pode conferir minhas recomendações de tutoriais online clicando aqui).

HTML:

Agora, cole o seguinte código no lugar onde você quer que a FAQ fique (entre <body> e </body>):

<ol class="faq"> <li> <span class="pergunta">Pergunta 1</span> <span class="resposta">Resposta 1</span> </li> <li> <span class="pergunta">Pergunta 2</span> <span class="resposta">Resposta 2</span> </li> <li> <span class="pergunta">Pergunta 3</span> <span class="resposta">Resposta 3</span> </li> </ol>

Para saber onde colocar esse código, você também vai precisar entender um pouco de HTML. Se não souber, de novo: você pode aprender através das indicações que eu deixei neste post aqui.

O lugar no código onde eu escrevi “Pergunta 1” é onde você irá colocar a primeira pergunta da sua FAQ, e onde eu escrevi “Resposta 1” é onde você colocará a resposta dessa primeira pergunta. E o mesmo vale para a segunda e a terceira pergunta.

Se você quiser adicionar mais perguntas, basta copiar o seguinte código e colá-lo antes de “</ol>”:

<li> <span class="pergunta">Pergunta</span> <span class="resposta">Resposta</span> </li>

E então você pode personalizá-lo da mesma forma que eu acabei de explicar: escreva sua pergunta no lugar onde eu escrevi “Pergunta” e a resposta dessa pergunta no lugar onde eu escrevi “Resposta”.

Dê like ou reblogue este post se ele tiver sido útil;

No caso de alguma dúvida ou erro no tutorial/código, entre em contato comigo por aqui.

#tutorial #faq #faq personalizada #html #css #javascript #jquery #código #códigos #script #scripts

19 notes · View notes

money-insider-1-blog · 5 years

Text

Blogartikel schreiben leicht gemacht - darauf kommt es wirklich an

Einen guten Blogartikel schreiben bedeutet für Leser und Suchmaschinen zu schreiben und echten Mehrwert damit zu liefern. Aber mit der Recherche und dem Schreiben von Artikel ist es nicht getan, darum zeige ich dir, worauf es bei der Erstellung eines Blogartikels noch ankommt.

Die Wahl der richtigen Nische

Zunächst musst du dir darüber klar werde, über welche Themen du in Zukunft bloggen möchtest und wie du deinen Lesern damit einen Mehrwert bieten kannst. Die Wahl der richtigen Nische entscheidet auch später über deinen Erfolg. Schreibe über das was dich interessiert, aber wähle ein Thema, dass auch eine hohe Nachfrage hat und indem du anderen Mehrwert bieten kannst. Wen dir das Thema Spaß macht werden dir auch die Blogartikel leicht von der Hand gehen.

Hier findest du Inspiration für neue Artikel

Ideen finden ist oft gar nicht so leicht, am besten solltest du hier erstmal brainstormen. Das heißt, du schreibst dir alles, was dir zu einem Thema einfällt auf. Wähle eine Nische oder ein Thema, indem du dich besonders gut auskennst und dir mit der Zeit einen Expertenstatus aufbauen kannst. Ich nutze am liebsten Pinterest, um mich inspirieren zu lassen und neue Ideen zu finden. Aber auch Bücher oder YouTube Videos können eine gute Anregung sein. Es lohnt sich auch andere Blogs oder Magazine zu lesen. Darüber hinaus bieten Facebook-Gruppen oder Tweets einen guten Einblick was deine Zielgruppe im Moment interessiert. Auch Tools wie Answer the Public und Buzzsumo zeigen dir, was aktuell im Trend ist. Halte deine Gedanken und Ideen immer schriftlich fest, da sie sonst oft schnell wieder weg sein können.

Eine Überschrift finden die Interesse weckt

Um den Leser für sich zu gewinnen ist eine spannende Überschrift sehr wichtig. Die Überschrift soll den Leser in den Bann ziehen und animieren weiterzulesen, sie soll klarmachen worum es in dem Artikel geht. Ich bin der Meinung dass, das Thema und eine passende Überschrift schon vor der Keyword Rechechre klar sein sollten. Den ein Titel entscheidet darüber, ob der Text auch interessant genug ist, um gelesen zu werden. Besonders gut eigen sich in Überschriften Fragen, kurze Formulierungen, Tipps und Schritt für Schritt Anleitungen.

Die richtigen Keywords finden

Nachdem du dir das Thema und eine Überschrift überlegt hast solltest du dich an die Keyword Recherche wagen. Ich empfehle dir hierzu die Tools Hypersuggest und Übersuggest. Versetz dich in die Lage des Lesers und finde heraus unter welchem Keyword, du bei Google ranken willst. Achte dabei aber nicht nur auf ein hohes Suchvolumen, sondern auch auf die Konkurrenz. Oft macht es mehr Sinn, auch auf Longtail Keywords zurückzugreifen. Ein Tipp noch, wenn du ein Keyword in das Google Suchfeld eintippst erscheinen oft automatische Ergänzungen, die dir helfen können Longtail Keywords zu ermitteln. Mit Google Suggest findest du auch heraus welche ähnlichen Suchbegriffe verwendet werden. Meine besten Tipps für die Keyword-Recherche findest du hier: https://bit.ly/3cIT7O1

Struktur und Lesbarkeit von Artikeln

Es lohnt sich im Voraus eine grobe Struktur des Blogartikels festzulegen. Der Aufbau eines Artikels sollte dabei folgende Punkte beinhalten: Eine kurze oder spannende Einleitung Hauptteil Detaillierte Lösung eines Problems Verwende Zwischenüberschriften und Absätze Fazit - Zusammenfassung und Empfehlung Das Plugin Yoast SEO hilft dir nicht nur bei der Keyword Optimierung, sondern zeigt dir auch an anhand eines Ampelsystems wie gut die Lesbarkeit eines Artikels ist. Wichtig ist es den Text gut zu gliedern und Zwischenüberschriften zu wählen, die das Thema interessant machen. So bestehen gute Chancen, dass der Artikel nicht nur überflogen wird.

Finde deinen eigenen Stil

Jeder Blogger hat seinen individuellen Schreibstil. Das verleiht deinem Blog etwas Einzigartiges und macht ihn besonders. Daher lohnt es sich persönliche Geschichten zu erzählen und Storytelling zu betreiben. Natürlich kommt es auch auf die Zielgruppe an, eine jünger Zielgruppe möchte unterhalten werden während eine ältere Zielgruppe Mehrwert in Form von gutem Content erwartet. Ein persönlicher Schreibstil verleiht deinen Artikel aber einen hohen Wiedererkungwert. Wähle dienen Schreibstil auch passend zum Zielpublikum.

Blogartikel veröffentlichen und bekannt machen

Der optimale Zeitpunkt zur Veröffentlichung hängt von mehren Faktoren ab. Wann ist deine Zielgruppe aktiv? In der Regel lohnt es sich Artikel unter der Woche zu veröffentlichen, Abens haben die meisten Zeit, einen Artikel zu lesen. Je nach Zielgruppe kann es auch sein, dass Blogs lieber am Wochenende gelesen werden. Wen du einen Blog bekannt machen möchtest nutze Social Media Netzwerke und Facebook Gruppen. Und mein Favorit um Blogartikel bekannt zu machen ist natürlich Pinterest. Auch wenn viele es immer zu Sozialen Netzwerken zählen ist es streng genommenen ein visuelle Suchmaschinen, die die enorm viel Traffic bringen kann. Neben SEO ist Pinterest meine beste Trafficquelle. Fazit: erfolgreiches Bloggen braucht Zeit Ein perfekten Blogartikel zu schreiben ist keine einfache Sache. Ein grober Plan und ein erster Entwurf kann dir aber viel Arbeit abnehmen. Mit der Zeit wird dir das Erstellen neuer Artikel leichter fallen, du bist dann schon geübter in der Rechechere von neuem Content und weißt wie du Inspiration für neuen Artikel gewinnen kannst. Mit der Zeit kann dein Blog sich zu einem hervorragendem Marketing Instrument werden und Social Media perfekt ergänzen. Mehr vom Money Insider 1 Blog Du hast eine Frage zum aktuellen Artikel oder möchtest etwas ergänzen, dann nutze die Kommentarfunktion Hast du eine persönliche Anfrage?, dann schreib an [email protected] Folge mir auf Facebook oder Twitter Abonniere meinen YouTube Kanal div#sib_embed_signup .needsfilled input {border-color: #B94A48 !important; color: #B94A48 !important;} div#sib_embed_signup .needsfilled {color: #B94A48 !important;} div#sib_embed_signup input {border: 1px solid #CCCCCC;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;} div#sib_embed_signup input::-webkit-inner-spin-button, div#sib_embed_signup input::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none; margin:0; } div#sib_embed_signup input {-moz-appearance: textfield;} div#sib_embed_signup div.message_area {position: relative;padding: 10px 30px 10px 10px; margin: 0px 0px 10px 0px;font-size:14px; border-radius: 5px;-webkit-border-radius: 5px; -moz-border-radius: 5px;box-sizing: border-box;} div#sib_embed_signup div.message_area button.close {position: absolute;right: 8px;top: 8px;color: inherit;background: 0 0;border: 0;padding: 0px;-webkit-appearance: none;cursor: pointer;font-weight: bold;font-size: 14px;} .tipicon{cursor: pointer;padding: 3px 7px;font-size: 12px;font-weight: bold;line-height: 1.2;color: #fff;text-align: center;vertical-align: baseline;background-color: #999;border-radius: 10px;text-decoration: none;} .tooltip{display: inline;position: absolute;left: 97%;} .tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;color: #fff;content: attr(data-title);right: -2px;bottom: 26px;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;} .tooltip_small:hover:after{padding: 5px 5px; width: 150px;} .tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 1px;position: absolute;z-index: 99;} .sib-dropdown-menu.flag-icon {display: none;height: 100px;overflow-x: hidden;min-width: 230px;font-size: 13px;list-style: none;padding-left:14px;border:1px solid rgba(0,0,0,.15);background: white;border-radius: 4px;margin-top:10px;} .sib-dropdown-menu.flag-icon li a{display: block;white-space: nowrap;text-decoration: none;color: rgba(0,0,0,0.87);box-shadow: none;} .sms_field .country-block{margin-right: 3px !important;float: left;width:56px;} .icon-arrow{display: inline-block;width:0px;height: 0px;margin-left:2px;margin-top:5px;border-top:4px dashed;border-right:4px solid transparent;border-left:4px solid transparent;vertical-align: text-top;} .sib-dropdown-toggle.country-flg{display: inline-block;font-size: 13px;} body {background-Image: url('');} body {background-color: #ffffff;} div#sib_embed_signup .sib-container {background: rgba(214,255,223,1);} div#sib_embed_signup .sib-container h1 {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;} div#sib_embed_signup h1.title {font-size: 28px;} div#sib_embed_signup .sib-container .forms-builder-footer, div#sib_embed_signup .sib-container .description, div#sib_embed_signup .sib-container .fake-label, div#sib_embed_signup .sib-container .row, div#sib_embed_signup .sib-container #company-name{font-family: Palatino, 'Palatino Linotype', 'Hoefler Text', Times, 'Times New Roman', serif;} div#sib_embed_signup .forms-builder-footer,div#sib_embed_signup div.description,div#sib_embed_signup .fake-label,div#sib_embed_signup .row {font-size: 15px;} div#sib_embed_signup .sib-container .button {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;} div#sib_embed_signup .button{font-size: 12px;} div#sib_embed_signup input {font-size: 13px;} div#sib_embed_signup .sib-containter h1 {color: #917223;} div#sib_embed_signup .sib-container {color: #343434;} div#sib_embed_signup .sib-container .button{color: #ffffff;} div#sib_embed_signup .sib-container .button{background: #917a3f;} div#sib_embed_signup .forms-builder-wrapper{ max-width: 350px;} div#sib_embed_signup .sib-container{ padding: 25px 15px 15px;} div#sib_embed_signup .header{ padding: 0 10px;} div#sib_embed_signup h1.title{ lineHeight: 40px;} div#sib_embed_signup h3.company-name{ lineHeight: 20px;} div#sib_embed_signup div.description{ padding: 10px 15px;} div#sib_embed_signup div.row{ padding: 10px;} div#sib_embed_signup input{ padding: 8px 4px; width:100% !important;box-sizing: border-box;} div#sib_embed_signup input{ padding: 8px 4px; width:100% !important;box-sizing: border-box;} div#sib_embed_signup .tooltip{ left: 98%;} div#sib_embed_signup div.message_area{ font-size: 12px;}

Erhalte die besten Tipps und Strategien für WordPress & Online Marketing Read the full article

#Blogartikelschreiben #bloggenmitWordpress

0 notes

jonasmaurer · 5 years

Text

The new Countertime collection

Sharing a full review of the new Beautycounter Countertime collection and why I think it’s totally worth it.

Hi friends! Hope you’re having a lovely day so far. I’m writing with some exciting news: Countertime is officially here!

(Holding the sample jars they sent because I’ve been using them for over a month and still haven’t made a dent in them. A little goes a long way!)

Here’s what the full set looks like:

So why is this so exciting?

It’s what I consider to be the safe, nontoxic version of La Mer. Before launching this line, we had products that I loved and would mix and match in my skincare routine. This is an entire regimen that I’m obsessed with – it’s incredibly luxe, works beautifully, and is comprised of safe ingredients – and can recommend it for all skincare types. All of the products in this line are a dream come true, from the oil-based cleanser to the incredibly moisturizing night cream.

The new Beautycounter Countertime collection uses a plant-based Retinatural Complex. This is based on two powerhouse ingredients: Bakuchiol (<— remember this one because you’re about to see it popping up ALL over skincare shelves) and Swiss Alpine Rose. The Bakuchiol is traditionally used in many Chinese and Ayurvedic skin-care remedies and has many of the same benefits of retinol without the irritation. This ingredient is used to REPAIR.

Retinol is on Beautycounter’s Never List, and here’s a handy chart comparing Bakuchiol to Retinol:

The second ingredient in our new Retinatural complex is Swiss Alpine Rose. It’s grown at the highest altitude in the Alps, and is known to protect itself against environmental stressors and dehydration. This ingredient is the PROTECT.

Source

How Retinatural Complex works:

– It promotes a healthy barrier function. This helps to maintain our skin’s natural moisture levels and protect itself from daily environmental stressors.

– It visibly plumps and firms skin. I can 100% attest to this. I noticed a difference within 24 hours of using these products and many fellow consultants say the same.

– It improves resilience. As we age, our skin’s ability to protect itself from oxidative stress is compromised, which damages cells and increases the appearance of aging through loss of vibrance, skin elasticity, and increased wrinkles.

Here are all of the products and steps in the new Countertime line:

1. Cleanse: Countertime Lipid Defense Cleansing Oil. Inspired by Asian beauty rituals, this oil removes makeup and other impurities without stripping essential lipids from skin. You rub a little onto your face, and then add water and massage to cleanse the skin. My skin always feels super smooth and clean after using this oil cleanser.

2. Prep: Countertime Mineral Boost Hydrating Essence. This is a super lightweight essence that delivers nutrients into the skin. I like to think of this as toner, but instead of drying my skin out, it feels hydrated and bright.

3. Treat: Countertime Tripeptide Radiance Serum. This little wonder works to improve skin appearance and elasticity. If you purchase one thing from the line, I would start here!

4. Protect: Countertime Antioxidant Soft Cream (AM) and Countertime Tetrapeptide Supreme Cream (PM). The Supreme Cream is what I’ve been waiting for Beautycounter to launch since I started consulting. I wanted a super thick, luxurious moisturizer with safe ingredients, and this is it. It feels like a dream and I love that it isn’t greasy at all.

Beautycounter has transitioned to more glass packaging, which will reduce plastic packaging by 1 million pieces in the next year. The new packaging also reduces carbon impact because they’re being sourced from North America. They’re also reducing unnecessary parts in the packaging, which also reduces the amount of secondary plastic and waste. They’re constantly working to improve sustainability, which is one of the many reasons why I’m excited to be a part of the team.

You can check out the full Countertime collection here! Please let me know if you have any questions.

.formkit-form[data-uid="cf73514e9a"] *{font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;box-sizing:border-box;}.formkit-form[data-uid="cf73514e9a"]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.formkit-form[data-uid="cf73514e9a"] legend{border:none;font-size:inherit;margin-bottom:10px;padding:0;position:relative;display:table;}.formkit-form[data-uid="cf73514e9a"] fieldset{border:0;padding:0.01em 0 0 0;margin:0;min-width:0;}.formkit-form[data-uid="cf73514e9a"] body:not(:-moz-handler-blocked) fieldset{display:table-cell;}.formkit-form[data-uid="cf73514e9a"] h1,.formkit-form[data-uid="cf73514e9a"] h2,.formkit-form[data-uid="cf73514e9a"] h3,.formkit-form[data-uid="cf73514e9a"] h4,.formkit-form[data-uid="cf73514e9a"] h5,.formkit-form[data-uid="cf73514e9a"] h6{color:inherit;font-size:inherit;font-weight:inherit;}.formkit-form[data-uid="cf73514e9a"] p{color:inherit;font-size:inherit;font-weight:inherit;}.formkit-form[data-uid="cf73514e9a"][data-format="modal"]{display:none;}.formkit-form[data-uid="cf73514e9a"][data-format="slide in"]{display:none;}.formkit-form[data-uid="cf73514e9a"] .formkit-input,.formkit-form[data-uid="cf73514e9a"] .formkit-select,.formkit-form[data-uid="cf73514e9a"] .formkit-checkboxes{width:100%;}.formkit-form[data-uid="cf73514e9a"] .formkit-button,.formkit-form[data-uid="cf73514e9a"] .formkit-submit{border:0;border-radius:5px;color:#ffffff;cursor:pointer;display:inline-block;text-align:center;font-size:15px;font-weight:500;cursor:pointer;margin-bottom:15px;overflow:hidden;padding:0;position:relative;vertical-align:middle;}.formkit-form[data-uid="cf73514e9a"] .formkit-button:hover,.formkit-form[data-uid="cf73514e9a"] .formkit-submit:hover,.formkit-form[data-uid="cf73514e9a"] .formkit-button:focus,.formkit-form[data-uid="cf73514e9a"] .formkit-submit:focus{outline:none;}.formkit-form[data-uid="cf73514e9a"] .formkit-button:hover > span,.formkit-form[data-uid="cf73514e9a"] .formkit-submit:hover > span,.formkit-form[data-uid="cf73514e9a"] .formkit-button:focus > span,.formkit-form[data-uid="cf73514e9a"] .formkit-submit:focus > span{background-color:rgba(0,0,0,0.1);}.formkit-form[data-uid="cf73514e9a"] .formkit-button > span,.formkit-form[data-uid="cf73514e9a"] .formkit-submit > span{display:block;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;padding:12px 24px;}.formkit-form[data-uid="cf73514e9a"] .formkit-input{background:#ffffff;font-size:15px;padding:12px;border:1px solid #e3e3e3;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;line-height:1.4;margin:0;-webkit-transition:border-color ease-out 300ms;transition:border-color ease-out 300ms;}.formkit-form[data-uid="cf73514e9a"] .formkit-input:focus{outline:none;border-color:#1677be;-webkit-transition:border-color ease 300ms;transition:border-color ease 300ms;}.formkit-form[data-uid="cf73514e9a"] .formkit-input::-webkit-input-placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="cf73514e9a"] .formkit-input::-moz-placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="cf73514e9a"] .formkit-input:-ms-input-placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="cf73514e9a"] .formkit-input::placeholder{color:inherit;opacity:0.8;}.formkit-form[data-uid="cf73514e9a"] [data-group="dropdown"]{position:relative;display:inline-block;width:100%;}.formkit-form[data-uid="cf73514e9a"] [data-group="dropdown"]::before{content:"";top:calc(50% - 2.5px);right:10px;position:absolute;pointer-events:none;border-color:#4f4f4f transparent transparent transparent;border-style:solid;border-width:6px 6px 0 6px;height:0;width:0;z-index:999;}.formkit-form[data-uid="cf73514e9a"] [data-group="dropdown"] select{height:auto;width:100%;cursor:pointer;color:#333333;line-height:1.4;margin-bottom:0;padding:0 6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:15px;padding:12px;padding-right:25px;border:1px solid #e3e3e3;background:#ffffff;}.formkit-form[data-uid="cf73514e9a"] [data-group="dropdown"] select:focus{outline:none;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"]{text-align:left;margin:0;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"]{margin-bottom:10px;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] *{cursor:pointer;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"]:last-of-type{margin-bottom:0;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] input[type="checkbox"]{display:none;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] input[type="checkbox"] + label::after{content:none;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] input[type="checkbox"]:checked + label::after{border-color:#ffffff;content:"";}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] input[type="checkbox"]:checked + label::before{background:#10bf7a;border-color:#10bf7a;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] label{position:relative;display:inline-block;padding-left:28px;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] label::before,.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] label::after{position:absolute;content:"";display:inline-block;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] label::before{height:16px;width:16px;border:1px solid #e3e3e3;background:#ffffff;left:0px;top:3px;}.formkit-form[data-uid="cf73514e9a"] [data-group="checkboxes"] [data-group="checkbox"] label::after{height:4px;width:8px;border-left:2px solid #4d4d4d;border-bottom:2px solid #4d4d4d;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);left:4px;top:8px;}.formkit-form[data-uid="cf73514e9a"] .formkit-alert{background:#f9fafb;border:1px solid #e3e3e3;border-radius:5px;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;list-style:none;margin:25px auto;padding:12px;text-align:center;width:100%;}.formkit-form[data-uid="cf73514e9a"] .formkit-alert:empty{display:none;}.formkit-form[data-uid="cf73514e9a"] .formkit-alert-success{background:#d3fbeb;border-color:#10bf7a;color:#0c905c;}.formkit-form[data-uid="cf73514e9a"] .formkit-alert-error{background:#fde8e2;border-color:#f2643b;color:#ea4110;}.formkit-form[data-uid="cf73514e9a"] .formkit-spinner{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:0px;width:0px;margin:0 auto;position:absolute;top:0;left:0;right:0;width:0px;overflow:hidden;text-align:center;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}.formkit-form[data-uid="cf73514e9a"] .formkit-spinner > div{margin:auto;width:12px;height:12px;background-color:#fff;opacity:0.3;border-radius:100%;display:inline-block;-webkit-animation:formkit-bouncedelay-formkit-form-data-uid-cf73514e9a- 1.4s infinite ease-in-out both;animation:formkit-bouncedelay-formkit-form-data-uid-cf73514e9a- 1.4s infinite ease-in-out both;}.formkit-form[data-uid="cf73514e9a"] .formkit-spinner > div:nth-child(1){-webkit-animation-delay:-0.32s;animation-delay:-0.32s;}.formkit-form[data-uid="cf73514e9a"] .formkit-spinner > div:nth-child(2){-webkit-animation-delay:-0.16s;animation-delay:-0.16s;}.formkit-form[data-uid="cf73514e9a"] .formkit-submit[data-active] .formkit-spinner{opacity:1;height:100%;width:50px;}.formkit-form[data-uid="cf73514e9a"] .formkit-submit[data-active] .formkit-spinner ~ span{opacity:0;}.formkit-form[data-uid="cf73514e9a"] .formkit-powered-by[data-active="false"]{opacity:0.35;}@-webkit-keyframes formkit-bouncedelay-formkit-form-data-uid-cf73514e9a-{0%,80%,100%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}40%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes formkit-bouncedelay-formkit-form-data-uid-cf73514e9a-{0%,80%,100%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}40%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}} .formkit-form[data-uid="cf73514e9a"]{max-width:700px;}.formkit-form[data-uid="cf73514e9a"] [data-style="clean"]{width:100%;}.formkit-form[data-uid="cf73514e9a"] .formkit-fields{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 auto;}.formkit-form[data-uid="cf73514e9a"] .formkit-field,.formkit-form[data-uid="cf73514e9a"] .formkit-submit{margin:0 0 15px 0;-webkit-flex:1 0 100%;-ms-flex:1 0 100%;flex:1 0 100%;}.formkit-form[data-uid="cf73514e9a"] .formkit-powered-by{color:#7d7d7d;display:block;font-size:12px;margin:0;text-align:center;}.formkit-form[data-uid="cf73514e9a"][min-width~="700"] [data-style="clean"],.formkit-form[data-uid="cf73514e9a"][min-width~="800"] [data-style="clean"]{padding:10px;}.formkit-form[data-uid="cf73514e9a"][min-width~="700"] .formkit-fields[data-stacked="false"],.formkit-form[data-uid="cf73514e9a"][min-width~="800"] .formkit-fields[data-stacked="false"]{margin-left:-5px;margin-right:-5px;}.formkit-form[data-uid="cf73514e9a"][min-width~="700"] .formkit-fields[data-stacked="false"] .formkit-field,.formkit-form[data-uid="cf73514e9a"][min-width~="800"] .formkit-fields[data-stacked="false"] .formkit-field,.formkit-form[data-uid="cf73514e9a"][min-width~="700"] .formkit-fields[data-stacked="false"] .formkit-submit,.formkit-form[data-uid="cf73514e9a"][min-width~="800"] .formkit-fields[data-stacked="false"] .formkit-submit{margin:0 5px 15px 5px;}.formkit-form[data-uid="cf73514e9a"][min-width~="700"] .formkit-fields[data-stacked="false"] .formkit-field,.formkit-form[data-uid="cf73514e9a"][min-width~="800"] .formkit-fields[data-stacked="false"] .formkit-field{-webkit-flex:100 1 auto;-ms-flex:100 1 auto;flex:100 1 auto;}.formkit-form[data-uid="cf73514e9a"][min-width~="700"] .formkit-fields[data-stacked="false"] .formkit-submit,.formkit-form[data-uid="cf73514e9a"][min-width~="800"] .formkit-fields[data-stacked="false"] .formkit-submit{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}

xoxo

Gina

The post The new Countertime collection appeared first on The Fitnessista.

The new Countertime collection published first on https://olimpsportnutritionde.tumblr.com/

0 notes

testverge · 4 years

Text

---

>> CREDITS

Google Fonts Feather Icons by Cole Bemis FontAwesome(v4.7) by Fonticons, Inc.

style-my-tooltips by malihu imgLiquid by Alejandro Emparan Sticky Sidebar by Ahmed Bouhuolia Extended photoset by PixelUnion, modified by bychloethemes Video width fix by shythemes

--> <meta charset="UTF-8" /> {block:Description}<meta name="descripttion" content="{MetaDescription}" />{/block:Description} {block:Hidden} <meta name="color:Text Color" content="#656565" /> <meta name="color:Color One" content="#bdc2e8" /> <meta name="color:Color Two" content="#e6dee9" /> <meta name="color:Border Color" content="#eeeeee" /> <meta name="color:Body Background" content="#f5f5f5" /> <meta name="color:Navbar Top Background" content="#333333" /> <meta name="color:Navbar Background" content="#fafafa" /> <meta name="color:Banner Text Color" content="#ffffff" /> <meta name="color:Post Background" content="#ffffff" />

/* ------------------------------------------- * variables * ------------------------------------------ */

:root {

/* fonts */ --sans: 'Source Sans Pro', 'Helvetica', 'Lucida Grande', 'Arial', sans-serif; --serif: 'Playfair Display', 'Times', 'Times New Roman', serif; --icons: 'FontAwesome' !important; --body-font-size: 14px;

/* colors */ --body-background: {color:Body Background}; --post-background: {color:Post Background}; --text-color: {color:Text Color}; --border-color: {color:Border Color}; --navbar-top: {color:Navbar Top Background}; --navbar-background: {color:Navbar Background}; --banner-text: {color:Banner Text}; --color-one: {color:Color One}; --color-two: {color:Color Two}; --gradient: {color:Color One}, {color:Color Two};

}

/* ------------------------------------------- * layout * ------------------------------------------ */

.wrapper { min-width: 1050px; } .container { width: calc({select:Sidebar Width}*2 + 50px + {select:Post Width}); margin: 0 auto; margin-bottom: -25px; }

/* ------------------------------------------- * tumblr controls * ------------------------------------------ */

.tmblr-iframe-compact .tmblr-iframe--unified-controls { position: fixed; z-index: 1001; top: -1px; right: calc(50% - {select:Sidebar Width}/2 - 80px - {select:Post Width}/2); max-width: 350px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; opacity: {text:Tumblr Controls Opacity}; } .light-controls .tmblr-iframe--unified-controls { mix-blend-mode: screen; } .dark-controls .tmblr-iframe--unified-controls { mix-blend-mode: multiply; -webkit-filter: invert(100%); filter: invert(100%); }

/* ------------------------------------------- * header * ------------------------------------------ */ /* navbar basic */ #header .navbar { position: fixed; width: 1050px; margin: 0 auto; z-index: 999; top: 0; left: 0; right: 0; }

/* navbar top */ #header .navbar .navbar-top { height: 30px; background-color: {color:Navbar Top Background}; } #header .navbar .navbar-top .search { padding: 5px 0 5px 80px; } #header .navbar .navbar-top .search .search-bar { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 20px; margin-left: 10px; } #header .navbar .navbar-top .search .search-bar input, #header .navbar .navbar-top .search .search-bar button { display: block; color: {color:Banner Text Color}; } #header .navbar .navbar-top .search .search-bar input { font-size: 0.95rem; width: 150px; } #header .navbar .navbar-top .search .search-bar input::-webkit-input-placeholder { color: {color:Banner Text Color}; opacity: 0.5; } #header .navbar .navbar-top .search .search-bar button svg { display: block; width: 15px; height: 15px; stroke: url('#gradient'); }

/* navbar main */ #header .navbar .navbar-main { background-color: {color:Navbar Background}; } #header .navbar .navbar-main .container { position: relative; width: 1050px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; �� -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: {color:Text Color}; border-bottom: 1px solid; border-right: 1px solid; border-color: {color:Border Color}; } #header .navbar .navbar-main .title { margin: 0; font-family: var(--serif); font-size: 1.285rem; }

#header .navbar .navbar-main .title.title-style { margin-left: 90px; } #header .navbar .navbar-main .title.title-style:before, #header .navbar .navbar-main .title.title-style:after { position: absolute; left: 0; display: block; } #header .navbar .navbar-main .title.title-style:before { content: attr(data-first-letter); top: -30px; width: 80px; height: 85px; padding-top: 25px; background-image: linear-gradient(to bottom, var(--gradient)); background-size: 101%; font-size: 3rem; text-align: center; line-height: 60px; text-transform: uppercase; color: #fff; transition-property: height, line-height; transition-duration: .3s; transition-timing-function: ease-in-out; border-left: 1px solid; border-color: {color:Border Color}; } #header .navbar .navbar-main.on-scroll .title.title-style:before { height: 85px; line-height: 50px; } #header .navbar .navbar-main .title.title-style:after { content: ''; color: {color:Color Two}; bottom: -20px; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 20px solid {color:Color Two}; } #header .navbar .navbar-main .menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 55px; transition: height .3s ease-in-out; } #header .navbar .navbar-main.on-scroll .menu { height: 55px; } #header .navbar .navbar-main .menu > li { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; background-image: linear-gradient(to bottom, var(--gradient)); background-size: 101%; } #header .navbar .navbar-main .menu > li:hover > a, #header .navbar .navbar-main .menu > li:hover > span { background-color: transparent; color: #fff; } #header .navbar .navbar-main .menu > li a { white-space: nowrap; text-transform: uppercase; line-height: 1em; } #header .navbar .navbar-main .menu > li > a, #header .navbar .navbar-main .menu > li > span { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; background-color: {color:Navbar Background}; padding: 0 25px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition-property: color, background-color; } #header .navbar .navbar-main .menu > li > span { cursor: default; } #header .navbar .navbar-main .menu > li .submenu { display: none; position: absolute; top: 70px; min-width: 100%; padding: 20px; background-color: {color:Navbar Top Background}; text-align: center; transition: top .3s ease-in-out; } #header .navbar .navbar-main.on-scroll .menu > li .submenu { top: 55px; } #header .navbar .navbar-main .menu > li .submenu:before { content: ""; position: absolute; z-index: 1; top: 0; left: calc(50% - 5px); display: block; border-top: 7px solid {color:Color Two}; border-left: 5px solid transparent; border-right: 5px solid transparent; } #header .navbar .navbar-main .menu > li .submenu li + li { margin-top: 10px; } #header .navbar .navbar-main .menu > li .submenu li a { position: relative; display: inline-block; font-size: 0.75rem; letter-spacing: 0.1em; color: {color:Banner Text Color}; } #header .navbar .navbar-main .menu > li .submenu li a:after { content: ''; position: absolute; top: calc(0.5em - 1px); left: 0; right: 0; display: block; height: 2px; background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); transition: transform 0.5s ease-in-out; transform-origin: center left; } #header .navbar .navbar-main .menu > li .submenu li a:hover:after { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }

/* banner */ #header .banner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 300px; margin-top: 85px; background-size: 101%; } #header .banner.page-1 { min-height: 100px; height: 300px; } #header .banner .banner-img { position: absolute; width: 1050px; margin: 0 auto; top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: {select:Banner Blending Mode}; opacity: {text:Banner Image Opacity}; border: 1px solid; border-color: {color:Border Color}; }

#header .banner.page-1 .home-banner { display: block; width: 1050px; height: 300px; margin: 0 auto; }

#header .banner.page-1 .page-banner { display: block; width: 1050px; height: 300px; margin: 0 auto; }

#header .banner .banner-text { position: relative; z-index: 1; color: {color:Banner Text Color}; } #header .banner .banner-text .title { margin: 0; font-family: var(--serif); font-size: 2.5rem; font-weight: 700; line-height: 1.1em; } #header .banner .banner-text .title + .subtitle { margin-top: 5px; } #header .banner .banner-text .subtitle { display: block; font-size: 0.85rem; line-height: 1.1em; } #header .banner .banner-text .links { margin-top: 25px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #header .banner .banner-text .links li + li { margin-left: 10px; } #header .banner .banner-text .links li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid {color:Banner Text Color}; border-radius: 50%; color: {color:Banner Text Color}; transition-property: color, background-color; } #header .banner .banner-text .links li a svg { width: 1rem; height: 1rem; } #header .banner .banner-text .links li a:hover { background-color: {color:Banner Text Color}; color: {color:Color One}; }

/* ------------------------------------------- * main * ------------------------------------------ */

/* basic */ #main { {block:ifnotShowBanner}margin-top: 100px;{/block:ifnotShowBanner} padding: 25px 0;

} #main .primary { margin-left: calc({select:Sidebar Width} + 25px); margin-right: calc({select:Sidebar Width} + 25px); }

/* pagination */ #main .primary .pagination { position: relative; margin-top: 50px; overflow: hidden; background-color: {color:Post Background}; } #main .primary .pagination a { display: block; } #main .primary .pagination .arrow { position: absolute; top: 0; } #main .primary .pagination .arrow:not(.active) { background-color: {color:Navbar Background}; } #main .primary .pagination .arrow:not(.active) a { pointer-events: none; color: {color:Text Color}; opacity: 0.5; } #main .primary .pagination .arrow.active { background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; } #main .primary .pagination .arrow.active a { color: #fff; } #main .primary .pagination .arrow.prev { left: 0; } #main .primary .pagination .arrow.next { right: 0; } #main .primary .pagination .arrow a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 45px; height: 45px; } #main .primary .pagination .arrow a svg { display: block; width: 1rem; height: 1rem; } #main .primary .pagination .jump { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 0; } #main .primary .pagination .jump li { background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; border-radius: 50%; overflow: hidden; width: 35px; height: 35px; } #main .primary-400px .pagination .jump { padding: 10px 0; } #main .primary-400px .pagination .jump li { width: 25px; height: 25px; } #main .primary .pagination .jump li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; background-color: {color:Post Background}; font-size: 0.85rem; text-align: center; transition-property: color, background-color; } #main .primary .pagination .jump li a:hover { background-color: transparent; color: #fff; } #main .primary .pagination .jump li.current { padding: 2px; } #main .primary .pagination .jump li.current a { border-radius: 50%; pointer-events: none; } #main .primary .pagination .jump li + li { margin-left: 5px; }

/* ------------------------------------------- * sidebar * ------------------------------------------ */

/* basic */ .sidebar { width: {select:Sidebar Width}; float: {select:Sidebar Position}; will-change: min-height; } .sidebar .sidebar-inner { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: position, transform; }

/* section */ .sidebar .section { border: 1px solid; border-color: {color:Border Color}; }

.sidebar .section + .section { margin-top: 25px; border: 1px solid; border-color: {color:Border Color}; }

/* section head */ .sidebar .section .section-head { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: {color:Navbar Background}; border-bottom: 1px solid; border-color: {color:Border Color}; } .sidebar .section .section-head .icon { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50px; height: 50px; background-image: linear-gradient(to bottom, var(--gradient)); background-size: 101%; color: #fff; } .sidebar .section .section-head .icon:after { content: ''; position: absolute; top: 100%; left: 0; right: 0; display: block; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 12.5px solid {color:Color Two}; } .sidebar .section .section-head .icon svg { width: 1.425rem; height: 1.425rem; } .sidebar .section .section-head .title { margin: 0 0 0 15px; font-family: var(--serif); font-size: 1.15rem; }

/* section content */ .sidebar .section .section-content { padding: 20px; background-color: {color:Post Background}; }

/* intro */ .sidebar .intro .intro-img { margin: -20px; border-top: 1px solid; border-bottom: none; border-color: {color:Border Color}; } .sidebar .intro .intro-img img { display: block; } .sidebar .intro .intro-img+.intro-text { margin-top: 40px; } .sidebar .intro .intro-text { font-size: 0.925rem; } .sidebar .intro a:hover { color: #b4696b; }

/* events */ .sidebar .events .event { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .sidebar .events .event + .event { margin-top: 10px; } .sidebar .events .event li { position: relative; } .sidebar .events .event li > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sidebar .events .event li > div span { display: block; } .sidebar .events .event li:first-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .sidebar .events .event li:first-child:before { content: ""; display: block; padding-bottom: 100%; } .sidebar .events .event li:first-child .event-date { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; text-align: center; text-transform: uppercase; color: #fff; } .sidebar .events .event li:first-child .event-date .month { font-size: 0.7rem; line-height: 1em; letter-spacing: 0.01em; } .sidebar .events .event li:first-child .event-date .day { margin: 5px 0 -0.5rem; font-size: 1.75rem; font-weight: 700; line-height: 1em; letter-spacing: -0.05em; } .sidebar .events .event li:first-child .event-date .day sub { margin-left: 0.1rem; font-size: 0.85rem; vertical-align: text-bottom; letter-spacing: 0; } .sidebar .events .event li:last-child { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; } .sidebar-225px .events .event li:last-child, .sidebar-250px .events .event li:last-child { -webkit-box-flex: 2.5; -ms-flex: 2.5; flex: 2.5; } .sidebar .events .event li:last-child .event-info { padding: 0 15px; border: 1px solid {color:Border Color}; border-left: none; } .sidebar-225px .events .event li:last-child .event-info { padding: 0 10px; } .sidebar-250px .events .event li:last-child .event-info { padding: 0 12.5px; } .sidebar .events .event li:last-child .event-info .title { font-size: 1.125rem; font-weight: 600; line-height: 1.1em; } .sidebar .events .event li:last-child .event-info .title a:hover { color: #b4696b; } .sidebar .events .event li:last-child .event-info .title + .detail { margin-top: 5px; } .sidebar .events .event li:last-child .event-info .detail { font-size: 0.75rem; line-height: 1.1em; }

/* projects */ .sidebar .projects .project + .project { margin-top: 20px; border: 1px solid {color:Border Color}; } .sidebar .projects .project .project-head .pic img { display: block; border: 1px solid {color:Border Color}; } .sidebar .projects .project .project-head .name { background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; padding: 10px 15px; color: {color:Post Background}; border: 1px solid {color:Border Color}; border-top: none; border-bottom: none; } .sidebar .projects .project .project-head .name .title { display: inline-block; margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.1em; } .sidebar .projects .project .project-content { padding: 15px; border: 1px solid {color:Border Color}; } .sidebar .projects .project .project-content ul + ul { margin-top: 10px; } .sidebar .projects .project .project-content ul.info li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid {color:Border Color}; } .sidebar .projects .project .project-content ul.info li + li { margin-top: 10px; } .sidebar .projects .project .project-content ul.info li span { display: block; } .sidebar .projects .project .project-content ul.info li span.tt { padding: 0 0.75em; border: 1px solid {color:Border Color}; border-bottom: none; font-size: 0.7rem; font-weight: 600; line-height: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; } .sidebar .projects .project .project-content ul.info li span.txt { font-size: 0.85rem; line-height: 1.5rem; } .sidebar .projects .project .project-content ul.links { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .sidebar .projects .project .project-content ul.links li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: calc(100%/3 - 10px/3); margin-top: 5px; background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; } .sidebar .projects .project .project-content ul.links li + li { margin-left: 5px; } .sidebar:not(.sidebar-225px) .projects .project .project-content ul.links li:nth-child(-n+3) { margin-top: 0; } .sidebar:not(.sidebar-225px) .projects .project .project-content ul.links li + li:nth-child(3n+1) { margin-left: 0; } .sidebar-225px .projects .project .project-content ul.links li { min-width: calc(50% - 5px/2); } .sidebar-225px .projects .project .project-content ul.links li:nth-child(-n+2) { margin-top: 0; } .sidebar-225px .projects .project .project-content ul.links li + li:nth-child(2n+1) { margin-left: 0; } .sidebar .projects .project .project-content ul.links li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 7.5px 10px; background-color: {color:Post Background}; border: 1px solid {color:Border Color}; font-size: 0.85rem; text-align: center; transition-property: color, background-color, border-color; } .sidebar .projects .project .project-content ul.links li a:hover { color: {color:Banner Text Color}; background-color: transparent; border-color: transparent; } /* tweets */ .sidebar .tweets .tweet { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .sidebar .tweets .tweet + .tweet { margin-top: 10px; } .sidebar .tweets .tweet li { position: relative; } .sidebar .tweets .tweet li > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sidebar .tweets .tweet li > div span { display: block; }

/* site info */ .sidebar .siteinfo dl { margin: 0; } .sidebar .siteinfo dl dt { background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; float: left; margin-right: 5px; padding: 0 5px; font-size: 0.7rem; line-height: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; color: {color:Banner Text Color}; } .sidebar .siteinfo dl dd { margin: 0 0 5px; font-size: 0.85rem; line-height: 1.25rem; } .sidebar .siteinfo dl dd a:hover { color: #6b2828; } .sidebar .siteinfo dl dd:last-child { margin-bottom: 0; }

/* basic */ .twobar { width: {select:Sidebar Width}; float: right; will-change: min-height; } .twobar .sidebar-inner-2 { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: position, transform; }

/* section */ .twobar .section { border: 1px solid; border-color: {color:Border Color}; background-color: {color:Post Background}; }

.twobar .section + .section { margin-top: 25px; border: 1px solid; border-color: {color:Border Color}; }

/* section head */ .twobar .section .section-head { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: {color:Navbar Background}; border-bottom: 1px solid; border-color: {color:Border Color}; } .twobar .section .section-head .icon { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50px; height: 50px; background-image: linear-gradient(to bottom, var(--gradient)); background-size: 101%; color: #fff; } .twobar .section .section-head .icon:after { content: ''; position: absolute; top: 100%; left: 0; right: 0; display: block; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 12.5px solid {color:Color Two}; } .twobar .section .section-head .icon svg { width: 1.425rem; height: 1.425rem; } .twobar .section .section-head .title { margin: 0 0 0 15px; font-family: var(--serif); font-size: 1.15rem; }

/* section content */ .twobar .section .section-content { padding: 20px; background-color: {color:Post Background}; }

/* sidelinks */ .twobar .sidelinks ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .twobar .sidelinks ul + ul { margin-top: 5px; } .twobar .sidelinks ul li { background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; } .twobar .sidelinks ul li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: {color:Post Background}; border: 1px solid {color:Border Color}; transition-property: color, background-color, border-color; } .twobar .sidelinks ul li a svg { stroke: url("#gradient"); } .twobar .sidelinks ul li a:hover { color: #fff; background-color: transparent; border-color: transparent; } .twobar .sidelinks ul li a:hover svg { stroke: #fff; } .twobar .sidelinks ul.grid { -ms-flex-wrap: wrap; flex-wrap: wrap; } .twobar .sidelinks ul.grid li { position: relative; width: calc(20% - 4px); margin: 5px 5px 0 0; } .twobar .sidelinks ul.grid li:nth-child(-n+5) { margin-top: 0; } .twobar .sidelinks ul.grid li:nth-child(5n+0) { margin-right: 0; } .twobar .sidelinks ul.grid li:before { content: ""; display: block; height: 0; padding-bottom: 100%; } .twobar .sidelinks ul.grid li a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .twobar .sidelinks ul.grid li a svg { width: 1.25rem; height: 1.25rem; } .twobar .sidelinks ul.list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .twobar .sidelinks ul.list li + li { margin-top: 5px; } .twobar .sidelinks ul.list li a { padding: 10px; font-size: 1.1rem; } .twobar .sidelinks ul.list li a svg { width: 1.25rem; height: 1.25rem; margin-right: 10px; } /* tweets */ .twobar .tweets .tweet { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 15px; } .twobar .tweets .tweet + .tweet { margin-top: 10px; } .twobar .tweets .tweet ul { padding: 15px; } .twobar .tweets .tweet li { position: relative; } .twobar .tweets .tweet li > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .twobar .tweets .tweet li > div span { display: block; } /* members */ .twobar .members ul li { background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; } .twobar .members ul li + li { margin-top: 5px; } .twobar .members ul li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .twobar .members ul li a > div { position: relative; } .twobar .members ul li a > div > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .twobar .members ul li a .member-avatar { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; } .twobar .members ul li a .member-avatar:before { content: ''; display: block; padding-bottom: 100%; } .twobar .members ul li a .member-avatar span { display: block; background-size: cover; -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); mix-blend-mode: overlay; } .twobar .members ul li a .member-avatar img { display: block !important; transition: opacity 0.3s ease-in-out; opacity: 1; } .twobar .members ul li a .member-avatar + .member-info { border-left: none; } .twobar .members ul li a .member-info { -webkit-box-flex: 3.5; -ms-flex: 3.5; flex: 3.5; background-color: {color:Post Background}; border: 1px solid {color:Border Color}; transition-property: color, background-color, border-color; transition-duration: 0.3s; transition-timing-function: ease-in-out; } .twobar-225px .members ul li a .member-info { -webkit-box-flex: 2.5; -ms-flex: 2.5; flex: 2.5; } .twobar-250px .members ul li a .member-info { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; } .twobar .members ul li a .member-info dl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin: 0; padding: 0 15px; } .twobar-225px .members ul li a .member-info dl { padding: 0 10px; } .twobar-250px .members ul li a .member-info dl { padding: 0 12.5px; } .twobar .members ul li a .member-info dl dt { display: block; font-size: 1.05rem; font-weight: 600; line-height: 0.85em; } .twobar .members ul li a .member-info dl dt + dd { margin-top: 5px; } .twobar .members ul li a .member-info dl dd { margin: 0; font-size: 0.85rem; line-height: 1.15em; } .twobar .members ul li a:hover .member-avatar img { opacity: 1; } .twobar .members ul li a:hover .member-info { color: {color:Banner Text Color}; background-color: transparent; border-color: transparent; }

/* affiliates */ .twobar .affiliates ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .twobar .affiliates ul li { width: calc(25% - 15px/4); margin: 5px 5px 0 0; background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; } .twobar .affiliates ul li:nth-child(-n+4) { margin-top: 0; } .twobar .affiliates ul li:nth-child(4n+0) { margin-right: 0; } .twobar .affiliates ul li a { position: relative; display: block; } .twobar .affiliates ul li a span { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; background-size: cover; -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); mix-blend-mode: overlay; } .twobar .affiliates ul li a img { position: relative; z-index: 1; display: block; opacity: 1; transition: opacity 0.3s ease-in-out; } .twobar .affiliates ul li a:hover img { opacity: 0.7; }

/* ------------------------------------------- * posts * ------------------------------------------ */

/* basic */ .posts .post { overflow: hidden; background-color: {color:Post Background}; color: {color:Text Color}; border: 1px solid; border-color: {color:Border Color}; } .posts .post + .post { margin-top: 50px; } .post .post-head, .post .post-title, .post .post-body, .post .post-foot { padding: 20px; } .posts .post-body a { color: #6b2828; } .posts .post-body a:hover { color: #b4696b; } /* post head */ .post .post-head { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: {color:Navbar Background}; border-bottom: 1px solid {color:Border Color}; } .post .post-head ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .post .post-head ul.left { font-size: 11px; letter-spacing: 0.01em; } .post .post-head ul.left li a:hover { color: #6b2828; } .post .post-head ul.left li+li { margin-left: 10px; } .post .post-head ul.left li svg { display: inline-block; vertical-align: -2px; margin-right: 5px; width: 12px; height: 12px; stroke: url("#gradient"); } .post .post-head ul.left li .divider { display: block; width: 3px; height: 3px; border-radius: 50%; background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; } .post .post-head ul.right li + li { margin-left: 5px; } .post .post-head ul.right li a { display: block; width: 15px; height: 15px; overflow: hidden; border-radius: 3px; }

/* post foot */ .post .post-foot { border-top: 1px solid {color:Border Color}; } .post .post-foot .top { font-size: 10px; line-height: 1.1em; letter-spacing: 0.05em; } .post .post-foot .top ul { margin-top: -10px; } .post .post-foot .top ul li { display: inline-block; margin: 10px 10px 0 0; overflow: hidden; border-radius: 3px; background-image: linear-gradient(135deg, var(--gradient)); background-size: 101%; } .post .post-foot .top ul li a { display: block; padding: 5px 10px; background-color: {color:Post Background}; border: 1px solid {color:Border Color}; border-radius: 3px; transition-property: color, background-color, border-color; } .post .post-foot .top ul li a:hover { color: {color:Post Background}; background-color: transparent; border-color: transparent; } .post .post-foot .top + .bottom { margin-top: 15px; } .post .post-foot .bottom { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .post .post-foot .bottom .left a { display: block; font-size: 14px; font-weight: 600; } .post .post-foot .bottom .left a:after { content: 'notes'; font-size: 12px; margin-left: 3px; } .post .post-foot .bottom .left a.note-1:after { content: 'note'; } .post .post-foot .bottom .right { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .post .post-foot .bottom .right li + li { margin-left: 10px; } .post .post-foot .bottom .right li a, .post .post-foot .bottom .right li span, .post .post-foot .bottom .right li svg { display: block; } .post .post-foot .bottom .right li svg { width: 14px; height: 14px; } .post .post-foot .bottom .right li.like { position: relative; } .post .post-foot .bottom .right li.like .like_button { position: absolute; top: 0; left: 0; width: 14px; height: 14px; z-index: 5; overflow: hidden; opacity: 0; } .post .post-foot .bottom .right li a:hover { color: #b4696b; } .post .post-foot .bottom .right li.like .like_button.liked + .custom-like svg { fill: #ff5550; stroke: #ff5550; }

/* post media */ .post .post-content .post-media img { display: block; } .post .post-content .post-media .width_fix iframe { display: block; width: {select:Post Width} !important; margin: 0; } .post .post-content .post-media .width_fix iframe.tumblr_audio_player { height: 85px; }

/* link post */ .post .post-media .link-button { word-break: break-word; overflow: hidden; display: block; position: relative; text-decoration: none; } .post .post-media .link-button .thumbnail img { display: block; margin: 0px; } .post .post-media .link-button .thumbnail:after { background-image: linear-gradient(rgba(0, 0, 0, 0.439216), transparent 50%); content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .post .post-media .publisher-container { margin-bottom: 4px; display: block; font-size: 13px; line-height: 1em; font-weight: 700; word-break: break-all; } .post .post-media .publisher-container .publisher { font-size: 12px; font-weight: 400; line-height: 1em; display: inline-block; margin: 0px; letter-spacing: 0.05em; } .post .post-media .publisher-container.if-thumbnail { position: absolute; top: 15px; left: 20px; right: 20px; } .post .post-media .publisher-container.if-thumbnail .publisher { color: {color:Post Background}; } .post .post-media .info-container { padding: 15px 20px; overflow: hidden; background-color: #fafafa; color: {color:Text Color}; } .post .post-media .info-container .title { display: block; font-size: 24px; font-weight: 700; line-height: 1.1em; text-align: left; } .post .post-media .info-container .title:after { font-family: var(--icons); content: '\f105'; font-size: 16px; display: inline; margin-left: 5px; vertical-align: 1px; } .post .post-media .info-container .excerpt { display: block; margin-top: 5px; font-size: 14px; line-height: 1.5em; } .post .post-media .info-container .author { margin-top: 5px; display: block; font-size: 12px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.25em; opacity: 0.5; }

/* post title */ .post .post-content .post-container .post-title + .post-body { margin-top: -20px; } .post .post-title .title { margin: 0; font-size: 1.5em; font-weight: 600; line-height: 1.1em; }

/* quote */ .post .post-title .quote { font-family: var(--serif); font-size: 1.25em; line-height: 1.35em; } .post .post-title .quote:before, .post .post-title .quote:after { font-size: 0.85em; } .post .post-title .quote:before { content: '\201C'; margin-right: 0.35rem; } .post .post-title .quote:after { content: '\201D'; margin-left: 0.35rem; }

/* caption */ .post .post-body .caption + .caption { margin: 20px -20px 0; padding: 20px 20px 0; border-top: 1px solid {color:Border Color}; } .post .post-body .caption .reblog-head { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .post .post-body .caption .reblog-head .reblog-avatar { width: 25px; height: 25px; border-radius: 5px; overflow: hidden; margin-right: 10px; } .post .post-body .caption .reblog-head .reblog-avatar img { width: 100%; } .post .post-body .caption .reblog-head .reblog-username { color: {color:Text Color}; font-size: 0.95em; font-weight: 600; padding: 0; background: none; } .post .post-body .caption .reblog-content { margin-top: 10px; }

/* figure */ .post .post-body .caption figure.tmblr-full:last-child { margin-bottom: -20px !important; }

/* quote source */ .post .post-body .caption .quote-source { margin-top: -10px !important; } .post .post-body .caption .quote-source:before { content: '\2014'; margin-right: 5px; }

/* chat */ .post .post-body ul.chat { padding: 0; border: 1px solid {color:Border Color}; border-top: none; } .post .post-body ul.chat li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-top: 1px solid {color:Border Color}; line-height: 1.15em; } .post .post-body ul.chat li span { display: block; padding: 10px; } .post .post-body ul.chat li .label { -webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; border-right: 1px solid {color:Border Color}; font-weight: 600; }

/* ask */ .post .post-body .ask, .post .post-body .answer { position: relative; padding: 30px 15px 15px; border-radius: 5px; } .post .post-body .ask .asker, .post .post-body .ask .answerer, .post .post-body .answer .asker, .post .post-body .answer .answerer { padding-bottom: 15px; } .post .post-body .asker-avatar, .post .post-body .answerer-avatar { position: absolute; top: -25px; width: 50px; height: 50px; overflow: hidden; padding: 5px; border-radius: 50%; } .post .post-body .asker-avatar:before, .post .post-body .answerer-avatar:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; } .post .post-body .asker-avatar img, .post .post-body .answerer-avatar img { position: relative; display: block; width: 100%; border-radius: 50%; } .post .post-body .asker-name, .post .post-body .answerer-name { margin-top: 10px; font-size: 1.15em; font-weight: 600; line-height: 1em; } .post .post-body .asker-name:after, .post .post-body .answerer-name:after { font-size: 0.85em; font-weight: 400; opacity: 0.7; margin-left: 0.35em } .post .post-body .asker-name a, .post .post-body .answerer-name a { background: none; padding: 0; border: none; color: inherit; } .post .post-body .asker-question, .post .post-body .answerer-answer { margin-top: 10px; } .post .post-body .ask + .caption, .post .post-body .answer + .caption { margin-top: 20px; } .post .post-body .ask { margin-top: 25px !important; background-color: #f2f2f2; } .post .post-body .ask .asker { border-bottom: 1px solid #e5e5e5; } .post .post-body .ask .asker .asker-avatar:before { background-image: linear-gradient(135deg, {color:Color One} 50%, {color:Color Two} 50%); } .post .post-body .ask .asker .asker-name:after { content: 'sent a message'; } .post .post-body .answer { margin-top: 40px; background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two}); color: #fff; } .post .post-body .answer .answerer { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .post .post-body .answer .answerer .answerer-avatar:before { background-image: linear-gradient(135deg, #e5e5e5 50%, #f2f2f2 50%); } .post .post-body .answer .answerer .answerer-name:after { content: 'answered'; } .post .post-body .answer .answerer-answer a { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.75) 0); color: {color:Banner Text Color}; } .post .post-body .answer .answerer-answer a:hover { color: rgba(255, 255, 255, 0.85); } .post .post-body .answer .answerer-answer figure.tmblr-full { margin-left: -15px; margin-right: -15px; }

/* post notes*/ .posts .post-notes { margin-top: 25px; padding: 20px; background-color: {color:Post Background}; border-radius: 5px; overflow: hidden; color: {color:Text Color}; } .posts .post-notes ol.notes { margin: 0; padding: 0; list-style-type: none; font-size: 0.85em; line-height: 1.5em; letter-spacing: 0.05em; } .posts .post-notes ol.notes li.note + li.note { margin-top: 15px; } .posts .post-notes ol.notes li.note img.avatar { display: inline-block; vertical-align: -6px; margin-right: 10px; width: 20px; height: 20px; border-radius: 50%; } .posts .post-notes ol.notes li.note .action a { font-weight: 600; } .posts .post-notes ol.notes li.note blockquote { border-left: 2px solid {color:Color Two}; margin: 1em 0 0 30px; padding-left: 15px; }

#footer { width: 1050px; margin: 0 auto; margin-top: 25px; border-top: 1px solid; border-left: 1px solid; border-right: 1px solid; border-color: {color:Border Color}; }

#footer .footer-inner a:hover { color: #efdfe0; }

#footer .footer-fixed ul li button { color: #efdfe0; }

#footer .footer-fixed ul li button:hover { color: #b4696b; } /* ------------------------------------------- * CustomCss * ------------------------------------------ */

{CustomCss}

</style> </head> <body class="{select:Tumblr Controls Style}"> <div class="wrapper"> <header id="header"> <nav class="navbar"> <div class="navbar-top"> <div class="search container"> <form action="/search" method="get"> <div class="search-bar"> <input type="text" name="q" value="{SearchQuery}" placeholder="Search..." /> <button type="submit"><i data-feather="search"></i></button> </div> </form> </div> </div> <div class="navbar-main"> <div class="container"> <h1 class="title title-style">{block:ifnotNavbarTitle}{Title}{/block:ifnotNavbarTitle}{block:ifNavbarTitle}{text:Navbar Title}{/block:ifNavbarTitle}</h1> <ul class="menu noneStyle"> {block:ifLink1Title} <li> <a href="{text:Link 1 Url}">{text:Link 1 Title}</a> </li> {/block:ifLink1Title} {block:ifLink2Title} <li> <a href="{text:Link 2 Url}">{text:Link 2 Title}</a> </li> {/block:ifLink2Title} {block:ifLink3Title} <li> <a href="{text:Link 3 Url}">{text:Link 3 Title}</a> </li> {/block:ifLink3Title} {block:ifLink4Title} <li> <a href="{text:Link 4 Url}">{text:Link 4 Title}</a> </li> {/block:ifLink4Title} {block:ifLink5Title} <li> <a href="{text:Link 5 Url}">{text:Link 5 Title}</a> </li> {/block:ifLink5Title} {block:ifLink6Title} <li> <a href="{text:Link 6 Url}">{text:Link 6 Title}</a> </li> {/block:ifLink6Title} <!--

[ Dropdown Submenu Examples ]

If your dropdown title is a link:

<li> <a href="#">Dropdown Title</a> <ul class="submenu noneStyle"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li>

If your dropdown title is NOT a link:

<li> <span>Dropdown Title</span> <ul class="submenu noneStyle"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li>

--> </ul> </div> </div> </nav> {block:ifShowBanner}<div class="banner page-{CurrentPage}"> <div class="banner-img home-banner imgFill"> <img src="{image:Home Banner}" alt="" /> </div> {block:ifShowBannerText}<div class="banner-text container"> <h1 class="title">{block:ifnotBannerTitle}{Title}{/block:ifnotBannerTitle}{block:ifBannerTitle}{text:Banner Title}{/block:ifBannerTitle}</h1> <span class="subtitle">{block:ifnotBannerSubtitle}{Name}.tumblr.com{/block:ifnotBannerSubtitle}{block:ifBannerSubtitle}{text:Banner Subtitle}{/block:ifBannerSubtitle}</span>  <ul class="links noneStyle"> <li> <a href="#" title="Facebook"> <i data-feather="facebook"></i> </a> </li> <li> <a href="#" title="Twitter"> <i data-feather="twitter"></i> </a> </li> <li> <a href="#" title="Instagram"> <i data-feather="instagram"></i> </a> </li> <li> <a href="#" title="YouTube"> <i data-feather="youtube"></i> </a> </li> </ul>  </div>{/block:ifShowBannerText} </div>{block:ifShowBanner} </header> <main id="main"> <div class="container clearfix"> <div class="sidebar sidebar-{select:Sidebar Width}"> <div class="sidebar-inner">

<div class="section"> <div class="section-head"> <div class="icon"><i data-feather="home"></i></div> <h3 class="title">Intro</h3> </div> <div class="section-content intro"> {block:ifSidebarIntroImage}<div class="intro-img"> <img src="{image:Sidebar Intro}" alt="" /> </div>{/block:ifSidebarIntroImage} {block:Description}<div class="intro-text post-style"> {Description} </div>{/block:Description} </div> </div>

<div class="section"> <div class="section-head"> <div class="icon"><i data-feather="calendar"></i></div> <h3 class="title">Updates</h3> </div> <div class="section-content events">  <ul class="event noneStyle"> <li> <div class="event-date"> <span class="month">may 2020</span> <span class="day">02<sub>nd</sub></span> </div> </li> <li> <div class="event-info"> <span class="title"><a href="https://anamneseverge.tumblr.com/post/616942218086907904/anamnese-announcement">opening soon.</a></span> <span class="detail">schedule announced.</span> </div> </li> </ul>   <ul class="event noneStyle"> <li> <div class="event-date"> <span class="month">apr 2020</span> <span class="day">24<sub>th</sub></span> </div> </li> <li> <div class="event-info"> <span class="title"><a href="https://anamneseverge.tumblr.com/post/616249197826621440/anamnese-announcement">new pages added.</a></span> <span class="detail">additional info revealed.</span> </div> </li> </ul>  </div> </div>

<div class="section"> <div class="section-head"> <div class="icon"><i data-feather="briefcase"></i></div> <h3 class="title">Events</h3> </div> <div class="section-content projects">  <div class="project"> <div class="project-head"> <div class="pic"> <img src="https://cdn.discordapp.com/attachments/635266585497436181/678413785530236928/stay_tuned_COPY.png" alt="" /> </div> <div class="name"> <h4 class="title">an empty sky.</h4> </div> </div> <div class="project-content"> <ul class="info noneStyle"> <li> worry not; the verge will speak when it is ready. </li> </ul> <ul class="links noneStyle"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </div> </div>  </div> </div>

<div class="section"> <div class="section-head"> <div class="icon"><i data-feather="info"></i></div> <h3 class="title">Site info</h3> </div> <div class="section-content siteinfo"> <dl> <dt>established:</dt> <dd>03.13.2020</dd> <dt>anamnese:</dt> <dd>verge</dd> <dt>currently:</dt> <dd>getting that bread</dd> <dt>mods:</dt> <dd>gay</dd> <dt>theme by:</dt> <dd><a href="https://shudesigns.tumblr.com" target="_blank">ShuDesigns</a></dd> </dl> </div> </div>

</div> </div>

<div class="section"> <div class="section-head"> <div class="icon"><i data-feather="link"></i></div> <h3 class="title">Links</h3> </div> <div class="section-content sidelinks">  <ul class="list noneStyle"> <li> <a href="https://docs.google.com/document/d/1a0GPlZ42SjaGGMjVYfvJox0TtL4ch5C-NaPW6fNdOPc/edit?usp=sharing"> <i data-feather="menu"></i>FAQ </a> </li> <li> <a href="https://docs.google.com/document/d/1pzms94q2mQbzVXpvZHmxcL2KHyx9Yam18ZRKXvGsBOs/edit?usp=sharing"> <i data-feather="menu"></i>Forms </a> </li> <li> <a href="https://anamneseverge.tumblr.com/roster"> <i data-feather="menu"></i>Roster </a> </li> <li> <a href="https://docs.google.com/document/d/1KOJVNvV6sgwO5pqm9xBBWHhiOuXeLUqtRW5003Js6nw/edit?usp=sharing"> <i data-feather="menu"></i>World Map </a> </li> <li> <a href="https://docs.google.com/document/d/14FZrw_UKvUBO28lQxKQNyFwngWq-JlLbWvge2UEQIMk/edit?usp=sharing"> <i data-feather="menu"></i>Magic </a> </li> <li> <a href="https://docs.google.com/document/d/1rNREcTXfyUU9FPrbhFEQlWKFrMM4VDsSUjig9GHlUps/edit?usp=sharing"> <i data-feather="menu"></i>Technology </a> </li> <li> <a href="https://docs.google.com/document/d/1_iAsMOnzO1tX77EIzyhHPipV8r8WeZNOCNP0_KbrMp0/edit?usp=sharing"> <i data-feather="menu"></i>Ranking </a> </li> <li> <a href="https://docs.google.com/document/d/13xs-jPP7PodQ8Jzamy_4g0ySPyRY9dv_iHDh6VWix68/edit?usp=sharing"> <i data-feather="menu"></i>Housing </a> </li> <li> <a href="https://docs.google.com/document/d/1z2R2CK4Qego8zA0eRcFq3rcnKrhhOeGVo-BqIwnzImI/edit?usp=sharing"> <i data-feather="menu"></i>Bestiary </a> </li> <li> <a href="https://docs.google.com/document/d/15xGQcRjydGymIZ292Su_preOFJerLpT1vLOpInCyND8/edit?usp=sharingg"> <i data-feather="menu"></i>Careers </a> </li> <li> <a href="https://anamneseverge.tumblr.com/npcs"> <i data-feather="menu"></i>NPCs </a> </li> <li> <a href="https://docs.google.com/document/d/1GoS-rFY7FHWvcU9qKsr9bRYr2WUIJuTa0AcjM8Ufvjc/edit?usp=sharing"> <i data-feather="menu"></i>Credits </a> </li> </ul>  </div> </div>

<div class="section"> <div class="section-head"> <div class="icon"><i data-feather="twitter"></i></div> <h3 class="title">Latest Tweets</h3> </div> <div class="section-content tweets"> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <a class="twitter-timeline" height="400px" data-chrome="noheader noscrollbar nofooter noborders transparent" href="https://twitter.com/anamneseverge"> Tweets by @anamneseverge </a> </div> </div>

<div class="section"> <div class="section-head"> <div class="icon"><i data-feather="users"></i></div> <h3 class="title">Moderators</h3> </div> <div class="section-content members"> <ul class="noneStyle">  <li> <a href="https://twitter.com/thelongmemory" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/635262317151649802/686728283038941184/oh_he.png" alt="" /> </div> <div class="member-info"> <dl> <dt>mod chalcedony</dt> <dd>lore, processing</dd> </dl> </div> </a> </li> <li> <a href="https://twitter.com/emberedcelica" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/635262317151649802/686724339168837687/thank_you_i_love_u.png" alt="" /> </div> <div class="member-info"> <dl> <dt>mod marcavilla</dt> <dd>lore, inbox, graphics</dd> </dl> </div> </a> </li> <li> <a href="https://twitter.com/rhapsodoes" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/635262317151649802/686721737928605738/FAUST_I_SWEAR_TO_GOD.png" alt="" /> </div> <div class="member-info"> <dl> <dt>mod echuil</dt> <dd>lore, processing, coding</dd> </dl> </div> </a> </li> <li> <a href="https://twitter.com/valdisarbore" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/635262317151649802/686716246229909556/cyrus_icon.png" alt="" /> </div> <div class="member-info"> <dl> <dt>mod glisshallow</dt> <dd>lore, processing</dd> </dl> </div> </a> </li> <li> <a href="https://twitter.com/outerjaw" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/635266585497436181/692885387235819520/mod_ilvaite_copy.png" alt="" /> </div> <div class="member-info"> <dl> <dt>mod ilvaite</dt> <dd>chat, inbox, lore</dd> </dl> </div> </a> </li> <li> <a href="https://twitter.com/pinkspyyder" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/635266585497436181/692807355708080168/mod_umber_copy.png" alt="" /> </div> <div class="member-info"> <dl> <dt>mod umber</dt> <dd>chat, pr, lore</dd> </dl> </div> </a> </li> <li> <a href="https://twitter.com/hyperballistic" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/635266585497436181/692885383008223302/mod_ebonstead_copy.png" alt="" /> </div> <div class="member-info"> <dl> <dt>mod ebonstead</dt> <dd>chat, inbox, lore</dd> </dl> </div> </a> </li> <li> <a href="https://twitter.com/sisigaw_" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/635266585497436181/692882901477359616/eri_icon.png" alt="" /> </div> <div class="member-info"> <dl> <dt>mod arinel</dt> <dd>processing, chat, lore</dd> </dl> </div> </a> </li> <li> <a href="/mods" target="_blank"> <div class="member-avatar"> <img src="https://cdn.discordapp.com/attachments/489256263352451082/695777185189068810/angy.png" alt="" /> </div> <div class="member-info"> <dl> <dt>moderators page</dt> <dd>click here to see our bios!</dd> </dl> </div> </a> </li> </ul> </div> </div>

<div class="section"> <div class="section-head"> <div class="icon"><i data-feather="heart"></i></div> <h3 class="title">Affiliates</h3> </div> <div class="section-content affiliates"> <ul class="noneStyle">  <li> <a href="https://anamneseverge.tumblr.com" title="anamnese verge" target="_blank"> <img src="https://static.tumblr.com/9daae652653e35b2fbdfd0a168b7e184/ii88oro/vx0q5rsgm/tumblr_static_72wsryhvov0g4wo0skccowwcs.png" alt="" /> </a> </li>   <li> <a href="https://anamneseverge.tumblr.com" title="anamnese verge" target="_blank"> <img src="https://static.tumblr.com/9daae652653e35b2fbdfd0a168b7e184/ii88oro/vx0q5rsgm/tumblr_static_72wsryhvov0g4wo0skccowwcs.png" alt="" /> </a> </li>   <li> <a href="https://anamneseverge.tumblr.com" title="anamnese verge" target="_blank"> <img src="https://static.tumblr.com/9daae652653e35b2fbdfd0a168b7e184/ii88oro/vx0q5rsgm/tumblr_static_72wsryhvov0g4wo0skccowwcs.png" alt="" /> </a> </li>   <li> <a href="https://anamneseverge.tumblr.com" title="anamnese verge" target="_blank"> <img src="https://static.tumblr.com/9daae652653e35b2fbdfd0a168b7e184/ii88oro/vx0q5rsgm/tumblr_static_72wsryhvov0g4wo0skccowwcs.png" alt="" /> </a> </li>  </ul> </div> </div>

</div> </div> </div>

<div class="primary primary-{select:Post Width}"> <div class="posts"> {block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"} <article class="post wow fadeInUp"> {block:Date}<div class="post-head"> <ul class="noneStyle left"> <li class="date"> <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"> <i data-feather="calendar"></i> {ShortMonth} {DayOfMonthWithZero} {Year} </a> </li> <li class="time"><i data-feather="clock"></i>{12HourWithZero}:{Minutes} {CapitalAmPm}</li> </ul> {block:RebloggedFrom} <ul class="noneStyle right"> <li class="source"> <a href="{ReblogRootURL}" target="_blank" title="Source"> <img src="{ReblogRootPortraitURL-48}" alt="" /> </a> </li> <li class="via"> <a href="{ReblogParentURL}" target="_blank" title="From"> <img src="{ReblogParentPortraitURL-48}" alt="" /> </a> </li> </ul>{/block:RebloggedFrom} </div>{/block:Date} <div class="post-content">

{block:Text} <div class="post-container"> {block:Title} <div class="post-title"> <h1 class="title">{Title}</h1> </div> {/block:Title} <div class="post-body post-style"> {block:NotReblog} <div class="caption"> {block:AskPage}During our soft opening, we have limited the number of applications and reserves per member. Please find the full timeline of our soft opening <a href="https://anamneseverge.tumblr.com/post/616942218086907904/anamnese-announcement">HERE</a> for your reference.{/block:AskPage} {Body} </div> {/block:NotReblog} {block:RebloggedFrom}{block:Reblogs} <div class="caption"> <div class="reblog-head"> <div class="reblog-avatar"> {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive} {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated} </div> {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive} {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated} </div> <div class="reblog-content">{Body}</div> </div> {/block:Reblogs}{/block:RebloggedFrom} </div> </div> {/block:Text}

{block:Photo} <div class="post-media"> {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%" style="display:block;" />{LinkCloseTag} </div> {block:Caption} <div class="post-container"> <div class="post-body post-style"> {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog} {block:RebloggedFrom}{block:Reblogs} <div class="caption"> <div class="reblog-head"> <div class="reblog-avatar"> {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive} {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated} </div> {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive} {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated} </div> <div class="reblog-content">{Body}</div> </div> {/block:Reblogs}{/block:RebloggedFrom} </div> </div> {/block:Caption} {/block:Photo}

{block:Photoset} <div class="post-media"> <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}"> {block:Photos} <div class="photo-data"> <div class="pxu-photo"> <img src="{PhotoURL-HighRes}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" /> </div> <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a> </div> {/block:Photos} </div> </div> {block:Caption} <div class="post-container"> <div class="post-body post-style"> {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog} {block:RebloggedFrom}{block:Reblogs} <div class="caption"> <div class="reblog-head"> <div class="reblog-avatar"> {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive} {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated} </div> {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive} {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated} </div> <div class="reblog-content">{Body}</div> </div> {/block:Reblogs}{/block:RebloggedFrom} </div> </div> {/block:Caption} {block:Hidden}{block:ContentSource} {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} {/block:ContentSource}{/block:Hidden} {/block:Photoset}

{block:Video} <div class="post-media"> <div class="video" style="margin-bottom:-5px;">{Video-500}</div> </div> {block:Caption} <div class="post-container"> <div class="post-body post-style"> {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog} {block:RebloggedFrom}{block:Reblogs} <div class="caption"> <div class="reblog-head"> <div class="reblog-avatar"> {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive} {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated} </div> {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive} {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated} </div> <div class="reblog-content">{Body}</div> </div> {/block:Reblogs}{/block:RebloggedFrom} </div> </div> {/block:Caption} {/block:Video}

{block:Audio} <div class="post-media"> <div class="width_fix">{AudioEmbed-500}</div> </div> {block:Caption} <div class="post-container"> <div class="post-body post-style"> {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog} {block:RebloggedFrom}{block:Reblogs} <div class="caption"> <div class="reblog-head"> <div class="reblog-avatar"> {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive} {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated} </div> {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive} {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated} </div> <div class="reblog-content">{Body}</div> </div> {/block:Reblogs}{/block:RebloggedFrom} </div> </div> {/block:Caption} {/block:Audio}

{block:Link} <div class="post-media"> <a href="{Url}" target="_blank" class="link-button"> {block:Thumbnail}<div class="thumbnail"><img src="{Thumbnail}" width="100%" /></div>{/block:Thumbnail} <div class="info-container"> {block:Host}<div class="publisher-container {block:Thumbnail}if-thumbnail{/block:Thumbnail}"> <div class="publisher">{Host}</div> </div>{/block:Host} <div class="title">{Name}</div> {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt} {block:Author}<div class="author">{Author}</div>{/block:Author} </div> </a> </div> {block:Description} <div class="post-container"> <div class="post-body post-style"> {block:NotReblog}<div class="caption">{Description}</div>{/block:NotReblog} {block:RebloggedFrom}{block:Reblogs} <div class="caption"> <div class="reblog-head"> <div class="reblog-avatar"> {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive} {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated} </div> {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive} {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated} </div> <div class="reblog-content">{Body}</div> </div> {/block:Reblogs}{/block:RebloggedFrom} </div> </div> {/block:Description} {/block:Link}

{block:Quote} <div class="post-container"> <div class="post-title"> <span class="quote">{Quote}</span> </div> {block:Source} <div class="post-body post-style"> <div class="caption"> <p class="quote-source">{Source}</p> </div> </div> {/block:Source} </div> {/block:Quote}

{block:Chat} <div class="post-container"> {block:Title} <div class="post-title"> <h1 class="title">{Title}</h1> </div> {/block:Title} <div class="post-body post-style"> <ul class="noneStyle chat"> {block:Lines}<li class="user_{UserNumber}"> {block:Label}<span class="label">{Label}</span>{/block:Label} <span class="line">{Line}</span> </li>{/block:Lines} </ul> </div> </div> {/block:Chat}

{block:Answer} <div class="post-container"> <div class="post-body post-style"> <div class="ask"> <div class="asker"> <div class="asker-avatar"><img src="{AskerPortraitURL-64}" alt="" /></div> <div class="asker-name">{Asker}</div> </div> <div class="asker-question">{Question}</div> </div> {block:NotReblog}<div class="caption">{Replies}</div>{/block:NotReblog} {block:Answerer} <div class="answer"> <div class="answerer"> <div class="answerer-avatar"><img src="{AnswererPortraitURL-48}" alt="" /></div> <div class="answerer-name">{Answerer}</div> </div> <div class="answerer-answer">{Answer}</div> </div> {/block:Answerer} {block:RebloggedFrom}{block:Reblogs} <div class="caption"> <div class="reblog-head"> <div class="reblog-avatar"> {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive} {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated} </div> {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive} {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated} </div> <div class="reblog-content">{Body}</div> </div> {/block:Reblogs}{/block:RebloggedFrom} </div> </div> {/block:Answer}

</div> {block:Date}<div class="post-foot"> {block:HasTags}<div class="top"> <ul class="noneStyle"> {block:Tags}<li><a href="{TagUrl}">#{Tag}</a></li>{/block:Tags} </ul> </div>{/block:HasTags} <div class="bottom"> <div class="left"> {block:NoteCount}<a href="{Permalink}" class="notes note-{NoteCount}">{NoteCount}</a>{/block:NoteCount} </div> <ul class="noneStyle right"> <li class="reblog"> <a href="{ReblogURL}"><i data-feather="refresh-cw"></i></a> </li> <li class="like"> {LikeButton size="24" color="black"} <span class="custom-like"><i data-feather="heart"></i></span> </li> </ul> </div> </div>{/block:Date} </article> {block:PostNotes}<div class="post-notes">{PostNotes}</div>{/block:PostNotes} {/block:Posts} </div> {block:Pagination}<div class="pagination"> <div class="arrow prev {block:PreviousPage}active{/block:PreviousPage}"> <a href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}"><i data-feather="arrow-left"></i></a> </div> <ul class="noneStyle jump"> {block:JumpPagination length="10"} {block:CurrentPage}<li class="current"><a href="{URL}">{PageNumber}</a></li>{/block:CurrentPage} {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage} {/block:JumpPagination} </ul> <div class="arrow next {block:NextPage}active{/block:NextPage}"> <a href="{block:NextPage}{NextPage}{/block:NextPage}"><i data-feather="arrow-right"></i></a> </div> </div>{/block:Pagination} </div> </div> </main> <footer id="footer"> <div class="footer-inner container">© {CopyrightYears} <a href="#">{Name}</a> all rights reserved. Theme by <a href="https://shudesigns.tumblr.com/" target="_blank">ShuDesigns</a> • Powered by <a href="https://tumblr.com/" target="_blank">Tumblr</a> </footer> </div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="0" height="0" style="display:block"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(-45)" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="{color:Color One}" /> <stop offset="100%" stop-color="{color:Color Two}" /> </linearGradient> </defs> </svg> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="//unpkg.com/feather-icons"></script> <script src="https://static.tumblr.com/ickcbh2/XHXpmk6si/browser.js"></script> <script src="https://static.tumblr.com/ickcbh2/uaspn5sdc/plugins.js"></script> <script src="https://static.tumblr.com/a0dmjhi/MGlp5b8wd/pxuphotoset.min.js"></script> <script src="https://static.tumblr.com/ickcbh2/kjJpn8amj/main.min.js"></script> <script> (function($) { // photoset var $window = $(window), $photoset = $('.photo-slideshow'); $photoset.pxuPhotoset({ lightbox: true, gutter: '4px', borderRadius: '0px', photoset: '.photo-slideshow', photoWrap: '.photo-data', photo: '.pxu-photo' }); // audio player var $audio = $('iframe.tumblr_audio_player'); $audio.load(function() { $(this).contents().find('head').append('<style type="text/css">' + '.audio-player{ background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two}); color: {color:Banner Text Color} !important; }' + '.audio-player .audio-info .track-artist { color: {color:Banner Text Color} !important; }' + '</style>'); }); })(jQuery); </script>

</body> </html>

0 notes