штучки

Страница: « 1 … 4 5 6

Сообщений 151 страница 171 из 171

Поделиться15120.05.24 08:17: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>

.deselected-tags {
height: 50vh;
padding: 0.5em 0;
width: 100%;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #ffedd6;
}

.selection-container {
padding-top: 1em;
box-shadow: 0 -2px 15px rgba(black, 0.2), 0 -1px 3px rgba(black, 0.4);
position: relative;
background: white;
z-index: 1;
height: 50px;
width: 100%;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

.copy-confirmation {
position: fixed;
bottom: 0;
background: orange;
color: white;
width: 100%;
padding: 3em 0;
text-align: center;
font-weight: bold;
z-index: 3;
transform: translate(0, 100%);

.flash & {
animation: flash-message 1.3s linear;
}
}

.selection-total {
$pad: 0.7em;

font-size: 0.8em;
font-weight: bold;
position: absolute;
background: white;
color: #84786a;
right: 0;
margin-top: -0.5em - $pad;
z-index: 2;
min-width: 4.8em;
padding: $pad $pad/2 $pad 0;
text-align: right;
border-top-left-radius: 99em;
border-bottom-left-radius: 99em;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09), 0 2px 3px rgba(0, 0, 0, 0.12);
}

.tag {
touch-action: manipulation;
font-size: 0.8em;
font-family: 'Montserrat', sans-serif;
font-weight: bold;

color: gray;

display: inline-block;

border: 4px solid;
border-radius: 999em;
padding: 0.7em $symbolSize*2 0.7em 1em;
min-width: 7em;
text-align: left;

margin: 0.3em;

position: relative;

// Used for offsetting symbols
$xOffset: ($symbolSize/2 - $symbolThickness/2) * -1;
$yOffset: ($symbolSize/2 - $symbolThickness/2);

&:before, &:after {
position: absolute;
content: '';
background: currentColor;
right: 0.4em;
top: 0.9em;
}

&:before { // |
width: $symbolThickness;
height: $symbolSize;
}

&:after { // --
width: $symbolSize;
height: $symbolThickness;
}

&--deselected {
background: white;
border-color: white;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.09), 0 1px 1px rgba(0, 0, 0, 0.25);
animation: bloop 2000ms linear both;

&:before {
transform: translate($xOffset, 0);
}
&:after {
transform: translate(0, $yOffset);
}
}

&--selected {
background: currentColor;
animation: jelly 700ms linear both;

span {
color: white;
}

&:before, &:after {
background: white;
}

&:before {
transform: translate($xOffset, 0) rotate(45deg);
}
&:after {
transform: translate(0, $yOffset) rotate(45deg);
}
}
}

.copy-button-wrapper {
margin: 1em 0.5em 2em;
}

.copy-button {
color: #009fe0;
background: white;
font-size: 1.5em;
padding: 0.5em;
display: block;
box-sizing: border-box;
border: 4px solid;
width: 100%;
font-weight: bold;
font-family: inherit;
border-radius: 99em;

svg {
width: 1em;
display: inline-block;
vertical-align: middle;
margin-left: 0.2em;

path {
fill: currentColor;
}
}
}

/* Generated with Bounce.js. Edit at https://goo.gl/T2pMyb */

@keyframes jelly {
0% { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.4% { transform: matrix3d(1.342, 0, 0, 0, 0, 1.297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
4.7% { transform: matrix3d(1.275, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
6.81% { transform: matrix3d(1.17, 0, 0, 0, 0, 1.054, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
9.41% { transform: matrix3d(1.058, 0, 0, 0, 0, 0.916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
10.21% { transform: matrix3d(1.029, 0, 0, 0, 0, 0.887, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
13.61% { transform: matrix3d(0.938, 0, 0, 0, 0, 0.834, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
14.11% { transform: matrix3d(0.93, 0, 0, 0, 0, 0.835, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
17.52% { transform: matrix3d(0.896, 0, 0, 0, 0, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
18.72% { transform: matrix3d(0.894, 0, 0, 0, 0, 0.906, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
21.32% { transform: matrix3d(0.902, 0, 0, 0, 0, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
24.32% { transform: matrix3d(0.925, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
25.23% { transform: matrix3d(0.933, 0, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
29.03% { transform: matrix3d(0.969, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
29.93% { transform: matrix3d(0.976, 0, 0, 0, 0, 1.051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
35.54% { transform: matrix3d(1.01, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
36.74% { transform: matrix3d(1.014, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
41.04% { transform: matrix3d(1.02, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
44.44% { transform: matrix3d(1.017, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
52.15% { transform: matrix3d(1.004, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
59.86% { transform: matrix3d(0.997, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
63.26% { transform: matrix3d(0.996, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
75.28% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
85.49% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
90.69% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes bloop {
0% { transform: matrix3d(0.6, 0, 0, 0, 0, 0.6, 0, 0, 0, 0, 1, 0, 0, 6, 0, 1); }
1.58% { transform: matrix3d(0.794, 0, 0, 0, 0, 0.794, 0, 0, 0, 0, 1, 0, 0, 6.392, 0, 1); }
3.15% { transform: matrix3d(0.952, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 5.85, 0, 1); }
4.3% { transform: matrix3d(1.02, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 4.953, 0, 1); }
4.73% { transform: matrix3d(1.035, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 4.565, 0, 1); }
6.27% { transform: matrix3d(1.056, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 3.109, 0, 1); }
8.61% { transform: matrix3d(1.033, 0, 0, 0, 0, 1.033, 0, 0, 0, 0, 1, 0, 0, 1.254, 0, 1); }
10.16% { transform: matrix3d(1.013, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0.394, 0, 1); }
12.12% { transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, -0.325, 0, 1); }
12.91% { transform: matrix3d(0.995, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, -0.52, 0, 1); }
14.05% { transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.724, 0, 1); }
17.22% { transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, -0.931, 0, 1); }
21.83% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.7, 0, 1); }
28.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.206, 0, 1); }
29.64% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.135, 0, 1); }
35% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.033, 0, 1); }
39.44% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.062, 0, 1); }
61.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.004, 0, 1); }
83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes flash-message{
0% {
transform: translate(0px,100%) ;
}
5% {
transform: translate(0px,10%) ;
}
10% {
transform: translate(0px,5%) ;
}
25% {
transform: translate(0px,0%) ;
}
94% {
transform: translate(0px,0%) ;
}
100% {
transform: translate(0px,100%) ;
}
}

</style>
<script>
var deselected = document.querySelector('.deselected-tags');
var selected = document.querySelector('.selected-tags');
var copyButton = document.querySelector('.copy-button');
var clipboard = new Clipboard(copyButton);
var selectedClass = 'tag--selected';
var deselectedClass = 'tag--deselected';

var defaultSelected = [
'art',
'crafts',
'etsy'
];

var defaultDeselected = [
'beyonce',
'blessed',
'boss',
'bossbitch',
'cats',
'classy',
'cute',
'decoration',
'dogs',
'embroidery',
'fancy',
'feminism',
'feminist',
'floral',
'funny',
'gangsta',
'gift',
'handmade',
'hiphop',
'hoopart',
'hottie',
'iger',
'instagood',
'love',
'lyrics',
'pimp',
'pretty',
'script',
'shop',
'shop',
'swag',
'tvshow',
'vintage',
'wallart',
'yasss'
];

addTags(deselected, defaultDeselected, 'deselected');
addTags(selected, defaultSelected, 'selected');
updateSelected();

function selectEl(el) {
selected.appendChild(el);
el.classList.remove(deselectedClass);
el.classList.add(selectedClass);
updateSelected();
}

function deselectEl(el) {
deselected.insertBefore(el, deselected.firstChild);
el.classList.remove(selectedClass);
el.classList.add(deselectedClass);
updateSelected();
}

function updateSelected() {
updateNumSelected();
updateCopyText();
}

function updateNumSelected() {
var numEl = document.querySelector('.num-selected');
var num = selected.children.length;
numEl.textContent = num;
}

function updateCopyText() {
var selectedTagText = selected.textContent;
selectedTagText = selectedTagText.replace(/#/g, ' #').trim();
copyButton.dataset.clipboardText = selectedTagText;
}

updateCopyText();

deselected.addEventListener('click', function(e) {
var t = e.target;

if (t.matches('.tag > *')) {
t = t.parentElement;
}

if (t.matches('.tag')) {
selectEl(t);
}
});

selected.addEventListener('click', function(e) {
var t = e.target;

if (t.matches('.tag > *')) {
t = t.parentElement;
}

if (t.matches('.tag')) {
deselectEl(t);
}
});

clipboard.on('success', function(e) {
e.clearSelection();
document.activeElement.blur();
var container = document.querySelector('.selection-container');
container.classList.remove('flash');
window.setTimeout(function() {
container.classList.add('flash');
}, 0);
});
</script>

<div class="copy-button-wrapper">
<button class="copy-button" data-clipboard-text="">
Copy
<svg viewBox="0 0 1024 1024" preserveAspectRatio xmlns="http://www.w3.org/2000/svg"><path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" /></svg>
</button>
</div>

<div class="copy-confirmation">
Hashtags copied to your clipboard!
</div>
</div>
[/html]

Поделиться15220.05.24 08:49: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

https://codepen.io/pharaohleap/pens/pub … c2NDAyMQ==

Поделиться15301.06.24 20:33: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]
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<style>
#conytainer5 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #222;
--clr: #fff;
}
#conytainer5{
font-family: "Font Awesome 5 Free";
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
background: var(--bg);
}
ul {
position: relative;
display: flex;
gap: 50px;
}
ul li {
position: relative;
list-style: none;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.5s;
}
ul li::before {
content: '';
position: absolute;
inset: 30px;
box-shadow: 0 0 0 10px var(--clr),
0 0 0 20px var(--bg),
0 0 0 22px var(--clr);
transition: 0.5s;
}
ul li:hover::before {
inset: 15px;
}
ul li::after {
content: '';
position: absolute;
inset: 0;
background: var(--bg);
transform: rotate(45deg);
transition: 0.5s;
}
ul li:hover::after {
inset: 0px;
transform: rotate(0deg);
}
ul li a {
position: relative;
text-decoration: none;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
ul li a i {
font-size: 2em;
transition: 0.5s;
color: var(--clr);
opacity: 1;
}
ul li:hover a i {
color: var(--clr);
transform: translateY(-40%);
}
ul li a span {
position: absolute;
font-family: sans-serif;
color: var(--clr);
opacity: 0;
transition: 0.5s;
transform: scale(0) translateY(200%);
}
ul li:hover a span {
opacity: 1;
transform: scale(1) translateY(100%);
}
ul li:hover a i,
ul li a span {
filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
}

</style>
<script>

</script>
<div id="conytainer5">
<ul>
<li style="--clr:#2483ff;">
<a href="#">
<i class="fa fa-home"></i>
<span>Home</span>
</a>
</li>

<li style="--clr:#fff200;">
<a href="#">
<i class="fa fa-user"></i>
<span>Profile</span>
</a>
</li>

<li style="--clr:#ff253f;">
<a href="#">
<i class="fa fa-heart"></i>
<span>Likes</span>
</a>
</li>

<li style="--clr:#25d366;">
<a href="#">
<i class="fa fa-gear"></i>
<span>Settings</span>
</a>
</li>

<li style="--clr:#f32ec8;">
<a href="#">
<i class="fa fa-search"></i>
<span>Search</span>
</a>
</li>

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

Поделиться15402.06.24 19:45: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

snow снег

Код:

<script>
(function ($) {
    //
    // Zachary Johnson
    // https://www.zachstronaut.com/posts/2009/12/21/happy-xmas-winternet.html
    // December 2009
    //
    
    var ww = 0;
    var wh = 0;
    var maxw = 0;
    var minw = 0;
    var maxh = 0;
    var textShadowSupport = true;
    var xv = 0;
    var snowflakes = ["\u2744", "\u2745", "\u2746"];
    var prevTime;
    var absMax = 10;
    var flakeCount = 0;
    
    $(init);

    function init()
    {
        var detectSize = function ()
        {
            ww = $(window).width();
            wh = $(window).height();
            
            maxw = ww + 300;
            minw = -300;
            maxh = wh + 300;
        };
        
        detectSize();
        
        $(window).resize(detectSize);
        
        if (!$('body').css('textShadow'))
        {
            textShadowSupport = false;
        }
        
        /* Should work in Windows 7 /*
        if (/windows/i.test(navigator.userAgent))
        {
            snowflakes = ['*']; // Windows sucks and doesn't have Unicode chars installed
            //snowflakes = ['T']; //No FF support for Wingdings
        }
        */
        
        // FF seems to just be able to handle like 50... 25 with rotation
        // Safari seems fine with 150+... 75 with rotation
        var i = 50;
        while (i--)
        {
            addFlake(true);
        }
        
        prevTime = new Date().getTime();
        setInterval(move, 50);
    }

    function addFlake(initial)
    {
        flakeCount++;
        
        var sizes = [
            {
                r: 1.0,
                css: {
                    fontSize: 15 + Math.floor(Math.random() * 20) + 'px',
                    textShadow: '9999px 0 0 rgba(238, 238, 238, 0.5)'
                },
                v: 2
            },
            {
                r: 0.6,
                css: {
                    fontSize: 50 + Math.floor(Math.random() * 20) + 'px',
                    textShadow: '9999px 0 2px #eee'
                },
                v: 6
            },
            {
                r: 0.2,
                css: {
                    fontSize: 90 + Math.floor(Math.random() * 30) + 'px',
                    textShadow: '9999px 0 6px #eee'
                },
                v: 12
            },
            {
                r: 0.1,
                css: {
                    fontSize: 150 + Math.floor(Math.random() * 50) + 'px',
                    textShadow: '9999px 0 24px #eee'
                },
                v: 20
            }
        ];
    
        var $nowflake = $('<span class="winternetz">' + snowflakes[Math.floor(Math.random() * snowflakes.length)] + '</span>').css(
            {
                /*fontFamily: 'Wingdings',*/
                color: '#eee',
                display: 'block',
                position: 'fixed',
                background: 'transparent',
                width: 'auto',
                height: 'auto',
                margin: '0',
                padding: '0',
                textAlign: 'left',
                zIndex: 9999
            }
        );
        
        if (textShadowSupport)
        {
            $nowflake.css('textIndent', '-9999px');
        }
        
        var r = Math.random();
    
        var i = sizes.length;
        
        var v = 0;
        
        while (i--)
        {
            if (r < sizes[i].r)
            {
                v = sizes[i].v;
                $nowflake.css(sizes[i].css);
                break;
            }
        }
    
        var x = (-300 + Math.floor(Math.random() * (ww + 300)));
        
        var y = 0;
        if (typeof initial == 'undefined' || !initial)
        {
            y = -300;
        }
        else
        {
            y = (-300 + Math.floor(Math.random() * (wh + 300)));
        }
    
        $nowflake.css(
            {
                left: x + 'px',
                top: y + 'px'
            }
        );
        
        $nowflake.data('x', x);
        $nowflake.data('y', y);
        $nowflake.data('v', v);
        $nowflake.data('half_v', Math.round(v * 0.5));
        
        $('body').append($nowflake);
    }
    
    function move()
    {
        if (Math.random() > 0.8)
        {
            xv += -1 + Math.random() * 2;
            
            if (Math.abs(xv) > 3)
            {
                xv = 3 * (xv / Math.abs(xv));
            }
        }
        
        // Throttle code
        var newTime = new Date().getTime();
        var diffTime = newTime - prevTime;
        prevTime = newTime;
        
        if (diffTime < 55 && flakeCount < absMax)
        {
            addFlake();
        }
        else if (diffTime > 150)
        {
            $('span.winternetz:first').remove();
            flakeCount--;
        }
        
        $('span.winternetz').each(
            function ()
            {
                var x = $(this).data('x');
                var y = $(this).data('y');
                var v = $(this).data('v');
                var half_v = $(this).data('half_v');
                
                y += v;
                
                x += Math.round(xv * v);
                x += -half_v + Math.round(Math.random() * v);
                
                // because flakes are rotating, the origin could be +/- the size of the flake offset
                if (x > maxw)
                {
                    x = -300;
                }
                else if (x < minw)
                {
                    x = ww;
                }
                
                if (y > maxh)
                {
                    $(this).remove();
                    flakeCount--;
                    
                    addFlake();
                }
                else
                {
                    $(this).data('x', x);
                    $(this).data('y', y);

                    $(this).css(
                        {
                            left: x + 'px',
                            top: y + 'px'
                        }
                    );
                    
                    // only spin biggest three flake sizes
                    if (v >= 6)
                    {
                        $(this).animate({rotate: '+=' + half_v + 'deg'}, 0);
                    }
                }
            }
        );
    }
})(jQuery);

</script>

Поделиться15502.06.24 21:53:35

Автор: 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

листья

Код:

        <style>
#leaf-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

#leaf-container span {
    position: absolute;
    width: 35px;
    height: 35px;
    background: url('https://forumupload.ru/uploads/001c/1e/87/2/451018.png'); 
    background-size: cover;
    animation: fall 5s linear infinite;
}

@keyframes fall {
    0% {
        transform: translate(0, -100vh) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(calc(100vw * var(--random-x)), 100vh) rotate(720deg) scale(1);
        opacity: 1;
    }
}

/* Génération de valeurs aléatoires pour le déplacement horizontal */
#leaf-container span:nth-child(1) {
    --random-x: 0.1;
  animation-delay: 1s; /* Retard de 2 secondes pour la première feuille */
}

#leaf-container span:nth-child(2) {
    --random-x: 0.3;
  animation-delay: 1s;
}

#leaf-container span:nth-child(3) {
    --random-x: 0.5;
  animation-delay: 3s;
}

#leaf-container span:nth-child(4) {
    --random-x: 0.8;
  animation-delay: 4s;
}

#leaf-container span:nth-child(5) {
    --random-x: 1;
  animation-delay: 1.4s;
}

#leaf-container span:nth-child(6) {
    --random-x: 1.2;
  animation-delay: 1.2s;
}

#leaf-container span:nth-child(7) {
    --random-x: 1.5;
  animation-delay: 2.1s;
}

#leaf-container span:nth-child(8) {
    --random-x: 1.8;
  animation-delay: 2s;
}
        </style>
<script>

</script>
<div id="leaf-container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Поделиться15602.06.24 21:59:04

Автор: 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

Код:

* {
  margin: 0;
}

.bg {
  width: 100wh;
  height: 100vh;
  background: url("https://images.unsplash.com/photo-1608939070588-29794905e761?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y3liZXJwdW5rJTIwY2l0eXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60")
    center / 100% auto no-repeat;
  animation: color-change 10s linear infinite;
  position: relative;
}

.bg::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  animation: flash 4s linear infinite;
}

.lightning {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px;
  height: 144px;
  opacity: 0;
  animation: lightning 4s linear infinite;

  background: url("https://www.freepnglogos.com/uploads/lightning-png/download-lightning-png-transparent-image-and-clipart-2.png")
    top center / 100% auto no-repeat;
}

.rain {
  height: 100vh;
  background: url("https://www.freeiconspng.com/thumbs/rain-png/rain-png-transparent-9.png");
  /*   filter:  contrast(400%); */
  animation: rain 0.5s linear infinite;
}

@keyframes rain {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -20% 100%;
  }
}

@keyframes color-change {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  12% {
    opacity: 0.3;
  }
  14% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  22% {
    opacity: 0.6;
  }
  26% {
    opacity: 0;
  }
}

@keyframes lightning {
  0% {
    height: 0px;
  }
  8% {
    height: 0px;
    opacity: 0;
  }
  10% {
    opacity: 1;
    height: 88px;
  }
  11% {
    opacity: 0;
    height: 88px;
  }

  18% {
    height: 0px;
    opacity: 0;
  }
  20% {
    opacity: 1;
    height: 144px;
  }
  25% {
    opacity: 1;
    height: 144px;
  }
  40% {
    opacity: 0;
  }
}

Поделиться15716.06.24 19:37: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>
.box {
font-size: 17px;
line-height: 30px;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
word-break: break-word;
-webkit-font-smoothing: antialiased;
font-family: "Epilogue", sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.creative-cards{
padding: 120px 0;
position: relative;
}
.creative-cards .container {
max-width: 1320px;
width: 100%;
padding-right: .75rem;
padding-left: .75rem;
margin-right: auto;
margin-left: auto;
}
.creative-cards .container .row{
display: flex;
flex-wrap: wrap;
}
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 33.33333333%;
text-align: center;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.card-details {
width: 80%;
margin: auto;
position: relative;
transition: .3s ease-in-out;
}
.card-details:before {
content: "";
width: 190px;
height: 380px;
background: #f7f6f2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skew(-20deg, 0deg);
z-index: -1;
transition: .3s ease-in-out;
}
.card-details:hover:before{
background-color: #fffab3;
}
.card-icons {
width: 140px;
height: 150px;
position: relative;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.card-icons:before {
content: "";
position: absolute;
top: 0;
left: 0;
border: 1px solid;
width: 100%;
height: 100%;
transform: skew(-20deg, 0deg);
background: #fff;
border-color: #ffee02;
transition: .3s ease-in-out;
}
.card-details:hover .card-icons:before{
background-color: #ffee02;
}
.card-icons img{
position: relative;
width: 70px;
height: 70px;
}
.card-details h3{
margin-bottom: 15px;
margin-top: 50px;
font-weight: 700;
font-size: 1.75rem;
line-height: 1.2;
}
.card-details h3 a{
color: #000;
text-decoration: none;
}
.card-details p{
font-size: 16px;
line-height: 30px;
color: #444;
font-weight: 400;
margin-bottom: 30px;
}
.read-more-btn {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 100%;
margin: auto;
background: #fff;
transform: translateX(-10px);
opacity: 0;
visibility: hidden;
border-color: #ffee02;
transition: .3s ease-in-out;
text-decoration: none;
}
.read-more-btn i{
color: #000;
font-size: 12px;
}
.card-details:hover .read-more-btn{
transform: translateX(0);
opacity: 1;
visibility: visible;
}

/* ============= Responsive Ipad ==================== */
@media (max-width: 992px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 50%;
margin-bottom: 40px;
}
}

/* ============= Responsive Iphone ==================== */
@media (max-width: 480px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 100%;
margin-bottom: 20px;
}
.card-details{
width: 100%;
}
.read-more-btn{
transform: translateX(0px);
opacity: 1;
visibility: visible;
}
}

</style>
<div class="box">
<section class="creative-cards style-one">
<div class="container">
<div class="row">
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="https://imgpanda.com/upload/ib/1yIWjyG41o.png" alt="icon" />
</div>
<h3><a href="https://www.fiverr.com/aliali44">Core Planning</a></h3>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
<a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="https://imgpanda.com/upload/ib/Q4tSh2ctkH.png" alt="icon" />
</div>
<h3><a href="https://www.fiverr.com/aliali44">Traditional Designs</a></h3>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
<a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="https://imgpanda.com/upload/ib/YQdOwN6IDJ.png" alt="icon" />
</div>
<h3><a href="https://www.fiverr.com/aliali44">Quality Materials</a></h3>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
<a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
</div>
</div>
</section>
</div>
[/html]

Поделиться15816.06.24 19: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>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
display: grid;
place-content: center;
background: #333;
padding: 2em;
}

.container {
text-align: center;
}

.card {
position: relative;
display: inline-block;
width: 16em;
height: 16em;
background: #fff;
margin: 0.7em;
overflow: hidden;
}
.card h1 {
text-align: center;
margin: 1em 0;
color: #333;
font-family: 'Montserrat', sans-serif;
}
.back {
background: #555;
}
.middle {
background: #444;
}
.front {
background: #333;
}

.card b {
display: block;
}

/* PARALLAX */

.parallax .back {
margin-top: 2em;
width: 1em;
height: 1em;
box-shadow:
-15em 0 0 0 #555,
-10em 0 0 0 #555,
-5em 0 0 0 #555,
5em 0 0 0 #555,
10em 0 0 0 #555,
15em 0 0 0 #555;
animation: parallax-back 12s linear infinite;
}
@keyframes parallax-back {
0% { transform: translateX(0) }
100% { transform: translateX(20em) }
}
.parallax .middle {
margin-top: 1em;
width: 2em;
height: 2em;
box-shadow:
-20em 0 0 0 #444,
-10em 0 0 0 #444,
10em 0 0 0 #444,
20em 0 0 0 #444;
animation: parallax-middle 2s linear infinite;
}
@keyframes parallax-middle {
0% { transform: translateX(0) }
100% { transform: translateX(20em) }
}
.parallax .front {
margin-top: 0.5em;
width: 4em;
height: 4em;
box-shadow:
-15em 0 0 0 #333,
15em 0 0 0 #333;
animation: parallax-front 0.6s linear infinite;
}
@keyframes parallax-front {
0% { transform: translateX(0) }
100% { transform: translateX(15em) }
}

/* PERSPECTIVE */

.perspec b {
position: absolute;
}
.perspec .back {
width: 2em;
height: 2em;
animation: perspec-back 3s linear infinite;
}
@keyframes perspec-back {
0%,100% { transform: translate(3em,0) }
25% { transform: translate(3.4em,0) }
50% { transform: translate(3.4em,0.6em) }
75% { transform: translate(3em,0.6em) }
}
.perspec .middle {
width: 4em;
height: 4em;
animation: perspec-middle 3s linear infinite;
}
@keyframes perspec-middle {
0%,100% { transform: translate(4.2em,0.4em) }
25% { transform: translate(4.8em,0.4em) }
50% { transform: translate(4.8em,1.2em) }
75% { transform: translate(4.2em,1.2em) }
}
.perspec .front {
width: 6em;
height: 6em;
animation: perspec-front 3s linear infinite;
}
@keyframes perspec-front {
0%,100% { transform: translate(6.5em,1em) }
25% { transform: translate(7.5em,1em) }
50% { transform: translate(7.5em,2em) }
75% { transform: translate(6.5em,2em) }
}

/* FOCUS */

.focus b {
position: absolute;
}
.focus .back {
width: 2em;
height: 2em;
transform: translate(3.4em,0.6em) ;
animation: focus-back 8s linear infinite;
}
@keyframes focus-back {
20%,30% { filter: blur(5px) }
0%,40%,50%,80%,100% { filter: blur(3px) }
60%,70% { filter: blur(0.01px) }
}
.focus .middle {
width: 4em;
height: 4em;
transform: translate(4.8em,1.2em);
animation: focus-middle 8s linear infinite;
}
@keyframes focus-middle {
20%,70% { filter: blur(3px) }
0,10%,80%,100% { filter: blur(0.01px) }
}
.focus .front {
width: 6em;
height: 6em;
transform: translate(7.5em,2em);
animation: focus-front 8s linear infinite;
}
@keyframes focus-front {
60%,70% { filter: blur(6px) }
0%,10%,50%,80%,100% { filter: blur(3px) }
20%,40% { filter: blur(0.01px) }
}

/* ZOOM */

.zoom b {
position: absolute;
}
.zoom .back {
width: 2em;
height: 2em;
animation: zoom-back 4s infinite;
}
@keyframes zoom-back {
0%,100% { transform: translate(5em,0em) scale(1) }
50% { transform: translate(4em,-0.8em) scale(0.6) }
}
.zoom .middle {
width: 4em;
height: 4em;
transform: translate(6em,0.5em);
}
.zoom .front {
width: 6em;
height: 6em;
animation: zoom-front 4s infinite;
}
@keyframes zoom-front {
0%,100% { transform: translate(8em,1.5em) scale(1) }
50% { transform: translate(10em,3em) scale(1.4) }
}

/* SLOW MOTION */

.slow b {
position: absolute;
}

.slow .middle {
width: 4em;
height: 4em;
box-shadow: -4em -2em 0 -1em #555, 6.5em 4em 0 1.5em #333;
animation: slow-middle 2s linear infinite;
}
@keyframes slow-middle {
0% { transform: translate(-1em,-2em) scale(0.2) }
12% { transform: translate(3em,0) scale(0.9) }
100% { transform: translate(5em,1em) scale(1.1) }
}

/* GLITCH */

.glitch b {
position: absolute;
}

.glitch .back {
width: 2em;
height: 2em;
transform: translate(2em,5em) ;
}
.glitch .middle {
width: 4em;
height: 4em;
transform: translate(4.5em,3em);
animation: glitch-middle 3s infinite;
}
@keyframes glitch-middle {
0%,26%,30%,72%,76%,100% { transform: translate(4.5em,3em) skew(0deg) ; box-shadow: none }
30%,70% {transform: translate(4.5em,3em) skew(30deg);}
29%,31%,69%,71% {transform: translate(4.5em,3em) skew(0deg);}
28%,74% { box-shadow:
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
}
}
.glitch .middle:after,
.glitch .middle:before {
display: block;
content: "";
background: #444;
width: 4em;
}
.glitch .middle:after {
height: 1.4em;
animation: glitch-middle-after 3s infinite;
}
@keyframes glitch-middle-after {
0%,34%,38%,46%,50%,100% { transform: translate(0,1em); box-shadow: none; }
36%,48% { transform: translate(0.4em,0em);
box-shadow:
-1em 0 0 0 cyan,
1em 0 0 0 magenta,
0.5em 1em 0 -0.8em cyan
}
}
.glitch .middle:before {
height: 1em;
transform: translate(0em,3em);
animation: glitch-middle-before 3s infinite;
}
@keyframes glitch-middle-before {
0%,30%,34%,50%,54%,100% { transform: translate(0,0); box-shadow: none; }
32%,52% { transform: translate(-0.4em,1em);
box-shadow:
-0.3em 0 0 0 red,
0.3em 0 0 0 yellow}
}
.glitch .front {
width: 6em;
height: 6em;
transform: translate(9em,1em);
}

/* SHAKE */

.shake b {
position: absolute;
}

.shake .back {
width: 2em;
height: 2em;
transform: translate(2em,5em) ;
}
.shake .middle {
width: 4em;
height: 4em;
animation: zoom-middle 2s infinite;
}
@keyframes zoom-middle {
0%,40%,80%,100% { transform: translate(4.5em,3em) }
42%,46%,50%,54%,58%,62%,66%,70%,74%,78% { transform: translate(4.4em,3em) }
44%,48%,52%,56%,60%,64%,68%,72%,76% { transform: translate(4.6em,3em) }
}
.shake .front {
width: 6em;
height: 6em;
transform: translate(9em,1em);
}

</style>
<script>

</script>
<div class="container">
<div class="parallax card">
<h1>Parallax</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>

<div class="perspec card">
<h1>Perspective</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>

<div class="focus card">
<h1>Focus</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>

<div class="slow card">
<h1>Slow Motion</h1>
<b class="middle"></b>
</div>

<div class="glitch card">
<h1>Glitch</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>

<div class="shake card">
<h1>Shake</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>
</div>
[/html]

Поделиться15916.06.24 20:51:51

Автор: 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]

/* sorry, i need to play */
div:after {
content: "CreativeJuiz";
position:relative;
top: 120px;
left:-14px;
font-size: 1.25em;
font-family: helvetica, arial, sans-serif;
font-variant: small-caps;
color:#888;
opacity:0;
transition: opacity 2s;
}
div:hover:after {
opacity: 1;
transition: opacity 1s 1s;
}

h12 {
font-family: "Open Sans", "Segeo UI", Helvetica, Arial, sans-serif;
font-size: 18px;
margin-top: 1em;
color: #aaa;
}
</style>

<h12>Different effects in mouseover and mouseout</h12>
<div></div>[/html]

Поделиться16016.06.24 20:54:28

Автор: 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>
</style>
<script>
(function(){
var Part = function(x,y){
this.x = x;
this.y = y;
this.bx = x;
this.by = y;
this.ax = 0;
this.ay = 0;
this.r;
this.g;
this.b;
this.a;
};
Part.prototype = {
r : function (v) { this.r = v;return this; },
g : function (v) { this.g = v;return this; },
b : function (v) { this.b = v;return this; },
a : function (v) { this.a = v;return this; },
};
var String = function(str){
this.fontSize = 40;
this.font = 'Elsie Swash Caps';
this.str = str;
this.strWidth;
this.d = document;
this.c;
this.$;
this.parr = [];
this.set();
};
String.prototype = {
set : function(){
var c = this.d.createElement('canvas');
var $ = c.getContext('2d');
$.strokeStyle = '#eae2cf00';
$.textBaseline = 'top';
$.font = '45px Elsie Swash Caps';
c.width = $.measureText(this.str).width;
this.strWidth = c.width;
c.height = ~~(45 * 1.2);
$.strokeStyle = '#eae2cf00';
$.textBaseline = 'top';
$.font = '45px Elsie Swash Caps';
$.fillText(this.str,0,0);
this.c = c;
this.$ = $;
},
app : function(e){
e.appendChild(this.c);
this.build();
this.ev();
return this;
},
el : function(){
return this.c;
},
build : function(){
var w = this.c.width,
h = this.c.height,
id = this.$.getImageData(0,0,w,h).data,
l = id.length
;
for(var i=0;i<l;i+=4){
var y = ~~(i / (w*4));
var x = (i/4)%w;
var r = id[i];
var g = id[i+1];
var b = id[i+2];
var a = id[i+3];
if (r+g+b<100 && a>50){
this.parr.push( (new Part(x,y)).r(r).g(g).b(b).a(a) );
}
}
},
ev : function(){
var _this = this;
this.c.onmouseover = function(){
var __t = setInterval(_this.func(_this,_this.anim),50);
setTimeout(function(){
clearInterval(__t);
var cnt = 10;
var time = setInterval(function(){
cnt--;
for(var i=0,l=_this.parr.length;i<l;i++){
var p=_this.parr[i];
p.x = p.bx;
p.y = p.by + ((_this.fontSize-p.by) * (cnt) / 10);
}
_this._draw(_this.parr);
if (cnt<=0) {
_this.$.clearRect(0,0,_this.c.width,_this.c.height);
_this.def(_this.parr);
_this._draw(_this.parr);
clearInterval(time);
}
},30);
},3000);
};
},
func : function(thisFunc,func){
return function(){
func.call(thisFunc);
};
},
anim : function(){
this._move(this.parr);
this._draw(this.parr);
},
_draw : function(parr){
this.$.fillStyle = '#ffff';
this.$.fillRect(0,0,this.c.width,this.c.height);
for(var i=0,l=parr.length;i<l;i++){
var p=parr[i],x=~~p.x,y=~~p.y;
this.$.fillStyle = '#000';
this.$.fillRect(x,y,1,1);
}
},
_move : function(parr){
for(var i=0,l=parr.length;i<l;i++){
var p=parr[i];
p.ax == 0 ? p.ax = 0.2*(Math.random()-0.5) : p.ax *= 1.1;
p.ay == 0 ? p.ay = (Math.random()) : p.ay *= 1.1;
p.x += p.ax;
p.y += p.ay;
}
},
def : function(parr){
for(var i=0,l=parr.length;i<l;i++){
var p=parr[i];
p.x = p.bx;
p.y = p.by;
p.ax = p.ay = 0;
}
}
};

setTimeout(function(){
var loc = document.querySelectorAll('div.txt');
var start = (new Date().getTime())/1000;
Array.prototype.map.call(loc,function(e){
if ((new Date().getTime())/1000 > start+5) return;
var nodes = Array.prototype.slice.call(e.childNodes);
nodes.map(function(n){
if ((new Date().getTime())/1000 > start+5) return;
if (n instanceof Text){
var id = n.textContent || n.id;
var frag = document.createDocumentFragment();
id.split('').map(function(str){
if(str==='' || str==='\n' || str==='\r' || str==='\t')return;
(new String(str)).app(frag).el().style.verticalAlign = 'top';
});
e.replaceChild( frag , n );
}
});

});
},0);

})();
</script>
<section style="background: #ffff;">
<div class="txt">Падающие буквы</div><hr><div class="txt">Возвращение букв</div>
</section>

[/html]

Поделиться16116.06.24 22:42:51

Автор: 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 {
font-family: 'Lato', sans-serif;
font-size: 15px;
background: #d8ecf2;
color: RGBA(67, 83, 99, 1);
}

.container {
margin: 0 auto;
width: 350px;
max-width: 350px;
}

h2 {
padding: 1.8rem 0;

font-size: 2.8rem;

text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);

}

nav {
-webkit-box-flex: auto;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
position: relative;
padding: .6125rem .6152rem 1.6125rem;
}

li a {
text-decoration: none;
color: RGBA(67, 83, 99, 1);
cursor: -webkit-zoom-in;
cursor: zoom-in;
}

ul:hover a {
opacity: .8;

-webkit-transform: scale(0.97);
transform: scale(0.97);
}

ul a {
display: block;
position: relative;
padding: .75rem 1rem 1rem;

-webkit-transition: -webkit-transform .22s,box-shadow .22s;
transition: transform .22s,box-shadow .22s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
user-drag: none;
box-shadow: 0 0 0 -.25rem rgba(0,0,0,.1);
}

ul a:focus, ul a:hover {
outline: 0;
box-shadow: 0 .5rem 0 -.25rem rgba(0,0,0,.1);
opacity: 1;
-webkit-transform: scale(1.03);
transform:scale(1.03);
-webkit-transition: -webkit-transform .088s,box-shadow .088s;
transition: transform .088s,box-shadow .088s;
z-index: 1;
}

.menu a:nth-child(1) {
background: #95c5db;
}
.menu a:nth-child(2) {
background: #94c1db;
}
.menu a:nth-child(3) {
background: #94bddb;
}
.menu a:nth-child(4) {
background: #94b9db;
}
.menu a:nth-child(5) {
background: #94b5db;
}
.menu a:nth-child(6) {
background: #94b2db;
}

.menu a:nth-child(6):hover {
cursor: pointer;
}

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}

70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}

100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}

@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}

70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}

100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}

.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
</style>
<script>

</script>
<div class="container ta-c">
<h2 class="p-r">Animate menu CSS</h2>
<nav class="menu animated flipInX">
<ul class="no-ls ta-l t-all">
<li>
<a href="#">
<h3>Link 1</h3>
<p>text 1</p>
</a>
</li>
<li>
<a href="#">
   <h3>Link 2</h3>
   <p>text 2</p>
</a>
</li>
<li>
<a href="#">
   <h3>Link 3</h3>
   <p>text 3</p>
</a>
</li>
<li>
<a href="#">
   <h3>Link 4</h3>
   <p>text 4</p>
</a>
</li>
<li>
<a href="#">
   <h3>Link 5</h3>
   <p>text 5</p>
</a>
</li>
<li>
<a href="http://joellesenne.xyz">
<p>© 2014 – Joël Lesenne</p>
</a>
</li>
</ul>
</nav>
</div>
[/html]

Поделиться16216.06.24 23:08: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>

.pag {
height: 300px;
}

.menu {
z-index: 99;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
background: linear-gradient(45deg, #B388EB, #8093F1);
border-radius: 20px;
color: #FFF;
font-size: 20px;
letter-spacing: 1px;
font-weight: 200;
}

.play {
opacity: 0;
position: relative;
margin: 8px;
width: 50px;
height: 50px;
border-radius: 100%;
display: inline-block;
font-size: 13px;
text-align: center;
z-index: 96;
}
.play a{
color: #fff!important;
}
.play img{
width: 30px;
height: 30px;
}

.one {
background: #deadcf;
}

.two {
background: #c1a9d0;
}

.three {
background: #c8acca;
}

.four {
background: #b0a6d3;
}

.clicked {
opacity: 1;
transition: 1.2s all ease;
transform: translateY(50px);
}

</style>
<script>

$(".menu").click(function(){
$(".play.one").toggleClass("clicked");
$(".play.two").toggleClass("clicked");
$(".play.three").toggleClass("clicked");
$(".play.four").toggleClass("clicked");
})

</script>

<div class="pag">
<div class="menu">навигация</div>
<div class="play one"><a href="#" target="_blank"><img src="https://forumupload.ru/uploads/001c/1e/87/2/986786.gif">гостевая</a></div>
<div class="play two"><a href="#" target="_blank"><img src="https://forumupload.ru/uploads/001c/1e/87/2/812147.gif">сюжет</a></div>
<div class="play three"><a href="#" target="_blank"><img src="https://forumupload.ru/uploads/001c/1e/87/2/837486.gif">вопросы</a></div>
<div class="play four"><a href="#" target="_blank"><img src="https://forumupload.ru/uploads/001c/1e/87/2/265095.gif">фак</a></div>
</div>
[/html]

Поделиться16317.06.24 17:32:35

Автор: 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>
.punbb {
margin-left: 0px !important;
}

.juhmp { width:545px;padding:9px;border:solid 1px #e3e3e3;background-color:#f5f5f5;color:#444444;text-align:justify; }
.juhmp a { text-decoration:none; }
.juhmp-img { border:solid 1px #e3e3e3;background-color:#5c9cab; }
.juhmp-img-2 { padding:29px;background-color:rgba(255,255,255,.88); }
.juhmp-img-2 div { width:550px;height:250px;padding:4px;background-color:#f9f9f9;border:solid 1px #e3e3e3; }
.juhmp-img-2 div img { height:250px;width:550px; }
.juhmp-tabz { background-color:#eeeeee;border:solid 1px #e3e3e3;border-top:none;height:509px; }
.juhmp-tabz-1 { width:543px;display:none; }
.juhmp-tabz-2 { width:543px;display:none; }
.juhmp-tabz-3 { width:543px;display:none; }

.juhmp-banner { width:545px;height:250px;background-color:#5c9cab;position:relative;overflow:hidden; }
.juhmp-banner-img { height:250px;width:545px;overflow:hidden;position:absolute;mix-blend-mode:lighten; }
.juhmp-banner-diamond { background-color:rgba(255,255,255,.15);margin:0px 0px 0px 152px;height:250px;width:250px;position:absolute;transform:rotate(45deg); }
.juhmp-banner-name { font:60px Montserrat;font-weight:300!important;letter-spacing:-1px;position:absolute;color:#f9f9f9;text-align:center;width:545px;line-height:60px;padding-top:85px;text-shadow:0px 0px 4px rgba(44,44,44,.35); }
.juhmp-banner-name div { font:bold 10px Inconsolata;letter-spacing:3px;line-height:10px;text-transform:uppercase; }
.juhmp-banner img { width:545px;filter:grayscale(100%) contrast(90%); }
.juhmp-border { border:solid 1px #e3e3e3;border-top:none;padding:10px 12px 0px 10px;height:26px;background-color:#e9e9e9; }
.juhmp-border div { cursor:pointer;font:bold 7px Open Sans;letter-spacing:.5px;line-height:8px;text-transform:uppercase;text-align:center;margin-right:2px;border:solid 1px #e3e3e3;border-bottom:none;border-radius:5px 5px 0px 0px;padding:9px;height:7px;background-color:#f3f3f3;width:85px;float:left; }
.juhmp-border-1 { color:#5c9cab;background-color:#f9f9f9!important;font-size:10px!important;line-height:15px!important;border-bottom:solid 1px #e3e3e3!important;border-radius:5px!important;padding:0px!important;height:15px!important;width:15px!important;margin:4px 0px 0px 3px; }
.juhmp-border h1 { font:bold 7px Open Sans;letter-spacing:.5px;line-height:8px;float:right;text-transform:uppercase; }
.juhmp-bar { border:solid 1px #e3e3e3;border-top:none;padding:15px;background-color:#f9f9f9;height:30px; }
.juhmp-bar-link { border-radius:3px;border:solid 1px #e5e5e5;float:left;height:28px;width:28px;background-color:#f5f5f5;margin-right:5px; }
.juhmp-bar-link div, .juhmp-bar-1 div { color:#5c9cab;font-size:10px;text-align:center;display:flex;align-items:center;justify-content:center;height:100%; }
.juhmp-bar-1 { cursor:pointer;color:#5c9cab;border-radius:3px;border:solid 1px #e5e5e5;float:right;font-size:10px;height:28px;line-height:28px;text-align:center;width:28px;background-color:#f5f5f5;margin-left:5px; }
.juhmp-bar-2 { cursor:text;border-radius:3px;border:solid 1px #e5e5e5;background-color:#f5f5f5;font:10px Inconsolata;line-height:10px;padding:9px;text-transform:lowercase;letter-spacing:.5px;margin:0px 105px 0px 35px; }
.juhmp-bar-2 b { color:#5c9cab; }

.juhmp-quote { background-color:#5c9cab;position:relative;overflow:hidden;height:208px; }
.juhmp-quote-1 { padding:36px 35px 37px 35px;background:linear-gradient(to bottom,rgba(247,247,247,.75),rgba(247,247,247,.9));border-bottom:solid 1px #e3e3e3; }
.juhmp-quote-icon { border:solid 1px #e3e3e3;background-color:#f9f9f9;border-radius:100%;width:104px;height:104px;padding:14px; }
.juhmp-quote-icon-1 { height:100px;width:100px;padding:2px;background-color:#5c9cab;border-radius:100%; }
.juhmp-quote-icon-1 img { height:100px;width:100px;border-radius:100%;mix-blend-mode:lighten;filter:grayscale(100%) contrast(90%); }
.juhmp-quote table { position:relative;z-index:1;border-spacing:0px; }
.juhmp-quote td { vertical-align:top;padding:0px!important; }
.juhmp-quote-words { padding-top:18px;font:30px Montserrat;line-height:25px;text-align:center;color:#5c9cab;text-shadow:.75px .75px 0px #f9f9f9, .75px 0px 0px #f9f9f9, 0px .75px 0px #f9f9f9, -.75px 0px 0px #f9f9f9, 0px -.75px 0px #f9f9f9, -.75px .75px 0px #f9f9f9, .75px -.75px 0px #f9f9f9, -.75px -.75px 0px #f9f9f9; }
.juhmp-quote-i { opacity:.08;margin:-87px 0px 0px -60px;position:absolute;font-size:300px;line-height:300px;transform:rotate(25deg);color:#5c9cab;text-shadow:.75px .75px 0px #f9f9f9, .75px 0px 0px #f9f9f9, 0px .75px 0px #f9f9f9, -.75px 0px 0px #f9f9f9, 0px -.75px 0px #f9f9f9, -.75px .75px 0px #f9f9f9, .75px -.75px 0px #f9f9f9, -.75px -.75px 0px #f9f9f9; }
.juhmp-quote-cred { float:right;position:relative;z-index:1;margin-top:-21px;font:bold 9px Open Sans;letter-spacing:.5px;line-height:11px;height:11px;text-transform:uppercase;color:#f9f9f9;background-color:#5c9cab;padding:15px 15px 15px 20px;border-radius:55px 0px 0px 55px; }

.juhmp-palette { float:left;padding:35px;padding-bottom:26px;border-right:solid 1px #e3e3e3;position:relative;z-index:1;background-color:#f9f9f9; }
.juhmp-palette-1 { border:solid 1px #e3e3e3;padding:4px;margin-bottom:-1px; }
.juhmp-palette-1 div { height:39px;width:40px;background-color:#5c9cab;background-color:#f3f3f3; }
.juhmp-images { padding:35px 25px 25px 158px;background-color:#eeeeee;height:241px; }
.juhmp-images div { margin-right:10px;margin-bottom:10px;background-color:#f9f9f9;padding:4px;border:solid 1px #e3e3e3;width:100px;float:left;white-space:nowrap;text-transform:uppercase;height:100px; }
.juhmp-images span { position:absolute;background-color:#5c9cab;height:100px;width:100px; }
.juhmp-images img { mix-blend-mode:lighten;filter:grayscale(100%) contrast(90%);height:100px;width:100px; }

.juhmp-music-left { height:509px;border-right:solid 1px #e3e3e3;float:left;background-color:#5c9cab; }
.juhmp-music-left div { height:509px;width:94px;background:linear-gradient(to top,rgba(247,247,247,.75),rgba(247,247,247,.9)); }
.juhmp-music-left h1 { position:absolute;margin:475px 31px;padding:0px;width:0px;height:0px;white-space:nowrap;transform:rotate(-90deg);float:left;font:35px Montserrat;line-height:30px;color:#5c9cab;text-shadow:.75px .75px 0px #f9f9f9, .75px 0px 0px #f9f9f9, 0px .75px 0px #f9f9f9, -.75px 0px 0px #f9f9f9, 0px -.75px 0px #f9f9f9, -.75px .75px 0px #f9f9f9, .75px -.75px 0px #f9f9f9, -.75px -.75px 0px #f9f9f9; }
.juhmp-music { padding:9px;padding-left:104px;background-color:#eeeeee;height:491px; }
.juhmp-music-top { white-space:nowrap;overflow:hidden;text-align:right;border:solid 1px #e3e3e3;padding:29px 39px 29px 29px;background-color:#f9f9f9;height:75px; }
.juhmp-music-top-1 { border:solid 1px #e3e3e3;background-color:#f3f3f3;padding:4px;border-radius:100%;width:65px;position:absolute; }
.juhmp-music-top-1 div { background-color:#5c9cab;height:65px;width:65px;border-radius:100%;color:#f9f9f9;font-size:30px; }
.juhmp-music-top-1 div i:before { display:block;line-height:65px;width:65px;text-align:center; }
.juhmp-music-top h1 { padding:10px 0px 0px 0px;margin:0px;text-transform:lowercase;color:#5c9cab;font:35px Montserrat;line-height:30px;letter-spacing:-1.5px; }
.juhmp-music-top h2 { padding:10px 0px 0px 0px;margin:0px;text-transform:uppercase;font:bold 12px Open Sans;line-height:10px;letter-spacing:.5px; }
.juhmp-music-bot { border:solid 1px #e3e3e3;border-top:none;padding:30px;background-color:#f9f9f9; }
.juhmp-music-bot-1 { height:295px;overflow:auto;scrollbar-color:#5c9cab transparent;scrollbar-width:thin; }
.juhmp-music-bot-1::-webkit-scrollbar-thumb:vertical { background-color:#eeeeee;border:solid 1px #e3e3e3;border-left:none;border-radius:0px; }
.juhmp-music-bot-1::-webkit-scrollbar { width:5px;background-color:transparent;border:solid 1px #e3e3e3;border-left:none;border-radius:0px; }

.juhmp-music-bot-2 { border:solid 1px #e3e3e3;background-color:#f3f3f3;padding:4px;margin-bottom:-1px; }
.juhmp-music-bot-3 { background-color:#5c9cab;position:relative;overflow:hidden; }
.juhmp-music-bot-3 div { background-color:rgba(247,247,247,.85);font:bold 10px Open Sans;line-height:10px;text-transform:uppercase;color:#444444;letter-spacing:.5px;padding:15px; }
.juhmp-music-bot-3 i { position:absolute;color:#5c9cab;font-size:60px;line-height:60px;margin:-23px 0px 0px 275px;opacity:.1; }
.juhmp-music-bot-3 b { color:#5c9cab;text-shadow:.75px .75px 0px #f9f9f9, .75px 0px 0px #f9f9f9, 0px .75px 0px #f9f9f9, -.75px 0px 0px #f9f9f9, 0px -.75px 0px #f9f9f9, -.75px .75px 0px #f9f9f9, .75px -.75px 0px #f9f9f9, -.75px -.75px 0px #f9f9f9; }

.juhmp-relate { background-color:#eeeeee;padding:30px;padding-top:15px;height:464px;overflow:auto;scrollbar-color:#e3e3e3 transparent;scrollbar-width:thin; }
.juhmp-relate::-webkit-scrollbar-thumb:vertical { background-color:#e9e9e9;border:none;border-left:solid 1px #e3e3e3;border-radius:0px; }
.juhmp-relate::-webkit-scrollbar { width:7px;background-color:#f9f9f9;border:none;border-left:solid 1px #e3e3e3;border-radius:0px; }
.juhmp-relate table { border-spacing:0px!important; }
.juhmp-relate td { padding:0px!important;vertical-align:top; }

.juhmp-relate-1 { margin-top:15px; }
.juhmp-relate-img, .juhmp-relate-img-1 { height:64px;width:64px;padding:7px;border:solid 1px #e3e3e3;background-color:#f3f3f3;border-radius:100%; }
.juhmp-relate-img div, .juhmp-relate-img-1 div { height:60px;width:60px;padding:2px;background-color:#5c9cab;border-radius:100%; }
.juhmp-relate-img img, .juhmp-relate-img-1 img { height:60px;width:60px;border-radius:100%;mix-blend-mode:lighten;filter:grayscale(100%) contrast(90%); }
.juhmp-relate-img-1 { margin-left:20px; }
.juhmp-relate-2 { border:solid 1px #e3e3e3;padding:29px;border-radius:4px;background-color:#f3f3f3; }
.juhmp-relate-3 { float:left;border-right:solid 10px #e3e3e3;border-top:solid 10px transparent;border-bottom:solid 10px transparent;margin:0px 0px 0px -40px; }
.juhmp-relate-31 { float:left;border-right:solid 10px #f3f3f3;border-top:solid 10px transparent;border-bottom:solid 10px transparent;margin:0px 0px 0px -38px; }
.juhmp-relate-4 { font:11px Open Sans;color:#444444;text-align:justify;max-height:60px;overflow:auto;padding-right:10px;scrollbar-color:#5c9cab transparent;scrollbar-width:thin; }
.juhmp-relate-4::-webkit-scrollbar-thumb:vertical { background-color:#eeeeee;border:solid 1px #e3e3e3;border-radius:0px; }
.juhmp-relate-4::-webkit-scrollbar { width:5px;background-color:transparent;border-radius:0px; }
.juhmp-relate-32 { float:left;border-left:solid 10px #e3e3e3;border-top:solid 10px transparent;border-bottom:solid 10px transparent;margin:30px 0px 0px 0px; }
.juhmp-relate-33 { float:left;border-left:solid 10px #f3f3f3;border-top:solid 10px transparent;border-bottom:solid 10px transparent;margin:30px 0px 0px -12px; }
.juhmp-relate-5 a { font:25px Montserrat;line-height:20px;color:#5c9cab; }
.juhmp-relate-5 { font:25px Montserrat;line-height:20px;padding-bottom:10px;text-transform:lowercase;letter-spacing:-1px; }

.juhmp input { display:none; }
.juhmp label { opacity:0;position:absolute;margin:-88px 0px 0px 10px;cursor:pointer;font:bold 7px Open Sans;letter-spacing:.5px;line-height:8px;text-transform:uppercase;text-align:center;margin-right:2px;border:solid 1px #e3e3e3;border-bottom:none;border-radius:5px 5px 0px 0px;padding:9px;height:8px;background-color:#f9f9f9;width:85px;float:left;color:#5c9cab; }

#juhmp-tab-1:checked ~ .juhmp-tabb-1 { opacity:1; }
#juhmp-tab-1:checked ~ .juhmp-tabz-1 { display:block; }
#juhmp-tab-2:checked ~ .juhmp-tabb-2 { opacity:1; }
#juhmp-tab-2:checked ~ .juhmp-tabz-2 { display:block; }
#juhmp-tab-3:checked ~ .juhmp-tabb-3 { opacity:1; }
#juhmp-tab-3:checked ~ .juhmp-tabz-3 { display:block; }

</style>
<script>

</script>

hatsune miku
<div>might as well jump - go ahead & jump</div>

</div>
</div>
<div class="juhmp-border"><h1>i get up, and nothing gets me down</h1>
<div>development</div>
<div>playlist</div>
<div>relationships</div>
<div class="juhmp-border-1">+</div>
</div>
<div class="juhmp-bar">
<a href="LINK TO APP" title="APPLICATION">
<div class="juhmp-bar-link"><div><i class="ph-fill ph-globe"></i></div></div></a>
<div class="juhmp-bar-1"><i class="ph-bold ph-x"></i></div>
<div class="juhmp-bar-1"><i class="ph-bold ph-copy"></i></div>
<div class="juhmp-bar-1"><i class="ph-bold ph-minus"></i></div>
<div class="juhmp-bar-2">http://site-name.com/<b>firstname</b>+<b>lastname</b>/all+in+one</div>
</div>
<div class="juhmp-tabz">

<input type="radio" id="juhmp-tab-1" name="juhmp-tab" checked>
<input type="radio" id="juhmp-tab-2" name="juhmp-tab">
<input type="radio" id="juhmp-tab-3" name="juhmp-tab">
<label for="juhmp-tab-1" class="juhmp-tabb-1"><div>DEVELOPMENT</div></label>
<label for="juhmp-tab-2" class="juhmp-tabb-2" style="margin-left:117px;"><div>PLAYLIST</div></label>
<label for="juhmp-tab-3" class="juhmp-tabb-3" style="margin-left:224px;"><div>RELATIONSHIPS</div></label>

</div></div>
</td><td>
<div class="juhmp-quote-words">

woah, woah - hey, you! who said that? baby, how've you been?

</div>
</td></tr></table>
</div></div>
<div class="juhmp-quote-cred">- JUMP, VAN HALEN</div>
<div class="juhmp-palette">
<div class="juhmp-palette-1"><div style="background-color:#cc78bb;"></div></div>
<div class="juhmp-palette-1"><div style="background-color:#8cb7bf;"></div></div>
<div class="juhmp-palette-1"><div style="background-color:#ccd45d;"></div></div>
<div class="juhmp-palette-1"><div style="background-color:#cfcfcf;"></div></div>
<div class="juhmp-palette-1"><div style="background-color:#121112;"></div></div>
</div>
<div class="juhmp-images">

</div>
</div>

playlist title goes here

</h1></div></div>
<div class="juhmp-music">
<div class="juhmp-music-top">

<a href="LINK TO SONG" title="PLAY THIS SONG"><div class="juhmp-music-top-1"><div><i class="th th-music-o"></i></div></div></a>
<h1>girl gone bad</h1>
<h2>van halen - 1984</h2>

</div>
<div class="juhmp-quote-cred">currently playing</div>
<div class="juhmp-music-bot"><div class="juhmp-music-bot-1">

<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>1984</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>jump</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>panama</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>top jimmy</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>drop dead legs</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>hot for teacher</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>i'll wait</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>house of pain</b> - van halen
</div></div></div></a>

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

<div class="juhmp-relate-1"><table style="width:100%;"><tr><td style="width:100px;">
<div class="juhmp-relate-img" title="FRIENDS"><div><img src="https://i.imgur.com/Iu5Cnyt.png"></div></div>
</td><td>
<div class="juhmp-relate-2"><div class="juhmp-relate-3"></div><div class="juhmp-relate-31"></div>
<div class="juhmp-relate-5"><a>first lastname</a></div>
<div class="juhmp-relate-4">

i get up, and nothin' gets me down. you've got it tough? i've seen the toughest around. and i know, baby, just how you feel. you've got to roll with the punches to get to what's real. now, can't you see me standing here? i've got my back against the record machine. i ain't the worst that you've seen. oh, can't you see what i mean?

</div></div>
</td></tr></table></div>

<div class="juhmp-relate-1"><table style="width:100%;"><tr><td>
<div class="juhmp-relate-2">
<div class="juhmp-relate-5"><a>first lastname</a></div>
<div class="juhmp-relate-4">

explanation of that relationship can go here, i guess?

</div></div>
</td><td style="width:100px;"><div class="juhmp-relate-32"></div><div class="juhmp-relate-33"></div>
<div class="juhmp-relate-img-1" title="ENEMIES"><div><img src="https://i.imgur.com/hj89m1A.png"></div></div>
</td></tr></table></div>

<div class="juhmp-relate-1"><table style="width:100%;"><tr><td style="width:100px;">
<div class="juhmp-relate-img" title="FRIENDS"><div><img src="https://i.imgur.com/2tvHfG3.png"></div></div>
</td><td>
<div class="juhmp-relate-2"><div class="juhmp-relate-3"></div><div class="juhmp-relate-31"></div>
<div class="juhmp-relate-5"><a>first lastname</a></div>
<div class="juhmp-relate-4">

explanation of that relationship can go here, i guess?

</div></div>
</td></tr></table></div>

<div class="juhmp-relate-1"><table style="width:100%;"><tr><td>
<div class="juhmp-relate-2">
<div class="juhmp-relate-5"><a>first lastname</a></div>
<div class="juhmp-relate-4">

explanation of that relationship can go here, i guess?

</div>

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

Поделиться16426.06.24 11:15: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

[tabtitle=ава]Аватары[/tabtitle]
[tabtitle=отн]Отношения[/tabtitle]
[tabtitle=эп]Эпизоды[/tabtitle]

[tab=ава][tabdefault]

woah, woah - hey, you! who said that? baby, how've you been?

[/tab]

[tab=отн]

	first lastname i get up, and nothin' gets me down. you've got it tough? i've seen the toughest around. and i know, baby, just how you feel. you've got to roll with the punches to get to what's real. now, can't you see me standing here? i've got my back against the record machine. i ain't the worst that you've seen. oh, can't you see what i mean?
	first lastname i get up, and nothin' gets me down. you've got it tough? i've seen the toughest around. and i know, baby, just how you feel. you've got to roll with the punches to get to what's real. now, can't you see me standing here? i've got my back against the record machine. i ain't the worst that you've seen. oh, can't you see what i mean?
	first lastname i get up, and nothin' gets me down. you've got it tough? i've seen the toughest around. and i know, baby, just how you feel. you've got to roll with the punches to get to what's real. now, can't you see me standing here? i've got my back against the record machine. i ain't the worst that you've seen. oh, can't you see what i mean?

[/tab]

[tab=эп]

playlist title goes here

[html]<style>
.punbb {
margin-left: 0px !important;
}
.header_header__Rdmtp { background: transparent !important;}
.header_header__Rdmtp:after { background: transparent !important;; }
</style>
<iframe frameborder="0" allow="clipboard-write" style="border:none;width:415px;height:100px;" src="https://music.yandex.ru/iframe/track/220499/1074676">Слушайте <a href='https://music.yandex.ru/album/1074676/track/220499'>Riders on the Storm</a> — <a href='https://music.yandex.ru/artist/29060'>The Doors</a> на Яндекс Музыке</iframe>[/html]

текстовое

[/tab]

[/block]

Поделиться16527.06.24 21:04: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

Код:

<script>
var WIDTH;
var HEIGHT;
var canvas;
var con;
var g;
var pxs = [];
var rint = 9;

$(document).ready(function(){
	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;
	$('#container').width(WIDTH).height(HEIGHT);
	canvas = document.getElementById('particles');
	$(canvas).attr('width', WIDTH).attr('height',HEIGHT);
	con = canvas.getContext('2d');
	for(var i = 0; i < 100; i++) {
    pxs[i] = new Circle();
    pxs[i].reset();
	}
	setInterval(draw,rint);
});

function draw() {
	con.clearRect(0,0,WIDTH,HEIGHT);
	for(var i = 0; i < pxs.length; i++) {
    pxs[i].fade();
    pxs[i].move();
    pxs[i].draw();
	}
}

function Circle() {
	this.s = {ttl:8000, xmax:3, ymax:2, rmax:200, rt:1, xdef:960, ydef:540, xdrift:2, ydrift: 2, random:true, blink:true};

	// fill vars
	var crFill = [
        	['rgba(10,56,67,0)', 'rgba(10,56,67,1)'],
        	['rgba(11,67,99,0)', 'rgba(11,67,99,1)'],
        	['rgba(8,46,49,0)', 'rgba(8,46,49,1)'],
        	['rgba(7,64,60,0)', 'rgba(7,64,60,1)']
        ];

	// opacity var
	var opacityFill = "." + Math.floor(Math.random() * 5) + 1;

	this.reset = function() {
    this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
    this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
    this.r = ((this.s.rmax-1)*Math.random()) + 1;
    this.dx = (Math.random()*this.s.xmax) * (Math.random() < 0.5 ? -1 : 1);
    this.dy = (Math.random()*this.s.ymax) * (Math.random() < 0.5 ? -1 : 1);
    this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
    this.rt = Math.random()*this.hl;
    this.s.rt = Math.random()+1;
    this.stop = Math.random()*0.2+0.4;
    this.s.xdrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
    this.s.ydrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
    this.opacityFill = opacityFill;

    this.currentColor = Math.floor(Math.random()*crFill.length);
	};

	this.fade = function() {
    this.rt += this.s.rt;
	};

	this.draw = function() {
    if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)){
    	this.s.rt = this.s.rt*-1;
    }
    else if(this.rt >= this.hl){
    	this.reset();
    }
    con.beginPath();
    con.arc(this.x,this.y,this.r,0,Math.PI*2,true);
    con.globalAlpha = opacityFill;
    var newo = 1-(this.rt/this.hl);
    var cr = this.r*newo;
    
    gradient = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
    gradient.addColorStop(0.0, crFill[(this.currentColor)][1]);
    gradient.addColorStop(0.7, crFill[(this.currentColor)][1]);
    gradient.addColorStop(1.0, crFill[(this.currentColor)][0]);

    con.fillStyle = gradient;
    con.fill();

    con.closePath();
	};

	this.move = function() {
    this.x += (this.rt/this.hl)*this.dx;
    this.y += (this.rt/this.hl)*this.dy;
    if(this.x > WIDTH || this.x < 0){
    	this.dx *= -1;
    } 
    if(this.y > HEIGHT || this.y < 0){
    	this.dy *= -1;
    } 
	};

	this.getX = function() { return this.x; };
	this.getY = function() { return this.y; };
}

</script>
<style>
.main-container{
	height:100%;
}

.section-one{
	height:100%;
}
</style>
<main class="main-container">
    <section class="section-one">
        <canvas id="particles"></canvas>
    </section>
</main>

Поделиться16601.07.24 16:37: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>
/*
* Use :has() to filter items by category using
* checkboxes. No JS required!
*/
section:has([name="snacks"]:checked) article:has([data-category="snacks"]) {
display: block;
}

section:has([name="naps"]:checked) article:has([data-category="naps"]) {
display: block;
}

section:has([name="computers"]:checked)
article:has([data-category="computers"]) {
display: block;
}

article {
/* color code by category */
--hue: 0;

&:has([data-category="snacks"]) {
--hue: 233.35;
}

&:has([data-category="computers"]) {
--hue: 91.24;
}

&:has([data-category="naps"]) {
--hue: 334.61;
}

& img {
border: 1px solid oklch(93% 0.1 var(--hue));
}

& .categories {
background: oklch(96% 0.05 var(--hue));
border: 1px solid oklch(93% 0.1 var(--hue));
color: oklch(35% 0.104 var(--hue));
}
}

/*
* general layout stuff that’s not the cool thing I
* wanted to show off
*/

:root {
background: oklch(99.75% 0.03 146.51);
font-family: system-ui;
line-height: 1.45;
}

* {
box-sizing: border-box;
}

section {
block-size: 90cqw;
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, min(200px, 33% - 1.5rem));
margin: 2rem auto 5rem;
place-content: start center;
}

form {
align-items: baseline;
background: oklch(99.62% 0.01 146.51);
border: 1px solid oklch(99.62% 0.2 146.51);
border-radius: 0.25rem;
color: oklch(30% 0.3 146.51);
display: flex;
gap: 1rem;
grid-column: 1 / span 3;
margin-block-end: 1rem;
justify-content: center;
padding: 1rem;

& p {
line-height: 1;
margin: 0;
}
}

label,
input {
color: inherit;
font-size: 1rem;
line-height: 1;
margin: 0;
padding: 0;
}

input {
block-size: 1rem;
inline-size: 1rem;
position: relative;
inset-block-start: 0.125rem;
}

article {
container-type: inline-size;
display: none;
margin: 0;

& img {
aspect-ratio: 16 / 9;
border-radius: 0.25rem;
display: block;
inline-size: 100%;
object-fit: cover;
}

& h2 {
color: oklch(25% 0.104 146.51);
font-size: clamp(0.75rem, 9cqw, 1rem);
font-weight: 300;
letter-spacing: 0.1em;
line-height: 1.1;
margin: clamp(0.125rem, 2cqw, 0.375rem) 0;
}

& .categories {
border-radius: 0.25rem;
display: inline-block;
font-size: clamp(0.4rem, 5.5cqw, 0.625rem);
letter-spacing: 0.15em;
line-height: 1;
margin: 0;
padding: clamp(0.125rem, 2cqw, 0.25rem);
font-variant: small-caps;
}

& .categories::after {
content: attr(data-category);
}
}

</style>

</script>

<section>
<form>
<p>Filter by category:</p>
<label>
<input type="checkbox" name="snacks" checked />
snacks
</label>

<label>
<input type="checkbox" name="computers" checked />
computers
</label>
</form>

<article>
<img src="https://images.unsplash.com/photo-1708724195876-1156245fce21?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Afternoon Hammock</h2>
<p class="categories" data-category="naps"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1709625862284-b8a82d339b99?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Tomagotchi</h2>
<p class="categories" data-category="computers"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1643916861364-02e63ce3e52f?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Strawberry Ice Cream</h2>
<p class="categories" data-category="snacks"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1672217617440-1dd3e9417ce1?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Tortilla Chips</h2>
<p class="categories" data-category="snacks"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1699462515761-90db271d77c8?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Comfy Chair</h2>
<p class="categories" data-category="naps"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1709625862266-014ef072fd93?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Game Boy Advance</h2>
<p class="categories" data-category="computers"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1637611331620-51149c7ceb94?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Hummus</h2>
<p class="categories" data-category="snacks"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1688748807457-d8926e351596?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Sneaky Desk</h2>
<p class="categories" data-category="naps"></p>
</article>

</section>[/html]

Поделиться16701.07.24 16:44: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]

.sun::after {
position: absolute;
left: -100px;
bottom: -60px;
display: block;
content: '';
width: 380px;
height: 150px;
background: linear-gradient(0deg, rgba(255,255,255,0.3) 70%, rgba(233,144,70,.2) 100%);
backdrop-filter: blur(20px);
border-radius: 50%;
transform: rotate(15deg);
transform-origin: center center;
}

</style>

</script>

<div class="sun"></div>
[/html]

Поделиться16801.07.24 16:57:28

Автор: 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

[hideprofile][html]

<style>

main {
max-width: 100rem;
margin: auto;
}

.drinks {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
row-gap: 4rem;
column-gap: 2rem;
color: #555;
}
.drinks__item {
width: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
row-gap: 2rem;
padding: 2rem;
/* box-shadow: 0 0 1rem rgba(0,0,0,.2); */
border-bottom: 2px solid #eee;
border-radius: 0.5rem;
}
.drinks__item img {
width: 100%;
height: 30rem;
object-fit: cover;
}
.drinks__item h3 {
text-transform: uppercase;
}

.drinks__tags {
display: flex;
flex-flow: row wrap;
column-gap: 0.8rem;
row-gap: 1rem;
color: #000;
}
.drinks__tag {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
font-size: 1.2rem;
}
.drinks__tag--blue {
background-color: rgb(135, 239, 239);
}
.drinks__tag--green {
background-color: rgb(186, 224, 129);
}
.drinks__tag--orange {
background-color: rgb(223, 143, 87);
}
.drinks__tag--yellow {
background-color: rgb(219, 181, 84);
}
.drinks__tag--pink {
background-color: rgb(191, 103, 235);
}
.drinks__tag--red {
background-color: rgb(194, 68, 68);
color: #fff;
}
.drinks__tag--grey {
background-color: rgb(191, 191, 191);
}
.tag-inactive {
background-color: #eee;
color: #000;
}

</style>

const drinks = [
{
title: "Mint lemonade",
description:
"Enjoy the zesty freshness of lemons and mint in our homemade lemonade. It's the perfect, refreshing drink for any sunny day.",
url:
"https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Non-Alcoholic", "Seasonal"]
},
{
title: "Moscow Mule",
description:
"The Moscow Mule is a zesty cocktail made with spicy ginger beer, smooth vodka, and fresh lime juice. Served in a classic copper mug, it's a refreshing drink with a tangy kick, perfect for any occasion.",
url:
"https://images.unsplash.com/photo-1513416543495-10c173ed9908?q=80&w=2500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Alcoholic"]
},
{
title: "Aperol Spriz",
description:
"The Aperol Spritz is a vibrant and refreshing cocktail, combining the bittersweet taste of Aperol with sparkling Prosecco and a splash of soda. Garnished with an orange slice, it's the perfect drink to enjoy a taste of summer all year round.",
url:
"https://images.unsplash.com/photo-1560512823-829485b8bf24?q=80&w=3338&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Alcoholic"]
},
{
title: "Cappuccino",
description:
"Cappuccino is a classic Italian coffee featuring espresso topped with steamed milk and a frothy foam layer. With its rich aroma and creamy texture, it's a beloved choice for coffee enthusiasts, perfect for any time of day.",
url:
"https://images.unsplash.com/photo-1534778101976-62847782c213?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic", "Caffeinated"]
},
{
title: "Hot Chocolate",
description:
"Indulge in the comforting warmth of our rich hot chocolate. Made with premium cocoa and steamed milk, it's a delightful treat for any chocolate lover. Perfect for cozying up on chilly days or satisfying your sweet cravings.",
url:
"https://images.unsplash.com/photo-1542990253-0d0f5be5f0ed?q=80&w=3168&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic"]
},
{
title: "Green Smoothie",
description:
"Experience a burst of freshness with our Green Smoothie. Made from spinach, kale, avocado, and pineapple, it's a nutritious powerhouse in a glass. Energize your day with this invigorating blend.",
url:
"https://images.unsplash.com/photo-1628557044797-f21a177c37ec?q=80&w=3450&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Non-Alcoholic", "Seasonal"]
},
{
title: "Espresso",
description:
"Enjoy the bold and intense flavor of our classic Espresso. This rich, full-bodied coffee is crafted from the finest beans and delivers a perfect pick-me-up any time of day. Ideal for true coffee enthusiasts.",
url:
"https://images.unsplash.com/photo-1610889556528-9a770e32642f?q=80&w=3415&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic", "Caffeinated"]
},
{
title: "Selection of Teas",
description:
"Discover our curated selection of teas, featuring classic black, soothing green, and aromatic herbal blends. Each cup offers a unique and delightful experience, perfect for any moment of relaxation.",
url:
"https://images.unsplash.com/photo-1504382103100-db7e92322d39?q=80&w=2686&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic"]
},
{
title: "Pumpkin Spice Latte",
description:
"Savor the seasonal delight of our Pumpkin Spice Latte. This cozy beverage blends rich espresso with steamed milk, pumpkin flavors, and a warm mix of spices. Topped with whipped cream and a dash of cinnamon, it's the perfect autumn treat.",
url:
"https://images.unsplash.com/photo-1570968915860-54d5c301fa9f?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic", "Seasonal", "Caffeinated"]
},
{
title: "Gin Tonic",
description:
"Experience the crisp and refreshing taste of our classic Gin Tonic. This sophisticated cocktail combines premium gin with tonic water and a twist of lime, creating a perfectly balanced drink. Ideal for any occasion, it's a timeless favorite that never goes out of style.",
url:
"https://images.unsplash.com/photo-1597960194480-fc6b5e3181fd?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Alcoholic"]
},
{
title: "Home Made Iced Tea",
description:
"Indulge in the refreshing simplicity of our homemade iced tea. Freshly brewed tea, lightly sweetened and enhanced with a splash of lemon, creates the perfect thirst-quencher on hot days. Ideal for relaxation and refreshment.",
url:
"https://images.unsplash.com/photo-1584351056582-50d8bbb8ea18?q=80&w=2304&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Non-Alcoholic"]
}
];

const drinkContainer = document.querySelector(".drinks");

const tagColors = {
Cold: "blue",
"Non-Alcoholic": "green",
Seasonal: "pink",
Alcoholic: "red",
Caffeinated: "yellow",
Hot: "orange"
};

const drinkSelection = document.querySelector(".tag-selection");

filterDrinks();

drinkContainer.addEventListener("click", function (e) {
const tagItem = e.target.closest(".drinks__tag");
if (!tagItem) return;
const tag = tagItem.textContent;
highlightTag(tag);
filterDrinks(tag);
});
drinkSelection.addEventListener("click", function (e) {
const tagItem = e.target.closest(".drinks__tag");
if (!tagItem) return;
const tag = tagItem.textContent;
if (tagItem.classList.contains("tag-inactive")) {
highlightTag(tag);
filterDrinks(tag);
} else {
highlightTag();
filterDrinks();
}
});

function printDrinks(drinkArray) {
const drinksHtml = "";
drinkContainer.innerHTML = "";

drinkArray.forEach((drink) => {
let tags = "";
drink.tags.forEach((tag) => {
const tagHTML = `
<p class="drinks__tag drinks__tag--${
tagColors[tag] ? tagColors[tag] : "grey"
}">${tag}</p>
`;
tags = tags + tagHTML;
});

const html = `
<div class="drinks__item">
<img src="${drink.url}" alt="Drink">
<div>
<h3>${drink.title}</h3>
<p>${drink.description}</p>
</div>
<div class="drinks__tags">
${tags}
</div>
</div>
`;

drinkContainer.insertAdjacentHTML("beforeend", html);
});
}

</script>

<main>
<h1>Drink Delights</h1>
<div class="drinks__tags tag-selection" style="margin-top: 2rem;">
<p class="drinks__tag drinks__tag--grey">All</p>
<p class="drinks__tag drinks__tag--blue tag-inactive">Cold</p>
<p class="drinks__tag drinks__tag--green tag-inactive">Non-Alcoholic</p>
<p class="drinks__tag drinks__tag--red tag-inactive">Alcoholic</p>
<p class="drinks__tag drinks__tag--pink tag-inactive">Seasonal</p>
<p class="drinks__tag drinks__tag--orange tag-inactive">Hot</p>
<p class="drinks__tag drinks__tag--yellow tag-inactive">Caffeinated</p>
</div>
<div class="drinks">

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

Поделиться16902.09.24 19:01:07

Автор: 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 {
appearance: none;
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
margin: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
text-decoration: none;
text-transform: none;
line-height: normal;
overflow: visible;
}

body{
min-height: 100svh;
background-color: rgb(15, 23, 42);
color: white;
display: grid;
place-content: center;
font-size: 1rem;
font-family: system-ui;
}

nav {
--_clr-txt: rgb(255, 255, 255);
--_clr-txt-svg: rgb(147, 158, 184);
--_ani-speed: 6s; /* speed of rotating text */

display: flex;
/*flex-wrap: wrap;*/
gap: 1rem;
font-size: 1.4rem;
}
nav>button {
position: relative;
display: grid;
place-content: center;
grid-template-areas: 'stack';
padding: 0 1.5rem;
text-transform: uppercase;
font-weight: 300;
}

/* place button items on top of each other */
nav>button>span {
transition: all 300ms ease-in-out;
grid-area: stack;
}
/* nav icon */
nav>button>span:last-of-type {
margin-top: 0.25rem;
transform: scale(0);
transition-delay: 0ms;
border-radius: 50%;
}
/* hover - hide text */
nav>button:focus-visible>span:first-of-type,
nav>button:hover>span:first-of-type {
transform: scale(0);
}
/* hover - reveal icon */
nav>button:focus-visible>span:last-of-type,
nav>button:hover>span:last-of-type {
transform: scale(1);
}

/* nav SVG circular text*/
nav>button>svg {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: center;
opacity: 0;
text-transform: uppercase;
transition: all 300ms ease-in-out;
color: var(--_clr-txt-svg);
}
/* hover - reveal rotating SVG */
nav>button:focus-visible>svg,
nav>button:hover>svg {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
transition-delay: 150ms;
transition: all 300ms ease-in-out;
}
/*
@supports (-webkit-touch-callout: none) {
/* specific to iOS devices * /
button svg {
/* adjust position for iOS * /
translate: -50% -50%;
animation: rotate var(--_ani-speed) linear infinite;
}
}
@supports not (-webkit-touch-callout: none) {
*/

</style>

</script>

<nav>
<button type="button" title="Home">
<span>Home</span>
<span class="material-symbols-outlined" aria-hidden="true">home</span>
<svg viewBox="0 0 300 300" aria-hidden="true">
<g>
<text fill="currentColor">
<textPath xlink:href="#circlePath">Home</textPath>
</text>
<text fill="currentColor">
<textPath xlink:href="#circlePath" startOffset="50%">Home</textPath>
</text>
</g>
</svg>
</button>
<button type="button">
<span>About</span>
<span class="material-symbols-outlined" aria-hidden="true">info</span>
<svg viewBox="0 0 300 300" aria-hidden="true">
<g>
<text fill="currentColor">
<textPath xlink:href="#circlePath">About</textPath>
</text>
<text fill="currentColor">
<textPath xlink:href="#circlePath" startOffset="50%">About</textPath>
</text>
</g>
</svg>
</button>
<button type="button">
<span>Services</span>
<span class="material-symbols-outlined" aria-hidden="true">linked_services</span>
<svg viewBox="0 0 300 300" aria-hidden="true">
<g>
<text fill="currentColor">
<textPath xlink:href="#circlePath">Services</textPath>
</text>
<text fill="currentColor">
<textPath xlink:href="#circlePath" startOffset="50%">Services</textPath>
</text>
</g>
</svg>
</button>
<button type="button">
<span>Contact</span>
<span class="material-symbols-outlined" aria-hidden="true">email</span>
<svg viewBox="0 0 300 300">
<g>
<text fill="currentColor" aria-hidden="true">
<textPath xlink:href="#circlePath">Contact</textPath>
</text>
<text fill="currentColor">
<textPath xlink:href="#circlePath" startOffset="50%">Contact</textPath>
</text>
</g>
</svg>
</button>
</nav>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" width="0" height="0">
<defs>
<path id="circlePath" d="M 150, 150 m -50, 0 a 50,50 0 0,1 100,0 a 50,50 0 0,1 -100,0" />
</defs>
</svg>
[/html]

Поделиться17002.09.24 19:07:45

Автор: 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 {
--bg: #1c1c1c;
--text-height: 300px;
--clc: #9ba5d0;
}

.sparkle {
width: 600px;
height: var(--text-height);
font-size: 50px;
text-align: center;
line-height: var(--text-height);
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 5px;
z-index: 100;
position: relative;
text-shadow: 0px 0px 10px var(--clc);
background: var(--clc);
}

.star {
--star-size: 50px;
--star-life: 5s;

--start-left: 0px;
--start-top: 0px;

--end-left: 0px;
--end-top: 0px;

--star-color: #f1c40f;

width: var(--star-size);
height: var(--star-size);
left: var(--end-left);
top: var(--end-top);
background: var(--star-color);
position: absolute;
mix-blend-mode: lighten;
animation: slide var(--star-life) ease-in forwards;
}

.star:after {
display: block;
content: "";
width: var(--star-size);
height: var(--star-size);
background-color: var(--bg);
border-radius: 100%;
position: relative;
top: calc(var(--star-size) / 2 * -1);
left: calc(var(--star-size) / 2 * -1);
box-shadow: var(--star-size) var(--star-size) var(--bg),
var(--star-size) 0px var(--bg),
0px var(--star-size) var(--bg);
}

@keyframes slide {
0%{
left: var(--start-left);
top: var(--start-top);
transform: rotate(0deg);
opacity: 0;
}
100%{
left: var(--end-left);
top: var(--end-top);
transform: rotate(calc(180deg * var(--star-life-num))) scale(0.5);
opacity: 1;
}
}
</style>

var current_star_count = 0;

const MAX_STARS = 60;
const STAR_INTERVAL = 16;

const MAX_STAR_LIFE = 3;
const MIN_STAR_LIFE = 1;

const MAX_STAR_SIZE = 70;
const MIN_STAR_SIZE = 30;

const MIN_STAR_TRAVEL_X = 100;
const MIN_STAR_TRAVEL_Y = 100;

const Star = class {
constructor() {
this.size = this.random(MAX_STAR_SIZE, MIN_STAR_SIZE);

this.x = this.random(
sparkle.offsetWidth * 0.75,
sparkle.offsetWidth * 0.25
);
this.y = sparkle.offsetHeight / 2 - this.size / 2;

this.x_dir = this.randomMinus();
this.y_dir = this.randomMinus();

this.x_max_travel =
this.x_dir === -1 ? this.x : sparkle.offsetWidth - this.x - this.size;
this.y_max_travel = sparkle.offsetHeight / 2 - this.size;

this.x_travel_dist = this.random(this.x_max_travel, MIN_STAR_TRAVEL_X);
this.y_travel_dist = this.random(this.y_max_travel, MIN_STAR_TRAVEL_Y);

this.x_end = this.x + this.x_travel_dist * this.x_dir;
this.y_end = this.y + this.y_travel_dist * this.y_dir;

this.life = this.random(MAX_STAR_LIFE, MIN_STAR_LIFE);

this.star = document.createElement("div");
this.star.classList.add("star");

this.star.style.setProperty("--start-left", this.x + "px");
this.star.style.setProperty("--start-top", this.y + "px");

this.star.style.setProperty("--end-left", this.x_end + "px");
this.star.style.setProperty("--end-top", this.y_end + "px");

this.star.style.setProperty("--star-life", this.life + "s");
this.star.style.setProperty("--star-life-num", this.life);

this.star.style.setProperty("--star-size", this.size + "px");
this.star.style.setProperty("--star-color", this.randomRainbowColor());
}

draw() {
sparkle.appendChild(this.star);
}

pop() {
sparkle.removeChild(this.star);
}

random(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

randomRainbowColor(){
return "hsla("+this.random(360,0)+", 100%, 50%, 1)";
}

randomMinus() {
return Math.random() > 0.5 ? 1 : -1;
}
};

setInterval(() => {
if (current_star_count >= MAX_STARS) {
return;
}

current_star_count++;

var newStar = new Star();

newStar.draw();

setTimeout(() => {
current_star_count--;

newStar.pop();
}, newStar.life * 1000);
}, STAR_INTERVAL);

</script>

<div class="sparkle">
Sparkle Text
</div>
[/html]

Поделиться17106.10.24 15:25: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>
@import url("https://fonts.googleapis.com/css?family=Montserrat:700");

* {
box-sizing: border-box;
}

body {
font-family: Montserrat, sans-serif;
min-height: 100vh;
margin: 0;
padding: 0;
background-color: rgb(9, 14, 23);
color: #ffffff;
}

svg {
opacity: 0;
position: absolute;
}

.wrapper {
position: relative;
}

.hero {
min-height: 100vh;
padding: clamp(1rem, 2vw, 5rem);
display: flex;
align-items: center;
}

.hero--secondary {
--mask: radial-gradient(circle at var(--x, 70%) var(--y, 50%), black 25%, transparent 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #482EF4, #5FF4C2, #ffffff);
color: rgb(9, 14, 23);
-webkit-mask-image: var(--mask);
mask-image: var(--mask);
}

.hero__heading {
font-size: clamp(2rem, 5vw, 8rem);
text-transform: uppercase;
margin: 0;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}

</style>
<script>
const hero = document.querySelector('[data-hero]')

window.addEventListener('mousemove', (e) => {
const { clientX, clientY } = e
const x = Math.round((clientX / window.innerWidth) * 100)
const y = Math.round((clientY / window.innerHeight) * 100)

gsap.to(hero, {
'--x': `${x}%`,
'--y': `${y}%`,
duration: 0.3,
ease: 'sine.out',
})
})
</script>

<div class="hero hero--secondary" aria-hidden="true" data-hero>
<p class="hero__heading">It will be sunny</p>
</div>
</div>
[/html]

concoction

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

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

Объявление

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

штучки

Сообщений 151 страница 171 из 171

Поделиться15120.05.24 08:17:39

Поделиться15220.05.24 08:49:11

Поделиться15301.06.24 20:33:34

Поделиться15402.06.24 19:45:50

Поделиться15502.06.24 21:53:35

Поделиться15602.06.24 21:59:04

Поделиться15716.06.24 19:37:47

Поделиться15816.06.24 19:59:18

Поделиться15916.06.24 20:51:51

Поделиться16016.06.24 20:54:28

Поделиться16116.06.24 22:42:51

Поделиться16216.06.24 23:08:21

Поделиться16317.06.24 17:32:35

Поделиться16426.06.24 11:15:53

Поделиться16527.06.24 21:04:39

Поделиться16601.07.24 16:37:01

Поделиться16701.07.24 16:44:54

Поделиться16801.07.24 16:57:28

Поделиться16902.09.24 19:01:07

Поделиться17002.09.24 19:07:45

Поделиться17106.10.24 15:25:59