959 lines
24 KiB
Plaintext
959 lines
24 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
About Page [13]: Breeze
|
|
Made by glenthemes
|
|
|
|
Initial release: 2019/04/13
|
|
Last updated: 2022/09/14
|
|
|
|
TERMS OF USE:
|
|
1) Do not remove the page credit.
|
|
2) Do not repost/redistribute my themes.
|
|
3) Do not take parts of the code and use it as your own.
|
|
4) Do not use my themes as a base code.
|
|
5) Do not mix my themes together.
|
|
|
|
Please read the guide!
|
|
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
|
|
docs.google.com/document/d/12xWee3PwkoHk3z2n3Zf7VHCtFlagLjV90jInsyZIRWY/edit?usp=sharing
|
|
|
|
Credits:
|
|
- Intro block feather header gif by @servphim
|
|
servphim.tumblr.com/post/160491275855
|
|
- Icon images by @emilylkinney
|
|
emilylkinney.tumblr.com/icons
|
|
- Percentage graphs by @suiomi
|
|
suiomi.com/post/181320974554
|
|
- Feather icon font by colebemis @ twitter
|
|
feathericons.com
|
|
- 'FontAwesome' icon font
|
|
fontawesome.com/
|
|
icon list: fontawesome.com/icons
|
|
------------------------------------------------------------------------>
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
|
|
<head>
|
|
|
|
<title>{Title}</title>
|
|
|
|
<link rel="shortcut icon" href="{Favicon}">
|
|
|
|
<!--------------------JAVASCRIPTS-------------------->
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
|
<script src="//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:0,
|
|
tip_fade_speed:250,
|
|
attribute:"title"
|
|
});
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Quicksand:500|Karla" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
|
|
|
<script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
|
|
|
|
<script src="//static.tumblr.com/2pnwama/csBppxn8i/breeze.js"></script>
|
|
|
|
<!-------------------------------------------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
/*--------------------TOOLTIPS--------------------*/
|
|
#s-m-t-tooltip {
|
|
padding:5px 10px;
|
|
margin:20px;
|
|
background-color:var(--Tooltip-Background);
|
|
border-radius:3px;
|
|
font-family:karla;
|
|
font-size:9px;
|
|
letter-spacing:1px;
|
|
text-transform:uppercase;
|
|
color:var(--Tooltip-Text);
|
|
z-index:99;
|
|
max-width:40vw;
|
|
}
|
|
|
|
/*--------------------TUMBLR CONTROLS--------------------*/
|
|
#plus-s {
|
|
position:fixed;
|
|
top:0;margin-top:17px;
|
|
right:0;margin-right:15px;
|
|
z-index:10;
|
|
}
|
|
|
|
#plus-s svg {
|
|
width:15px;height:15px;
|
|
color:var(--Top-Right-Plus-Icon);
|
|
}
|
|
|
|
iframe#tumblr_controls, .iframe-controls--desktop {
|
|
top:calc(1px + 5px)!important;
|
|
right:calc(5px)!important;
|
|
padding-right:40px;
|
|
position:fixed!important;
|
|
|
|
/* delete these 2 lines if you want white tumblr controls */
|
|
filter:invert(100%) hue-rotate(180deg);
|
|
-webkit-filter:invert(100%) hue-rotate(180deg);
|
|
|
|
transform:scale(0.7,0.7);
|
|
-webkit-transform:scale(0.7,0.7);
|
|
-moz-transform:scale(0.7,0.7);
|
|
-ms-transform:scale(0.7,0.7);
|
|
-o-transform:scale(0.7,0.7);
|
|
|
|
transform-origin:100% 0;
|
|
-webkit-transform-origin:100% 0;
|
|
-moz-transform-origin:100% 0;
|
|
-ms-transform-origin:100% 0;
|
|
-o-transform-origin:100% 0;
|
|
z-index:999999!important;
|
|
|
|
opacity:0; /* delete this line if you want visible tumblr controls */
|
|
|
|
-webkit-transition: all 0.4s ease-in-out;
|
|
-moz-transition: all 0.4s ease-in-out;
|
|
-o-transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
|
|
opacity:1;
|
|
}
|
|
|
|
/*--------------------SCROLLBAR--------------------*/
|
|
::-webkit-scrollbar {
|
|
background-color:var(--Scrollbar-BG);
|
|
height:13px;
|
|
width:13px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color:var(--Scrollbar);
|
|
border:6px solid var(--Scrollbar-BG);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color:var(--Scrollbar-BG);
|
|
}
|
|
|
|
/*-----------------COLORS & VALUES-----------------*/
|
|
:root {
|
|
/* column styling */
|
|
--Column-1-Width:250px;
|
|
--Column-2-Width:260px;
|
|
--Column-3-Width:250px;
|
|
--Column-Gap:25px;
|
|
--Items-Background-Color:#fff;
|
|
--Box-Shadow:#f7f7f7;
|
|
|
|
/* 1st column */
|
|
--Intro-Box-Title:#333;
|
|
--Intro-Box-Text:#888;
|
|
--Intro-Nav-Links-Icon:#333;
|
|
--Social-Media-Icons:#333;
|
|
--Social-Media-Links:#333;
|
|
|
|
/* 2nd column */
|
|
--Tags-Border:#eee;
|
|
--Tags:#999;
|
|
--Tags-Background-On-Hover:#37353A;
|
|
--Tags-Border-On-Hover:#37353A;
|
|
--Tags-On-Hover:#eee;
|
|
|
|
--graphsize:73px; /* Graph size. Do not go below 60px */
|
|
--emptyprogress: #fafafa; /* Empty progress bar colour */
|
|
--progress: #333; /* Progress bar colour */
|
|
--fullprogress: #333; /* Progress bar colour when it's 100% */
|
|
--Percentage-Graph-Label:#777;
|
|
|
|
--Color-Hex-Text:#333;
|
|
--Color-RGB-Text:#999;
|
|
|
|
--Music-Controls:#222;
|
|
--Music-Note:#222;
|
|
--Song-Title:#222;
|
|
--Song-Artist:#999;
|
|
|
|
/* 3rd column */
|
|
--Info-Icons:#eee;
|
|
--Info-Icons-BG:#333;
|
|
--Info-Text:#888;
|
|
--Info-Bold:#222;
|
|
|
|
--Video-Top-Text-1:#222;
|
|
--Video-Top-Text-2:#999;
|
|
--Video-Link-Right-Chevron:#999;
|
|
--Video-Controls:#fff;
|
|
--Video-Controls-Shadows:#333;
|
|
|
|
--Text-Box-Text:#888;
|
|
|
|
/* extras, misc */
|
|
--Top-Right-Plus-Icon:#333;
|
|
--Tooltip-Background:#222;
|
|
--Tooltip-Text:#eee;
|
|
--Highlighted-Text-BG:#fafafa;
|
|
--Highlighted-Text:#222;
|
|
--Scrollbar-BG:#fafafa;
|
|
--Scrollbar:#666;
|
|
--Links:#000;
|
|
}
|
|
|
|
/*--------------------BASICS--------------------*/
|
|
body {
|
|
background:#fbfbfb url('');
|
|
background-attachment:fixed;
|
|
background-repeat:repeat;
|
|
color:#888;
|
|
cursor:normal;
|
|
font-family:karla;
|
|
line-height:1.6em;
|
|
font-size:12px;
|
|
text-align:left;
|
|
}
|
|
|
|
a {
|
|
color:var(--Links);
|
|
text-decoration:none;
|
|
}
|
|
|
|
a, svg {
|
|
-webkit-transition: all 0.4s ease-in-out;
|
|
-moz-transition: all 0.4s ease-in-out;
|
|
-o-transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
b, strong {font-weight:bold;}
|
|
|
|
pre, code {
|
|
white-space:pre-wrap;
|
|
display:block;
|
|
}
|
|
|
|
::selection {
|
|
background:var(--Highlighted-Text-BG);
|
|
color:var(--Highlighted-Text);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:var(--Highlighted-Text-BG);
|
|
color:var(--Highlighted-Text);
|
|
}
|
|
|
|
/*------------CONTAINER------------*/
|
|
#cont-h-1 {
|
|
position:fixed;
|
|
top:0;left:0;right:0;
|
|
margin:0 auto;
|
|
height:100vh;
|
|
text-align:center;
|
|
}
|
|
|
|
#cont-h-2 {display:inline-block;}
|
|
#cont-v-1 {height:100vh;display:table;}
|
|
#cont-v-2 {display:table-cell;vertical-align:middle;}
|
|
|
|
#columnwrap {
|
|
display:flex;
|
|
margin:calc(var(--Column-Gap) * -1) auto;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
#columnwrap > * {white-space:normal;}
|
|
|
|
.column {
|
|
margin:calc(var(--Column-Gap) / 2);
|
|
}
|
|
|
|
.column:nth-child(1) {width:var(--Column-1-Width);}
|
|
.column:nth-child(2) {width:var(--Column-2-Width);}
|
|
.column:nth-child(3) {width:var(--Column-3-Width);}
|
|
|
|
.xyz {
|
|
border-radius:3px;
|
|
overflow:hidden;
|
|
box-shadow:3px 3px 12px var(--Box-Shadow);
|
|
}
|
|
|
|
/*------------1ST COLUMN------------*/
|
|
.intro-block {width:inherit;}
|
|
|
|
.intro-header {
|
|
position:relative;
|
|
width:100%;
|
|
}
|
|
|
|
.intro-avatar {
|
|
position:relative;
|
|
display:block;
|
|
vertical-align:middle;
|
|
margin:calc((-64px / 2) - 8px) auto;
|
|
width:64px;height:64px;
|
|
background:var(--Items-Background-Color);
|
|
border-radius:100%;
|
|
border:8px solid var(--Items-Background-Color);
|
|
}
|
|
|
|
.intro-pad {
|
|
padding:calc((64px / 2) + 8px + 8px) 14px 14px 14px;
|
|
background:var(--Items-Background-Color);
|
|
}
|
|
|
|
.intro-title {
|
|
margin-bottom:8px;
|
|
font-family:quicksand;
|
|
font-size:13px;
|
|
text-transform:uppercase;
|
|
letter-spacing:2px;
|
|
color:var(--Intro-Box-Title);
|
|
}
|
|
|
|
.intro-desc {
|
|
font-size:12px;
|
|
line-height:1.8em;
|
|
color:var(--Intro-Box-Text);
|
|
}
|
|
|
|
.navlinks {
|
|
margin-top:16px;
|
|
text-align:center;
|
|
}
|
|
|
|
.navlinks a {
|
|
display:inline-block;
|
|
padding:0 6px;
|
|
}
|
|
|
|
.navlinks svg {
|
|
width:12px;height:12px;
|
|
color:var(--Intro-Nav-Links-Icon);
|
|
stroke-width:2px;
|
|
}
|
|
|
|
.social-media {
|
|
margin-top:var(--Column-Gap);
|
|
background:var(--Items-Background-Color);
|
|
padding:16px;
|
|
text-align:left;
|
|
}
|
|
|
|
.social-media a {
|
|
display:flex;
|
|
padding:7px 0;
|
|
width:100%;
|
|
}
|
|
|
|
.social-media a > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
.social-media a:first-child {padding-top:0px;}
|
|
.social-media a:last-child {padding-bottom:0px;}
|
|
|
|
.social-media i {
|
|
font-size:14px;
|
|
color:var(--Social-Media-Icons);
|
|
}
|
|
|
|
.social-media-links {
|
|
margin-left:13px;
|
|
font-family:quicksand;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
letter-spacing:1px;
|
|
color:var(--Social-Media-Links);
|
|
}
|
|
|
|
/*------------2ND COLUMN------------*/
|
|
.tagsbox {
|
|
padding:16px;
|
|
background:var(--Items-Background-Color);
|
|
}
|
|
|
|
.tags {
|
|
margin:-6px -4px;
|
|
}
|
|
|
|
.tags a {
|
|
display:inline-block;
|
|
margin:6px 4px;
|
|
padding:4px 9px;
|
|
border:1px solid var(--Tags-Border);
|
|
border-radius:3px;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
letter-spacing:1px;
|
|
color:var(--Tags);
|
|
}
|
|
|
|
.tags a:hover {
|
|
background:var(--Tags-Background-On-Hover);
|
|
border:1px solid var(--Tags-Border-On-Hover);
|
|
color:var(--Tags-On-Hover);
|
|
}
|
|
|
|
.percentage-box {
|
|
margin-top:var(--Column-Gap);
|
|
padding:16px;
|
|
background:var(--Items-Background-Color);
|
|
}
|
|
|
|
.wheel-block {
|
|
display:flex;
|
|
justify-content:space-around;
|
|
-webkit-justify-content:space-around;
|
|
-moz-justify-content:space-around;
|
|
}
|
|
|
|
.one-wheel {}
|
|
|
|
.wheel-text {
|
|
margin-top:16px;
|
|
font-family:quicksand;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
letter-spacing:1px;
|
|
color:var(--Percentage-Graph-Label);
|
|
}
|
|
|
|
.s-pgraph:after{box-shadow:0 0 0 transparent!important;}
|
|
.s-pgraph:after{background:var(--Items-Background-Color)!important;}
|
|
|
|
.colorbox {
|
|
margin-top:var(--Column-Gap);
|
|
padding:16px;
|
|
background:var(--Items-Background-Color);
|
|
}
|
|
|
|
.one-color-row {
|
|
margin-bottom:10px;
|
|
display:flex;
|
|
}
|
|
|
|
.one-color-row:last-child {margin-bottom:0px;}
|
|
|
|
.one-color-row > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
.color {
|
|
width:36px;
|
|
height:15px;
|
|
border-radius:3px;
|
|
}
|
|
|
|
.color-hex, .color-rgb {
|
|
margin-left:12px;
|
|
font-family:quicksand;
|
|
text-transform:uppercase;
|
|
font-size:9px;
|
|
letter-spacing:1px;
|
|
}
|
|
|
|
.color-hex {color:var(--Color-Hex-Text);}
|
|
.color-rgb {color:var(--Color-RGB-Text);}
|
|
|
|
.musicbox {
|
|
margin-top:var(--Column-Gap);
|
|
padding:16px;
|
|
background:var(--Items-Background-Color);
|
|
text-align:left;
|
|
display:flex;
|
|
}
|
|
|
|
.musicbox > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
.music-controls {
|
|
user-select:none;
|
|
-webkit-user-select:none;
|
|
width:12px;
|
|
font-size:12px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.playy, .pausee {color:var(--Music-Controls);}
|
|
.pausee {display:none;}
|
|
|
|
.sonata {
|
|
margin-left:10px;
|
|
color:var(--Music-Note);
|
|
}
|
|
|
|
.labeltext {margin-left:13px;}
|
|
|
|
.song-title {
|
|
font-size:12px;
|
|
color:var(--Song-Title);
|
|
}
|
|
|
|
.song-artist {
|
|
margin-top:-2px;
|
|
font-size:10px;
|
|
letter-spacing:0.5px;
|
|
text-transform:uppercase;
|
|
color:var(--Song-Artist);
|
|
}
|
|
|
|
/*------------3RD COLUMN------------*/
|
|
.info {
|
|
padding:16px;
|
|
background:var(--Items-Background-Color);
|
|
text-align:left;
|
|
}
|
|
|
|
.info-row {
|
|
display:flex;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.info-row:last-child {margin-bottom:0px;}
|
|
|
|
.info-row > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
.info-row svg {
|
|
padding:8px;
|
|
background:var(--Info-Icons-BG);
|
|
border-radius:3px;
|
|
width:12px;
|
|
height:12px;
|
|
color:var(--Info-Icons);
|
|
}
|
|
|
|
.info-label {
|
|
margin-left:12px;
|
|
font-size:10px;
|
|
text-transform:uppercase;
|
|
letter-spacing:0.5px;
|
|
font-weight:bold;
|
|
color:var(--Info-Bold);
|
|
}
|
|
|
|
.info-txt {
|
|
margin-top:-0.3px;
|
|
margin-left:5px;
|
|
font-size:12px;
|
|
color:var(--Info-Text);
|
|
}
|
|
|
|
.video {
|
|
position:relative;
|
|
margin-top:var(--Column-Gap);
|
|
padding:16px;
|
|
background:var(--Items-Background-Color);
|
|
}
|
|
|
|
.vid-source {
|
|
display:flex;
|
|
margin-bottom:16px;
|
|
justify-content:space-between;
|
|
-webkit-justify-content:space-between;
|
|
-moz-justify-content:space-between;
|
|
}
|
|
|
|
.vid-source > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
.vid-i-left {
|
|
display:flex;
|
|
}
|
|
.vid-i-left > * {
|
|
align-self:center;
|
|
-webkit-align-self:center;
|
|
}
|
|
|
|
.vid-avatar {
|
|
width:30px;height:30px;
|
|
border-radius:100%;
|
|
}
|
|
|
|
.vid-text {
|
|
margin-left:13px;
|
|
text-align:left;
|
|
}
|
|
|
|
.vid-txt-top {
|
|
font-size:12px;
|
|
color:var(--Video-Top-Text-1);
|
|
}
|
|
|
|
.vid-txt-bot {
|
|
margin-top:-2px;
|
|
font-size:10px;
|
|
letter-spacing:0.5px;
|
|
text-transform:uppercase;
|
|
color:var(--Video-Top-Text-2);
|
|
}
|
|
|
|
.vid-i-right svg {
|
|
width:13px;height:13px;
|
|
padding:5px 0 5px 5px;
|
|
color:var(--Video-Link-Right-Chevron);
|
|
}
|
|
|
|
.video iframe, .video embed, .video video {
|
|
width:100%;
|
|
height:auto;
|
|
border-radius:3px;
|
|
}
|
|
|
|
.v-ha {
|
|
position:absolute;
|
|
width:calc(var(--Column-3-Width) - (16px * 2));
|
|
display:table;
|
|
}
|
|
|
|
.v-hb {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.v-hc {
|
|
margin-top:-2px;
|
|
user-select:none;
|
|
-webkit-user-select:none;
|
|
display:inline-block;
|
|
z-index:10;
|
|
text-align:center;
|
|
}
|
|
|
|
.v-play, .v-pause {
|
|
margin-top:-5px;
|
|
padding:10px;
|
|
color:var(--Video-Controls);
|
|
text-shadow:1px 1px 1px var(--Video-Controls-Shadow);
|
|
font-size:17px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.v-pause {display:none;}
|
|
|
|
.v-p {
|
|
opacity:0;
|
|
-webkit-transition: opacity 200ms ease-in-out;
|
|
-moz-transition: opacity 200ms ease-in-out;
|
|
-o-transition: opacity 200ms ease-in-out;
|
|
}
|
|
|
|
.v-ha:hover .v-p {opacity:1;}
|
|
|
|
.textbox {
|
|
margin-top:var(--Column-Gap);
|
|
padding:18px 20px;
|
|
background:var(--Items-Background-Color);
|
|
font-size:12px;
|
|
color:var(--Text-Box-Text);
|
|
line-height:1.8em;
|
|
text-align:justify;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!----TUMBLR CONTROLS---->
|
|
<div id="plus-s"><i data-feather="plus"></i></div>
|
|
|
|
<!----CONTAINER---->
|
|
<div id="cont-h-1">
|
|
<div id="cont-h-2">
|
|
<div id="cont-v-1">
|
|
<div id="cont-v-2">
|
|
<div id="columnwrap">
|
|
|
|
<!---------------------------------------------->
|
|
<!----1ST COLUMN---->
|
|
<div class="column">
|
|
<div class="intro-block xyz">
|
|
|
|
<!----HEADER IMAGE---->
|
|
<img class="intro-header" src="//66.media.tumblr.com/20d6e8dcd2a3c13f7404c1e602915f5d/tumblr_opicvbjC5B1taarzno2_r3_400.gif">
|
|
|
|
<!----HEADER AVATAR ICON IMAGE---->
|
|
<img class="intro-avatar" src="//66.media.tumblr.com/841f4189deb551db9be0855c1f7f34b2/tumblr_podadz4U161qg2f5co5_100.png">
|
|
|
|
<div class="intro-pad">
|
|
|
|
<!----DESCRIPTION TITLE--->
|
|
<div class="intro-title">Breeze</div>
|
|
|
|
<!----DESCRIPTION---->
|
|
<div class="intro-desc">
|
|
hello i'm the description
|
|
<br>looks best with
|
|
<br>3 lines.
|
|
</div><!--end desc-->
|
|
|
|
<!----DESCRIPTION NAV LINKS---->
|
|
<!--you can choose one from this list:-->
|
|
<!--//feathericons.com-->
|
|
<!--put the name between the quotation marks of feather=""-->
|
|
<div class="navlinks">
|
|
<a href="/" title="home"><i data-feather="home"></i></a>
|
|
<a href="/ask" title="ask"><i data-feather="mail"></i></a>
|
|
<a href="/archive" title="archive"><i data-feather="grid"></i></a>
|
|
<a href="/" title="a link"><i data-feather="gift"></i></a>
|
|
|
|
<!--please do not remove the credit! thank you *o*-->
|
|
<a href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
|
|
</div><!--navlinks end-->
|
|
|
|
</div><!--intro-pad--><!--do not delete this line-->
|
|
</div><!--intro-block--><!--do not delete this line-->
|
|
|
|
|
|
|
|
<!----SOCIAL MEDIA LINKS---->
|
|
<!--icon list:-->
|
|
<!--//fontawesome.com/icons-->
|
|
<div class="social-media xyz">
|
|
<a href="/"><i class="fab fa-steam-symbol"></i>
|
|
<span class="social-media-links">steam profile</span></a>
|
|
|
|
<a href="/"><i class="fab fa-twitter"></i>
|
|
<span class="social-media-links">twitter</span></a>
|
|
|
|
<a href="/"><i class="fab fa-twitch"></i>
|
|
<span class="social-media-links">twitch channel</span></a>
|
|
|
|
<a href="/"><i class="fab fa-instagram"></i>
|
|
<span class="social-media-links">instagram</span></a>
|
|
</div><!--end social media-->
|
|
</div><!--end 1st column-->
|
|
|
|
|
|
|
|
<!---------------------------------------------->
|
|
<!----2ND COLUMN---->
|
|
<div class="column">
|
|
|
|
<!----TAGS BOX---->
|
|
<div class="tagsbox xyz">
|
|
<div class="tags">
|
|
<a href="/tagged/">tag</a>
|
|
<a href="/tagged/">tag</a>
|
|
<a href="/tagged/">tag</a>
|
|
<a href="/tagged/">tag</a>
|
|
<a href="/tagged/">tag</a>
|
|
<a href="/tagged/">tag</a>
|
|
<a href="/tagged/">tag</a>
|
|
</div><!--tags--><!--do not delete this line-->
|
|
</div><!--tagsbox--><!--do not delete this line-->
|
|
|
|
|
|
<!----PERCENTAGE GRAPHS---->
|
|
<div class="percentage-box xyz">
|
|
<div class="wheel-block">
|
|
|
|
<!----PERCENTAGE GRAPH 1---->
|
|
<div class="one-wheel">
|
|
<div class="wheel">
|
|
<link rel="stylesheet" type="text/css" href="//solrainha.github.io/portfolio/pgraph/spg.css"/><a href="//suiomi.com" class="spc">
|
|
|
|
<!--% IN TENS ONLY-->
|
|
<!--e.g. p10, p20, p30-->
|
|
<div class="s-pgraph p60">
|
|
|
|
<div class="s-pgraph-container">
|
|
<div class="s-pgraph-empty"></div>
|
|
<div class="s-pgraph-progress"></div></div></div></a>
|
|
</div><!--wheel-->
|
|
|
|
<!--PERCENTAGE GRAPH 1 LABEL TEXT-->
|
|
<div class="wheel-text">HP Levels</div>
|
|
</div><!--end one % graph-->
|
|
|
|
|
|
|
|
<!----PERCENTAGE GRAPH 2---->
|
|
<div class="one-wheel">
|
|
<div class="wheel">
|
|
<a href="//suiomi.com" class="spc">
|
|
|
|
<!--% IN TENS ONLY-->
|
|
<!--e.g. p10, p20, p30-->
|
|
<div class="s-pgraph p80">
|
|
|
|
<div class="s-pgraph-container">
|
|
<div class="s-pgraph-empty"></div>
|
|
<div class="s-pgraph-progress"></div></div></div></a>
|
|
</div><!--wheel-->
|
|
|
|
<!--PERCENTAGE GRAPH 2 LABEL TEXT-->
|
|
<div class="wheel-text">EXP Stat</div>
|
|
</div><!--end one % graph-->
|
|
|
|
</div><!--wheel-block--><!--do not delete this line-->
|
|
</div><!--percentage-box--><!--do not delete this line-->
|
|
|
|
|
|
|
|
<!----'FAVORITE COLORS' BOX---->
|
|
<div class="colorbox xyz">
|
|
|
|
<!----START A COLOR ROW---->
|
|
<div class="one-color-row">
|
|
<div class="color" style="background:#333"></div>
|
|
<div class="color-hex">#333333</div>
|
|
<div class="color-rgb">51, 51, 51</div>
|
|
</div><!--end color row-->
|
|
|
|
<!----START A COLOR ROW---->
|
|
<div class="one-color-row">
|
|
<div class="color" style="background:#F2F2F2"></div>
|
|
<div class="color-hex">#F7F7F7</div>
|
|
<div class="color-rgb">242, 242, 242</div>
|
|
</div><!--end color row-->
|
|
|
|
<!----START A COLOR ROW---->
|
|
<div class="one-color-row">
|
|
<div class="color" style="background:#FAFAFA"></div>
|
|
<div class="color-hex">#FAFAFA</div>
|
|
<div class="color-rgb">250, 250, 250</div>
|
|
</div><!--end color row-->
|
|
</div><!--colorbox--><!--do not delete this line-->
|
|
|
|
|
|
|
|
<!----MUSIC BOX---->
|
|
<div class="musicbox xyz">
|
|
<div class="music-controls">
|
|
<div class="playy">▶</div>
|
|
<div class="pausee">❚❚</div>
|
|
</div>
|
|
<div class="sonata">♫</div>
|
|
<div class="labeltext">
|
|
<!----SONG TITLE & SONG ARTIST---->
|
|
<div class="song-title">OWL 2019 - Hanamura [23]</div>
|
|
<div class="song-artist">Derek Duke</div>
|
|
</div><!--label--text-->
|
|
|
|
<!--music url goes between quotation marks of src=""-->
|
|
<!--you can refer to this tutorial:-->
|
|
<!-- linktr.ee/direct_file_links -->
|
|
<audio id="tune" src="https://rhizo.gitlab.io/m/Overwatch_League_2019_-_Hanamura.mp3" type="audio"></audio>
|
|
</div><!--end music player-->
|
|
</div><!--end 2nd column-->
|
|
|
|
|
|
|
|
|
|
|
|
<!---------------------------------------------->
|
|
<!----3RD COLUMN---->
|
|
<div class="column">
|
|
<div class="info xyz">
|
|
<!--START ONE BULLET ROW-->
|
|
<div class="info-row">
|
|
<!--bullet point icon-->
|
|
<!--you can choose one from this list:-->
|
|
<!--//feathericons.com-->
|
|
<!--put the name between the quotation marks of feather=""-->
|
|
<i data-feather="user"></i>
|
|
<!--bullet point text-->
|
|
<div class="info-label">Name:</div>
|
|
<div class="info-txt">gorgeous</div>
|
|
</div><!--info-row-->
|
|
<!--END ONE BULLET ROW-->
|
|
|
|
<!--START ONE BULLET ROW-->
|
|
<div class="info-row">
|
|
<i data-feather="edit-2"></i>
|
|
<div class="info-label">Pronouns:</div>
|
|
<div class="info-txt">your pronouns here</div>
|
|
</div><!--info-row-->
|
|
<!--END ONE BULLET ROW-->
|
|
|
|
<!--START ONE BULLET ROW-->
|
|
<div class="info-row">
|
|
<i data-feather="database"></i>
|
|
<div class="info-label">Hobbies:</div>
|
|
<div class="info-txt">your hobbies here</div>
|
|
</div><!--info-row-->
|
|
<!--END ONE BULLET ROW-->
|
|
</div><!--info--><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
<!----VIDEO---->
|
|
<div class="video xyz">
|
|
<div class="vid-source">
|
|
<div class="vid-i-left">
|
|
|
|
<!----VIDEO AVATAR ICON IMAGE---->
|
|
<img class="vid-avatar" src="//66.media.tumblr.com/7b427f0dfaca3259b1327a770e060365/tumblr_podadz4U161qg2f5co2_100.png">
|
|
<div class="vid-text">
|
|
|
|
<!----VIDEO TITLE & SUBTITLE---->
|
|
<div class="vid-txt-top">Shunrai MV</div>
|
|
<div class="vid-txt-bot">Yonezu Kenshi</div>
|
|
</div>
|
|
</div><!--vid-i-left-->
|
|
|
|
|
|
<div class="vid-i-right">
|
|
<!----VIDEO RIGHT ARROW LINK---->
|
|
<a href="//www.youtube.com/watch?v=zkNzxsaCunU" title="go to youtube page" target="_blank"><i data-feather="chevron-right"></i></a>
|
|
</div><!--do not delete this line-->
|
|
</div><!--vid-source-->
|
|
|
|
|
|
<!----YOUR VIDEO GOES HERE---->
|
|
<!--if the video is from YouTube / embed source, erase from <video to </video> and insert your embed link.-->
|
|
<!--if the video is still HTML5, just put the link between quotation marks of src=""-->
|
|
<video id="v" src="https://rhizo.gitlab.io/v/Shunrai.mp4"></video>
|
|
|
|
|
|
<!--do not delete below-->
|
|
<div class="v-h">
|
|
<div class="v-ha">
|
|
<div class="v-hb">
|
|
<div class="v-hc">
|
|
<div class="v-play">▶</div>
|
|
<div class="v-p"><div class="v-pause">❚❚</div></div>
|
|
</div>
|
|
</div><!--v-hb-->
|
|
</div><!--v-ha-->
|
|
</div><!--v-h-->
|
|
</div><!--video-->
|
|
|
|
|
|
<!----TEXTBOX---->
|
|
<div class="textbox xyz">
|
|
hello i'm the textbox.
|
|
<br>looks best with
|
|
<br>3 lines.
|
|
</div><!--textbox--><!--do not delete below-->
|
|
|
|
</div><!--end column-->
|
|
</div><!--columnwrap-->
|
|
</div><!--cont-v-2-->
|
|
</div><!--cont-v-1-->
|
|
</div><!--cont-h-2-->
|
|
</div><!--cont-h-1-->
|
|
|
|
<script>feather.replace()</script>
|
|
</body>
|
|
|
|
</html> |