₊⁺✿˚
This commit is contained in:
parent
c6f7f72ddf
commit
5f5b3f510c
|
|
@ -0,0 +1,794 @@
|
|||
<!-----------------------------------------------------------------------
|
||||
Colors Page [01]: Euphoria
|
||||
Made by glenthemes
|
||||
|
||||
Initial release: 2020/04/26
|
||||
Last updated: 2021/10/21
|
||||
|
||||
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.
|
||||
|
||||
Customization pointers:
|
||||
🍑🍑🍑🍑🍑🍑🍑 = places to edit
|
||||
🍓🍓🍓🍓🍓🍓🍓 = start of a section || start copy
|
||||
🛑🛑🛑🛑🛑🛑🛑 = end of a section || end copy
|
||||
------------------------------------------------------------------------>
|
||||
|
||||
<!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 (the one that appears as your tab/browser title ------>
|
||||
|
||||
<title>{Title} - Favorite Colors</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:50,
|
||||
tip_fade_speed:0,
|
||||
attribute:"title"
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito|Questrial:400|Work+Sans|Manrope:300,400|Libre+Franklin" rel="stylesheet">
|
||||
|
||||
<script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
|
||||
|
||||
<script src="//glenthemes.s3.eu-west-2.amazonaws.com/color-pages/01/euphoria.js"></script>
|
||||
|
||||
<!-------------------------------------------------------------------->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/*--------------------TOOLTIPS--------------------*/
|
||||
#s-m-t-tooltip {
|
||||
padding:5px 12px;
|
||||
margin:20px;
|
||||
background-color:var(--Tooltips-BG);
|
||||
font-family:work sans;
|
||||
font-size:var(--Top-Links-Font-Size);
|
||||
text-transform:uppercase;
|
||||
letter-spacing:.7px;
|
||||
color:var(--Tooltips-Text);
|
||||
z-index:99;
|
||||
max-width:40vw;
|
||||
}
|
||||
|
||||
/*--------------------TUMBLR CONTROLS--------------------*/
|
||||
iframe#tumblr_controls, .iframe-controls--desktop {
|
||||
top:calc(var(--Top-Bar-Padding) - 3px)!important;
|
||||
right:calc(var(--Top-Bar-Padding) + var(--Bars-Width) + (var(--Top-Bar-Item-Spacing) * 2))!important;
|
||||
position:fixed!important;
|
||||
|
||||
transform:scale(0.7,0.7);
|
||||
-webkit-transform:scale(0.7,0.7);
|
||||
-moz-transform:scale(0.7,0.7);
|
||||
-o-transform:scale(0.7,0.7);
|
||||
-ms-transform:scale(0.7,0.7);
|
||||
|
||||
transform-origin:100% 0;
|
||||
-webkit-transform-origin:100% 0;
|
||||
-moz-transform-origin:100% 0;
|
||||
-o-transform-origin:100% 0;
|
||||
-ms-transform-origin:100% 0;
|
||||
|
||||
filter:invert(100%) hue-rotate(180deg);
|
||||
-webkit-filter:invert(100%) hue-rotate(180deg);
|
||||
|
||||
z-index:999999!important;
|
||||
}
|
||||
|
||||
/*--------------------SCROLLBAR--------------------*/
|
||||
::-webkit-scrollbar {
|
||||
width:17px;
|
||||
height:17px;
|
||||
background-color:var(--Background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border:8px solid var(--Background);
|
||||
background-color:var(--Scrollbar-Thumb);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width:3px;
|
||||
height:3px;
|
||||
}
|
||||
|
||||
/*--------------------TEXT HIGHLIGHT--------------------*/
|
||||
::selection {
|
||||
background:#BBD3FD;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background:#BBD3FD;
|
||||
}
|
||||
|
||||
/*--------------------BASICS--------------------*/
|
||||
body {
|
||||
background:var(--Background) url(''); /* background image [if u want] */
|
||||
background-attachment:fixed;
|
||||
background-repeat:repeat;
|
||||
color:#888;
|
||||
cursor:normal;
|
||||
font-family:work sans;
|
||||
line-height:1.6em;
|
||||
font-size:12px;
|
||||
text-align:left;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left:10px;
|
||||
margin-left:5px;
|
||||
border-left:1px solid;
|
||||
border-color:#aaa;
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
-webkit-transition: all 0.4s ease-in-out;
|
||||
-moz-transition: all 0.4s ease-in-out;
|
||||
-o-transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
white-space:pre-wrap;
|
||||
}
|
||||
|
||||
hr {
|
||||
width:70%;
|
||||
border-width:0px;
|
||||
height:1px;
|
||||
background-color:#bbb;
|
||||
}
|
||||
|
||||
img {vertical-align:middle;}
|
||||
|
||||
/*------- CUSTOMIZATION OPTIONS -------*/
|
||||
|
||||
:root {
|
||||
--Top-Bar-Background:#fff;
|
||||
--Top-Bar-Bottom-Border:#f7f7f7;
|
||||
|
||||
--Top-Avatar-Size:32px;
|
||||
--Top-Bar-Padding:24px;
|
||||
--Top-Bar-Item-Spacing:7px;
|
||||
--Top-Title-Font-Size:11px;
|
||||
--Top-Title-Color:#0d0d0d;
|
||||
|
||||
--Separator-Height:26px;
|
||||
--Separator:#eee;
|
||||
|
||||
--Top-Links:#111;
|
||||
--Top-Links-Font-Size:10px;
|
||||
|
||||
/* top right corner */
|
||||
--Bars-Width:13px;
|
||||
--Bars:#111;
|
||||
|
||||
/* main background color*/
|
||||
--Background:#fdfdfd;
|
||||
|
||||
--Sidebar-Width:269px;
|
||||
|
||||
--Sidebar-Title-Color:#090909;
|
||||
--Sidebar-Title-Font-Size:18px;
|
||||
--Sidebar-Title-Bottom-Gap:18px;
|
||||
--Sidebar-Desc-Text:#777;
|
||||
--Sidebar-Desc-Line-Height:1.8em;
|
||||
--Sidebar-Desc-Links:#111; /* if any */
|
||||
--Sidebar-Desc-Bottom-Gap:10px;
|
||||
|
||||
/* the circular color filters in the sidebar */
|
||||
--Filter-Colors-Top-Gap:15px;
|
||||
--Filter-Colors-Size:20px;
|
||||
--Filter-Colors-Padding:3px;
|
||||
--Filter-Colors-Border:#f2f2f2;
|
||||
--Filter-Colors-Spacing:3px;
|
||||
--Tooltips-BG:#111;
|
||||
--Tooltips-Text:#eee;
|
||||
|
||||
/* top & bottom gap of your screen */
|
||||
--Window-Margin:40px;
|
||||
--Sidebar-Right-Gap:80px;
|
||||
|
||||
/* MAIN color blocks */
|
||||
--Color-Block-Width:110px;
|
||||
--Color-Block-Spacing:14px;
|
||||
--Color-Blocks-Per-Row:5; /* number only, no 'px' */
|
||||
--Color-Blocks-Background:#fff;
|
||||
--Color-Blocks-Border:#f7f7f7;
|
||||
--Color-Blocks-Roundness-Top:3px;
|
||||
--Color-Blocks-Roundness-Bottom:5px;
|
||||
--HexCode-Padding:14px;
|
||||
--HexCode-Font-Size:11px;
|
||||
--HexCode-Color:#777;
|
||||
--Filter-Fade-Speed:269ms; /* in milliseconds ONLY - do not remove 'ms' */
|
||||
|
||||
--ReCenter-Amount:-45px; /* if you want to shift the container left/right */
|
||||
|
||||
--Scrollbar-Thumb:#777;
|
||||
--Scrollbar-Track:#ddd;
|
||||
|
||||
--Credit-Color:#666;
|
||||
}
|
||||
|
||||
/*------------ TOP BAR ------------*/
|
||||
|
||||
#heather {
|
||||
position:fixed;
|
||||
top:0;margin-top:0;
|
||||
left:0;margin-left:0;
|
||||
width:100%;
|
||||
height:calc(var(--Top-Avatar-Size) + (var(--Top-Bar-Padding) * 2));
|
||||
background:var(--Top-Bar-Background);
|
||||
border-bottom:1px solid var(--Top-Bar-Bottom-Border);
|
||||
z-index:69;
|
||||
}
|
||||
|
||||
#m_i {
|
||||
margin:0 var(--Top-Bar-Padding);
|
||||
width:calc(100% - (var(--Top-Bar-Padding) * 2));
|
||||
height:100%;
|
||||
display:table;
|
||||
}
|
||||
|
||||
#m_ii {
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
#m_iii {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
margin:0 calc(var(--Top-Bar-Item-Spacing) * -1);
|
||||
padding:0 5px;
|
||||
}
|
||||
|
||||
.felix {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.felix.right {justify-content:flex-end}
|
||||
|
||||
#heather .felix > * {
|
||||
margin:0 var(--Top-Bar-Item-Spacing);
|
||||
}
|
||||
|
||||
.avi {
|
||||
width:var(--Top-Avatar-Size);
|
||||
height:var(--Top-Avatar-Size);
|
||||
border-radius:100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family:manrope;
|
||||
font-size:var(--Top-Title-Font-Size);
|
||||
font-weight:400;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:2px;
|
||||
color:var(--Top-Title-Color);
|
||||
}
|
||||
|
||||
.separator {
|
||||
width:1px;
|
||||
height:var(--Separator-Height);
|
||||
background:var(--Separator);
|
||||
}
|
||||
|
||||
.toplinks a {
|
||||
padding:1em 4px;
|
||||
font-family:work sans;
|
||||
font-size:var(--Top-Links-Font-Size);
|
||||
text-transform:uppercase;
|
||||
letter-spacing:.7px;
|
||||
color:var(--Top-Links);
|
||||
}
|
||||
|
||||
.toplinks dot {
|
||||
font-size:var(--Top-Links-Font-Size);
|
||||
color:var(--Top-Links);
|
||||
}
|
||||
|
||||
.bars {
|
||||
|
||||
}
|
||||
|
||||
.bar {
|
||||
margin:3px 0;
|
||||
width:var(--Bars-Width);
|
||||
height:1px;
|
||||
background:var(--Bars);
|
||||
}
|
||||
|
||||
/*------------ MAIN CONTAINER ------------*/
|
||||
|
||||
#main {
|
||||
position:absolute;
|
||||
top:0;left:0;right:0;
|
||||
margin-top:calc(var(--Top-Avatar-Size) + (var(--Top-Bar-Padding) * 2) + 1px);
|
||||
height:calc(100vh - (var(--Top-Avatar-Size) + (var(--Top-Bar-Padding) * 2)));
|
||||
text-align:center;
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
#mais {
|
||||
display:inline-block;
|
||||
height:100%;
|
||||
margin-left:calc(
|
||||
(var(--Sidebar-Width) + var(--Sidebar-Right-Gap) +
|
||||
(var(--Color-Block-Width) * var(--Color-Blocks-Per-Row)) +
|
||||
(var(--Color-Block-Spacing) * ((var(--Color-Blocks-Per-Row) - 1) * 2)))
|
||||
* -1);
|
||||
}
|
||||
|
||||
#thatsawrap {
|
||||
margin-left:var(--ReCenter-Amount);
|
||||
height:100%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
/*------------ SIDEBAR ------------*/
|
||||
|
||||
#sb-a {
|
||||
position:fixed;
|
||||
margin-top:calc(var(--Top-Bar-Padding) * -2);
|
||||
height:100%;
|
||||
width:var(--Sidebar-Width);
|
||||
display:table;
|
||||
}
|
||||
|
||||
#sb-b {
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.sb-title {
|
||||
font-family:manrope;
|
||||
font-size:var(--Sidebar-Title-Font-Size);
|
||||
font-weight:300;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:3px;
|
||||
color:var(--Sidebar-Title-Color);
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.sb-desc {
|
||||
margin-top:var(--Sidebar-Title-Bottom-Gap);
|
||||
margin-bottom:var(--Sidebar-Desc-Bottom-Gap);
|
||||
font-family:libre franklin;
|
||||
letter-spacing:.3px;
|
||||
color:var(--Sidebar-Desc-Text);
|
||||
line-height:var(--Sidebar-Desc-Line-Height);
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.sb-desc a {
|
||||
color:var(--Sidebar-Desc-Links);
|
||||
}
|
||||
|
||||
.filter-cont {
|
||||
margin-top:var(--Filter-Colors-Top-Gap);
|
||||
}
|
||||
|
||||
.filter-color {
|
||||
margin:0 var(--Filter-Colors-Spacing);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:var(--Filter-Colors-Padding);
|
||||
border:1px solid var(--Filter-Colors-Border);
|
||||
border-radius:100%;
|
||||
cursor:help;
|
||||
}
|
||||
|
||||
.filter-color .color {
|
||||
width:var(--Filter-Colors-Size);
|
||||
height:var(--Filter-Colors-Size);
|
||||
border-radius:100%;
|
||||
}
|
||||
|
||||
.filter-color:first-of-type {margin-left:0;}
|
||||
.filter-color:last-of-type {margin-right:0;}
|
||||
|
||||
/*------------ MAIN COLORS CONTAINER ------------*/
|
||||
|
||||
.cont {
|
||||
position:absolute;
|
||||
margin-top:var(--Window-Margin);
|
||||
margin-bottom:var(--Window-Margin);
|
||||
margin-left:calc(var(--Sidebar-Width) + var(--Sidebar-Right-Gap));
|
||||
width:calc(
|
||||
(var(--Color-Block-Width) * var(--Color-Blocks-Per-Row)) +
|
||||
(var(--Color-Block-Spacing) * ((var(--Color-Blocks-Per-Row) - 1) * 2))
|
||||
);
|
||||
}
|
||||
|
||||
.inc {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
margin:calc(var(--Color-Block-Spacing) * -1);
|
||||
}
|
||||
|
||||
.ghost {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.inc, .ghost {
|
||||
-webkit-transition:opacity var(--Filter-Fade-Speed) ease-in-out;
|
||||
-moz-transition: opacity var(--Filter-Fade-Speed) ease-in-out;
|
||||
-o-transition: opacity var(--Filter-Fade-Speed) ease-in-out;
|
||||
}
|
||||
|
||||
.one-color {
|
||||
margin:var(--Color-Block-Spacing);
|
||||
width:var(--Color-Block-Width);
|
||||
}
|
||||
|
||||
.fennel {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:var(--Color-Blocks-Background);
|
||||
border-radius:
|
||||
var(--Color-Blocks-Roundness-Top)
|
||||
var(--Color-Blocks-Roundness-Top)
|
||||
var(--Color-Blocks-Roundness-Bottom)
|
||||
var(--Color-Blocks-Roundness-Bottom);
|
||||
border:1px solid var(--Color-Blocks-Border);
|
||||
}
|
||||
|
||||
.fennel .color {
|
||||
width:var(--Color-Block-Width);
|
||||
height:var(--Color-Block-Width);
|
||||
border-radius:var(--Color-Blocks-Roundness-Top) var(--Color-Blocks-Roundness-Top) 0 0;
|
||||
}
|
||||
|
||||
.hexcode {
|
||||
padding:var(--HexCode-Padding);
|
||||
font-family:Questrial;
|
||||
font-size:var(--HexCode-Font-Size);
|
||||
text-transform:uppercase;
|
||||
letter-spacing:1px;
|
||||
color:var(--HexCode-Color);
|
||||
line-height:1.3em;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.glenjamin {
|
||||
position:fixed;
|
||||
bottom:0;padding-bottom:23px;
|
||||
right:0;padding-right:23px;
|
||||
}
|
||||
|
||||
.glenjamin svg {
|
||||
width:14px;
|
||||
height:14px;
|
||||
color:var(--Credit-Color);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="heather">
|
||||
<div id="m_i">
|
||||
<div id="m_ii">
|
||||
<div id="m_iii">
|
||||
<div class="on_left">
|
||||
<div class="felix">
|
||||
|
||||
|
||||
<!-- 🍑🍑🍑🍑🍑🍑🍑 -->
|
||||
|
||||
<!------ TOP BAR ICON / AVATAR ------>
|
||||
<!-- put your image url between the quotation marks of src="" -->
|
||||
|
||||
<img class="avi" src="https://66.media.tumblr.com/ee6838ca69e3cc4506d0ea4ff6c6d00a/24c7e052fbab7744-b3/s400x600/664883dca5ebcd29f362170d768c5a2f06f33167.png">
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 🍑🍑🍑🍑🍑🍑🍑 -->
|
||||
|
||||
<!------ TOP BAR TITLE ------>
|
||||
|
||||
<span class="title">colors of the soul</span>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<!-- 🍑🍑🍑🍑🍑🍑🍑 -->
|
||||
|
||||
<!------ TOP BAR LINKS / CUSTOM LINKS / NAV LINKS ------>
|
||||
<!-- url goes between the quotation marks of href="" -->
|
||||
|
||||
<div class="toplinks">
|
||||
|
||||
|
||||
<a href="/">home</a>
|
||||
|
||||
<dot>✦</dot> <!-- divider -->
|
||||
|
||||
<a href="/ask">inbox</a>
|
||||
|
||||
<dot>✦</dot> <!-- divider -->
|
||||
|
||||
<a href="">custom link</a>
|
||||
|
||||
<dot>✦</dot> <!-- divider -->
|
||||
|
||||
<a href="">custom link</a>
|
||||
|
||||
|
||||
</div><!--toplinks-->
|
||||
</div><!--felix-->
|
||||
</div><!--on_left-->
|
||||
|
||||
<div class="on_right">
|
||||
<div class="felix">
|
||||
<div class="bars">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div><!--bars-->
|
||||
</div><!--felix-->
|
||||
</div><!--on_right-->
|
||||
</div><!--m_iii-->
|
||||
</div><!--m_ii-->
|
||||
</div><!--m_i-->
|
||||
</div><!--heather-->
|
||||
|
||||
<div id="main">
|
||||
<div id="mais">
|
||||
<div id="thatsawrap">
|
||||
<div id="sb-a">
|
||||
<div id="sb-b">
|
||||
<div class="sidebar">
|
||||
|
||||
<!-- 🍑🍑🍑🍑🍑🍑🍑 -->
|
||||
|
||||
<!------ SIDEBAR TITLE ------>
|
||||
|
||||
<div class="sb-title">euphoria</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 🍑🍑🍑🍑🍑🍑🍑 -->
|
||||
|
||||
<!------ SIDEBAR DESCRIPTION ------>
|
||||
<!-- you can use <br> for a line break -->
|
||||
|
||||
<div class="sb-desc">
|
||||
|
||||
If the eyes are the window to the soul,
|
||||
<br>why do you only feel alive when<br>they are closed?
|
||||
|
||||
</div><!--end desc, do not delete this line-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="filter-cont felix right">
|
||||
|
||||
<!-- 🍑🍑🍑🍑🍑🍑🍑 -->
|
||||
|
||||
<!------ COLOR FILTERS (SIDEBAR) ------>
|
||||
<!--
|
||||
|
||||
you can set the color category name between the
|
||||
quotation marks of type=""
|
||||
|
||||
PLEASE NOTE that you will need to use the same word later!
|
||||
|
||||
the color of each circle is set between the
|
||||
quotation marks of color=""
|
||||
|
||||
-->
|
||||
|
||||
<!----------------------->
|
||||
<!-- 🍓🍓🍓🍓🍓🍓🍓 -->
|
||||
|
||||
<a class="filter-color" type="brown" title="hover text for brown">
|
||||
<div class="color" color="#eac2b8"></div>
|
||||
</a>
|
||||
|
||||
<!-- 🛑🛑🛑🛑🛑🛑🛑-->
|
||||
<!----------------------->
|
||||
|
||||
|
||||
<a class="filter-color" type="sandy" title="hover text for sandy">
|
||||
<div class="color" color="#ffd6bd"></div>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="filter-color" type="peach" title="hover text for peach">
|
||||
<div class="color" color="#ffb29a"></div>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="filter-color" type="pink" title="hover text for pink">
|
||||
<div class="color" color="#fd9a9c"></div>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="filter-color" type="red" title="hover text for red">
|
||||
<div class="color" color="#fb8787"></div>
|
||||
</a>
|
||||
|
||||
|
||||
</div><!--filter-cont-->
|
||||
</div><!--sidebar-->
|
||||
</div><!--sb-b-->
|
||||
</div><!--sb-a-->
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="cont">
|
||||
<div class="inc">
|
||||
|
||||
|
||||
<!-- 🍑🍑🍑🍑🍑🍑🍑 -->
|
||||
|
||||
<!------ MAIN: COLOR BLOCKS ------>
|
||||
<!--
|
||||
|
||||
INSTRUCTIONS:
|
||||
1. edit the word between the quotation marks of type=""
|
||||
to match what you asserted earlier
|
||||
e.g. type="brown" from above, also means type="brown" here
|
||||
|
||||
2. insert a hex code (WITH the hashtag) between the
|
||||
quotation marks of color=""
|
||||
|
||||
the hex code (the displayed text) is auto generated, so
|
||||
you don't have to edit the class="hexcode" line
|
||||
|
||||
feel free to relabel the grey comments!
|
||||
they aren't required, but will help you not to get lost
|
||||
|
||||
-->
|
||||
|
||||
<!------- BROWN------->
|
||||
|
||||
<!----------------------->
|
||||
<!-- 🍓🍓🍓🍓🍓🍓🍓-->
|
||||
|
||||
<div class="one-color" type="brown">
|
||||
<div class="fennel">
|
||||
<div class="color" color="#e5b8ad"></div>
|
||||
<div class="hexcode"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🛑🛑🛑🛑🛑🛑🛑-->
|
||||
<!----------------------->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!------- SANDY------->
|
||||
|
||||
<!----------------------->
|
||||
<!-- 🍓🍓🍓🍓🍓🍓🍓-->
|
||||
|
||||
<div class="one-color" type="sandy">
|
||||
<div class="fennel">
|
||||
<div class="color" color="#ffd0b3"></div>
|
||||
<div class="hexcode"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🛑🛑🛑🛑🛑🛑🛑-->
|
||||
<!----------------------->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!------- PEACH------->
|
||||
|
||||
<!----------------------->
|
||||
<!-- 🍓🍓🍓🍓🍓🍓🍓-->
|
||||
|
||||
<div class="one-color" type="peach">
|
||||
<div class="fennel">
|
||||
<div class="color" color="#ffb29a"></div>
|
||||
<div class="hexcode"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🛑🛑🛑🛑🛑🛑🛑-->
|
||||
<!----------------------->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!------- PINK------->
|
||||
|
||||
<!----------------------->
|
||||
<!-- 🍓🍓🍓🍓🍓🍓🍓-->
|
||||
|
||||
<div class="one-color" type="pink">
|
||||
<div class="fennel">
|
||||
<div class="color" color="#ff9e9d"></div>
|
||||
<div class="hexcode"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🛑🛑🛑🛑🛑🛑🛑-->
|
||||
<!----------------------->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!------- RED------->
|
||||
|
||||
<!----------------------->
|
||||
<!-- 🍓🍓🍓🍓🍓🍓🍓-->
|
||||
|
||||
<div class="one-color" type="red">
|
||||
<div class="fennel">
|
||||
<div class="color" color="#ff8686"></div>
|
||||
<div class="hexcode"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🛑🛑🛑🛑🛑🛑🛑-->
|
||||
<!----------------------->
|
||||
|
||||
|
||||
|
||||
<!--do not delete below this line-->
|
||||
</div><!--inc-->
|
||||
</div><!--cont-->
|
||||
</div><!--thatsawrap-->
|
||||
</div><!--mais-->
|
||||
</div><!--main-->
|
||||
|
||||
<a class="glenjamin" href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
|
||||
|
||||
<script>feather.replace()</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue