Тестовое сообщение

Поделиться21127.10.22 19:01:03

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
html {
display: -webkit-box;
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;
}

body {
display: -webkit-box;
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;
min-height: 100vh;
background-color: #F7F9FC;
font-family: system, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 20px;
color: #5d6494;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.container {
width: 220px;
height: 220px;
display: -webkit-box;
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;
}

.box {
position: absolute;
width: 220px;
height: 220px;
display: -webkit-box;
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 3px;
overflow: hidden;
-webkit-transition: -webkit-box-shadow ease 1s;
transition: -webkit-box-shadow ease 1s;
transition: box-shadow ease 1s;
transition: box-shadow ease 1s, -webkit-box-shadow ease 1s;
}

.icon {
position: relative;
margin-top: 8px;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
will-change: transform;
}

.icon_bg {
width: 80px;
height: 80px;
border-radius: 100%;
border: 1px solid rgba(225, 227, 232, 0.18);
-webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
background-color: #fff;
display: -webkit-box;
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;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
will-change: transform;
}

.title {
position: relative;
}

.super-box:hover .box {
/* border: 1px solid rgba(225, 227, 232, 0.18); */
-webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25);
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
}

.super-box:hover .icon_bg {
-webkit-transform: translateY(-32px) scale(6);
transform: translateY(-32px) scale(6);
}

.super-box:hover .icon {
-webkit-transform: translateY(-48px) scale(1.4);
transform: translateY(-48px) scale(1.4);
}

.super-box {
width: 220px;
height: 220px;
display: -webkit-box;
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

.text {
position: relative;
top: -32px;
width: 200px;
text-align: center;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
}

.super-box:hover .text {
opacity: 0;
-webkit-transform: translateY(-4px) scale(.8);
transform: translateY(-4px) scale(.8);

}

.box::after {
content: "Discover the attacker's tactics and purposes and find out the identity of the attacker";
position: absolute;
width: 170px;
top: 111px;
opacity: 0;
font-size: 13px;
color: #5d6494;
line-height: 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transition-delay: 0.32s;
transition-delay: 0.32s;
}

.super-box:hover .box::after {
opacity: 1;
}

.dr {
position: absolute;
bottom: 16px;
right: 16px;
width:100px;
}

</style>
<div class="super-box">
<div class="container">
<div class="box">
<div class="icon_bg"></div>
</div>

</div>

<div class="text">
<p class="title">
Security Hardening
</p>

</div>
</div>

<a href="https://dribbble.com/YancyMin" class="dr-url" target="_blank"><img class="dr" src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>
[/html]

0

Поделиться21227.10.22 19:08:34

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]<style>
.magic {
color: transparent;
}

::selection {
color: darkgrey;
}

</style>
<script>

</script>
<p>
<span class="magic">✨🦄</span> Select the text or press "<b>cmd</b> + <b>a</b>" to see some magic.<span class="magic">✨🦄</span>
</p>
[/html]

0

Поделиться21328.10.22 15:45:56

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]<style>
.gallery {
--g: 8px; /* the gap */
--s: 400px; /* the size */

display: grid;
border-radius: 50%;
}
.gallery > img {
grid-area: 1/1;
width: 400px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
transform: translate(var(--_x,0),var(--_y,0));
cursor: pointer;
z-index: 0;
transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
--_i: 1;
z-index: 1;
transition: transform .2s, clip-path .3s .2s, z-index 0s;
}
.gallery:hover img {
transform: translate(0,0);
}
.gallery > img:nth-child(1) {
clip-path: polygon(50% 50%,calc(50%*var(--_i,0)) calc(120%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0)) calc(120%*var(--_i,0)));
--_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
clip-path: polygon(50% 50%,calc(100% - 120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0)) 0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0)) 100%,calc(100% - 120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
--_x: var(--g)
}
.gallery > img:nth-child(3) {
clip-path: polygon(50% 50%,calc(100% - 50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)));
--_y: var(--g)
}
.gallery > img:nth-child(4) {
clip-path: polygon(50% 50%,calc(120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100%*var(--_i,0)) 0,0 0,0 100%,calc(100%*var(--_i,0)) 100%,calc(120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
--_x: calc(-1*var(--g))
}
</style>

<div class="gallery">
<img src="https://picsum.photos/id/174/400/400" alt="a hot air balloon">
<img src="https://picsum.photos/id/188/400/400" alt="a sky photo of an old city">
<img src="https://picsum.photos/id/211/400/400" alt="a small boat">
<img src="https://picsum.photos/id/28/400/400" alt="a forest">
</div>
[/html]

0

Поделиться21431.10.22 09:03:13

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
@import url(https://fonts.googleapis.com/css?family=Andika);

*
{
margin:0px;
padding:0px;
outline:none;
}

body{
background: #eb7474;
padding:10px;
font-family:'Andika', sans-serif;
color:#b8a7a7;
text-transform:uppercase;
font-size:1em;
font-weight:bold;
letter-spacing:0.09em;
}

#menu
{
width:340px;
padding:15px 30px;
margin:0 auto;
position:relative;
overflow:auto;
background: #f2ecec;
border-radius:8px;
cursor:pointer;
box-shadow:0 5px 20px -10px #000;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

#menu:hover
{
background: #c3b4b4;
color:#fff288;
box-shadow:0 5px 20px -15px #000;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

.fa
{
float:right;
font-size:1.5em;
margin-top:5px;
}

#ddmenu
{
margin: 30px auto 0px;
padding: 0px;
background: #f2ecec;
border-radius: 8px;
width: 400px;
position: relative;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}

.removeanimation
{
-webkit-transform: rotate(360deg)!important;
-webkit-transform: scale(0)!important;
-webkit-animation:hidemenu 0.5s linear;
-moz-transform: rotate(360deg)!important;
-moz-transform: scale(0)!important;
-moz-animation:hidemenu 0.5s linear;
-ms-transform: rotate(360deg)!important;
-ms-transform: scale(0)!important;
-ms-animation:hidemenu 0.5s linear;
-o-transform: rotate(360deg)!important;
-o-transform: scale(0)!important;
-o-animation:hidemenu 0.5s linear;
transform: rotate(360deg)!important;
transform: scale(0)!important;
animation:hidemenu 0.5s linear;
}

.animationclas{
-webkit-animation:showmenu 0.5s linear;
-webkit-transform: rotate(0deg)!important;
-webkit-transform: scale(1)!important;
-moz-animation:showmenu 0.5s linear;
-moz-transform: rotate(0deg)!important;
-moz-transform: scale(1)!important;
-ms-animation:showmenu 0.5s linear;
-ms-transform: rotate(0deg)!important;
-ms-transform: scale(1)!important;
-o-animation:showmenu 0.5s linear;
-o-transform: rotate(0deg)!important;
-o-transform: scale(1)!important;
animation:showmenu 0.5s linear;
transform: rotate(0deg)!important;
transform: scale(1)!important;
}

#ddmenu:before
{
content: "";
border-bottom: 15px solid #f2ecec;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
width: 0px;
height: 0px;
position: absolute;
right: 23px;
top: -15px;
}

#ddmenu ul li
{
list-style-type:none;
padding:15px 30px;
}

#ddmenu ul li:hover
{
background:#c3b4b4;
color:#fff288;
cursor:pointer;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

#ddmenu ul li .fa
{
margin-top:0px;
}

#ddmenu ul li:first-child{border-radius:8px 8px 0px 0px;}
#ddmenu ul li:last-child{border-radius:0px 0px 8px 8px;}

/* Menu Animation */
@-webkit-keyframes showmenu
{
0%{-webkit-transform: rotate(360deg) scale(0);}
100%{-webkit-transform: rotate(0deg) scale(1);}
}

@-webkit-keyframes hidemenu
{
0%{-webkit-transform: rotate(0deg) scale(1);}
100%{-webkit-transform: rotate(360deg) scale(0);}
}

@-moz-keyframes showmenu
{
0%{-moz-transform: rotate(360deg) scale(0);}
100%{-moz-transform: rotate(0deg) scale(1);}
}

@-moz-keyframes hidemenu
{
0%{-moz-transform: rotate(0deg) scale(1);}
100%{-moz-transform: rotate(360deg) scale(0);}
}

@-ms-keyframes showmenu
{
0%{-ms-transform: rotate(360deg) scale(0);}
100%{-ms-transform: rotate(0deg) scale(1);}
}

@-ms-keyframes hidemenu
{
0%{-ms-transform: rotate(0deg) scale(1);}
100%{-ms-transform: rotate(360deg) scale(0);}
}

@-o-keyframes showmenu
{
0%{-o-transform: rotate(360deg) scale(0);}
100%{-o-transform: rotate(0deg) scale(1);}
}

@-o-keyframes hidemenu
{
0%{-o-transform: rotate(0deg) scale(1);}
100%{-o-transform: rotate(360deg) scale(0);}
}

@keyframes showmenu
{
0%{transform: rotate(360deg) scale(0);}
100%{transform: rotate(0deg) scale(1);}
}

@keyframes hidemenu
{
0%{transform: rotate(0deg) scale(1);}
100%{transform: rotate(360deg) scale(0);}
}

</style>
<script>
$("#menu").click(function(){ if($("#ddmenu").hasClass("animationclas"))
{ $("#ddmenu").removeClass("animationclas").addClass("removeanimation");
}
else
{ $("#ddmenu").removeClass("removeanimation").addClass("animationclas");
}
});
</script>

<div id="menu">Profile <i class="fa fa-user"></i></div>
<div id="ddmenu">
<ul>
<li>SHOTS <i class="fa fa-dribbble"></i></li>
<li>BUCKETS <i class="fa fa-bitbucket"></i></li>
<li>LISTS <i class="fa fa-list-ul"></i></li>
<li>STATISTICS <i class="fa fa-tachometer"></i></li>
<li>Account Setting <i class="fa fa-gear"></i></li>
<li>Sign Out <i class="fa fa-sign-out"></i></li>
</ul>
</div>

[/html]

0

Поделиться21531.10.22 09:25:11

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>

@import "https://files.jcink.net/uploads/snicklefritz/css/modern_normalize.css";
@import url("https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,600,600i,700,700i|Playfair+Display:400,400i,700,700i|Montserrat:400,400i,700|UnifrakturMaguntia");
@import url("https://nagoshiashumari.github.io/Rpg-Awesome/stylesheets/rpg-awesome.min.css");

/*======================================= *
Rockett's Custom Base Clean-up Project
*=======================================
January 2019, v1.0
*======================================= */

html {
overflow-x: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form {
display: inline;
}

body {
font: 11px Montserrat, sans-serif;
color: #555;
padding: 0;
text-align: center;
background: url(https://files.jcink.net/uploads/mythmak … TMC_bg.jpg)
no-repeat center center fixed;
background-size: cover;

--serif1: "Cormorant Garamond", Garamond, Times New Roman, serif;
--serif2: "Playfair Display", serif;
--blackletter: "UnifrakturMaguntia";
--sans1: "Montserrat", Arial, sans-serif;
--basicborder: 1px solid #fff;
--offwhite: #f2efea;
--mainblue: #19435c;
--maingreen: #26554d;
--maindarkgreen: #11575c;
--mainred: #ba1e23;
--mainbrown: #806736;
--mainrust: #914834;
--maindarkbrown: #33281f;
--mainyellow: #eed28a;
--barbarian: #e64a31 !important;
--bard: #1d7ec5 !important;
--bloodhunter: #a4323c !important;
--cleric: #bbe2f0 !important;
--druid: #78a878 !important;
--fighter: #687b85 !important;
--monk: #4949f5 !important;
--paladin: #9ba09c !important;
--ranger: #92a650 !important;
--rogue: mediumslateblue !important;
--sorcerer: coral !important;
--warlock: #429e18 !important;
--wizard: #01b4b8 !important;
--g-2: mediumpurple;
--g-3: #9e959c;
--g-4: #eed28a;
--g-10: #e64a31;
--g-11: #1d7ec5;
--g-12: #a4323c;
--g-13: #bbe2f0;
--g-14: #78a878;
--g-15: #687b85;
--g-16: #4949f5;
--g-17: #9ba09c;
--g-18: #92a650;
--g-19: mediumslateblue;
--g-20: coral;
--g-21: #429e18;
--g-22: #01b4b8;
--g-23: #bd893c;
--bg: rgba(37, 52, 69, 0.75);
--hov: all 0.75s ease-in-out;
}

a:link,
a:visited,
a:active {
font-family: var(--serif1);
text-decoration: none;
color: var(--paladin);
-webkit-transition: var(--hov);
-o-transition: var(--hov);
transition: var(--hov);
}

a:hover {
color: var(--mainyellow);
text-decoration: none;
}

::-webkit-scrollbar {
width: 5px;
height: 5px;
}

::-webkit-scrollbar-button {
width: 0;
height: 0;
}

::-webkit-scrollbar-thumb {
background: #3c596c;
border: 0 none #fff;
border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
background: #fff;
}

::-webkit-scrollbar-thumb:active {
background: #fff;
}

::-webkit-scrollbar-track {
background: #121415;
border: 0 none #fff;
border-radius: 0;
}

::-webkit-scrollbar-track:hover {
background: #121415;
}

::-webkit-scrollbar-track:active {
background: #e3e3e3;
}

::-webkit-scrollbar-corner {
background: transparent;
}

/**********************
>> GLOBAL <<
**********************/
.mcp-0,
.acp-0,
.m-2 {
display: none;
}

.g-2 {
display: block !important;
}

.firstletter {
color: var(--maingreen);
font-family: var(--blackletter);
font-size: 60px;
float: left;
margin-right: 5px;
margin-top: -6px;
line-height: 80%;
}

#redirect-screen,
#redirect-screen a {
font: 14px var(--serif1);
}

#redirect-screen a {
color: var(--mainyellow);
}

.scale-in-center {
-webkit-animation: scale-in-center 0.5s ease-in-out both;
animation: scale-in-center 0.5s ease-in-out both;
}

/**
* ----------------------------------------
* animation scale-in-center
* ----------------------------------------
*/
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}

/**********************
>> NAV <<
**********************/

#navi {
height: 40px;
position: relative;
top: -10px;
left: -4px;
}

#navstrip {
height: 40px;
line-height: 40px;
color: var(--offwhite);
text-transform: uppercase;
font-family: var(--serif2);
font-size: 8px;
letter-spacing: 1.5px;
text-align: left;
}

#navstrip a,
#guestnav a,
#usernav a,
.postlinksbar a,
.post_bottom-links a {
color: var(--offwhite);
margin-right: 5px;
font-family: var(--serif2);
padding: 3px 6px;
background: var(--mainblue);
text-transform: uppercase;
letter-spacing: 1.5px;
}

#top-nav {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100vw;
height: 55px;
background: var(--maingreen);
}

#nav-av {
background-image: url(/uploads/mythmakers/assets/coast.jpg);
background-size: cover;
width: 55px;
height: 55px;
border: 5px solid white;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

#toggle {
display: inline-block;
font-size: 30px;
position: absolute;
top: 0;
left: 60px;
height: 55px;
width: 55px;
line-height: 55px;
color: var(--offwhite);
/cursor: crosshair;
}

#toggle .th {
display: none;
}

#usernav,
#guestnav {
position: absolute;
top: 0;
right: 20px;
height: 55px;
line-height: 55px;
}

#usernav {
font-size: 14px;
}

#guestnav a {
font-size: 14px;
margin-right: 0;
}

#guestnav .th {
font-size: 14px;
color: var(--offwhite);
margin: 0 20px;
}

@media screen and (max-width: 1024px) {
#usernav,
#guestnav {
font-size: 10px !important;
}
}

.g-welcome {
font: italic bold 18px var(--serif2);
margin-right: 20px;
letter-spacing: 0.5px;
color: var(--mainyellow);
}

.alert0,
.msg0,
#userlinks {
display: none;
}

/**********************
>> BOARD WRAPPER <<
**********************/
#wrapper {
text-align: left;
width: 1000px;
margin: 99px auto 50px auto;
padding: 20px;
}

#innerwrapper {
padding: 20px;
background: rgba(0, 0, 0, 0.5);
}

#delcookiesrow {
padding: 5px;
color: var(--offwhite);
text-align: center;
font: 12px Playfair Display, serif;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 1px;
margin-top: -4px;
display: none;
}

/**********************
>> BOARD HEADER <<
**********************/
#board-header {
position: relative;
width: 100%;
height: 510px;
background: rgba(37, 52, 69, 0.75);
padding: 20px;
margin-bottom: 20px;
overflow: hidden;
}

#board-header .left {
width: 310px;
height: 350px;
position: relative;
}

#board-header .staff {
width: 60px;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
}

#board-header .staff a {
height: 60px;
width: 60px;
border: 5px solid var(--maingreen);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-size: cover;
}

#board-header .staff a:nth-child(even) {
border-color: var(--mainrust);
}

#board-header .middle {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 235px;
}

#board-header .info,
#board-header .topic-cont {
position: absolute;
right: 0;
width: 235px;
height: 165px;
border: 5px solid var(--offwhite);
padding: 5px;
}

#board-header .info {
top: 0;
}

#board-header .info .title {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
background: var(--mainred);
color: var(--offwhite);
font-family: var(--serif2);
font-size: 8px;
letter-spacing: 0.65px;
text-align: center;
text-transform: uppercase;
padding: 7px 0;
}

#board-header .info .bottom {
position: absolute;
bottom: 5px;
left: 5px;
display: block;
width: calc(100% - 10px);
height: 120px;
font-size: 12px;
overflow: auto;
text-align: justify;
text-indent: 20px;
}

#board-header .bottom p {
margin: 0 5px 10px 0;
font-family: var(--sans1);
color: var(--offwhite);
}

#board-header .topic-cont {
bottom: 0;
overflow: auto;
}

#recents {
width: 100%;
height: 100%;
}

#recents .holdrec {
color: transparent;
overflow: hidden;
width: 210px;
margin-bottom: 5px;
position: relative;
}

#recents .holdrec:after {
display: block;
position: absolute;
bottom: 4px;
right: 5px;
font-size: 26px;
color: var(--offwhite);
-webkit-transform: rotate(16deg);
-ms-transform: rotate(16deg);
transform: rotate(16deg);
text-shadow: 1px 1px 0 black;
}

#recents .holdrec a {
color: var(--offwhite);
font-family: var(--serif1);
font-style: italic;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

#recents .holdrec strong {
background: var(--maindarkgreen);
font-family: var(--serif2);
font-size: 10px;
font-weight: 400;
font-style: normal;
letter-spacing: 0.5px;
word-spacing: 2px;
text-transform: uppercase;
padding: 2px 6px;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
text-align: left;
margin-bottom: 3px;
}

#recents p {
display: none;
}

.blogo {
position: absolute;
top: 20px;
right: 20px;
width: 550px;
height: 350px;
border: 5px solid var(--mainyellow);
background-image: url(/uploads/mythmakers/assets/TMC_Header.jpg);
background-size: cover;
z-index: 1;
}

.blogo .inner {
z-index: 2;
font-family: var(--serif2);
font-size: 9px;
color: var(--offwhite);
padding: 3px 15px;
text-transform: uppercase;
letter-spacing: 1.5px;
word-spacing: 5px;
background: var(--maindarkgreen);
position: absolute;
bottom: 114px;
left: 55px;
text-align: center;
}

#board-header .below {
height: 100px;
width: calc(100% - 40px);
position: absolute;
bottom: 20px;
left: 20px;
}

#board-header #ticker-cont,
#board-header #featured {
position: absolute;
top: 0;
border: 5px solid var(--mainyellow);
width: 180px;
height: 100%;
}

#ticker-cont {
left: 0;
font: 11px var(--sans1);
}

#ticker-cont #ticker {
width: 100%;
height: calc(100% - 5px);
padding: 5px;
overflow: hidden;
}

#ticker ul {
list-style-position: inside;
display: unset;
margin: 0;
padding: 0;
}

#ticker li {
background: var(--offwhite);
color: var(--maindarkgreen);
padding: 2px;
}

#ticker li:nth-of-type(odd) {
background: var(--maindarkgreen);
color: var(--offwhite);
}

#ticker li b,
#ticker li b a {
font: bold 10px var(--serif2);
text-transform: uppercase;
letter-spacing: 0.5px;
}

#ticker li a {
color: var(--maindarkgreen);
}

#ticker li:nth-of-type(odd) a {
color: var(--offwhite);
}

#board-header #midbot {
position: absolute;
top: 0;
left: 200px;
height: 100%;
width: 480px;
}

#midbot .links,
#midbot .events {
position: absolute;
left: 0;
width: 100%;
text-align: center;
display: -webkit-box;
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;
}

#midbot .links {
top: 0;
height: 53px;
margin-bottom: 10px;
background: white;
padding: 0 10px;
}

#midbot .links a {
font-size: 20px;
color: var(--mainred);
text-align: center;
line-height: 18px;
}

#midbot .events {
position: absolute;
bottom: 0;
height: 31px;
}

#midbot .events a {
display: inline-block;
background: var(--mainred);
padding: 6px 8px;
color: var(--offwhite);
text-transform: uppercase;
font: 12px var(--serif2);
letter-spacing: 1px;
border-bottom: 3px solid var(--offwhite);
}

#featured {
right: 0;
border-color: var(--maingreen) !important;
background: url(https://66media.tumblr.com/8480fdbb61c1 … o4_250.gif);
background-size: cover;
}

/**********************
>> CATEGORY HEADER <<
**********************/
.maintitle {
padding: 40px;
text-align: center;
background: rgba(37, 52, 69, 0.75);
overflow: hidden;
white-space: nowrap;
border-bottom: 10px solid var(--mainblue);
margin: 10px 0 5px 0;
}

.maintitle:first-of-type {
margin-top: 0;
}

.maintitle,
.maintitle a {
font: bold 12px var(--serif2);
letter-spacing: 6px;
word-spacing: 3px;
text-transform: uppercase;
color: #fff;
position: relative;
}

.maintitle a {
z-index: 5;
text-shadow: 1px 1px 0 black;
}

.maintitle a:before,
.bstats-text:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: -8px;
border-bottom: 2px solid var(--mainyellow);
}

.maintitle2 {
display: block;
text-align: center;
font: italic 900 72px var(--serif2);
letter-spacing: -1px;
text-transform: lowercase;
position: absolute;
width: 100%;
height: 0;
left: 0;
top: 0;
color: var(--offwhite);
opacity: 0.075;
text-shadow: 2px 2px 0 var(--wizard);
z-index: 1;
}

.forum-row {
font-size: 10px;
}
.forum-row a {
font-size: 14px;
}

.copyright {
padding: 5px;
text-transform: uppercase;
margin-top: 12px;
color: var(--paladin);
}

.copyright,
.copyright a {
font: 9px var(--sans1);
}

.copyright a {
color: var(--bard);
}

#skin_selector {
position: fixed;
left: 10px;
bottom: 10px;
font: 11px Playfair Display, serif;
}

/**********************
>> BOARD STATS <<
**********************/
#boardstats {
width: 100%;
position: relative;
border: 5px solid var(--mainyellow);
border-top: 0 solid white;
border-bottom: 10px solid var(--mainblue);
padding-top: 10px;
}

#topper,
#bott,
#midd {
margin: 10px;
height: 100px;
width: calc(100% - 20px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

#topper {
margin-top: 0;
}

#midd {
height: 250px;
}

.i-left,
.i-right,
.i-mid,
.i-right2 {
width: 100px;
height: 100px;
border: 5px solid var(--maingreen);
}

.i-left,
.i-right,
#frow .i-right2 {
text-align: center;
line-height: 95px;
font-size: 30px;
background: rgba(37, 52, 69, 0.75);
color: var(--offwhite);
text-shadow: 1px 1px 0 black;
}

.i-mid {
width: 670px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
text-transform: uppercase;
font: bold 9px var(--sans1);
letter-spacing: 0.5px;
background: var(--offwhite);
border-color: var(--paladin);
}

.i-mid i,
.i-mid .txt {
display: inline-block;
height: 100%;
text-align: center;
line-height: 90px;
color: black;
}

.i-mid i {
font-size: 20px;
}
.i-mid .txt {
word-spacing: 5px;
}
.i-mid .txt a {
font: bold 9px var(--sans1);
letter-spacing: 0.5px;
}

#midd .left,
#midd .right {
height: 100%;
width: 100px;
border: 5px solid var(--paladin);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-line-pack: space-evenly;
align-content: space-evenly;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
background: var(--offwhite);
}

#midd .left i,
#midd .right i {
font-size: 26px;
display: block;
text-align: center;
color: var(--maindarkgreen);
}

#midd .left a:nth-of-type(even) i,
#midd .right a:nth-of-type(even) i {
color: var(--bard);
}

#midd-stats {
height: 100%;
width: 460px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

#online-now,
#online-today {
border: 5px solid var(--mainblue);
width: 100%;
height: 150px;
padding: 10px;
overflow: auto;
background: rgba(37, 52, 69, 0.5);
}

#online-now {
text-align: justify;
font: italic bold 26px var(--serif2);
line-height: 30px;
letter-spacing: 0.5px;
}

#online-today {
height: 90px;
text-align: justify;
text-transform: uppercase;
}

#online-today a {
font: 11px var(--serif1);
letter-spacing: 1px;
line-height: 15px;
}

#midd-rt {
height: 100%;
width: 200px;
border: 5px solid var(--mainblue);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.statistic {
text-align: center;
background: var(--offwhite);
color: black;
padding: 20px 0;
font: 12px var(--serif1);
text-transform: uppercase;
}

.statistic:nth-of-type(even) {
background: var(--mainrust);
color: var(--offwhite);
}

/**********************
>> FORUM ROW <<
**********************/
#frow {
border: 5px solid rgba(37, 52, 69, 0.75);
border-bottom: none;
width: 100%;
padding: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
position: relative;
}

#frow .i-left i,
#frow .i-right i {
color: var(--offwhite);
text-shadow: 1px 1px 0 black;
}

#frow i.forum-new-post {
color: var(--mainred);
}

#frow .i-right {
overflow: hidden;
text-transform: uppercase;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

#frow .txt {
display: block;
text-align: center;
font: 12px var(--serif1);
letter-spacing: 1px;
line-height: 21px;
}

#frow .txt b {
font-weight: 700;
font-style: italic;
font-size: 20px;
color: var(--mainyellow);
}

#ficons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 14px;
color: var(--paladin);
background: rgba(37, 52, 69, 0.75);
padding: 2px 5px;
margin-bottom: 5px;
}

#ficons i {
display: inline-block;
height: 100%;
line-height: 30px;
}

#ficons i:nth-of-type(even) {
color: var(--mainbrown);
}

#divider {
padding: 5px;
width: 100%;
height: 30px;
background: rgba(37, 52, 69, 0.75);
overflow: hidden;
line-height: 26px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
text-align: center;
}

#divider a {
margin-right: 5px;
}

#divider a.subforums-macro {
display: none;
}

#divider .subforums {
width: 100%;
}

#divider a,
.subforums a {
color: var(--offwhite);
font-family: var(--serif2);
text-transform: uppercase;
letter-spacing: 1.5px;
background: var(--mainblue);
font-size: 9px;
padding: 3px 5px;
border-bottom: 2px solid var(--mainred);
}

.subforums a {
margin-right: 2px !important;
}

.tinfo {
height: 100px;
width: 465px;
border: 5px solid var(--mainblue);
padding: 5px;
}

.fname {
text-align: center;
width: 100%;
font: italic bold 42px var(--serif2);
text-transform: lowercase;
text-shadow: 1px 1px 0 black;
}

.fname a {
color: var(--offwhite);
text-decoration: underline;
-webkit-text-decoration-color: var(--bard);
text-decoration-color: var(--bard);
}

.fname a:hover {
color: var(--mainyellow);
}

.tinfo .info {
width: 100%;
text-align: center;
height: 25px;
line-height: 25px;
text-transform: uppercase;
color: var(--offwhite);
white-space: nowrap;
overflow: hidden;
font-size: 9px;
}

.tinfo .info a {
font-size: 11px;
}

.tinfo .info a:first-of-type {
color: var(--mainyellow);
}

.f-desc {
width: 220px;
height: 100px;
border: 5px solid var(--mainblue);
padding: 5px;
background: var(--offwhite);
overflow: hidden;
background-size: cover;
}

.desc {
width: 100%;
height: 100%;
overflow: auto;
padding: 5px;
font: 10px var(--sans1);
letter-spacing: 1px;
text-align: justify;
}

#frow.forum-4 .f-desc {
background-image: url(/uploads/mythmakers/assets/Wiki.jpg);
}
#frow.forum-11 .f-desc {
background-image: url(/uploads/mythmakers/assets/Wildemount.jpg);
}
#frow.forum-12 .f-desc {
background-image: url(/uploads/mythmakers/assets/Taldorei.jpg);
}
#frow.forum-13 .f-desc {
background-image: url(/uploads/mythmakers/assets/ShatteredTeeth.jpg);
}
#frow.forum-14 .f-desc {
background-image: url(/uploads/mythmakers/assets/Marquet.jpg);
}
#frow.forum-15 .f-desc {
background-image: url(/uploads/mythmakers/assets/Issylra.jpg);
}
#frow.forum-16 .f-desc {
background-image: url(/uploads/mythmakers/assets/Oceans.jpg);
}
#frow.forum-17 .f-desc {
background-image: url(/uploads/mythmakers/assets/Messages.jpg);
}
#frow.forum-21 .f-desc {
background-image: url(/uploads/mythmakers/assets/Underdark.jpg);
}

/**********************
>> FORUM VIEW <<
**********************/
.topic-row .row2 span {
display: none;
}

/**********************
>> POST BUTTONS <<
**********************/

a .buttons {
color: var(--mainyellow);
-webkit-transition: var(--hov);
-o-transition: var(--hov);
transition: var(--hov);
}

a:hover .buttons {
color: var(--offwhite);
}

.buttons {
display: inline-block;
font: italic 32px var(--serif2);
text-transform: lowercase;
margin: 0 10px;
text-align: center;
}

.buttons .small,
.rec_one .small {
text-transform: uppercase;
font: 7px var(--sans1);
margin-top: -2px;
color: var(--offwhite);
text-shadow: 1px 1px 0 black;
}

/**********************
>> TOPIC VIEW <<
**********************/
.topic-title-space {
display: none;
}

.postlinksbar {
text-transform: uppercase;
text-align: center;
color: transparent;
position: relative;
top: -18px;
margin-top: -4px;
margin-bottom: -18px;
border-bottom: 8px solid var(--mainblue);
}

.postlinksbar a,
.post_bottom-links a {
color: var(--offwhite);
text-transform: uppercase;
font: 8px var(--serif2);
letter-spacing: 1.5px;
border-bottom: 1px solid var(--mainyellow);
}

.topic-desc {
display: block;
margin-top: 1px;
font: 9px var(--sans1);
color: var(--mainyellow);
text-transform: uppercase;
}

.pagination {
display: inline-block;
text-align: center;
}

.pagination_pagetxt,
.goto-firstunread {
display: none;
}

.pagination a,
.pagination_current {
display: inline-block;
font: bold 24px var(--serif1);
height: 26px;
width: 26px;
line-height: 22px;
color: var(--offwhite);
background: var(--bard);
border-radius: 50%;
text-align: center;
margin: 0 2px;
}

.pagination_current {
color: var(--bard) !important;
background: var(--offwhite) !important;
}

.post-buttons-top .buttons {
font-size: 14px;
}

.post_content {
background: var(--bg);
}

.activeuserstrip,
.activeuserstrip + .row2 {
font: 11px var(--sans1);
color: var(--mainbrown);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.activeuserstrip a {
font-size: 11px;
color: var(--offwhite);
-webkit-transition: var(--hov);
-o-transition: var(--hov);
transition: var(--hov);
}

.activeuserstrip strong a {
font-weight: 700;
font-size: 12px;
letter-spacing: 2.5px;
color: var(--mainyellow);
}

.activeuserstrip a:hover {
color: var(--mainyellow);
}

a[title="Open Topic Options"] + .pagination {
display: block;
position: relative;
top: -22px;
left: 100px;
}

a[title="Open Topic Options"] > .buttons {
position: relative;
top: 13px;
}

.tablepad,
.tablepad a {
color: var(--offwhite);
font: 12px var(--serif2);
}

.tablepad a:hover {
color: var(--mainyellow);
}

.tablepad select,
.tablepad input {
font-family: var(--sans1);
}

.quick-edit .textinput::-webkit-scrollbar {
width: 15px;
}

.quick-edit .textinput {
max-width: 640px !important;
}

.quick-edit [type="button"] {
font-size: 60%;
background: white;
border: 1px solid #e0e0e0;
margin: 0;
padding: 5px 8px 7px 8px;
}

.quick-edit a {
text-transform: capitalize;
font: bold 60% var(--serif2);
color: var(--mainblue);
}

.quick-edit textarea {
font-size: 110%;
}

/**********************
>> POST TOP <<
**********************/
#post_top {
height: 160px;
width: 100%;
background: var(--mainblue);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.post_date {
width: 33%;
height: 40px;
padding: 10px;
font: italic bold 18px/20px var(--serif2);
color: var(--offwhite);
}

.picon {
width: 33%;
height: 40px;
padding: 5px;
text-align: center;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
font: bold 18px/28px var(--serif2);
color: var(--offwhite);
}

.picon i {
font-size: 16px;
margin-right: 5px;
}

.post_date-icon {
width: 33%;
height: 40px;
font-size: 22px;
padding: 5px;
line-height: 32px;
color: var(--bard);
text-align: right;
}

#top_bottom {
width: 100%;
height: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px;
}

.rec_one {
width: 205px;
height: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: center;
}

.rec_one a {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-size: 38px;
color: var(--offwhite);
}

.rec_one i {
-webkit-transition: var(--hov);
-o-transition: var(--hov);
transition: var(--hov);
}

.rec_one i:hover {
color: var(--offwhite);
}

.char_info {
width: 470px;
text-align: center;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
display: -webkit-box;
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;
}

.char_name a,
.g-2 .char_name {
text-decoration: underline;
-webkit-text-decoration-color: var(--offwhite);
text-decoration-color: var(--offwhite);
}

.char_name a span,
.g-2 .char_name {
font: italic bold 32px var(--serif2);
}

.g-2 .char_name {
color: var(--g-2);
}

.char_basics {
height: 30px;
margin-top: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font: 9px var(--sans1);
text-transform: uppercase;
color: var(--offwhite);
letter-spacing: 0.5px;
}

.g-2 .char_basics {
display: none;
}

.char_basics span,
.char_basics i {
display: inline-block;
height: 30px;
line-height: 30px;
}

.char_basics i {
font-size: 14px;
margin: 0 12px;
color: var(--mainred);
}

.rec_two {
width: 205px;
height: 100%;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
border: 1px solid var(--offwhite);
}

.rec_two .img {
width: 100%;
height: 100%;
background-position: center;
background-size: 205px 100px;
}

.post_content.post1 .char_info,
.post_content.post2 .char_info {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}

.post_content.post1 .rec_one {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}

.post_content.post1 .rec_two {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}

/**********************
>> POST BOTTOM <<
**********************/
#post_bottom {
height: 160px;
width: 100%;
position: relative;
margin-bottom: 10px;
}

#bottom_top {
width: 100%;
height: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px;
}

.controls {
width: 205px;
height: 100%;
background: var(--offwhite);
border: 1px solid var(--mainyellow);
text-align: center;
font: bold 14px var(--serif1);
color: var(--maindarkgreen);
text-transform: uppercase;
padding: 10px;
position: relative;
}

.controls .text {
width: 100%;
display: block;
margin: 6px 0;
}

.controls .text a {
font: 9px var(--sans1);
text-transform: uppercase;
color: black;
}

.controls .check {
position: absolute;
bottom: 5px;
right: 5px;
width: 15px;
}

.ooc_info {
width: 470px;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden;
border: 2px solid var(--mainyellow);
}

.ooc_info div {
color: var(--offwhite);
font: 11px/30px var(--serif2);
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 2px;
padding: 2px 6px;
width: 50%;
height: 34%;
}

.ooc_info div:nth-of-type(odd) {
text-align: right;
border-right: 2px solid var(--mainyellow);
}

.ooc_info div:nth-of-type(even) {
text-align: left;
}

.ooc_info div:nth-of-type(3),
.ooc_info div:nth-of-type(4) {
border-top: 2px solid var(--mainyellow);
border-bottom: 2px solid var(--mainyellow);
line-height: 26px;
}

.ooc_info div:nth-of-type(4n),
.ooc_info div:nth-of-type(4n + 1) {
background: var(--maindarkgreen);
}

.ooc_deets {
width: 205px;
height: 100%;
border: 1px solid var(--offwhite);
padding: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}

.ooc_deets div {
width: 50%;
color: var(--offwhite);
font: 10px var(--serif2);
font-weight: bold;
text-transform: uppercase;
}

.ooc_deets div:nth-of-type(even) {
text-align: right;
font-weight: normal;
}

.post_bottom-links {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: center;
}

.post_bottom-links i {
font-size: 16px;
text-align: center;
color: var(--offwhite);
line-height: 20px;
}

.post_bottom-links a {
margin-right: 0 !important;
font-size: 10px;
}

/**********************
>> POST MID <<
**********************/

#post_mid {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: stretch;
align-content: stretch;
}

#actual_post {
width: 695px;
padding: 35px;
outline: 1px solid black;
outline-offset: -10px;
background: var(--offwhite);
}

.post2 #actual_post {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}

.post1 #actual_post {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}

/**********************
>> MINI PROFILE <<
**********************/
#minip {
height: 490px;
}

.avvie {
width: 225px;
height: 400px;
outline: 1px solid black;
outline-offset: -10px;
background-size: cover;
position: relative;
}

.g-2 .avvie {
background-image: url(/uploads/mythmakers/assets/TMC_DefaultAv.jpg);
}

#stat_container {
opacity: 0;
width: 205px;
height: 380px;
background: var(--offwhite);
position: absolute;
top: 10px;
left: 10px;
overflow: hidden;
-webkit-transition: var(--hov);
-o-transition: var(--hov);
transition: var(--hov);
}

.avvie:hover #stat_container {
opacity: 1;
}

#stat_container .icon {
width: 60px;
height: 60px;
margin: 18px auto 0 auto;
border: 5px solid gray;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: white;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 0 black;
box-shadow: 1px 1px 0 black;
}

.icon .icon_bg {
width: 200%;
height: 200%;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: -50%;
left: -50%;
background-size: cover;
background-position: center;
}

#stat_container .cont {
position: absolute;
left: 10px;
bottom: 10px;
width: calc(100% - 20px);
height: 275px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.cont .statblock {
display: block;
width: 100%;
overflow: hidden;
}

.statblock .label {
display: block;
font: bold 12px var(--serif2);
color: black;
height: 18px;
text-transform: uppercase;
letter-spacing: 1px;
}

.statblock .bar {
display: block;
height: 14px;
padding: 2px;
}

.bar .modifier {
background: var(--maindarkgreen);
height: 100%;
width: 0%;
border: 1px solid white;
-webkit-box-shadow: 1px 1px 0 var(--bg);
box-shadow: 1px 1px 0 var(--bg);
position: relative;
}

.g-2 #stat_container {
display: none;
}

.post2 #minip {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}

.post1 #minip {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}

.postcolor {
text-align: justify;
font-size: 12px;
}

.triggers {
width: 225px;
height: 95px;
overflow: hidden;
padding: 5px;
}

.triggers div {
display: block;
width: 100%;
text-align: center;
}

.triggers div b {
font: italic bold 18px var(--sans1);
color: var(--mainyellow);
text-transform: uppercase;
}

.trig_list {
margin: 3px auto;
width: 200px !important;
height: 60px;
border: 3px solid var(--paladin);
overflow: auto;
padding: 5px;
background: var(--offwhite);
text-align: left !important;
}

/**********************
>> PAGES <<
**********************/
#pg-container {
position: relative;
width: 100%;
height: auto;
display: table;
}

#pg-container .header {
font-family: var(--serif1);
font-size: 20px;
text-transform: uppercase;
color: var(--offwhite);
background: rgba(25, 67, 92, 0.75);
height: 45px;
width: 100%;
line-height: 50px;
text-align: center;
letter-spacing: 8px;
display: table-caption;
margin-bottom: 7px;
word-spacing: 5px;
border-bottom: 2px solid var(--mainyellow);
}

#pg-container .right b {
color: var(--mainblue);
}

#pg-container .navi {
display: table-cell;
margin-top: 7px;
width: 198px;
overflow: hidden;
border-right: 7px solid rgba(0, 0, 0, 0);
vertical-align: top;
}

#pg-container .right {
display: table-cell;
padding: 20px 20px 13px 20px;
background: white;
text-align: justify;
}

.navi ul {
list-style-type: none;
margin: 0 0 7px 0;
padding: 0;
width: 100%;
white-space: nowrap;
}

.navi ul:first-of-type {
margin-top: -4px;
}

.navi li {
margin: 4px 0;
}

.navi li a {
padding: 5px 0 5px 15px;
text-transform: none;
font-family: var(--serif2);
font-style: italic;
font-size: 12px;
letter-spacing: 1.5px;
color: var(--offwhite);
}

.navi li a:hover {
color: var(--mainred);
}

.navi ul li:first-of-type a {
text-transform: uppercase;
display: block;
background: var(--maingreen);
padding: 10px 20px;
text-align: center;
font-family: var(--serif1);
font-size: 14px;
font-style: unset;
letter-spacing: 0.5px;
margin-bottom: 7px;
}

.navi ul li:first-of-type a:hover {
color: var(--offwhite);
}

.navi ul:last-of-type,
.navi ul:last-of-type li a {
margin-bottom: 0;
}

/**********************
>> MAIN PROFILE <<
**********************/

#mprof {
background: rgba(37, 52, 69, 0.75);
padding: 20px;
}

#mprof #wrap {
margin: 0 auto;
width: 880px;
background: var(--mainblue);
padding: 20px;
display: flex;
justify-content: space-between;
}

#mprof #wrap #avatar {
width: 235px;
height: 410px;
border: 5px solid #0c212e;
outline: 1px solid rgba(255, 255, 255, 0.5);
outline-offset: 4px;
background-size: cover;
background-position: center;
margin: 5px 0 0 5px;
overflow: hidden;
position: relative;
}

#mprof #avatar .av_links {
width: 215px;
height: 50px;
background: rgba(15, 23, 31, 0.75);
position: absolute;
bottom: 5px;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
padding: 5px;
border: 1px solid rgba(242, 239, 234, 0.5);
}

.av_links a {
display: inline-block;
font-size: 30px;
margin: 0 10px;
line-height: 42px;
color: var(--offwhite);
opacity: 0.5;
transition: var(--hov);
}

.av_links a:hover {
opacity: 1;
}

#mprof #right {
width: 590px;
height: 420px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.5);
overflow: hidden;
position: relative;
}

#mprof #right .icon-holder {
position: absolute;
top: 37px;
left: 37px;
width: 100px;
height: 100px;
background: white;
transform: translateZ(1px) rotate(45deg);
border: 5px solid #061017;
outline: 1px solid rgba(255,255,255,0.5);
outline-offset: 4px;
overflow: hidden;
}

#mprof #right .icon-holder .icon {
width: 200%;
height: 200%;
background-image: url(/uploads/mythmakers/assets/defaultsq.gif);;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transform: rotate(-45deg);
position: absolute;
top: -50%;
left: -50%;
}

#mprof #right .divider {
position: absolute;
top: 186px;
left: 41px;
display: block;
width: 100px;
height: 6px;
border-top: 1px solid var(--mainyellow);
border-bottom: 1px solid var(--mainyellow);
}

#mprof #right input {
display: none;
}

#mprof #right .labels {
height: 200px;
width: 165px;
position: absolute;
left: 4px;
bottom: 4px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
overflow: hidden;
}

#mprof #right .labels label {
text-decoration: none;
color: var(--paladin);
transition: var(--hov);
position: relative;
}

#mprof #right .labels label, #mprof #right .labels a {
font-family: var(--sans1);
font-weight: bold;
font-size: 75%;
letter-spacing: 0.5px;
display: block;
text-align: left;
text-transform: uppercase;
margin: 5px 0;
}

#mprof #right .labels label:first-of-type {
margin-top: 0;
}

#mprof #right .labels label:hover {
cursor: pointer;
color: var(--mainyellow);
}

#mprof #right .content {
width: 410px;
height: 410px;
position: absolute;
right: 4px;
top: 4px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
opacity: 0;
transition: var(--hov);
visibility: hidden;
transform: translatey(410px);
}

#mprof #right .labels label:after {
content: '';
opacity: 0;
position: absolute;
bottom: -2px;
left: 0;
height: 2px;
width: 70%;
background: var(--offwhite);
}

#mprof #right input#basics:checked ~ .content#basics,
#mprof #right input#charsheet:checked ~ .content#charsheet,
#mprof #right input#history:checked ~ .content#history,
#mprof #right input#player:checked ~ .content#player
{
visibility: visible;
opacity: 1;
transform: translatey(0);
transition-delay: .4s;
}

#mprof #right input#basics:checked ~ .labels label[for=basics]:after,
#mprof #right input#charsheet:checked ~ .labels label[for=charsheet]:after,
#mprof #right input#history:checked ~ .labels label[for=history]:after,
#mprof #right input#player:checked ~ .labels label[for=player]:after {
display: inline-block;
transition: var(--hov);
opacity: 1;
}

#mprof #right input#basics:checked ~ .labels label[for=basics],
#mprof #right input#charsheet:checked ~ .labels label[for=charsheet],
#mprof #right input#history:checked ~ .labels label[for=history],
#mprof #right input#player:checked ~ .labels label[for=player] {
color: var(--mainyellow);
}

#mprof .content#basics .rec {
margin: 0 auto;
display: block;
width: 205px;
height: 100px;
background-size: 205px 100px;
background-position: center;
border: 1px solid rgba(255,255,255,0.5);
background-image: url(/uploads/mythmakers/assets/defaultrec.gif);
}

#mprof .content#basics name {
display: block;
text-align: center;
text-transform: uppercase;
font: bold 11px var(--sans1);
}

#mprof .content#basics .bottom {
width: calc(100% - 10px);
height: 276px;
position: absolute;
left: 5px;
bottom: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-around;
flex-wrap: wrap;
flex: 1;
}

#mprof .content#basics .bottom div {
font: italic 10px var(--sans1);
color: var(--offwhite);
}

#mprof .content#basics .bottom div b {
font: bold 10px var(--sans1);
text-transform: uppercase;
}

/**********************
>> THREAD #1 STYLE <<
**********************/
.t1-wrap {
margin: 0 auto;
width: 400px;
padding: 40px;
background: white;
border: 10px solid var(--maindarkgreen);
position: relative;
}

.t1-wrap p {
margin: 0 0 15px 0;
padding: 0;
text-indent: 20px;
font: 13px/17px var(--sans1);
}

.t1-wrap p:last-of-type,
.thread2 p:last-of-type {
margin-bottom: 0;
}

.t1-wrap img {
display: block;
margin: 0 auto 15px auto;
width: 300px;
height: 150px;
border: 5px solid var(--maindarkgreen);
}

.t1-wrap br {
display: none;
}

.thread-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: var(--offwhite);
text-align: right;
font: bold 13px/18px var(--serif2);
text-transform: uppercase;
letter-spacing: 0.5px;
border-top: 1px solid #e0e0e0;
}

.thread-footer i {
margin: 0 5px;
}

/**********************
>> THREAD #2 STYLE <<
**********************/
.thread2 {
margin: 0 auto;
padding: 20px;
width: 300px;
height: 450px;
overflow: hidden;
background: white;
border: 5px solid var(--maindarkgreen);
position: relative;
}

.thread2 .inner {
padding: 5px 10px;
width: 100%;
height: 98%;
font: 14px/16px var(--serif1);
overflow: auto;
}

.thread2 .inner p {
margin: 0 0 15px 0;
padding: 0;
}

/**********************
>> MEMBERGROUPS <<
**********************/
/* MEMBERS */
.members {
color: #9e959c;
}

/* OOC, GROUP 23 */
.ooc {
color: #bd893c;
}

/* ADMIN, GROUP 4 */
.admin {
color: var(--mainyellow);
}

/* GUESTS, GROUP 2 */
.guests {
color: var(--g-2);
}

/* BARBARIAN, GROUP 10 */
.barbarian {
color: #e64a31 !important;
}
.g-10 .t1-wrap,
.g-10 img,
.g-10 .thread-2 {
border-color: var(--g-10);
}

/* BARD, GROUP 11 */
.bard {
color: #1d7ec5 !important;
}
.g-11 .t1-wrap,
.g-11 img,
.g-11 .thread-2 {
border-color: var(--g-11);
}

/* BLOOD HUNTER, GROUP 12 */
.bloodhunter {
color: #a4323c !important;
}
.g-12 .t1-wrap,
.g-12 img,
.g-12 .thread-2 {
border-color: var(--g-12);
}

/* CLERIC, GROUP 13 */
.cleric {
color: #bbe2f0 !important;
}
.g-13 .t1-wrap,
.g-13 img,
.g-13 .thread-2 {
border-color: var(--g-13);
}

/* DRUID, GROUP 14 */
.druid {
color: #78a878 !important;
}
.g-14 .t1-wrap,
.g-14 img,
.g-14 .thread-2 {
border-color: var(--g-14);
}

/* FIGHTER, GROUP 15 */
.fighter {
color: #687b85 !important;
}
.g-15 .t1-wrap,
.g-15 img,
.g-15 .thread-2 {
border-color: var(--g-15);
}

/* MONK, GROUP 16 */
.monk {
color: #4949f5 !important;
}
.g-16 .t1-wrap,
.g-16 img,
.g-16 .thread-2 {
border-color: var(--g-16);
}
/* PALADIN, GROUP 17 */
.paladin {
color: #9ba09c !important;
}
.g-17 .t1-wrap,
.g-17 img,
.g-17 .thread-2 {
border-color: var(--g-17);
}

/* RANGER, GROUP 18 */
.ranger {
color: #92a650 !important;
}
.g-18 .t1-wrap,
.g-18 img,
.g-18 .thread-2 {
border-color: var(--g-18);
}

/* ROGUE, GROUP 19 */
.rogue {
color: mediumslateblue !important;
}
.g-19 .t1-wrap,
.g-19 img,
.g-19 .thread-2 {
border-color: var(--g-19);
}

/* SORCERER, GROUP 20 */
.sorcerer {
color: coral !important;
}
.g-20 .t1-wrap,
.g-20 img,
.g-20 .thread-2 {
border-color: var(--g-20);
}

/* WARLOCK, GROUP 21 */
.warlock {
color: #429e18 !important;
}
.g-21 .t1-wrap,
.g-21 img,
.g-21 .thread-2 {
border-color: var(--g-21);
}
/* WIZARD, GROUP 22 */
.wizard {
color: #01b4b8 !important;
}
.g-22 .t1-wrap,
.g-22 img,
.g-22 .thread-2 {
border-color: var(--g-22);
}
/**********************
>> HIDDEN ELEMENTS <<
**********************/
#logostrip,
#submenu,
.newstext,
#field-website,
#field-gtalk,
#field-aim,
#field-yim,
#field-msn,
#field-skype,
#field-location,
#field-interests,
#recent-topics {
display: none;
}
</style>
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js">

<div id="avatar" style="background-image: url(), url(https://66.media.tumblr.com/64c41fb19f9 … o1_250.jpg);">

<div class="av_links">
<a title="Message " href="/index.php?act=Msg&CODE=04&MID="><i class="fas fa-scroll"></i></a>
<a title="View Topics" href="/index.php?act=Search&CODE=getalluser&mid=&type=topics"><i class="fas fa-bookmark"></i></a>
<a title="View Posts" href="/index.php?act=Search&CODE=getalluser&mid="><i class="fas fa-highlighter"></i></a>

</div>
</div>

<label for="basics">Basics</label>
<label for="charsheet">Character Sheet</label>
<label for="history">History</label>
<label for="player">Player</label>

<br />

</div>

</div>

Character Sheet

</div>

History

</div>

Player

</div>

</div>
</div>

</div>
</div>
[/html]

0

Поделиться21631.10.22 09:28:39

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
@import url(https://fonts.googleapis.com/css?family … n,cyrillic);

/*--- GENERAL ---*/
body {
padding: 0;
margin: 0;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 100%;
line-height: 1.45;
color: #333;
}

a {
text-decoration: none;
color: #111;
}

p {
text-indent: 20px;
text-align: justify;
}

button, button:active, button:focus {
outline: none;
}

/*--- /GENERAL ---*/

/*--- MAIN ---*/

#main {
min-height: 200px;
width:100%;
background-color: #FFFFFF;
}

#main-inside {
display: block;
width: 100%;
margin: 0 auto;
}

#main-center {
display: block;
min-height: 300px;
padding: 15px;
}

#main-content {
width: 850px;
margin: 0 auto;
border: 1px dashed #aaa;
}

/*--- /MAIN ---*/

/*--- PROFILE OF USER ---*/

/*--- PROFILE LITE INFO ---*/

#profile-lite {
margin:10px auto;
}

.profile-item {
width:400px;
height:100px;
vertical-align:top;
}

#profile-nik {
color:#2699c7;
font-size:16px;
font-weight:600;
}

#profile-ava {
display:block;
width:350px;
background-color:#54b7de;
color:#fff;
margin: 10px auto;
}

#profile-status {
padding:5px;
font-size:14px;
text-transform:uppercase;
}

#profile-ava-img {
display:block;
width:90px;
height:100px;
margin:0 15px 0 auto;
border:1px solid #000;
}

#profile-ava-footer {
padding:5px;
padding-left:70px;
font-size:14px;
}

/*--- /PROFILE LITE INFO ---*/

/*--- PROFILE MENU ---*/

#profile-menu {
display:block;
width:800px;
margin:10px auto;
border-bottom:1px solid #ddd;
}

#profile-menu button, #profile-menu button.clicked {
display:inline-block;
border: 1px solid #ddd;
border-bottom: none;
border-top-right-radius:5px;
border-top-left-radius:5px;
padding: 7px 15px;
background-color:#f2f2f2;
font-size:14px;
outline: none;
}

#profile-menu button.clicked {
background-color:#fff;
color:#2699c7;
outline: none;
}

/*--- /PROFILE MENU ---*/

.profile-button {
display:block;
margin: 15px auto;
border:none;
border-radius:5px;
padding:10px 20px;
background-color:#2699c7;
color:#fff;
font-size:14px;
}

/*--- PROFILE ABOUT ---*/

#profile-info {
margin:10px auto;
border-collapse: collapse;
}

.profile-info-left, .profile-info-right {
width:400px;
height:100px;
vertical-align:top;
}

.profile-info-left {
border-top:1px solid #ddd;
border-right:1px solid #ddd;
}

.profile-info-right {
border-top:1px solid #ddd;
}

.profile-info-title {
color:#aaa;
font-size:16px;
font-weight:600;
}

/*--- /PROFILE ABOUT ---*/

/*--- /PROFILE OF USER ---*/
</style>
<body>




<div id = "main">
<div id="main-inside">
<div id="main-center">
<div id="main-content">


<table id="profile-lite">
<tbody>
<tr>
<td class="profile-item">
<p id="profile-nik">NIKNAME</p>
<p>Фамилия</p>
<p>Имя Отчество</p>
</td>
<td class="profile-item">
<div id="profile-ava">
<div id="profile-status">
администратор
</div>
<div id="profile-ava-img">

</div>
<div id="profile-ava-footer">
снами с 01.01.2015
</div>
</div>
</td>
</tr>
</tbody>
</table>


<div id="profile-menu" >
<button class="clicked">Информация</button>
<button>Результаты</button>
<button>Скрипты</button>
<button>Контакты</button>
</div>


<div>
<button class="profile-button">Редактировать </button>
</div>


<table id="profile-info">
<tbody>
<tr>
<td class="profile-info-left">
<p class="profile-info-title">О себе</p>
</td>
<td class="profile-info-right">
<p class="profile-info-title">Права доступа</p>
</td>
</tr>
</tbody>
</table>


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




</body>
[/html]

0

Поделиться21701.11.22 14:19:39

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
:root {
--primary-light: #8abdff;
--primary: #6d5dfc;
--primary-dark: #5b0eeb;

--white: #FFFFFF;
--greyLight-1: #E4EBF5;
--greyLight-2: #c8d0e7;
--greyLight-3: #bec8e4;
--greyDark: #9baacf;
}

$shadow: .3rem .3rem .6rem var(--greyLight-2),
-.2rem -.2rem .5rem var(--white);
$inner-shadow: inset .2rem .2rem .5rem var(--greyLight-2),
inset -.2rem -.2rem .5rem var(--white);
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
background: var(--greyLight-1);
}
/* BUTTONS */
.btn, .btn__primary,
.btn__secondary {
width: 15rem;
height: 4rem;
border-radius: 1rem;
box-shadow: $shadow;
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .3s ease;}

.btn__primary {
grid-column: 1 / 2;
grid-row: 4 / 5;
background: var(--primary);
box-shadow:inset .2rem .2rem 1rem var(--primary-light),
inset -.2rem -.2rem 1rem var(--primary-dark),
$shadow;
color: var(--greyLight-1); }

.btn__primary:hover { color: var(--white); }
.btn__primary:active {
box-shadow:inset .2rem .2rem 1rem var(--primary-dark),
inset -.2rem -.2rem 1rem var(--primary-light);
}

.btn__secondary {
grid-column: 1 / 2;
grid-row: 5 / 6;
color: var(--greyDark);
&:hover { color: var(--primary); }
&:active {
box-shadow: $inner-shadow;
}

/* ICONS */
.icon {
grid-column: 3 / 4;
grid-row: 4 / 5;
display: flex;
justify-content: space-between;}

.icon__account, .icon__home, .icon__settings {
width: 4rem;
height: 4rem;
border-radius: 50%;
box-shadow: $shadow;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
cursor: pointer;
color: var(--greyDark);
transition: all .5s ease; }

.icon :active {
box-shadow: $inner-shadow;
color: var(--primary);
}

.icon :hover {color: var(--primary);}

</style>
<container><button class="btn__primary"><p>Button</p></button>
<button class="btn__secondary"><p>Button</p></button>
<div class="icon">
<div class="icon__home">
<ion-icon name="home"></ion-icon></div>
<div class="icon__account">
<ion-icon name="person"></ion-icon></div>
<div class="icon__settings">
<ion-icon name="settings"></ion-icon></div>
</div></container>
[/html]

0

Поделиться21801.11.22 14:57:01

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
button{
@include center;
background: #333;
color: #ccc;
width: 200px;
height: 60px;
border: 0;
font-size: 18px;
border-radius: 4px;
font-family: 'Raleway', sans-serif;
transition: .6s;
overflow: hidden;}

button:focus{
outline: 0;
}

button:before{
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,0.5);
width: 60px;
height: 100%;
left: 0;
top: 0;
opacity: .5;
filter: blur(30px);
transform: translateX(-100px) skewX(-15deg);
}

button:after{
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,0.2);
width: 30px;
height: 100%;
left: 30px;
top: 0;
opacity: 0;
filter: blur(5px);
transform: translateX(-100px) skewX(-15deg);
}

button:hover{
background: #338033;
cursor: pointer;}
button:hover:before{
transform: translateX(300px) skewX(-15deg);
opacity: 0.6;
transition: .7s;
}

button:hover:after{
transform: translateX(300px) skewX(-15deg);
opacity: 1;
transition: .7s;
}

</style>
<button>hover</button>

[/html]

0

Поделиться21902.11.22 19:54:21

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<script src="https://cdn.lordicon.com/qjzruarw.js"></script>
<lord-icon
src="https://cdn.lordicon.com/kxrhwtdg.json"
trigger="hover"
colors="primary:#4be1ec,secondary:#cb5eee"
style="width:250px;height:250px">
</lord-icon>
<lord-icon
src="https://cdn.lordicon.com/kxoxiwrf.json"
trigger="hover"
colors="primary:#4be1ec,secondary:#cb5eee"
state="hover"
style="width:250px;height:250px">
</lord-icon>
[/html]

0

Поделиться22011.11.22 10:19:05

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
img {
--_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
--m:
left var(--_i,0%) top var(--_g),
bottom var(--_i,0%) left var(--_g),
top var(--_i,0%) right var(--_g),
right var(--_i,0%) bottom var(--_g);
-webkit-mask: var(--m);
mask: var(--m);
outline: 100vmax solid #b3c3d4;
outline-offset: -100vmax;
transition: .3s linear;
cursor: pointer;
}
img:hover {
--_i: 10%;
outline-color: #0000;
}

</style>

[/html]

0

Поделиться22111.11.22 10:56:59

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.zig-zag {
height: 200px;
background: repeating-linear-gradient(135deg,#C02942 0 15px,#53777A 0 30px);
--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) 50% / 60px 100%;
-webkit-mask: var(--mask);
mask: var(--mask);
}

</style>
<script>

</script>

<div class="zig-zag"></div>
[/html]

0

Поделиться22211.11.22 11:04:29

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
* {
box-sizing: border-box;
}

body {
display: grid;
place-items: center;
min-height: 100vh;
}

h1 {
--color-one: hsl(210 80% 50%);
--color-two: hsl(320 100% 75%);
--stretch-multiplier: 5;
font-size: clamp(2rem, 14vmin, 8rem);
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
display: grid;
line-height: 1;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

[aria-hidden] {
display: flex;
gap: 0.02ch;
align-items: center;
color: black;
}

.stretch-o {
height: 1.12ch;
width: calc(var(--stretch) * 1.16ch);
translate: 0 -0.01ch;
border: 0.25ch solid black;
border-radius: 1ch;
transition: width 0.2s;
position: relative;
}

h1 {
--stretch: 1;
}

h1:hover {
--stretch: var(--stretch-multiplier);
}

.stretch-o:after,
.stretch-o:before {
content: "";
border: 0.25ch solid var(--color);
position: absolute;
inset: -0.25ch;
border-radius: 1ch;
opacity: calc(-1 + var(--stretch));
transition: opacity 0.2s;
}

.stretch-o:before {
--color: var(--color-one);
}

.stretch-o:after {
--color: var(--color-two);
mask:
radial-gradient(
circle at top left,
black,
transparent
);
}

</style>
<h1>
<span>Design</span>
<span class=sr-only>
For
</span>
<span aria-hidden="true">
<span>F</span>
<span class=stretch-o></span>
<span>r</span>
</span>
<span>Developers</span>
</h1>
[/html]

0

Поделиться22311.11.22 11:14:53

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One&display=swap');

body {
margin: 0;
padding: 0;
background-color: #263238;
font-family: 'Rubik Mono One', sans-serif;
text-transform: uppercase;
}

.hero-marquee {
overflow: hidden;
white-space: nowrap;
}

.marquee {
// added to remove white-space that caused a blink in the animation
font-size: 0;
}

.clipped-text {
display: inline-block;
font-size: 250px;
margin-right: 100px;
}

.ai {
background-image: url(https://www.kamea.it/img/_scheda/ai-mar … rop_1.webp);
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
}

.robotics {
background-image: url(https://media.giphy.com/media/pIMlKqgdZgvo4/giphy.gif);
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
}
</style>
<script>
// Inspired by:
// https://codepen.io/sgorneau/pen/mWEddP
// as described in the above codepen, if we set the value `x` to something like -100% it'll go too fast
// so I took the function to calculate the rate and applied to my code

let marquee = document.querySelectorAll('.clipped-text');

// added event listener because it doesn't get the right width
addEventListener("load", function () {
marquee.forEach(el => {
// set a default rate, the higher the value, the faster it is
let rate = 200;
// get the width of the element
let distance = el.clientWidth;
// get the margin-right of the element
let style = window.getComputedStyle(el);
let marginRight = parseInt(style.marginRight) || 0;
// get the total width of the element
let totalDistance = distance + marginRight;
// get the duration of the animation
// for a better explanation, see the quoted codepen in the first comment
let time = totalDistance / rate;
// get the parent of the element
let container = el.parentElement;

gsap.to(container, time, {
repeat: -1,
x: '-'+totalDistance,
ease: Linear.easeNone,
});
});
});

</script>
<div class="hero-marquee">
<div class="marquee">
<span class="clipped-text ai">
Artificial intelligence
</span>
<span class="clipped-text ai">
Artificial intelligence
</span>
</div>
<div class="marquee">
<span class="clipped-text robotics">
Robotics
</span>
<span class="clipped-text robotics">
Robotics
</span>
</div>
<div class="marquee">
<span class="clipped-text">
Machine learning
</span>
<span class="clipped-text">
Machine learning
</span>
</div>
</div>
[/html]

0

Поделиться22411.11.22 11:16:21

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap");

:root {
--yellow: #ffdd40;
--dark: #2f313a;
--deg: -86deg;
--trans: all 0.4s ease 0s;
}

body {
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
justify-content: center;
font-family: "Lato", Arial, Helvetica, serif;
background: linear-gradient(90deg, #131417, var(--dark) 35% 65%, #131417);
font-size: 1em;
}

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

.content {
width: 90vmin;
}

h2 {
text-align: center;
}

.team {
padding: 2em 0 2em 2.5em;
margin: 0;
}

.member {
margin: 1.5em 0 0.5em;
padding: 0.73em;
background: linear-gradient(
83deg,
var(--yellow) 0 97%,
#fff0 calc(97% + 1px) 100%
);
position: relative;
list-style: none;
display: inline-block;
transform: scale(0.85);
transition: var(--trans);
}

.member:nth-of-type(even) {
text-align: right;
background: linear-gradient(
-83deg,
var(--yellow) 0 97%,
#fff0 calc(97% + 1px) 100%
);
}

.thumb {
width: 13vmin;
height: 13vmin;
float: left;
margin-right: 1.25em;
background: linear-gradient(
var(--deg),
var(--dark) 0 70%,
var(--yellow) 0% 100%
);
transform: rotate(-4deg);
transition: var(--trans);
border-radius: 0.25em;
overflow: hidden;
margin-left: -3em;
padding: 0.5em;
}

.member:nth-of-type(even) .thumb {
--deg: 86deg;
float: right;
margin-left: 2em;
margin-right: -3em;
transform: rotate(4deg);
}

.thumb img {
width: 100%;
height: 100%;
border-radius: 0.25em;
filter: grayscale(1);
background: var(--dark);
}

.member:hover {
transform: scale(1);
transition: var(--trans);
filter: drop-shadow(0px 20px 10px #0008);
}

.member:hover .thumb {
padding: 0.1em;
transition: var(--trans);
transform: rotate(-1deg);
--deg: -89deg;
}

.member:nth-of-type(even):hover .thumb {
--deg: 91deg;
}

.member:hover .thumb img {
filter: none;
transition: var(--trans);
}

.description {
padding-top: 1vmin;
}

.description p {
padding: 0 2em;
margin-bottom: 1em;
}

h3 {
background: linear-gradient(182deg, #fff0 60%, var(--dark) 0 100%);
display: inline;
transform: rotate(-2deg);
position: absolute;
margin: 0;
margin-top: -2.25em;
left: 9vmin;
padding: 0.5em 0.75em;
color: var(--yellow);
border-radius: 0.25em;
font-size: 1.35em;
transform-origin: left bottom;
}

.member:nth-of-type(even) h3 {
left: inherit;
right: 9vmin;
transform: rotate(2deg);
transform-origin: right bottom;
background: linear-gradient(-182deg, #fff0 60%, var(--dark) 0 100%);
}

.member:hover h3 {
transition: var(--trans);
transform: rotate(0deg);
background: linear-gradient(180deg, #fff0 59%, var(--dark) 0 100%);
}

.co-funder:after {
content: "CO-FUNDER";
font-size: 0.75em;
position: absolute;
top: -1.5em;
background: var(--yellow);
right: 4em;
transform: rotate(3deg);
padding: 0.35em 0.75em 0.5em;
border-radius: 0.25em;
color: var(--dark);
font-weight: bold;
}

.co-funder:nth-of-type(even):after {
right: inherit;
left: 4em;
transform: rotate(-3deg);
}

.description p a {
display: inline-block;
margin: 0.5em 0 0 0;
background: var(--dark);
color: var(--yellow);
padding: 0.1em 0.5em 0.35em;
border-radius: 0.5em;
text-decoration: none;
transition: var(--trans);
}
.description p a:hover {
transition: var(--trans);
color: var(--dark);
background: var(--yellow);
font-weight: bold;
}

.description p a img {
float: left;
width: 22px;
filter: invert(1);
border-radius: 0.15em;
padding: 2px;
background: #fff;
margin-right: 2px;
}

</style>
<script>

</script>
<div class="content">

<ul class="team">
<li class="member co-funder">
<div class="thumb"><img src="https://assets.codepen.io/3/internal/avatars/users/default.png?fit=crop&format=auto&height=120&width=120"></div>
<div class="description">
<h3>Chris Coyier</h3>
<p>Chris is a front-end developer and designer. He writes a bunch of HTML, CSS, and JavaScript and shakes the pom-poms for CodePen.<br><a href="https://codepen.io/chriscoyier/">@chriscoyier</a></p>
</div>
</li>
<li class="member co-funder">
<div class="thumb"><img src="https://assets.codepen.io/2/internal/avatars/users/default.png?height=120&width=120"></div>
<div class="description">
<h3>Alex Vazquez</h3>
<p>Alex is a full stack developer. Alex does JavaScript development for CodePen, both front end and back, and just about everything else.<br><a href="https://codepen.io/quezo/">@quezo</a></p>
</div>
</li>
<li class="member">
<div class="thumb"><img src="https://assets.codepen.io/652/internal/avatars/users/default.png?height=120&width=120"></div>
<div class="description">
<h3>Marie Mosley</h3>
<p>Marie wears a lot of hats. She is our documentation lead, customer support maestra, editor, and community manager.<br><a href="https://codepen.io/mariemosley/">@mariemosley</a></p>
</div>
</li>
<li class="member">
<div class="thumb"><img src="https://assets.codepen.io/39255/internal/avatars/users/default.png?height=120&width=120"></div>
<div class="description">
<h3>Stephen Shaw</h3>
<p>Stephen is a designer/developer residing in Houston. He likes to build animations with CSS & JavaScript.<br><a href="https://codepen.io/shshaw/">@shshaw</a></p>
</div>
</li>
<li class="member">
<div class="thumb"><img src="https://cpwebassets.codepen.io/assets/packs/about-rachelsmith-6878ca76a1d9200e6c296e810050b8cb.jpg?height=120&width=120"></div>
<div class="description">
<h3>Rachel Smith</h3>
<p>Rachel is a full stack'er in Australia. Not only a creative and talented designer and developer, but a great technical writer.<br><a href="https://codepen.io/rachsmith/">@rachsmith</a></p>
</div>
</li>
<li class="member">
<div class="thumb"><img src="https://cpwebassets.codepen.io/assets/packs/about-robertkieffer-77c28f3a6efe082fd1903affae540b8a.jpg?height=120"></div>
<div class="description">
<h3>Robert Kieffer</h3>
<p>Robert is a full-stack dev with a penchant for open-source work. He dwells in the murky depthsmurky depths of JS.<br><a href="https://codepen.io/broofa/">@broofa</a></p>
</div>
</li>
<li class="member">
<div class="thumb"><img src="https://cpwebassets.codepen.io/assets/packs/about-deevazquez-c8e8b7f9e803f462b7be19ea60b9272f.jpg?height=120&width=120"></div>
<div class="description">
<h3>Dee Vazquez</h3>
<p>Dee is a full stack developer who started her career in finance. She can jump from Rails to React to Go, and also manage our finances.<br><a href="https://codepen.io/deequez/">@deequez</a></p>
</div>
</li>
</ul>

</div>
[/html]

0

Поделиться22514.11.22 09:31:47

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
body {
background: #e0e5ec;
}
h1 {
position: relative;
text-align: center;
color: #353535;
font-size: 50px;
font-family: "Cormorant Garamond", serif;
}

p {
font-family: 'Lato', sans-serif;
font-weight: 300;
text-align: center;
font-size: 18px;
color: #676767;
}
.frame {
width: 90%;
margin: 40px auto;
text-align: center;
}
button {
margin: 20px;
outline: none;
}
.custom-btn {
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}

/* 1 */
.btn-1 {
border: none;
}
.btn-1:hover {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}

/* 2 */
.btn-2 {
border: none;
}
.btn-2:before {
height: 0%;
width: 2px;
}
.btn-2:hover {
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* 3 */
.btn-3 {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-3 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-3:before,
.btn-3:after {
position: absolute;
content: "";
right: 0;
top: 0;
box-shadow:
-7px -7px 20px 0px rgba(255,255,255,.9),
-4px -4px 5px 0px rgba(255,255,255,.9),
7px 7px 20px 0px rgba(0,0,0,.2),
4px 4px 5px 0px rgba(0,0,0,.3);
transition: all 0.3s ease;
}
.btn-3:before {
height: 0%;
width: 2px;
}
.btn-3:after {
width: 0%;
height: 2px;
}
.btn-3:hover:before {
height: 100%;
}
.btn-3:hover:after {
width: 100%;
}
.btn-3 span:before,
.btn-3 span:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
box-shadow:
-7px -7px 20px 0px rgba(255,255,255,.9),
-4px -4px 5px 0px rgba(255,255,255,.9),
7px 7px 20px 0px rgba(0,0,0,.2),
4px 4px 5px 0px rgba(0,0,0,.3);
transition: all 0.3s ease;
}
.btn-3 span:before {
width: 2px;
height: 0%;
}
.btn-3 span:after {
width: 0%;
height: 2px;
}
.btn-3 span:hover:before {
height: 100%;
}
.btn-3 span:hover:after {
width: 100%;
}

/* 4 */
.btn-4 {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-4 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-4:before,
.btn-4:after {
position: absolute;
content: "";
right: 0;
top: 0;
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
transition: all 0.3s ease;
}
.btn-4:before {
height: 0%;
width: 2px;
}
.btn-4:after {
width: 0%;
height: 2px;
}
.btn-4:hover:before {
height: 100%;
}
.btn-4:hover:after {
width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
transition: all 0.3s ease;
}
.btn-4 span:before {
width: 2px;
height: 0%;
}
.btn-4 span:after {
width: 0%;
height: 2px;
}
.btn-4 span:hover:before {
height: 100%;
}
.btn-4 span:hover:after {
width: 100%;
}

/* 5 */
.btn-5 {
left: 10px;
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-5:hover {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}
.btn-5:before,
.btn-5:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
box-shadow:
-7px -7px 20px 0px #fff,
-4px -4px 5px 0px #fff,
7px 7px 20px 0px #0003,
4px 4px 5px 0px #0002;
transition:400ms ease all;
}
.btn-5:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
width:100%;
transition:800ms ease all;
}

/* 6 */
.btn-6 {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-6 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-6:before,
.btn-6:after {
position: absolute;
content: "";
height: 0%;
width: 2px;
box-shadow:
-7px -7px 20px 0px rgba(255,255,255,.9),
-4px -4px 5px 0px rgba(255,255,255,.9),
7px 7px 20px 0px rgba(0,0,0,.2),
4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-6:before {
right: 0;
top: 0;
transition: all 500ms ease;
}
.btn-6:after {
left: 0;
bottom: 0;
transition: all 500ms ease;
}
.btn-6:hover:before {
transition: all 500ms ease;
height: 100%;
}
.btn-6:hover:after {
transition: all 500ms ease;
height: 100%;
}
.btn-6 span:before,
.btn-6 span:after {
position: absolute;
content: "";
box-shadow:
-7px -7px 20px 0px rgba(255,255,255,.9),
-4px -4px 5px 0px rgba(255,255,255,.9),
7px 7px 20px 0px rgba(0,0,0,.2),
4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-6 span:before {
left: 0;
top: 0;
width: 0%;
height: 2px;
transition: all 500ms ease;
}
.btn-6 span:after {
right: 0;
bottom: 0;
width: 0%;
height: 2px;
transition: all 500ms ease;
}
.btn-6 span:hover:before {
width: 100%;
}
.btn-6 span:hover:after {
width: 100%;
}

/* 7 */
.btn-7 {
right: 15px;
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-7 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-7:before,
.btn-7:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
box-shadow:
-7px -7px 20px 0px rgba(255,255,255,.9),
-4px -4px 5px 0px rgba(255,255,255,.9),
7px 7px 20px 0px rgba(0,0,0,.2),
4px 4px 5px 0px rgba(0,0,0,.3);
transition: all 0.3s ease;
}
.btn-7:before{
height: 0%;
width: 2px;
}
.btn-7:after {
width: 0%;
height: 2px;
}
.btn-7:hover:before {
height: 100%;
}
.btn-7:hover:after {
width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
box-shadow:
-7px -7px 20px 0px rgba(255,255,255,.9),
-4px -4px 5px 0px rgba(255,255,255,.9),
7px 7px 20px 0px rgba(0,0,0,.2),
4px 4px 5px 0px rgba(0,0,0,.3);
transition: all 0.3s ease;
}
.btn-7 span:before {
width: 2px;
height: 0%;
}
.btn-7 span:after {
height: 2px;
width: 0%;
}
.btn-7 span:hover:before {
height: 100%;
}
.btn-7 span:hover:after {
width: 100%;
}

/**** BTN No. 8 ****/
.btn-8 {
right: 20px;
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
}
.btn-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-8:before,
.btn-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
transition: all 0.3s ease;
}
.btn-8:before{
height: 0%;
width: 2px;
}
.btn-8:after {
width: 0%;
height: 2px;
}
.btn-8:hover:before {
height: 100%;
}
.btn-8:hover:after {
width: 100%;
}
.btn-8 span:before,
.btn-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
transition: all 0.3s ease;
}
.btn-8 span:before {
width: 2px;
height: 0%;
}
.btn-8 span:after {
height: 2px;
width: 0%;
}
.btn-8 span:hover:before {
height: 100%;
}
.btn-8 span:hover:after {
width: 100%;
}

/**** BTN No. 9 ****/
.btn-9 {
border: none;
z-index: 2;
transition: all 0.3s ease;
overflow: hidden;
}
.btn-9:after {
position: absolute;
content: " ";
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.3s ease;
}
.btn-9:hover {
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
color: #000;
}
.btn-9:hover:after {
-webkit-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* 10 */
.btn-10 {
border: none;
border-radius: 3px;
transition: all 0.3s ease;
overflow: hidden;
}
.btn-10:after {
position: absolute;
content: " ";
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: all 0.3s ease;
-webkit-transform: scale(.1);
transform: scale(.1);
}
.btn-10:hover {
color: #000;
}
.btn-10:hover:after {
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
-webkit-transform: scale(1);
transform: scale(1);
}

/* 11 */
.btn-11 {
border: none;
transition: all 0.3s ease;
}
.dot {
content: '';
position: absolute;
top: 0;
width: 6.5px;
height: 100%;
border-radius: 100%;
transition: all 300ms ease;
display: none;
}
.dot:after {
content: '';
position: absolute;
left: calc(50% - .4em);
height: 8px;
width: 8px;
background: #e0e5ec;
border-radius: 3px;
box-shadow:
-7px -7px 20px 0px #fff,
-4px -4px 5px 0px #fff,
7px 7px 20px 0px #0004,
4px 4px 5px 0px #0004;
}
.btn-11:hover .dot,
.btn-11:focus .dot {
animation: rotation 2s infinite linear;
display: block;
}
@keyframes rotation {
0% {transform: translateX(0) rotate(0);}
30%{transform: translateX(60px) rotate(0);}
50% {transform: translateX(60px) rotate(180deg);}
80% {transform: translateX(0) rotate(180deg);}
100% {transform: translateX(0) rotate(360deg);}
}

/* 12 */
.btn-12{
position: relative;
right: 20px;
bottom: 20px;
border:none;
width: 130px;
height: 40px;
line-height: 42px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-12 span {
display: block;
position: absolute;
width: 130px;
height: 40px;
border: none;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-12 span:nth-child(1) {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
background: #e0e5ec;
color: #e0e5ec;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}

/* 13 */
.btn-13 {
border: none;
z-index: 1;
}
.btn-13:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn-13:hover {
color: #000;
}
.btn-13:hover:after {
top: 0;
height: 100%;
}
.btn-13:active {
top: 2px;
}

/* 14 */
.btn-14 {
border: none;
z-index: 1;
}
.btn-14:after {
position: absolute;
content: "";
width: 100%;
height: 0;
top: 0;
left: 0;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn-14:hover {
color: #000;
}
.btn-14:hover:after {
top: auto;
bottom: 0;
height: 100%;
}
.btn-14:active {
top: 2px;
}

/* 15 */
.btn-15 {
border: none;
z-index: 1;
}
.btn-15:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
right: 0;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn-15:hover {
color: #000;
}
.btn-15:hover:after {
left: 0;
width: 100%;
}
.btn-15:active {
top: 2px;
}

/* 16 */
.btn-16 {
border: none;
}
.btn-16:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn-16:hover {
color: #000;
}
.btn-16:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn-16:active {
top: 2px;
}

</style>
<script>

</script>
<header>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</header>

<h1>Neumorphic Buttons</h1>
<p>Hover us and enjoy the satisfying neumorphic animation designs!</p>
<div class="frame">
<button class="custom-btn btn-1">Read More</button>
<button class="custom-btn btn-2">Read More</button>
<button class="custom-btn btn-3"><span>Read More</span></button>
<button class="custom-btn btn-4"><span>Read More</span></button>
<button class="custom-btn btn-5"><span>Read More</span></button>
<button class="custom-btn btn-6"><span>Read More</span></button>
<button class="custom-btn btn-7"><span>Read More</span></button>
<button class="custom-btn btn-8"><span>Read More</span></button>
<button class="custom-btn btn-9">Read More</button>
<button class="custom-btn btn-10">Read More</button>
<button class="custom-btn btn-11">Read More<div class="dot"></div></button>
<button class="custom-btn btn-12"><span>Click!</span><span>Read More</span></button>
<button class="custom-btn btn-13">Read More</button>
<button class="custom-btn btn-14">Read More</button>
<button class="custom-btn btn-15">Read More</button>
<button class="custom-btn btn-16">Read More</button>
<p style="font-family: Andale Mono, monospace;">
DEERBUCKS.DESIGNING</p>
</div>

[/html]

0

Поделиться22614.11.22 11:19:12

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
:root {
--color-text: navy;
--color-bg: papayawhip;
--color-bg-accent: #ecdcc0;
--size: clamp(10rem, 1rem + 40vmin, 30rem);
--gap: calc(var(--size) / 14);
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
:root {
--color-text: papayawhip;
--color-bg: navy;
--color-bg-accent: #2626a0;
}
}

* {
box-sizing: border-box;
}

body {
display: grid;
align-content: center;
overflow: hidden;
gap: var(--gap);
width: 100%;
min-height: 100vh;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: var(--color-text);
background-color: var(--color-bg);
}

.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
}

.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.marquee__group {
animation-play-state: paused;
}
}

.marquee--vertical {
--mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
flex-direction: column;
}

.marquee--vertical .marquee__group {
animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
}

@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}

@keyframes scroll-y {
from {
transform: translateY(var(--scroll-start));
}
to {
transform: translateY(var(--scroll-end));
}
}

/* Element styles */
.marquee svg {
display: grid;
place-items: center;
width: var(--size);
fill: var(--color-text);
background: var(--color-bg-accent);
aspect-ratio: 16/9;
padding: calc(var(--size) / 10);
border-radius: 0.5rem;
}

.marquee--vertical svg {
aspect-ratio: 1;
width: calc(var(--size) / 1.5);
padding: calc(var(--size) / 6);
}

/* Parent wrapper */
.wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100vw;
}

.wrapper--vertical {
flex-direction: row;
height: 100vh;
}

/* Toggle direction button */
.toggle {
--size: 3rem;
position: relative;
position: fixed;
top: 1rem;
left: 1rem;
width: var(--size);
height: var(--size);
font: inherit;
text-align: center;
cursor: pointer;
outline: none;
border: none;
border-radius: 50%;
color: inherit;
background-color: var(--color-bg-accent);
z-index: 1;
}

.toggle:focus-visible {
box-shadow: 0 0 0 2px var(--color-text);
}

.toggle span {
position: absolute;
display: inline-block;
top: 50%;
left: calc(100% + 0.4em);
width: fit-content;
white-space: nowrap;
transform: translateY(-50%);
animation: fade 400ms 4s ease-out forwards;
user-select: none;
}

.toggle svg {
--size: 1.5rem;
position: absolute;
top: 50%;
left: 50%;
width: var(--size);
height: var(--size);
fill: currentcolor;
transform: translate(-50%, -50%);
transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.toggle--vertical svg {
transform: translate(-50%, -50%) rotate(-90deg);
}

@keyframes fade {
to {
opacity: 0;
visibility: hidden;
}
}

</style>
<script>
/*
JS to toggle scroll axis styles
*/
const control = document.getElementById("direction-toggle");
const marquees = document.querySelectorAll(".marquee");
const wrapper = document.querySelector(".wrapper");

control.addEventListener("click", () => {
control.classList.toggle("toggle--vertical");
wrapper.classList.toggle("wrapper--vertical");
[...marquees].forEach((marquee) =>
marquee.classList.toggle("marquee--vertical")
);
});

</script>
<button class="toggle" id="direction-toggle">
<span>Toggle scroll axis</span>
<svg aria-hidden="true" viewBox="0 0 512 512" width="100" title="arrows-alt-h">
<path d="M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z" />
</svg>
</button>

<symbol id="hulu" viewBox="0 0 24 24">
<path d="M14.707 15.957h1.912V8.043h-1.912zm-3.357-2.256a.517.517 0 01-.512.511H9.727a.517.517 0 01-.512-.511v-3.19H7.303v3.345c0 1.368.879 2.09 2.168 2.09h1.868c1.189 0 1.912-.856 1.912-2.09V10.51h-1.912c.01 0 .01 3.09.01 3.19zm10.75-3.19v3.19a.517.517 0 01-.512.511h-1.112a.517.517 0 01-.511-.511v-3.19h-1.912v3.345c0 1.368.878 2.09 2.167 2.09h1.868c1.19 0 1.912-.856 1.912-2.09V10.51zm-18.32 0H2.557c-.434 0-.645.11-.645.11V8.044H0v7.903h1.9v-3.179c0-.278.234-.511.512-.511h1.112c.278 0 .511.233.511.511v3.19h1.912v-3.446c0-1.445-.967-2-2.167-2Z" />
</symbol>
</defs>
</svg>
[/html]

0

Поделиться22714.11.22 11:40:22

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]<article class="wrapper">
<div class="marquee">
<div class="marquee__group">

</div>

</article>

.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
}

.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}

.marquee--vertical .marquee__group {
flex-direction: column;
}

.marquee--vertical .marquee__group {
animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
}

@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}

/* Parent wrapper */
.wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100vw;
}

</style>[/html]

0

Поделиться22814.11.22 11:55:14

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
:root {
--size: clamp(10rem, 1rem + 40vmin, 30rem);
--gap: calc(var(--size) / 14);
--duration: 60s;
--scroll-start: 0;
--scroll-end: calc(-100% - var(--gap));
}

.marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
}

.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll-x var(--duration) linear infinite;
}

.marquee--vertical .marquee__group {
flex-direction: column;
}

.marquee--vertical .marquee__group {
animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
animation-direction: reverse;
animation-delay: -3s;
}

@keyframes scroll-x {
from {
transform: translateX(var(--scroll-start));
}
to {
transform: translateX(var(--scroll-end));
}
}

/* Parent wrapper */
.wrapper {
display: flex;
flex-direction: column;
gap: var(--gap);
margin: auto;
max-width: 100vw;
}

</style>
<script>
</script>

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

[/html]

0

Поделиться22915.11.22 12:14:52

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
h81 {
text-transform:uppercase;
font-size:clamp(2rem, 10vw, 6rem);
word-wrap: break-word;
letter-spacing:3px;
background-image:linear-gradient( 130deg,#acbfcd,#c1c8d5 41.07%,#319197 76.05%);
-webkit-background-clip:text;
color:hsl(0, 100%, 100%, 1);
}

.pulse {
transition:color 350ms ease;
}

h81:hover .pulse {
color:hsl(0, 100%, 100%, 0);
cursor:pointer;
}

</style>
<script>
console.clear();
const styledText = document.querySelector("h81");

splitText(styledText);
</script>
<h81>Толстые голуби</h81>

[/html]

0

Поделиться23015.11.22 13:34:00

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.box {
position: relative;
width: 240px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}

.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
background: linear-gradient(#fff, #fff, #e3e3e3);
filter: blur(1px);
z-index: 1;
}

.box::after {
content: '';
position: absolute;
top: 1px;
right: -1px;
width: 20px;
height: 100%;
background: #9d9d9d;
filter: blur(1px);
z-index: 1;
}

.box .shadow {
position: absolute;
width: 100%;
height: 100%;
background: #eee;
}

.box .shadow::before {
content: '';
position: absolute;
top: 0;
left: calc(100% + 5px);
width: 100%;
height: 200%;
background: linear-gradient(rgba(0,0,0,0.075), transparent);
transform: skewX(45deg);
}

.box .shadow::after {
content: '';
position: absolute;
bottom: -200%;
left: calc(100% + 15px);
width: 100%;
height: 200%;
background: linear-gradient(rgba(0,0,0,0.075), transparent);
transform: skewX(45deg);
}

.box .content {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(#dbdae1, #a3aaba);
box-shadow: 5px 5px 5px rgba(0,0,0,0.1),
15px 15px 15px rgba(0,0,0,0.1),
20px 20px 20px rgba(0,0,0,0.1),
50px 50px 50px rgba(0,0,0,0.1),
inset 3px 3px 2px #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.box .content .percent {
position: relative;
width: 150px;
height: 150px;
}

.box .content .percent::before {
content: attr(data-text);
position: absolute;
inset: 20px;
background: #555;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.75rem;
letter-spacing: 0.1rem;
text-transform: uppercase;
}

.box .content .percent svg {
position: relative;
width: 150px;
height: 150px;
transform: rotate(270deg);
}

.box .content .percent svg circle {
width: 100%;
height: 100%;
fill: transparent;
stroke-width: 3;
stroke: rgba(0,0,0,0.05);
transform: translate(5px, 5px);
}

.box .content .percent svg circle:nth-child(2) {
stroke: #555;
stroke-dasharray: 440;
stroke-dashoffset: calc(440 - (440 * var(--num)) / 100);
opacity: 0;
animation: fadeIn 1s linear forwards;
animation-delay: 2.5s;
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.box .content .percent .dot {
position: absolute;
inset: 5px;
z-index: 10;
animation: animateDot 2s linear forwards;
}

@keyframes animateDot {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(calc(3.6deg * var(--num)));
}
}

.box .content .percent .dot::before {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 14px;
background: #555;
border-radius: 50%;
}

.box .content .number {
position: relative;
inset: 0;
opacity: 0;
animation: fadeIn 1s linear forwards;
animation-delay: 2.5s;
}

.box .content .number h2 {
font-size: 2.5rem;
color: #555;
}

.box .content .number h2 span {
font-weight: 300;
font-size: 1.5rem;
}
</style>

[/html]

0

Поделиться23115.11.22 15:11:25

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
span {
display: inline-block;
vertical-align: middle;
color: white;
}

ul {
display: block;
list-style-type: none;
text-align: right;
}

a {
color: #FFF;
}
a:hover {
opacity: 0.7;
}

.menu {
margin: 0 20px 0 0;
padding-left: 1.25em;
cursor: pointer;
position: relative;
width: 30px;
height: 50px;
text-align: right;
}

.menu-close {
font-size: 0em;
opacity: 0;
text-align: center;
font-weight: bold;

-webkit-transition: 0.2s;
transition: 0.2s;
}

.menu-close-visible {
font-size: 2em;
opacity: 1;

-webkit-transition: 0.2s 0.4s;
transition: 0.2s 0.4s;
}

.menu-global {
z-index: -1;
position: absolute;
left: 0;
height: 10px;
width: 100%;
background-color: #ffffff;

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s;
transition: 0.2s;
}

.menu-global:hover {
left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.menu-top {
top: 0;
}
.menu-middle {
top: 18px;
}
.menu-bottom {
top: 36px;
}

.menu-text{
opacity: 0;
font-size: 0em;
padding: 10px 0;
-webkit-transition: 0.1s;
transition: 0.1s;
}

.expand {
box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
width: 200px;
height: 50px;

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.menu-top-expand {
top: 50px;
background: #FFF8E1;

-webkit-transition: all 0.5s 0.2s, left 0.1s;
transition: all 0.5s 0.2s, left 0.1s;
}

.menu-middle-expand {
top: 100px;
background: #FFECB3;

-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}

.menu-bottom-expand {
top: 150px;
height: 100px;
background: #FFE082;

-webkit-transition: all 0.5s, left 0.1s;
transition: all 0.5s, left 0.1s;
}

.menu-text-expand{
color: #000000;
opacity: 0.8;
padding: 10px;
font-size: 1.3em;
-webkit-transition: all 0.2s 0.7s, font-size 0.1s;
transition: all 0.2s 0.7s, font-size 0.1s;
}
</style>
<script>
var Menu = {
el: {
menu: $('.menu'),
menuTop: $('.menu-top'),
menuClose: $('.menu-close'),
menuMiddle: $('.menu-middle'),
menuBottom: $('.menu-bottom'),
menuText: $('.menu-text')
},

init: function() {
Menu.bindUIactions();
},

bindUIactions: function() {
Menu.el.menu
.on(
'click',
function(event) {
Menu.activateMenu(event);
event.preventDefault();
}
);
},

activateMenu: function() {
Menu.el.menuTop.toggleClass('menu-top-expand expand');
Menu.el.menuMiddle.toggleClass('menu-middle-expand expand');
Menu.el.menuBottom.toggleClass('menu-bottom-expand expand');
Menu.el.menuText.toggleClass('menu-text-expand');
Menu.el.menuClose.toggleClass('menu-close-visible');
}
};

//Stop menu item click closing the menu
$(".menu .menu-global").click(function(e) {
e.stopPropagation();
});

Menu.init();
</script>

<container style="display: block;height: 500px; ">
<ul class="menu">
<div class="menu-close fa fa-close"></div>
<li class="menu-global menu-top"><span class="menu-text">Home</span></li>
<li class="menu-global menu-middle"><span class="menu-text">About Me</span></li>
<li class="menu-global menu-bottom"><span class="menu-text">My Giraffes</span></li>
</ul>
</container>

[/html]

0

Поделиться23224.11.22 08:42:55

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]<style>
.container {
position: relative;
padding: 2em;
background: #161f49;}

.container::before {
content: "";
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: .625em;
background: linear-gradient(45deg, #3e3795 0%,#da212b 100%);
}

.gradient {
background: linear-gradient(45deg, #3e3795 0%,#da212b 100%);
}

.contain {
max-width: 40em;
margin: 0 auto;
}

h2 {
position: relative;
font-size: .875em;
font-weight: 700;
text-transform: uppercase;
font-family: "open-sans",sans-serif;
color: #cb2953;
letter-spacing: .35em;}

h2::before, h2::after {
content: "";
position: absolute;
top: -.1em;
left: -1.75em;
display: block;
border: .75em solid transparent;
border-left-color: #cb2953;
}

h2::after {
left: -2.25em;
border-left-color: white;
}

h1 {
color: white;
font-size: 2.5em;
font-weight: 300;
font-family: "bookmania",serif;
}

p {
color: white;
font-weight: 300;
line-height: 2em;
font-family: "open-sans",sans-serif;
}

::selection {
color: white;
background: rgba(white, .2);
}

.gradient_select::selection {
background: rgba(white, 0);
}

</style>

$("body").mousedown(function() {
var selected = $( ".gradient" );
$(selected).contents().unwrap();
});

$(".gradient_select").on("mouseup", function() {
selection = getSelectedText();
if (selection.length >= 1) {
var spn = '<span class="gradient">' + selection + '</span>';
$(this).html($(this).html().replace(selection, spn));
}
});

//Grab selected text
function getSelectedText() {
if (window.getSelection) {
return window.getSelection().toString();
} else if (document.getSelection) {
return document.getSelection();
} else if (document.selection) {
return document.selection.createRange().text;
}
}

</script>

<container>
<div class="contain">
<h2>Science</h2>
<h1>The Hydrological Cycle</h1>
<p class="gradient_select">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque odio. Morbi luctus quam et libero luctus malesuada vitae nec sapien. Duis ultrices turpis dui, varius condimentum neque luctus in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris dapibus mi et odio mattis gravida. Curabitur in vestibulum velit. Quisque maximus arcu eu commodo imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque laoreet magna vel augue cursus vehicula. Donec ultrices mauris in suscipit accumsan. Nam porttitor enim non augue faucibus porta. Sed molestie leo nec ultrices porta.</p>
</div>
</container>

[/html]

0

Поделиться23324.11.22 08:47:08

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.button {
width: 400px;
height: 100px;
border: double 8px transparent;
border-radius: 80px;
background-image: linear-gradient(#32557f, #f69ec4), radial-gradient(circle at top left, #f69ec4,#32557f);
background-origin: border-box;
background-clip: content-box, border-box;
}
.button:hover {
width: 400px;
height: 100px;
border: double 8px transparent;
border-radius: 80px;
background-image: linear-gradient(#f69ec4, #32557f), radial-gradient(circle at top left, #f69ec4,#32557f);
background-origin: border-box;
background-clip: content-box, border-box;
}
</style>
<div class="button">ggggggg</div>

[/html]

0

Поделиться23424.11.22 08:48:25

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>

button {
user-select: none;
outline: none;
border: none;
cursor: pointer;
border-radius: 10px;

width: 100px;
height: 100px;
position: relative;
background-position: 100px 100px;
background-repeat: no-repeat;
background: linear-gradient(to left, #f69ec4 0%, #32557f 100%);}

button:before {
content: "";
position: absolute;
top: 10px; left: 10px;
width: 80px; height: 80px;
background: url(img/search.png) no-repeat;
}

</style>
<button>
[/html]

0

Поделиться23524.11.22 08:50:06

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.btn {
font-family: 'Quicksand';
font-weight: bold;
text-transform: uppercase;
padding: 20px 40px;
color: #FFF;
border-radius: 24% 76% 29% 71% / 33% 40% 60% 67%;
line-height: 40px;
position: relative;
font-size: 18px;
overflow: hidden;
display: inline-block;
border: 0;
background: transparent;
z-index: 1;
}

.btn::before {
position: absolute;
content: '';
display: inline-block;
background: #3bade3;
background: linear-gradient(100deg, #FFADD2 0%, #FF41BE 20%, #AF8BFF 45%, #691EFF 70%, #1EAAFF 90%);
height: 100px;
width: 400%;
z-index: -1;
transform: translateX(-50%);
transition: transform 200ms ease-in;
top: 0;
}

.btn:hover::before {
transform: translateX(-25%);
}

</style>

<a href="" class="btn">Join now </a>

[/html]

0

Поделиться23602.12.22 08:15:50

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]<style>
/* Basic */

.wrapper {
background-color: #f6f8ff;
width: 100%;
min-height: 100vh;
background: transparent;
opacity: 1;
}

.wrapper.pre {
background-size: cover !important;
background: url(https://images.unsplash.com/photo-15236 … 0&q=80);
background: url(https://images.unsplash.com/photo-14625 … 6&q=80);
position: absolute;
top: 0;
z-index: -2;
opacity: 0.75;
background: url(https://assets.codepen.io/4927073/mybg.jpg);
}

h2.tab-title {
font-weight: 300;
}
h2.tab-title.tab-primary {
color: #636983;
}
h2.tab-title.tab-success {
color: #51a14c;
}
h2.tab-title.tab-default {
color: #525252;
}
h2.tab-title.tab-warning {
color: #b12222;
}
.container {
width: 100%;
padding: 10px 0;
text-align: center;
}
.container .card {
max-width: 600px;
min-height: 240px;
background-color: white;
border-radius: 10px;
border: 1px solid #e3e3e3;
margin: 0 auto;
}
.tabs {
text-align: left;
position: relative;
}
.tabs input {
position: absolute;
opacity: 0;
margin: 0;
padding: 0;
}
.tabs input + label {
font-weight: 300;
color: #666;
margin: 10px 0;
width: 110px;
cursor: pointer;
display: inline-block;
transition: all 0.3s;
text-align: center;
font-size: 12px;
border: none;
}
.tabs input + label:hover {
color: #777;
}
.tabs .tabsShadow {
width: 100%;
padding: 10px;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04);
box-sizing: border-box;
position: absolute;
height: 35px;
z-index: 0;
top: 0;
pointer-events: none;
}
.content {
margin: 0px auto;
text-align: left;
color: #666;
font-size: 13px;
line-height: 20px;
position: relative;
height: 220px;
background: hsl(232deg 16% 15%);

}
.content .item {
opacity: 0;
visibility: hidden;
transition: all 0.3s;
position: absolute;
padding: 10px 20px;
}
.content p {
margin: 10px 0;
}
.glider {
width: 110px;
height: 3px;
background: linear-gradient(90deg, #5b3cc4 0%, #3c6cc4 100%);
border-radius: 3px;
position: absolute;
box-shadow: 0px 0px 8px 0px rgba(91, 60, 196, 0.4);
transition: all 0.3s;
}
#tab-1:checked ~ .glider {
left: 0px;
}
#tab-2:checked + label {
color: #51a14c;
}
#tab-2:checked ~ .glider {
background: linear-gradient(90deg, #51a14c 0%, #10c33e 100%);
box-shadow: 0px 0px 8px 0px rgba(47, 187, 12, 0.62);
}
#tab-2:checked ~ .glider {
left: 113px;
}
#tab-3:checked + label {
color: #525252;
}
#tab-3:checked ~ .glider {
background: linear-gradient(90deg, #4a4a4a 0%, #9b9b9b 100%);
}
#tab-3:checked ~ .glider {
left: 226px;
}
#tab-4:checked + label {
color: #b12222;
}
#tab-4:checked ~ .glider {
background: linear-gradient(90deg, #b93232 0%, #ff5d5d 100%);
box-shadow: 0px 0px 8px 0px rgba(231, 13, 93, 0.57);
}
#tab-4:checked ~ .glider {
left: 339px;
}
#tab-1:checked ~ section #content-1,
#tab-2:checked ~ section #content-2,
#tab-3:checked ~ section #content-3,
#tab-4:checked ~ section #content-4 {
opacity: 1;
visibility: visible;
}
@media (max-width: 700px) {
.tabs input + label,
.glider {
width: 70px;
}
#tab-1:checked ~ .glider {
left: 0px;
}
#tab-2:checked ~ .glider {
left: 73px;
}
#tab-3:checked ~ .glider {
left: 146px;
}
#tab-4:checked ~ .glider {
left: 219px;
}
}

.tabs input + label {
margin: 12px -8px;
width: 15%;
transition: all 0.3s;
text-align: center;
border: none;
border-bottom: 0.5pt solid #1d1e22;
color: #e7e9f5;
display: inline-flex;
-webkit-box-pack: center;
padding: 5pt 10pt;
vertical-align: top;
justify-content: flex-start;
background: #333;
box-shadow: 1px 1px 2px 1px #231f20;
font-family: "antique-olive-condensed";
text-transform: uppercase;
font-weight: 300;
font-size: 8pt;
background: #26292C;
margin-bottom: 0.5px;
border-radius: 7px 7px 0 0 !important;
border-top: 1px solid #3B3D3F;
letter-spacing: .1666666667em !important;
font-family: 'antique-olive' !important;
background: hsl(232deg 6% 17%);

}

.content {
margin: 0px auto;
text-align: left;
color: #666;
font-size: 13px;
line-height: 20px;
position: relative;
height: 240px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%);
display: block;
padding: 1.25rem;
z-index: 2;
background: #26292C;
border-top: 1px solid #3B3D3F;
background: hsl(232deg 16% 15%);

}
.container .card {
max-width: 600px;
min-height: 140px;
border-radius: 10px;
border: none;
margin: 0 auto;
z-index: 4 !important;
position: relative;
background: linear-gradient(#141e30, #243b55);
background: #16181A;
border-top: 1px solid #3B3D3F;
background: hsl(232deg 18% 8%);

}
p {
font-family: muli, sans-serif;
font-family: stix-two-text, serif;
font-family: source-serif-pro, serif;
}
.content p {
margin: 10px 15px 10px 0;
font-family: "muli";
letter-spacing: 0.75px;
font-size: 14pt;
font-style: normal;
color: #f0f2fc;
line-height: 30px;
margin-top: 10pt;
font-family: "freight-display-pro";
font-weight: 300 !important;
}
h2.tab-title.tab-warning,
h2.tab-title.tab-success,
h2.tab-title.tab-primary,
h2.tab-title.tab-default {
font-family: "freight-display-pro";
display: inline-flex;
color: #fff;
background: linear-gradient(55deg, #f37 0%, #f93 80%);
background-position: bottom center;
margin-bottom: 0pt !important;
margin-top: 6pt;
height: 22pt;
text-fill-color: transparent !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
-webkit-background-clip: text !important;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-ms-background-clip: text;
-ms-text-fill-color: transparent;
text-transform: capitalize;
font-size: 24px;
letter-spacing: 0px;
font-family: 'Manrope' !important;
font-weight: 800 !important;

}

h2.tab-title.tab-primary {
background: linear-gradient(55deg, #5E18FF, #750EFF);
}

h2.tab-title.tab-success {
background: linear-gradient(10deg, #02CE85, #02CEAB);
}

h2.tab-title.tab-primary {
background: linear-gradient(300deg, hsl(205deg 100% 50%), hsl(215deg 100% 50%), hsl(245deg 100% 55%), #750EFF);
background: linear-gradient(60deg, hsl(202deg 100% 75%),hsl(205deg 100% 64%),hsl(230deg 100% 75%), hsl(270deg 100% 72%));
}

h2.tab-title.tab-warning {
background: linear-gradient(70deg, #C51574, #97389B);
}

.tabs input {
position: relative;
opacity: 0;
margin: auto !important;
padding: 0;
}
label.tab.tab-primary {
border-radius: 6pt 0 0 6pt;
}
label.tab.tab-warning {
border-radius: 0 6pt 6pt 0;
}
#tab-1:checked + label {
color: deepskyblue;
}
#tab-3:checked + label {
color: #ffadfa;
color: #ffaa75;
}
#tab-4:checked + label {
color: #ffadfa;
}
#tab-1:checked ~ .glider {
left: 1.6%;
}

#tab-2:checked ~ .glider {
left: 21.85%;
}
#tab-3:checked ~ .glider {
background: linear-gradient(
90deg,
#faffcc 0%,
#f5eea3 10%,
#ffe48a 40%,
#ffb54d 65%,
#ff974d 85%,
#ff8052 100%
);
left: 42.15%;
}
#tab-4:checked ~ .glider {
background: linear-gradient(90deg, #b9326f 0%, #ff5ddc 100%);
box-shadow: 0px 0px 8px 0px rgba(231, 13, 93, 0.57);
left: 62.365% !important;

}

.glider {
width: 15%;
padding: 0px 13px;
height: 4.5px;
border-radius: 0 0 1px 1px;
position: absolute;
box-shadow: 0px 0px 8px 0px hsl(262deg 100% 70% / 70%);
background: linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%);
transition: all 0.3s;
top: 36px;
z-index: 2;
}

span.numit {
font-size: 12pt;
font-family: 'muli';
font-weight: 600;
text-shadow: 0.5px 0.5px 0.5px #e7e9f5;
color: #0e101a;
margin-right: 2px;
margin-left: -2px;
padding: 0;
color: aliceblue;
text-shadow: 0.5pt 0.5pt 0.5pt #2d3748;
}

</style>
<script>

</script>

<div class = "wrapper pre">

</div>
<div class="wrapper">
<div class="container">
<div class="card tabs">
<input id="tab-1" type="radio" class="tab tab-selector" checked="checked" name="tab" />
<label for="tab-1" class="tab tab-primary">Product</label>
<input id="tab-2" type="radio" class="tab tab-selector" name="tab" />
<label for="tab-2" class="tab tab-success">Options</label>
<input id="tab-3" type="radio" class="tab tab-selector" name="tab" />
<label for="tab-3" class="tab tab-default">Shipping</label>
<input id="tab-4" type="radio" class="tab tab-selector" name="tab" />
<label for="tab-4" class="tab tab-warning">Published</label>
<div class="tabsShadow"></div>
<div class="glider"></div>
<section class="content">
<div class="item" id="content-1">
<h2 class="tab-title tab-primary">Sweep + Slide Dog Toy</h2>
<p>
<span class = "numit">1</span> The Sweep + Slide is an indoor dog toy with a sleek base designed to glide across any floor. Not only does this toy stimulate your dog's natural chase instincts, but it also sweeps away floor dust and grime with a replaceable sweeper bottom cover.
</p>
</div>
<div class="item" id="content-2">
<h2 class="tab-title tab-success">Tab 2</h2>
<p>
<span class = "numit">2</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor </p>
</div>
<div class="item" id="content-3">
<h2 class="tab-title tab-default">Tab 3</h2>
<p>
<span class = "numit">3</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis </p>
</div>
<div class="item" id="content-4">
<h2 class="tab-title tab-warning">Tab 4</h2>
<p>
<span class = "numit">4</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</section>

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

[/html]

0

Поделиться23705.12.22 11:28:54

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
:root {
--split: 0%;
}

.heading {
position: relative;
width: fit-content;
margin:0 auto;
}

h91 {
font-size: clamp(2rem, 20vw, 10rem);
line-height: 0.9em;
text-transform: uppercase;
text-align:center;
letter-spacing: -0.01em;
padding: 0.3em 0em;
background-image: linear-gradient(
90deg,
#d9a87e 0%,
#d9a87e var(--split),
#8c4c35 var(--split)
);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}

h91:before {
content: "";
background-color: #8c4c35;
width: 3px;
height: 100%;
top: 0%;
left: var(--split);
position: absolute;
}

h91 span {
font-size: 0.3em;
line-height: 1em;
letter-spacing: 0.02em;
display: block;
}

</style>
<script>
TweenMax.to(document.documentElement, 4, {
"--split": "50%",
repeat:-1,
repeatDelay:1,
yoyo:true,
ease: "power4.inOut"
});
</script>
<div class="heading">
<h91>Playground<span>Lorem ipsum dolor amet adipiscing</span></h91>
</div>

[/html]

0

Поделиться23805.12.22 13:02:54

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
@import url('https://fonts.googleapis.com/css?family=Bitter');

* {
/* border: 1px solid red; */
}

:root {
--font: 'Bitter', serif;
--title-size: 36px;
--sub-size: 18px;
}

body {
background: #E5E5E5;
}

.title h1 {
margin: 4px;
font-family: var(--font);
font-size: var(--title-size);
color: #333;
}

.title p {
margin: 4px;
padding-bottom: 25px;
font-family: var(--font);
font-size: var(--sub-size);
color: #888;
}

.container {
text-align: center;
}

.github {
margin: 40px;
}

.progress {
display: inline-block;
width: 400px;
height: 50px;
margin: 35px;
border-radius: 20px;
background: #f9f9f9;
}

.bar {
border-radius: 20px;
width: 0%;
height: 100%;
transition: width;
transition-duration: 1s;
transition-timing-function: cubic-bezier(.36,.55,.63,.48);
}

.mobile {
display: none;
}

.shadow {
/* 25 50 */
box-shadow: 0px 45px 50px rgba(0, 0, 0, 0.25);
}

.crosses {
background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.jupiter {
background-color: #f395a5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath fill='%23e6cca5' fill-opacity='0.4' d='M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z'%3E%3C/path%3E%3C/svg%3E");
}

.piano {
background-color: #cccccc;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='46' viewBox='0 0 70 46'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23333333' fill-opacity='0.4'%3E%3Cpolygon points='68 44 62 44 62 46 56 46 56 44 52 44 52 46 46 46 46 44 40 44 40 46 38 46 38 44 32 44 32 46 26 46 26 44 22 44 22 46 16 46 16 44 12 44 12 46 6 46 6 44 0 44 0 42 8 42 8 28 6 28 6 0 12 0 12 28 10 28 10 42 18 42 18 28 16 28 16 0 22 0 22 28 20 28 20 42 28 42 28 28 26 28 26 0 32 0 32 28 30 28 30 42 38 42 38 0 40 0 40 42 48 42 48 28 46 28 46 0 52 0 52 28 50 28 50 42 58 42 58 28 56 28 56 0 62 0 62 28 60 28 60 42 68 42 68 0 70 0 70 46 68 46'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dominos {
background-color: #fff6bd;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='84' viewBox='0 0 126 84'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23333333' fill-opacity='0.4'%3E%3Cpath d='M126 83v1H0v-2h40V42H0v-2h40V0h2v40h40V0h2v40h40V0h2v83zm-2-1V42H84v40h40zM82 42H42v40h40V42zm-50-6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm96 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm-42 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm30-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM20 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-42a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.pie {
background-color: #faaca8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f55b53' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M29 58.58l7.38-7.39A30.95 30.95 0 0 1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37 7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95 30.95 0 0 1 6.84 60H0v-1.02a28.9 28.9 0 0 0 18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95 30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4 7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95 0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0 39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9 0 0 0 30.02 29h26.56L37.8 10.21zM30.02 31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18 20.2A28.9 28.9 0 0 0 58 59V32.4L39.2 51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.41l18.8 18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41 29h26.57z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bees {
background-color: #fcc846;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%237a4948' fill-opacity='0.83' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.food {
background-color: #ffcb05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ec008c' fill-opacity='0.83'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.floor {
background-color: #00b9f2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 80 80'%3E%3Cg fill='%2392278f' fill-opacity='0.71'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.wiggle {
background-color: #dbbef9;
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff7c7c' fill-opacity='1'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bars {
background-color: #ffe67c;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238fe1e7' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.bubbles {
background-color: #beffc2;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e6afff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.ticTac {
background-color: #ffefaa;
background-image: url("data:image/svg+xml,%3Csvg width='76' height='76' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%23ffadad' fill-opacity='0.84' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.zigZag {
background-color: #00dac3;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm40 5.656L28.172 0h5.656L40 6.172v5.656zM6.172 12l12-12h3.656l12 12h-5.656L20 3.828 11.828 12H6.172zm12 0L20 10.172 21.828 12h-3.656z' fill='%23008386' fill-opacity='0.7' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.stripes {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='25' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23d09af3' fill-opacity='0.54' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.clouds {
background-color: #959bb5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23f0d519' fill-opacity='0.89' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
}

.aztec {
background-color: #d59242;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%230d37c2' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.circuit {
background-color: #00b497;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='150' height='150'%3E%3Cpath fill='%23333333' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
}

.dots {
background-color: #ffcb05;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2300a99d' fill-opacity='0.71' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.lines {
background-color: #efefef;
background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%23efb4a3' fill-opacity='0.84' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.leaf {
background-color: #b5ccbf;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='60' height='30'%3E%3Cpath fill='%2340584a' fill-opacity='0.47' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E");
}

.overlap {
background-color: #ffadff;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232e78ff' fill-opacity='0.82'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@media screen and (max-width: 500px) {
.progress {
width: calc(100vw * 0.7);
/* height: calc(100vw * 0.7 * 0.145); */
height: 40px;
margin: 25px;
}

.github {
margin: 20px;
}

.desktop {
display: none;
}

.mobile {
display: inherit;
}
}

</style>
<script>
const bars = document.querySelectorAll('.bar');
const progress = document.querySelectorAll('.progress');

bars.forEach((bar, index) => {
const randomWidth = Math.floor((Math.random() * 65) + 10);
bar.style.width = `${randomWidth}%`;

progress[index].addEventListener('mouseover', () => {
const randomTiming = Math.floor((Math.random() * 2) + 2);
console.log(randomTiming);
bar.style.transitionDuration = `${randomTiming}s`;
bar.style.width = '100%';
});
})
</script>
<div class="container">
<div class="github">
<div class="title">
<h1>Bars</h1>
<p class="desktop">Hover the bars to fill'em (:</p>
<p class="mobile">Touch the bars to fill'em (:</p>
</div>
<a class="github-button" href="https://github.com/lucagez/bars" data-size="large" data-show-count="true"
aria-label="Star lucagez/bars on GitHub">Star</a>
</div>
<div class="progress">
<div class="bar shadow overlap"></div>
</div>
<div class="progress">
<div class="bar shadow leaf"></div>
</div>
<div class="progress">
<div class="bar shadow bars"></div>
</div>
<div class="progress">
<div class="bar shadow lines"></div>
</div>
<div class="progress">
<div class="bar shadow wiggle"></div>
</div>
<div class="progress">
<div class="bar shadow dots"></div>
</div>
<div class="progress">
<div class="bar shadow circuit"></div>
</div>
<div class="progress">
<div class="bar shadow aztec"></div>
</div>
<div class="progress">
<div class="bar shadow bees"></div>
</div>
<div class="progress">
<div class="bar shadow food"></div>
</div>
<div class="progress">
<div class="bar shadow clouds"></div>
</div>
<div class="progress">
<div class="bar shadow stripes"></div>
</div>
<div class="progress">
<div class="bar shadow crosses"></div>
</div>
<div class="progress">
<div class="bar shadow jupiter"></div>
</div>
<div class="progress">
<div class="bar shadow piano"></div>
</div>
<div class="progress">
<div class="bar shadow dominos"></div>
</div>
<div class="progress">
<div class="bar shadow pie"></div>
</div>
<div class="progress">
<div class="bar shadow floor"></div>
</div>
<div class="progress">
<div class="bar shadow bubbles"></div>
</div>
<div class="progress">
<div class="bar shadow ticTac"></div>
</div>
<div class="progress">
<div class="bar shadow zigZag"></div>
</div>
</div>
[/html]

0

Поделиться23905.12.22 14:57:05

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
.wrapper {
column-count: 2;
column-gap: 50px;
padding: 50px;
}

p {
line-height: 1.6;
font-family: Helvetica;
text-align: justify;
margin: 0;
font-size: 14px;
}

.star {
float: left;
width: 250px;
shape-outside: url(https://upload.wikimedia.org/wikipedia/ … d_star.svg);
shape-margin:20px;
margin-right: 20px;
margin-bottom: 20px;
}

.moon {
border-radius: 50%;
height: 200px;
width:200px;
background-color: #2badd9;
float: right;
shape-outside: inset(1% round 50%);
margin-left: 20px;
margin-bottom: 10px;
}
</style>
<div class="wrapper">

<img src="https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg" alt="" class="star">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use. </p>

<div class="moon"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use. </p>
</div>
[/html]

0

Поделиться24005.12.22 14:59:18

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1040
Уважение: +0

[html]
<style>
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}

canvas {
display: block;
vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
position: absolute;
width: 100%;
height: 100%;
background-color: #323031;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}

.github {
bottom: 10px;
right: 10px;
position: fixed;
border-radius: 10px;
background: #fff;
padding: 0 12px 6px 12px;
border: 1px solid #000;
}

.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
color: #000;
text-decoration: none;
}

.github img {
height: 30px;
}

.github #gh-project {
font-size: 20px;
padding-left: 5px;
font-weight: bold;
vertical-align: bottom;
}

</style>
<script>
tsParticles.load("tsparticles", {
detectRetina: false,
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onHover: {
enable: true,
mode: "bubble"
},
resize: true
},
modes: {
bubble: {
distance: 40,
duration: 2,
opacity: 8,
size: 6,
speed: 3
}
}
},
particles: {
color: {
value: "#ff0000",
animation: {
enable: true,
speed: 20,
sync: true
}
},
lineLinked: {
blink: false,
color: "random",
consent: false,
distance: 30,
enable: true,
opacity: 0.3,
width: 0.5
},
move: {
attract: {
enable: false,
rotate: {
x: 600,
y: 1200
}
},
bounce: false,
direction: "none",
enable: true,
outMode: "bounce",
random: true,
speed: 0.5,
straight: false
},
number: {
density: {
enable: false,
area: 2000
},
limit: 0,
value: 200
},
opacity: {
animation: {
enable: true,
minimumValue: 0.05,
speed: 2,
sync: false
},
random: false,
value: 1
},
shape: {
type: "circle"
},
size: {
animation: {
enable: false,
minimumValue: 0.1,
speed: 40,
sync: false
},
random: true,
value: 1
}
},
polygon: {
draw: {
enable: true,
lineColor: "rgba(255,255,255,0.2)",
lineWidth: 0.3
},
move: {
radius: 10
},
inlineArrangement: "equidistant",
scale: 0.5,
type: "inline",
url: "https://particles.js.org/images/smalldeer.svg"
}
});

</script>


<div id="tsparticles"></div>

<div class="github">
<a class="btn btn-link" href="https://github.com/matteobruni/tsparticles" title="Find more info on GitHub">
<img class="img-fluid" id="gh-mark" src="https://cdn.matteobruni.it/images/particles/GitHub-Mark-120px-plus.png" alt="">
<span id="gh-project">Made with tsParticles</span>
</a>
<div>
<a class="github-button" href="https://github.com/matteobruni/tsparticles" data-icon="octicon-star" data-show-count="true" aria-label="Star matteobruni/tsparticles on GitHub">Star</a>
<a class="github-button" href="https://github.com/matteobruni/tsparticles/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork matteobruni/tsparticles on GitHub">Fork</a>
</div>
</div>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>

[/html]

0

concoction

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Тестовое сообщение

Сообщений 211 страница 240 из 297

Поделиться21127.10.22 19:01:03

Поделиться21227.10.22 19:08:34

Поделиться21328.10.22 15:45:56

Поделиться21431.10.22 09:03:13

Поделиться21531.10.22 09:25:11

Поделиться21631.10.22 09:28:39

Поделиться21701.11.22 14:19:39

Поделиться21801.11.22 14:57:01

Поделиться21902.11.22 19:54:21

Поделиться22011.11.22 10:19:05

Поделиться22111.11.22 10:56:59

Поделиться22211.11.22 11:04:29

Поделиться22311.11.22 11:14:53

Поделиться22411.11.22 11:16:21

Поделиться22514.11.22 09:31:47

Поделиться22614.11.22 11:19:12

Поделиться22714.11.22 11:40:22

Поделиться22814.11.22 11:55:14

Поделиться22915.11.22 12:14:52

Поделиться23015.11.22 13:34:00

Поделиться23115.11.22 15:11:25

Поделиться23224.11.22 08:42:55

Поделиться23324.11.22 08:47:08

Поделиться23424.11.22 08:48:25

Поделиться23524.11.22 08:50:06

Поделиться23602.12.22 08:15:50

Поделиться23705.12.22 11:28:54

Поделиться23805.12.22 13:02:54

Поделиться23905.12.22 14:57:05

Поделиться24005.12.22 14:59:18