[html]<!----- TANGERINE / FRVDDIEMERCURY & STEVENHYD ----->
<title>title goes here !</title>
<link rel="shortcut icon" href="http://i.imgur.com/4IoPVYC.png"><!--- copy your blog icon here --->
<!-- SCRIPTS -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function() {
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:20,
tip_fade_speed:200,
attribute:"title"
});
});
})(jQuery);
</script>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<script>
$.fn.strech_text = function(){
var elmt = jQuery(this),
cont_width = elmt.width();
if(jQuery(this).find('.stretch_it').length > 0){
var txt = jQuery(this).find('.stretch_it').html();
jQuery(this).html(txt);
}else{
var txt = elmt.html();
}
var one_line = jQuery('<span class="stretch_it">' + txt + '</span>'),
nb_char = elmt.text().length,
spacing = cont_width/nb_char,
txt_width;
elmt.html(one_line);
txt_width = one_line.width();
if (txt_width < cont_width){
var char_width = txt_width/nb_char,
ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ;
one_line.css({'letter-spacing': ltr_spacing});
} else {
one_line.contents().unwrap();
elmt.addClass('justify');
}
};
$(document).ready(function () {
$('.stretch').each(function(){
$(this).strech_text();
});
});
jQuery(window).resize(function(){
jQuery('.stretch').each(function(){
jQuery(this).strech_text();
});
});
</script>
<link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800|Nunito+Sans:300,400,700,800|Karla:400,700|Muli:300,400,600,700.800" rel="stylesheet">
</head>
<style type="text/css">
.vcnilla {
width: 710px;
height: 450px;
position: relative;
margin-top: 10px;
background: #fff;
border: 1px solid #80808061;
text-align: justify;
border-radius: 24px;
}
/*-----------TAB LINKS----------*/
.tab {
position:absolute;
top:-30px;
}
.tab button {
background:#fff;
padding:none;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
width:110px;
height:50px;
font-family:'nunito sans';
color:#8d8d8d;
border-radius:6px;
text-transform:uppercase;
font-weight:800;
letter-spacing:2px;
font-size:8px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #f5f5f5;
}
/* Create an active/current tablink class */
.tab button.active {
background-color:#f1f1f1;
}
/* Style the tab content */
.tabcontent {
display: block;
padding: 0px;
animation: fadeEffect 0.5s;
width: 438px;
height: 400px;
border-radius: 15px;
position: absolute;
left: 14px;
top: 34px;
background: #fff;
transform: scale(1);
border: 1px solid #cfcfcf;
overflow: auto;
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0.6; transform:scale(0.7); }
to {opacity: 1; transform:scale(1); }
}
/*---------------SIDEBAR--------------*/
#sidebar {
width: 265px;
height: 145px;
background: #fcd6cc;
position: absolute;
right: 0px;
top: 25px;
overflow: auto;
padding-left: 445px;
border: 1px solid #cfcfcf;
border-right: none;
border-left: none;
}
#sidebar li {
margin-left:15px;
margin-top:15px;
background:#fff;
border-radius:7px;
width:110px;
height:50px;
float:left;
list-style-type:none;
border-radius:7px;
}
/*------------------NAME------------------*/
#name {
width:205px;
text-align:center;
position:absolute;
top:235px;
right:30px;
z-index:999;
font-size:14px;
font-family:montserrat;
text-transform:uppercase;
font-weight:700;
}
.textbox {
margin:10px;
margin-top:25px;
margin-right:15px;
text-align:justify;
font-family:'nunito sans';
text-transform:uppercase;
font-weight:800;
letter-spacing:2px;
font-size:8px;
line-height:14px;
height:128px;
overflow:auto;
}
/*---------------QUOTE----------------*/
#quote {
width: 80px;
display: grid;
padding: 2px;
margin-top: -10px;
color: #000;
background: #fed6cd;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
font-family: jost;
font-size: 10px;
justify-content: center;
border-radius: 15px;
align-content: center;
border: 1px solid #cfcfcf;
}
/*----------------------TWITTER TAB----------------------*/
.twitheader {
position:absolute;
top:0px;
left:0px;
width:650px;
height:90px;
}
.twitheader img {
width:340px;
height:90px;
}
.twiticon {
position:absolute;
top:55px;
left:20px;
}
.twiticon img {
width:60px;
height:60px;
border-radius:100%;
border:4px solid #fff;
}
.twitterstats {
padding:10px;
position:absolute;
width:435px;
top:150px;
left:10px;
}
.twitterstats li {
width:99px;
float:left;
text-align:left;
list-style-type:none;
text-transform:uppercase;
letter-spacing:2px;
text-align:left;
font-weight:700;
font-size:8px;
text-align:center;
}
.twitterstats li number {
font-size:11px;
font-weight:800;
color:#f8c9bd;
}
.twitsidebar {
position:absolute;
top:95px;
left:20px;
width:300px;
text-align:left;
}
.twitsidebar username {
font-size:9px;
font-weight:800;
color:#e7a767; /* twitter username color */
text-transform:uppercase;
letter-spacing:3px;
margin-left:80px;
line-height:25px;
}
.tweetscontainer {
position:absolute;
left:0px;
bottom:0px;
width:340px;
height:225px;
overflow:auto;
}
.atweet {
border:1px solid #e9e9e9;
margin:0px 20px 20px 20px;
width:300px;
border-radius:5px;
}
.atweetusername {
position:relative;
width:270px;
padding:15px;
text-align:left;
text-transform:uppercase;
letter-spacing:2px;
text-align:left;
font-weight:800;
font-size:9px;
}
.atweetusername timeago {
float:right;
}
.atweetcontent {
letter-spacing:1px;
text-align:justify;
margin-left:15px;
margin-right:15px;
padding-bottom:10px;
}
.tweetstats {
position:relative;
text-align:left;
color:#e7a767; /* twitter retweets & likes text color */
font-size:9px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
padding-bottom:15px;
margin-left:15px;
}
.tweetstats i {
font-size:11px;
}
/*-------------GOOGLE TAB-------------*/
.googletopbar {
background:#f2f2f2;
padding:15px;
}
.searchbar {
background:#fff;
border-radius:14px;
padding:5px;
padding-left:10px;
}
.googlesearches {
margin:15px;
font-size:8px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
}
.googlesearches time {
float:right;
}
.googlesearches li {
list-style-type:none;
margin-top:18px;
cursor:pointer;
color:#9d9d9d;
}
.bookmarks {
margin:15px;
margin-top:20px;
font-size:8px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
}
.bookmarks li {
list-style-type:none;
margin-top:18px;
cursor:pointer;
}
.bookmarks li letter {
background:#fed8b1;
border-radius:4px;
font-size:11px;
width:11px;
height:11px;
padding:6px 9px 6px 9px;
margin-right:5px;
color:#5d5d5d;
}
.bookmarks li:hover, .googlesearches li:hover {
color:#9d9d9d;
}
.googleaccount {
position:absolute;
bottom:0px;
background:#fcd6cc;
padding:15px;
width:310px;
height:80px;
display:table;
}
.gaccicon {
font-weight:800;
font-family:'montserrat';
font-size:25px;
width:30px;
height:30px;
padding:15px;
text-align:center;
background:#fff;
border-radius:100%;
margin-top:10px;
margin-left:10px;
}
.gaccinfo {
width:200px;
font-size:8px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:700;
position:absolute;
left:110px;
top:25px;
display: table-cell;
vertical-align: middle;
}
.gaccinfo b {
font-weight:800;
}
.gaccinfo p {
cursor:pointer;
font-weight:800;
}
/*---------- INSTAGRAM ----------*/
.postscontainer {
width: 425px;
height: 392px;
padding: 4px 7px 4px 2px;
line-height: 26px;
overflow-y: scroll;
overflow-x: hidden;
}
.apost {
border:1px solid #e9e9e9;
margin:0px 20px 20px 20px;
width:300px;
height:380px;
border-radius:5px;
}
.iggusername {
position:relative;
width:270px;
padding:15px;
text-align:left;
text-transform:uppercase;
letter-spacing:2px;
text-align:left;
font-weight:800;
font-size:9px;
}
.iggusername timeago {
float:right;
}
.igcontent {
letter-spacing:1px;
text-align:justify;
margin-left:0px;
margin-right:15px;
padding-bottom:10px;
}
.poststats {
position:relative;
text-align:left;
color:#e7a767; /* insta interaction tools color */
font-size:11px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
padding-bottom:15px;
margin-left:15px;
}
.poststats i {
font-size:14px;
}
.postcaption {
position:relative;
text-align:left;
font-size:8px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
padding-bottom:15px;
margin-left:15px;
}
.postcaption b {
font-size:8px;
color:#e7a767; /* insta user tools color */
}
/*--------------SPOTIFY TAB--------------*/
.playlisticon {
padding:25px;
background:#f5f5f5;
width:340px;
position:absolute;
top:0px;
height:70px;
}
.playlisticon i {
background:#fcd6cc;
padding:20px;
font-size:30px;
border-radius:5px;
}
.playlistinfo {
font-size:8px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
position:absolute;
left:115px;
bottom:20px;
line-height:17px;
}
.playlistinfo playlistname {
font-size:14px;
color:#e7a767;
}
.playlistbttm {
background:#e7a767;
position:absolute;
top:120px;
width:340px;
padding:10px;
}
.playbutton {
background:#fff;
float:left;
padding:7px 10px 7px 10px;
font-size:8px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
border-radius:5px;
cursor:pointer;
}
.playlistbttm i {
float:right;
font-size:20px;
color:#fff;
cursor:pointer;
margin-right:20px;
margin-top:3px;
}
.playlist table {
margin-top:165px;
font-size:8px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
}
.playlist table th {
font-weight:800;
color:#e7a767;
width:119px;
text-align:left;
padding:10px;
}
.playlist table td {
padding:6px;
padding-left:10px;
}
</style>
<div class="vcnilla">
<div id="name">
<p class="stretch">username</p>
<div class="textbox">
lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet lorem ipsum dolor amet</div>
</div>
<div id="quote">магазин</div>
<div id="sidebar" class="tab">
<li><button class="tablinks active" onclick="openCity(event, 'tab1')">
instagram
</button></li>
<li><button class="tablinks" onclick="openCity(event, 'tab2')">
twitter
</button></li>
<li><button class="tablinks" onclick="openCity(event, 'tab3')">
google
</button></li>
<li><button class="tablinks" onclick="openCity(event, 'tab4')">
spotify
</button></li>
</div>
<!----------------TAB 01---------------->
<div id="tab1" class="tabcontent" style="display:block;">
<div class="postscontainer">
<!---------A POST--------->
<table>
<tbody><tr>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
</tr>
</tbody></table>
<!---------- A POST END ---------->
</div></div>
<!----------------TAB 01 END---------------->
<!------------------TAB 02------------------>
<div id="tab2" class="tabcontent">
<div class="twitheader">
<img src="https://via.placeholder.com/340x90">
</div>
<div class="twitterstats">
<li><number>234</number><br>tweets</li>
<li><number>1.8MIL</number><br>followers</li>
<li><number>253</number><br>following</li>
</div>
<div class="twiticon">
<img src="https://via.placeholder.com/60x60">
</div>
<!----------TWITTER SIDEBAR---------->
<div class="twitsidebar">
<username>@username</username>
<p>
lorem ipsum dolor sit amet lorem ipsum dolor sit
</div>
<!----------TWITTER SIDEBAR---------->
<!--------TWEETS CONTAINER-------->
<div class="tweetscontainer">
<!---------A TWEET--------->
<div class="atweet">
<div class="atweetusername">
@username <timeago>2h ago</timeago>
</div>
<div class="atweetcontent">lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit</div>
<div class="tweetstats">
<i class="fas fa-retweet"></i> 14.4k <i class="far fa-heart"></i> 20.3k
</div>
</div>
<!---------A TWEET--------->
<!---------A TWEET--------->
<div class="atweet">
<div class="atweetusername">
@username <timeago>5h ago</timeago>
</div>
<div class="atweetcontent">lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit</div>
<div class="tweetstats">
<i class="fas fa-retweet"></i> 14.4k <i class="far fa-heart"></i> 20.3k
</div>
</div>
<!---------A TWEET--------->
<!---------A TWEET--------->
<div class="atweet">
<div class="atweetusername">
@username <timeago>1d ago</timeago>
</div>
<div class="atweetcontent">lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit lorem ipsum dolor sit amet lorem ipsum dolor sit</div>
<div class="tweetstats">
<i class="fas fa-retweet"></i> 14.4k <i class="far fa-heart"></i> 20.3k
</div>
</div>
<!---------A TWEET--------->
</div>
<!--------TWEETS CONTAINER-------->
</div>
<!----------------TAB 02 END---------------->
<!----------------TAB 03---------------->
<div id="tab3" class="tabcontent">
<div class="googletopbar">
<div class="searchbar">current search result</div></div>
<div class="googlesearches">
last google searches
<li>search result #1 <time>5:33pm</time></li>
<li>search result #2 <time>4:33pm</time></li>
<li>search result #3 <time>3:33pm</time></li>
</div>
<div class="bookmarks">
bookmarks
<li><letter>c</letter> https://www.bookmark.com</li>
<li><letter>p</letter> https://www.bookmark.com</li>
<li><letter>c</letter> https://www.bookmark.com</li>
</div>
<div class="googleaccount">
<div class="gaccicon">A</div>
<div class="gaccinfo"><br>
logged in as <b>##### #####</b>
<p>manage your passwords
<p>log out
</div>
</div>
</div>
<!----------------TAB 03 END---------------->
<!----------------TAB 04---------------->
<div id="tab4" class="tabcontent">
<div class="playlisticon">
<i class="fas fa-headphones"></i>
<div class="playlistinfo">
<playlistname>playlist name.</playlistname>
<br>created by #####
<br>32 songs • 3 hr 14 min
</div>
</div>
<div class="playlistbttm">
<div class="playbutton">start playlist</div>
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="playlist">
<table>
<tr>
<th>song name</th>
<th>artist</th>
<th style="width:30px;">time</th>
</tr>
<tr>
<td>song name</td>
<td>artist</td>
<td>3:05</td>
</tr>
<tr>
<td>song name</td>
<td>artist</td>
<td>4:02</td>
</tr>
<tr>
<td>song name</td>
<td>artist</td>
<td>1:00</td>
</tr>
<tr>
<td>song name</td>
<td>artist</td>
<td>1:00</td>
</tr>
<tr>
<td>song name</td>
<td>artist</td>
<td>1:00</td>
</tr>
<tr>
<td>song name</td>
<td>artist</td>
<td>1:00</td>
</tr>
<tr>
<td>song name</td>
<td>artist</td>
<td>1:00</td>
</tr>
<tr>
<td>song name</td>
<td>artist</td>
<td>1:00</td>
</tr>
</table>
</div>
</div>
<!----------------TAB 04 END---------------->
</div>
[/html]
