Тестовая тема для хтмл

Поделиться12022-05-30 21:46:15

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться22022-06-05 18:26:49

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

up up

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться32022-11-28 18:26:13

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

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

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

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

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

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

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

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

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

</style>

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

[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться42022-11-28 18:30:21

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

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

.pulse {
transition:color 350ms ease;
}

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

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

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

[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться52022-11-28 18:58:55

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
main {
display: block;
position: relative;
box-sizing: border-box;
padding: 30px;
width: 100%;
background-color: #fff;
margin: 0 auto;
margin-top: 50px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
background-image: url(https://i.imgur.com/khglonO.jpg);
background-size: cover;
background-repeat: no-repeat;
}

.live-search-box {
width: 100%;
display: block;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #3498db;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.topic {
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
border-bottom: solid 1px #ebebeb;
}

.open {
cursor: pointer;
display: block;
padding: 0px;
background: #ffffffa8;
}

.open:hover {
opacity: 0.7;
}

.expanded {
background-color: #f5f5f5;
transition: all .3s ease-in-out;
}

.ptag {
display: none;
}

.question {
padding-top: 30px;
padding-right: 40px;
padding-bottom: 20px;
font-size: 18px;
font-weight: 500;
color: #526ee4;
}

.answer {
font-size: 16px;
line-height: 26px;
display: none;
margin-bottom: 30px;
text-align: justify;
padding-left: 20px;
padding-right: 20px;
}

.faq-t {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
display: inline-block;
float: right;
position: relative;
top: -55px;
right: 10px;
width: 10px;
height: 10px;
background: transparent;
border-left: 2px solid #ccc;
border-bottom: 2px solid #ccc;
transition: all .3s ease-in-out;
}

.faq-o {
top: -50px;
-moz-transform: rotate(-224deg);
-ms-transform: rotate(-224deg);
-webkit-transform: rotate(-224deg);
transform: rotate(-224deg);
}
</style>
<script>
$(".open").click(function() {
var container = $(this).parents(".topic");
var answer = container.find(".answer");
var trigger = container.find(".faq-t");

answer.slideToggle(200);

if (trigger.hasClass("faq-o")) {
trigger.removeClass("faq-o");
} else {
trigger.addClass("faq-o");
}

if (container.hasClass("expanded")) {
container.removeClass("expanded");
} else {
container.addClass("expanded");
}
});

jQuery(document).ready(function($) {
$('.question').each(function() {
$(this).attr('data-search-term', $(this).text().toLowerCase() + $(this).find("ptag").text().toLowerCase());

});

$('.live-search-box').on('keyup', function() {

var searchTerm = $(this).val().toLowerCase();

$('.question').each(function() {

if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
$(this).parent().parent().show();
} else {
$(this).parent().parent().hide();
}

});

});
</script>
<main>
<div class="topic">

<h2 class="question">1. How can i delete my complaint/comment?<span class="ptag">SIEBEL</span></h2>
<span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="topic">
<div class="open">
<h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
</div>
<p class="answer">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 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться62022-11-28 18:59:47

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

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

::selection {
color: darkgrey;
}

</style>
<script>

</script>
<p>
<span class="magic">✨🦄</span> Выделите текст или нажмите "<b>cmd</b> + <b>a</b>" чтобы увидеть магию.<span class="magic">✨🦄</span>
</p>
[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться72022-11-28 19:00:05

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
.heading-design {
cursor: pointer;
background-color: #fff;
border-bottom: solid 1px #212121;
padding: 2rem;
transition: background-color 0.5s ease;
}

.heading-design:hover {
background-color: #ff9800;
border-bottom: solid 1px #ff9800;
}

.heading-prog {
cursor: pointer;
background-color: #fff;
border-bottom: solid 1px #212121;
padding: 2rem;
transition: background-color 0.5s ease;
transition: color 0.5s ease;
}

.heading-prog:hover {
color: #eeeeee;
background-color: #212121;
border-bottom: solid 1px #212121;
}

.heading-music {
cursor: pointer;
background-color: #fff;
border-bottom: solid 1px #212121;
padding: 2rem;
transition: background-color 0.5s ease;
}

.heading-music:hover {
background-color: #ff6f61;
border-bottom: solid 1px #ff6f61;
}

.tab-content {
display: none;
}

.left-content {
padding-left: 4rem;
padding-top: 4rem;
font-size: 3.75rem;
}

.right-content {
padding-left: 4rem;
padding-top: 4rem;
}

.img-custwidth {
padding-top: 4rem;
width: 512px;
}

</style>
<script>
// Author: Nicholas Fazzolari
// Basic tab switching code in pure ES6

// TODO: Add default tab open feature with an on off switch
// Make the event listener assignments general

function openTab(tabName) {
let i;
let tabContent;

tabContent = document.getElementsByClassName("tab-content");

for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}

document.getElementById(tabName).style.display = "flex";
}

// This needs to DRY'ed up so it can be used with a CMS
let designLinkEl = document.getElementById("DesignLink");
let progLinkEl = document.getElementById("ProgLink");
let musicLinkEl = document.getElementById("SupportLink");

designLinkEl.addEventListener("click", function(){openTab("Design")}, false);
progLinkEl.addEventListener("click", function(){openTab("Programming")}, false);
musicLinkEl.addEventListener("click", function(){openTab("Support")}, false);
</script>
<div class="container-fluid">
<div class="row">
<div id="DesignLink" class="col-sm-4 heading-design">
<h5 class="mb-0">01.</h5>
<h1 class="mb-0"><strong>Design</strong></h1>
</div>
<div id="ProgLink" class="col-sm-4 heading-prog">
<h5 class="mb-0">02.</h5>
<h1 class="mb-0"><strong>Programming</strong></h1>
</div>
<div id="SupportLink" class="col-sm-4 heading-music">
<h5 class="mb-0">03.</h5>
<h1 class="mb-0"><strong>Support</strong></h1>
</div>
</div>
</div>

<div id="Design" class="container-fluid tab-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 left-content">
<strong>Design is Human.</strong>
<img src="http://nickfazz.me/codepen_assets/vectors/head_vector_styled.svg" alt="Line art of human head." class="imf-fluid img-custwidth">
</div>
<div class="col-sm-6 right-content">
<h3><strong>Design is human. Design is making ideas real.</strong></h3>
<p>Human centered design is at the core of product development. Empathetic communication with the client is a key part of the development process from the beginning until the product launch and support phases.</p>
<p>Design thinking is iterative, and cyclic. Combining raw creative out with theoretical structure is the best way to deliver high quality products to clients. Listening and guiding are core communication principles between the developer and client.</p>
<p>When developing new web sites and applications our job as a development studio is to meet client needs through empathetic research and interaction. Listening to the client is key when solving in an unfamiliar domain of expertise. Guiding must be approached as a craft of finess to bridge the gulf between possible and not possible.</p>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div id="Programming" class="container-fluid tab-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 left-content">
<strong>Programming Delivers Solutions.</strong><br>
<img src="http://nickfazz.me/codepen_assets/vectors/code_art.svg" alt="Binary digits and line art." class="imf-fluid img-custwidth">
</div>
<div class="col-sm-6 right-content">
<h3><strong>Programming Delivers Solutions. Engineering and Development Thrive on Strong Design.</strong></h3>
<p>Using current software development technologies and proven best practices in software engineering, coupled with a formal background in computer science drives and delivers high quality web development solutions.</p>
<p>Adaptive development methods ensure cross-device and cross-platform consistent software solutions.</p>
<p>Understanding client levels of technical knowledge is important. We understand that some clients require to be more involved in the development process than others. Transparency is a key factor which addresses security and technical issues across domains. When working with clients from the science and engineering field open communication and input regarding technology is welcome. We are always open to learning and compormise.</p>
</div>
</div>
</div>
</div>
<div id="Support" class="container-fluid tab-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 left-content">
<strong>Support is Trust.</strong>
<img src="http://nickfazz.me/codepen_assets/vectors/support_vector.svg" alt="Line art of key." class="imf-fluid img-custwidth">
</div>
<div class="col-sm-6 right-content">
<h3><strong>Support is Trust. Product Life Cycle Beyond Development.</strong></h3>
<p>Client support is rooted in the mindset of client empathy and need. Delivering emerging technologies to strengthen the product and both user and client experience are integral to our support role.</p>
<p>Security features are updated to protect against current threats to protect the business, technology, and users. Best practices are communicated and implemented with the client and user in mind.</p>
<p>Support is an ongoing role which extends the development period of the software. Scale, security and usability are key support concepts which we deliver in our product support role.</p>
</div>
</div>
</div>
</div>
[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться82022-12-06 13:27:24

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
section {
padding: 5rem 2rem;
text-align: center;
color: gray;
font-family: system-ui;
min-width: 50%;
max-width: 600px;
margin: 3rem 0;
background: rgba(255,255,255,.025);
position: relative;
}

section:has(img) {
padding: 0;
display: grid;
place-items: center;
}

section:has(img)::after {
content: 'Какой-нибудь поясняющий текст поверх картинок если нужно';
position: absolute;
padding: 1rem;
background: rgba(0,0,0,.5);
border-radius: 5px;
color: lightgray;
}

img {/*картинка*/
width: 100%; /*ширина на всю страницу*/
}

code {
padding: .2rem;
background: #333;
border-radius: 4px;
}

button {
padding: 1rem 1rem;
border: 0;
color: dimgray;
border-radius: 5px;
}

h1 {
font-size: 2rem;
width: fit-content;
margin: 0 auto;
padding: 1rem;
}

</style>
<script>
var lights_count = 10,
target_elements = document.querySelectorAll('.addLights'),
colors = ['blue','red','gold','ForestGreen','DarkViolet','orangered', 'DarkTurquoise'],
wire_color = '#040',
twinkle = false,
l_width = 100 / lights_count,
rotation_max = 35

target_elements.forEach(function(elm) {
for(var i=0;i<lights_count;i++) {
var l = document.createElement('div')
l.className = 'light_box'
l.style.width = l_width + '%'
l.style.position = 'absolute'
l.style.left = l_width * i + '%'
l.style.top = '1%'
l.style.bottom = '1%'
l.style.borderTop = '2px solid '+wire_color
l.style.borderBottom = '2px solid '+wire_color
var rot = Math.random() < .5 ? -Math.random()*rotation_max : Math.random()*rotation_max
l.innerHTML = `
<div class='light' style='--color:${colors[i%colors.length]}; transform:rotate(${rot}deg);'></div>
<div class='light' style='--color:${colors[(i+2)%colors.length]}; transform:rotate(${rot}deg);'></div>`
if(twinkle) {
l.classList.add('twinkle')
l.style.setProperty('--delay', i / 3 - 1 + 's' )
}
elm.appendChild(l)
}
})

document.body.innerHTML += `
<style>
.twinkle .light::after {
animation: twinkle 1s linear var(--delay) infinite;
}
@keyframes twinkle {
50% { box-shadow: 0 0 0 transparent; }
}

.light_box {
pointer-events: none;
}
.light {
width: 15%;
max-width: 15px;
aspect-ratio: 1/1;
background: ${wire_color};
position: absolute;
left: 40%;
border-radius: 25%;
--color: gold;
}
.light:nth-child(1) {
top: 100%;
transform-origin: 50% 0%;
}
.light:nth-child(2) {
bottom: 100%;
transform-origin: 50% 100%;
}

.light::after {
content: '';
width: 150%;
aspect-ratio: 1/2;
background:
radial-gradient(rgba(255,255,255,.5), transparent),
var(--color);
box-shadow: 0 0 15px 5px var(--color);
position: absolute;
left: -25%;
}
.light:nth-child(1)::after {
top: 80%;
border-radius: 100% / 60% 60% 125% 125%;
}
.light:nth-child(2)::after {
bottom: 80%;
border-radius: 100% / 125% 125% 60% 60%;
}

.addLights {
position: relative;
}
</style>
`
</script>

<section>
<button class='addLights'>Кнопка</button>
</section>

<section>
<h1 class='addLights'>Работает с заголовками</h1>
</section>

<section class='addLights'>
Добавьте лампочки, дописав
<br>к элементу класс <code>.addLights</code>
</section>

[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться92022-12-07 15:50:42

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
.cc
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.bc
{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

/*============================*/
/*============TREE============*/

.tree
{
width: 70vh;
height: 80%;
}

.segment::before
{
content: ' ';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #1f4f15 transparent;
border-radius: 40%;
}

.segment
{
top: 35%;
overflow: hidden;
}

.segment::after
{
content: ' ';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-style: solid;
border-color: transparent transparent #F9F9F9 transparent;
border-radius: 35%;
}

.segment[value="0"]{width: 70vh; height: 70vh; z-index:0;}
.segment[value="1"]{width: 50vh; height: 50vh; z-index:1;}
.segment[value="2"]{width: 30vh; height: 30vh; z-index:2;}
.segment[value="0"]::before{border-width: 35vh;}
.segment[value="1"]::before{border-width: 25vh;}
.segment[value="2"]::before{border-width: 15vh;}
.segment[value="0"]::after{border-width: 23.5vh;}
.segment[value="1"]::after{border-width: 14vh;}
.segment[value="2"]::after{border-width: 7vh;}

.highlight
{
position: absolute;
width: 10%;
height: 35%;
bottom: 3.25%;
left: 67.25%;
border-radius: 0 0 0 100%;
transform: rotate(-45deg);
background: #216315;
}

.stump
{
position: absolute;
left: 50%;
bottom: 0;
width: 15vh;
height: 25vh;
background: #3f2b27;
transform: translateX(-50%);
border-radius: 6vh;
overflow: hidden;
}

.stump::after
{
content: ' ';
position: absolute;
right: 0;
width: 15%;
height: 100%;
background: #47332b;
border-radius: 0 0 0 100%;
}

.ball
{
position: absolute;
bottom: 0;
width: 5vh;
height: 5vh;
border-radius: 5vh;
background: #7a3232;
transform-origin: 50% -50%;
transition: all 0.2s ease-in-out;
z-index: 3;
}
.ball::after
{
content: ' ';
position: absolute;
top: 10%;
right: 12.5%;
width: 50%;
height: 40%;
border-radius: 100%;
background: #D14B4B;
}

.ball:nth-child(1)
{
bottom: 10%;
left: 20%;
}

.ball:nth-child(2)
{
bottom: 7.5%;
left: 65%;
}

.ball:nth-child(3)
{
bottom: 3%;
left: 42.5%;
}

/*============TREE============*/
/*============================*/

/*============================*/
/*==========PRESENTS==========*/
.present:before
{
content: ' ';
display: none;
}

.present.open::before
{
position: absolute;
width: 100%;
height: 35%;
transform: translateY(-100%);
background: #5B1616;
border-radius: 10%;
display: block;
}

.present
{
position: absolute;
left: 0;
bottom: 0;
width: 12vh;
height: 12vh;
background: #7f2121;
transition: transform 0.2s ease-in;
transform-origin: center center;
border-radius: 10%;
cursor: pointer;
}

.bow
{
width: 30%;
height: 100%;
background: #D4C228;
z-index: 2;
}

.bow::after
{
content: ' ';
display: block;
width: 90%;
height: 100%;
background: #E0CF43;
transform: rotate(90deg);
}

.bow:nth-child(2)
{
top: 0;
left: -62.5%;
width: 175%;
height: 30%;
transform: translate(14%,-100%) scale(0.575);
z-index: 2;
background: #847A23;
display: none;
}

.bow:nth-child(2)::after
{
position: absolute;
top: -49%;
left: 31.5%;
width: 37.5%;
height: 175%;
background: #9D912D;
}

.present.open .bow:nth-child(2)
{
display: block;
}
/*==========PRESENTS==========*/
/*============================*/
/*============================*/
/*==========LETTERS===========*/
.letter
{
position: absolute;
font-size: 5vh;
color: white;
transition: all 1.2s ease-in-out;
text-align: center;
}
/*==========LETTERS===========*/
/*============================*/
</style>
<script>
/*
* Made by C.Dinkelborg for GetDigital
* Geekolaus Aktion
* Aktionscode: G6NK5AUVB
* @2016 all rights reserved
*/

var balls = document.getElementsByClassName("ball");

var presents = document.getElementsByClassName("present");

for(var i=0; i<balls.length; i++)
{
balls[i].addEventListener("mouseover",onMouseOverBall);
balls[i].addEventListener("touchstart",onMouseOverBall);
};

for(var i=0; i<presents.length; i++)
{
presents[i].addEventListener("mouseover",onMouseOverPresent);
presents[i].addEventListener("click",onClickPresent);
};

function onClickPresent()
{
setTimeout(function()
{
this.classList.add("open");
unfold();
}.bind(this),1000);
}

var letters = document.getElementsByClassName("letter");
function unfold()
{
for(var i=0; i<letters.length; i++)
{
letters[i].style.top = "-75vh";
letters[i].style.transform = "translateY("+i*5+"vh)";
}
}

//SNOW EFFECT WITH KIND SUPPORT FROM
//http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect
window.onload = function(){
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

//snowflake particles
var mp = 25; //max particles
var particles = [];
for(var i = 0; i < mp; i++)
{
particles.push({
x: Math.random()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
r: Math.random()*4+1, //radius
d: Math.random()*mp //density
})
}

//Lets draw the flakes
function draw()
{
ctx.clearRect(0, 0, W, H);

ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for(var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}

//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < mp; i++)
{
var p = particles[i];
//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;

//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if(p.x > W+5 || p.x < -5 || p.y > H)
{
if(i%3 > 0) //66.67% of the flakes
{
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
}
else
{
//If the flake is exitting from the right
if(Math.sin(angle) > 0)
{
//Enter from the left
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
}
else
{
//Enter from the right
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}

//animation loop
setInterval(draw, 33);
}
</script>
<canvas id="canvas"></canvas>

[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться102022-12-08 20:38:07

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]<div class=profileinfo-filler__wrapper><form class="profileinfo-filler">
<label for="heroName" class="profileinfo__label">Имя героя (кириллицей)</label>
<label for="heroAge" class="profileinfo__label">Возраст (число)</label>
<input class="profileinfo__input profileinfo__name" type="text" name="heroName" id="heroName"
placeholder="Алиса Чародейкина">
<input class="profileinfo__input profileinfo__age" type="number" name="heroAge" id="heroAge" placeholder="175">

<label for="heroRace" class="profileinfo__label">Раса</label>
<label for="heroJob" class="profileinfo__label">Занятие</label>
<input class="profileinfo__input profileinfo__race" type="text" name="heroRace" id="heroRace"
placeholder="эльф">

<label for="heroLinkName" class="profileinfo__label">Название ссылки на анкету</label>
<label for="heroLink" class="profileinfo__label">Ссылка на анкету</label>
<input class="profileinfo__input profileinfo__linkname" type="text" name="heroLinkName" id="heroLinkName"
placeholder="досье героя">

<style>

.profileinfo-filler {
display: flex;
flex-wrap: wrap;
gap: 5%;
justify-content: center;
}

.profileinfo__input,
.profileinfo__label {
margin: 5px;
display: inline-block;
width: 45%;

box-sizing: border-box;
}

.profileinfo__label {
font-family: "Livingstone", "CenturyGo", sans-serif;
font-size: 17px;
}

.profileinfo__input {
border-radius: 8px;
border-top: 3px solid #21234b !important;
border-bottom: 3px solid #21234b !important;
}
.profileinfo__button {
padding: 5px 10px;
font-family: "Livingstone", "CenturyGo", sans-serif;
}

</style>
<script type="text/javascript" src="https://forumstatic.ru/files/001b/9d/37/13397.js">
</script>
[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться112022-12-08 20:55:04

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]<form class="profileinfo-filler">
<label for="heroName" class="profileinfo__label">Имя героя (кириллицей)</label>
<label for="heroAge" class="profileinfo__label">Возраст (число)</label>
<input class="profileinfo__input profileinfo__name" type="text" name="heroName" id="heroName"
placeholder="Алиса Чародейкина">

<label for="heroRace" class="profileinfo__label">Раса</label>
<label for="heroJob" class="profileinfo__label">Занятие</label>
<input class="profileinfo__input profileinfo__race" type="text" name="heroRace" id="heroRace"
placeholder="эльф">

<label for="heroLinkName" class="profileinfo__label">Название ссылки на анкету (необязательно)</label>
<label for="heroLink" class="profileinfo__label">Ссылка на анкету</label>
<input class="profileinfo__input profileinfo__linkname" type="text" name="heroLinkName" id="heroLinkName"
placeholder="досье героя">

.profileinfo__input,
.profileinfo__label {
display: inline-block;
width: 50%;
box-sizing: border-box;
}

.profileinfo__link,
.profileinfo__linkname {

}

.profileinfo__job {}

.profileinfo__name {}

.profileinfo__age .profileinfo__race {}
</style>

<script type="text/javascript" src="https://forumstatic.ru/files/001b/9d/37/13397.js">
</script>[/html]

2. Скрипт формы в тему.
Для чего нужен?
Преимущественно для технических тем, где нужно, чтобы все писали по образцу. Заполняешь форму, кликаешь и сообщение получается оформленное, как надо. Количество полей, их оформление, содержание можно сделать любые.
Нюанс: в Майбе есть два стула... два скрипта html в сообщениях. В зависимости от того, который ты используешь, моя форма либо, похожим на смайлики образом, будет выводить код сообщения в форму для копирования, либо непосредственно публиковать сообщение по кнопке.

ПРИМЕР ЕГО РАБОТЫ НА МОЕМ ФОРУМЕ: https://sintior.ru/viewtopic.php?id=232
ЗАГОТОВКА ДЛЯ ФОРМЫ НА ГИТЕ: https://kkoroleva.github.io/shards-of-d … oinfo.html

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться122022-12-11 12:39:22

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
.fmenu a {
overflow: hidden;
text-decoration: none !important;
display: block;
width: 250px;
height: 60px;
margin: 0 20px 20px 0;
background: rgba(219, 226, 232, 0.5);
border: 1px solid #ccc;}
.fmenu h5 {
margin: 0;
color: #222;
text-align: center;
height: 60px;
font: italic 18px/60px Georgia, Serif;
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;}
.fmenu a:hover h5 {
margin-top: -60px;
opacity: 0;
}
.fmenu div {
background: #000 17px 17px no-repeat;
height: 60px;
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
padding: 5px;
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;}

.fmenu a:hover div {
opacity: 1}
</style>
<table><tr><td> <div class="fmenu">

<a href="ссылка">
<h5>название</h5>
<div>описание</div>
</a>

<a href="#">
<h5>название</h5>
<div>описание</div>
</a>

<a href="#">
<h5>название</h5>
<div>описание</div>
</a>
</div></td>

<a href="ссылка">
<h5>название</h5>
<div>описание</div>
</a>

<a href="#">
<h5>название</h5>
<div>описание</div>
</a>

<a href="#">
<h5>название</h5>
<div>описание</div>
</a>
</div></td></tr></table>[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться132022-12-11 13:02:41

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]<table>
<tr>
<td style="width: 30%;"><a href="#" class="anew1">гостевая книга</a><br>
<a href="#" class="anew1">гостевая книга</a><br>
<a href="#" class="anew1">гостевая книга</a><br>
<a href="#" class="anew1">гостевая книга</a><br>
<a href="#" class="anew1">гостевая книга</a><br></td>
<td><p align="justify";>
<i>Описание</i> Не думайте, что я уклоняюсь от работы. Я люблю работу. Работа увлекает меня. Я часами могу сидеть и смотреть, как работают.
</tr>
</table>[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться142022-12-13 00:43:55

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
.card {
min-height: 20px;
padding: 15px;
border: 1px solid #ccc;
margin-bottom: 30px;
background: #ccc;
background-image: url(https://i.pinimg.com/564x/a3/20/d1/a320 … 3ef132.jpg);
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: overlay;
background-position: bottom;
color: #fff;
text-shadow: 2px 2px 2px #000;
}
.alphabet li a {
font-weight: bold;
}
.alphabet li a:not(.view-all) {
color: #000;
opacity: .3;
}
</style>
<script>
$(document).ready(function() {
//HTML Setup
var servicesArray = ["A Song OF ICE AND FIRE: XXXX, XXX, FFF", "BLEACH", "boku no hero academia", "BORDERLANDS", "BUBBLE COMICS", "DEATH NOTE", "DETROIT: BECOME HUMAN"];

for (var i = 0; i < servicesArray.length; i++) {
$(".services").append("<article class='col-sm-4' data-title='" + servicesArray[i] + "'><div class='card'>" + servicesArray[i] + "</div></article>");
}

//Actual logic

//Bold only the letters of services available
for (var c = 0; c < $("article").length; c++) {
var serviceTitle = $("article:eq("+c+")").text(),
firstChar = serviceTitle.charAt(0);

for (var a = 0; a < 26; a++) {
if ($(".alphabet li:eq("+a+") a").text() == firstChar) {
$(".alphabet li:eq("+a+") a").css("opacity","1");
}
}
}

//Filter logic
$("ul li a").click(function(e) {
e.preventDefault();

//Get letter that was clicked
var letter = $(this).text();

//If view all, show all cards, else hide all cards and show ones that start with the letter
if (letter == "View all") {
$("article").show();
$(".filtered-by").html("");
} else {
$("article").hide();

//Show letter filtered by
$(".filtered-by").html('<p>Filtered by the letter <strong>"' + letter + '"</strong></p>');

//loop through cards, find first letter match
for (var j = 0; j < $("article").length; j++) {
var serviceTitle = $("article:eq("+j+")").data("title");

if (serviceTitle.indexOf(letter) == 0) {
$("article:eq("+j+")").show();
}
}
}
});
});
</script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="list-unstyled list-inline alphabet" style="display: ruby;padding:20px;">
<li><a href="#" class="view-all">View all</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">K</a></li>
<li><a href="#">L</a></li>
<li><a href="#">N</a></li>
<li><a href="#">M</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
<li><a href="#">R</a></li>
<li><a href="#">S</a></li>
<li><a href="#">T</a></li>
<li><a href="#">U</a></li>
<li><a href="#">V</a></li>
<li><a href="#">W</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Y</a></li>
<li><a href="#">Z</a></li>
</ul>
</div>
</div>
<div class="filtered-by">

</div>
<div class="row services">

</div>
</div>

[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться152022-12-16 18:28:01

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
span{
-webkit-transition:all 10s ease-in;
transition:all 10s ease-in;
display:inline-block;
}
.fallen{
-webkit-transform:translate(0,200px);
transform:translate(0,200px);
}
p4{
margin:3em 5em;
font-family:Georgia,serif;
font-size:large;
color:#000 ;

}

</style>
<script>
var p = $('p4');
p.each(function(){
var t = $(this).text().replace(/\s/g, unescape('%a0')); /* Spaces collapse, so make them non-breaking */
var o = '';
for(var i = 0; i< t.length; i++){
o += '<span class="normal">' + t[i] + '</span>';
}
$(this).html(o);
});

function lift(){
$('.fallen').removeClass('fallen').addClass('normal');
window.setTimeout(drop, 60);
}

function drop(){
var s = $('span.normal');
if (s.length == 0){
window.setTimeout(lift, 10000);
return;
}

s.eq(Math.floor(Math.random() * s.length)).addClass('fallen').removeClass('normal');
window.setTimeout(drop, 60);
}

drop();

</script>
<container style="height: 500px;display: block;"><p4>В другой день Крони взбесился бы от такой неудачи, но сегодня было иначе. Он дождался грузового лифта и поклонился стражнику. Стражник отвернулся. Здороваться с трубарем он не хотел. Но знал его уже лет шесть и не обижал. Лифт пошел вниз. Крони ехал раньше, чем обычно, и потому в лифте оказались не те, с кем он ездил всегда. Крони вдруг подумал, что в своей жизни он встречал очень немного людей. Одних и тех же. С кем работает, с кем ездит и кое-кого из соседей. Некоторых еще не видел, о некоторых только слышал. А еще есть люди, которых трудно считать людьми, потому что они подобны наводнению или обвалу. Это сборщик или те, кто приходит с месячным обыском. Или человек от ростовщика. Крони знал, что почти все на уровне живут так же. Только у старухи меньше знакомых, а у господина Ратни больше.</p4></container>

[/html]

https://gyazo.com/56610377fb3bea24d216c14fdb3d42a0

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться162023-01-15 17:07:47

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: fontawesome;
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: 0.2em;
text-align: center;
opacity: 0.8;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
margin-left: 0.2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-star-1:before { content: '\f087'; } /* 's' */
.icon-address:before { content: '\f02c'; } /* 'l' */
.icon-down-circled:before { content: '\f01a'; } /* 'f' */
.icon-down-open:before { content: '\f055'; } /* 'd' */
.icon-up-open:before { content: '\f0c6'; } /* 'p' */
.icon-graduation-cap:before { content: '\f072'; } /* 'e' */
.icon-user:before { content: '\f19c'; } /* 'u' */
.icon-briefcase:before { content: '\f169'; } /* 'b' */

* {
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body > header {
width:100%;
position:fixed;
z-index:30;
background:#E0DCD9;
border-bottom:1px solid #d5d1cf;
box-shadow:0 1px 1px white;
top:0;
left:0;
}

body > header nav {
width:760px;
margin:0 auto;
overflow:hidden;
}
body > header nav ul {
margin:0 0 0 -65px;
padding:0;
text-align:center;
font-size: 0em;
letter-spacing: 0px;
word-spacing: 0px;
}
body > header nav li {
display:inline-block;
cursor:pointer;
border-left:1px solid #ebe7e4;
border-top:1px solid #E0DCD9;
box-shadow:-1px 0px 1px #d5d1cf;
padding:;
font-size:18px;
}
body > header nav li:hover {
background:#d5d1cf;
}
body > header nav li:first-child {
border-left:1px solid #E0DCD9;
box-shadow:-1px 0px 1px #E0DCD9;
text-shadow:1px 1px 1px #fff;
}
body > header nav li:active,body > header nav li.active {
color:white;
}
body > header nav li.all:active,body > header nav li.all.active {
text-shadow:1px 1px 1px #444;
}
body > header nav li.icon-address:active,body > header nav li.icon-address.active {
background:#0ED1E7;
border-left:1px solid #0cb4c6;
border-top:1px solid #0cb4c6;
box-shadow:none;
}
body > header nav li.icon-graduation-cap:active,body > header nav li.icon-graduation-cap.active {
background:#EB2690;
border-left:1px solid #bf1f75;
border-top:1px solid #bf1f75;
box-shadow:none;
}
body > header nav li.icon-briefcase:active,body > header nav li.icon-briefcase.active {
background:#E76B0E;
border-left:1px solid #B85307;
border-top:1px solid #B85307;
box-shadow:none;
}
body > header nav li.icon-star-1:active,body > header nav li.icon-star-1.active {
background:#5E6297;
border-left:1px solid #333;
border-top:1px solid #333;
box-shadow:none;
}
body > header nav li.icon-user:active,body > header nav li.icon-user.active {
background:#454545;
border-left:1px solid #333;
border-top:1px solid #333;
box-shadow:none;
}
body > header nav ul#nav_ctrl {
position:absolute;
top:0;
right:0;
}

div#timeline_container {
width:760px;
margin:40px auto;
position:relative;
}
div#timeline_container header {
position:relative;
z-index:20;
}
div#timeline_container header figure {
width:600px;
height:100px;
border-radius:;
border:5px solid #cdc9c6;
overflow:hidden;
display:block;
margin:0 auto;
}
div#timeline_container header figure img {
width:100%;
}
div#timeline_container header h1 {
position:absolute;
top:20px;
right:80px;
font-family: 'Lobster', cursive;
font-size:2.8em;
text-shadow:2px 2px 1px #fff;
font-weight:normal;
}
div#timeline_container > ul {
position:relative;
width:4px;
background:#cdc9c6;
border-right:1px solid white;
margin:0 140px;
padding:6em 0 0;
list-style:none;
}
div#timeline_container > ul:after {
content:"";
width:15px;
height:15px;
border-radius:50%;
background:#cdc9c6;
box-shadow:1px 1px 1px white;
position:absolute;
bottom:0;
left:-6px;
}
div#timeline_container > ul > li {
position:relative;
padding:.3em 0;
min-height:130px;
cursor:pointer;

-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
div#timeline_container > ul > li.hidden {
position:absolute;
top:-500px;
}
div#timeline_container > ul > li div {
position:absolute;
}
div#timeline_container > ul li > div.event_icn {
padding:0.3em;
font-size:1.7em;
border-radius:50%;
background:#ebe7e4;
border:3px solid #cdc9c6;
margin-left:-22px;
color:rgba(85,86,86,0.3);
box-shadow:1px 1px 1px white;

-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

div#timeline_container > ul > li:hover div.event_icn,div#timeline_container > ul li.active div.event_icn{color:white;}

div#timeline_container > ul > li.life_event div.event_icn { background:#bde3e7;}
div#timeline_container > ul li.life_event:hover div.event_icn,div#timeline_container > ul li.life_event.active div.event_icn {background:#0ED1E7}

div#timeline_container > ul > li.education_event div.event_icn { background:#eb98c5}
div#timeline_container > ul > li.education_event:hover div.event_icn,div#timeline_container > ul li.education_event.active div.event_icn { background:#EB2690}

div#timeline_container > ul > li.work_event div.event_icn { background:#e7b793}
div#timeline_container > ul > li.work_event:hover div.event_icn,div#timeline_container > ul li.work_event.active div.event_icn { background:#E76B0E}

div#timeline_container > ul > li.user_event div.event_icn {background:#A2A2A2}
div#timeline_container > ul > li.user_event:hover div.event_icn,div#timeline_container > ul li.user_event.active div.event_icn { background:#454545}

div#timeline_container > ul > li.portfolio_event div.event_icn {
background:#5E6297
}
div#timeline_container > ul > li.portfolio_event:hover div.event_icn,div#timeline_container > ul li.portfolio_event.active div.event_icn { background:#5E6297}

div#timeline_container > ul > li div.event_content {
width:480px;
padding:1em 2em 1.3em;
border:1px solid #DDDBDA;
border-radius:10px;
top:-2em;
opacity:0.3;
background:white;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
left: 57px;
}
div#timeline_container > ul > li div.event_content a{color:#999;}

div#timeline_container > ul > li:hover div.event_content,div#timeline_container > ul li.active div.event_content {
opacity:1;
}

div#timeline_container > ul > li div.event_content:before {
content: "";
position: absolute;
width: 40px;
height: 40px;
top: 15px;
left: -20px;
margin-top: 8px;
background: #cdc9c6;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
z-index: -5;
}

div#timeline_container > ul > li div.event_content h2 {
margin:0.3em 0;
padding:0;
text-transform:capitalize;
font-size:1.4em;
}
div#timeline_container > ul > li div.event_content p {
margin:0;
padding:0;
line-height:1.5em;
max-height: 75px;
overflow: auto;
color: #babec6;
}

div#timeline_container > ul > li div.event_content ul {
margin:0;
padding:0;
list-style:none;
line-height:1.5em;
}

div#timeline_container > ul > li div.event_date {
top:1em;
text-align:left;
font-size:1.2em;
text-shadow:1px 1px 1px white;
opacity:0.3;
font-weight:bold;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
margin-left: -170px;
display: block;
width: 120px;
}
div#timeline_container > ul > li div.event_date a {
margin:0;
padding:0;
line-height:1.5em;
max-height: 75px;
overflow: auto;
color: #babec6;
}
div#timeline_container > ul > li:nth-child(even) div.event_date {text-align:left;}

div#timeline_container > ul > li:hover div.event_date,div#timeline_container > ul li.active div.event_date {opacity:0.9;}

div#instructions_container {
position:fixed;
padding:2em;
width:300px;
bottom:2em;
right:2em;
line-height:1.4em;
background:#FDFDBD;
border-radius:10px;
border:1px solid #DDDBDA;
z-index:40;
font-size:0.9em;
color:black;
line-height:1.6em;
}
div#info_container{
position:fixed;
bottom:2em;
right:2em;
border-radius:50%;
color:#ebe7e4;
background:#6d6b6a;
opacity:0.3;
cursor:pointer;
width:22px;
font-size:14px;
height:22px;
padding-top:2px;
text-align:center;
font-family:'lobster','cursive';
display:none;
}

</style>
<script>
$('nav ul#main_nav').on('click','li',function(){
var $type=$(this).attr('data-title');
$('nav ul#main_nav li').removeClass('active')
if ($type=='all') {
$('nav ul#main_nav li').addClass('active');
$('div#timeline_container >ul> li').removeClass('hidden');
$('div#timeline_container >ul> li').removeClass('active');
$($('div#timeline_container >ul> li')[0]).addClass('active');
} else {
$(this).addClass('active');
$('div#timeline_container >ul> li').addClass('hidden');
$('div#timeline_container >ul> li.'+$type+'_event').removeClass('hidden');
$('div#timeline_container >ul> li').removeClass('active');
$($('div#timeline_container >ul> li.'+$type+'_event')[0]).addClass('active');
}

});

$(document).on('scroll',function(){
$('div#instructions_container').fadeOut('fast');
$('div#info_container').fadeIn('fast');
});
$(document).on('click','div#info_container',function(){
$('div#instructions_container').fadeIn('fast');
$('div#info_container').fadeOut('fast');
});

$(document).on('click','li.icon-down-open',function(){
scrollToNext();
});

$(document).on('click','li.icon-up-open',function(){
scrollToPrev();
});

$(document).on('keypress',function(e){
if(e.which==106) {
scrollToNext();
} else if(e.which==107) {
scrollToPrev();
}
});

$('div#timeline_container').on('click','li', function(){
showNext($(this));
});

function scrollToNext() {
var $itms=$('div#timeline_container > ul > li');
var $current=$itms.index($('div#timeline_container li.active'));

if ($($itms[$current+1]).length>0 && !$($itms[$current+1]).hasClass('hidden')) {
$itms.removeClass('active');
$($itms[$current+1]).addClass('active');
$('html,body').stop().animate({ scrollTop: $($itms[$current+1]).offset().top-$($itms[$current+1]).height()}, 500);
} else {
$('html,body').stop().animate({ scrollTop: $(document).height()}, 500);
}
}
function scrollToPrev() {
var $itms=$('div#timeline_container > ul > li');
var $current=$itms.index($('div#timeline_container li.active'));

if ($($itms[$current-1]).length>0 && !$($itms[$current-1]).hasClass('hidden')) {
$itms.removeClass('active');
$($itms[$current-1]).addClass('active');
$('html,body').stop().animate({ scrollTop: $($itms[$current-1]).offset().top-$($itms[$current-1]).height()}, 500);
} else {
$('html,body').stop().animate({ scrollTop: 0}, 500);
}
}

</script>

<div id="timeline_container">
<header>
<figure>
<img src="https://wallpaper.dog/large/20514532.jpg">
</figure>
<h1>Хронология <br/> персонажа такого-то</h1>
</header>
<ul>
<li class="life_event active">
<div class="event_icn icon-address"></div>
<div class="event_content">
<h2>001 Король-лягушонок или <a href="#">Железный Генрих</a></h2>
<p>
В стародавние времена, когда заклятья ещё помогали, жил-был на свете король; все дочери были у него красавицы, но самая младшая была так прекрасна, что даже солнце, много видавшее на своем веку, и то удивлялось, сияя на её лице.

</p>

</div>
<div class="event_date">
25/07/99999
<a href="#">Persones</a>, <a href="">Persones</a>,<a href="">Persones</a>
</div>
</li>

<li class="life_event">
<div class="event_icn icon-address"></div>
<div class="event_content">
<h2>002 Дружба кошки и мышки</h2>
<p>
Кошка познакомилась с мышкой и столько пела ей про свою великую любовь и дружбу, что мышка наконец согласилась поселиться с нею в одном доме и завести общее хозяйство. "Да, вот к зиме нужно бы нам наготовить припасов, а не то голодать придется, - сказала кошка. - Ты, мышка, не можешь ведь всюду ходить. Того гляди, кончишь тем, что в мышеловку угодишь."
</p>
</div>
<div class="event_date">
25/07/1995
</div>
</li>

<li class="education_event">
<div class="event_icn icon-graduation-cap"></div>
<div class="event_content">
<h2>003 Дитя Марии (Приемыш Богоматери)</h2>
<p>
На опушке большого леса жил дровосек со своею женой, и было у них единственное дитя трехлетняя девочка. Были они так бедны, что даже без хлеба насущного сиживали и не знали, чем прокормить ребенка..
</p>
</div>
<div class="event_date">
01/09/1997
</div>
</li>

<li class="work_event">
<div class="event_icn icon-briefcase"></div>
<div class="event_content">
<h2>004 Сказка о том, кто ходил страху учиться</h2>
<p>
Один отец жил с двумя сыновьями. Старший был умен, сметлив, и всякое дело у него спорилось в руках, а младший был глуп, непонятлив и ничему научиться не мог.<br>
Люди говорили, глядя на него: "С этим отец еще не оберется хлопот!" Когда нужно было сделать что-нибудь, все должен был один старший работать; но зато он был робок, и когда его отец за чем-нибудь посылал позднею порой, особливо ночью, и если к тому же дорога проходила мимо кладбища или иного страшного места, он отвечал: "Ах, нет, батюшка, не пойду я туда! Уж очень боязно мне."
</p>
</div>
<div class="event_date">
07/2000 - 07/2003
</div>
</li>

<li class="user_event">
<div class="event_icn icon-user"></div>
<div class="event_content">
<h2>005 Волк и семеро козлят</h2>
<p>
Жила-была старая коза. Было у ней семеро козлят, и она их так любила, как может любить своих детей только мать. Раз собралась она идти в лес, корму принести; вот созвала она всех своих семерых деток и говорит:
</p>
</div>
<div class="event_date">
Дата
</div>
</li>

<li class="education_event">
<div class="event_icn icon-graduation-cap"></div>
<div class="event_content">
<h2>003 Дитя Марии (Приемыш Богоматери)</h2>
<p>
На опушке большого леса жил дровосек со своею женой, и было у них единственное дитя трехлетняя девочка. Были они так бедны, что даже без хлеба насущного сиживали и не знали, чем прокормить ребенка..
</p>
</div>
<div class="event_date">
01/09/1997
</div>
</li>

</ul>
</div>

[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться172023-01-28 15:08:33

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
/* import font(s) */
@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,900");

/* detail root variables
--color-theme cascades to most html elements, and will be later updated in JavaScript
*/
:root {
--font: "Alegreya Sans SC", sans-serif;
--color-bg: #000b14;
--color-theme: #70a9fe;
}

/* heading centered atop the page */
h17 {
text-align: center;
margin: 1rem 0 0;
font-size: 3rem;
transition: all 0.25s ease-in-out;
display: block;
position: absolute;
right: 110px;
top: 160px;
border: 3px solid currentColor;
padding: 10px;
background: #fff;
color: var(--color-theme);
}
/* shown/hidden through an dedicated class */
h17.isHidden {
opacity: 0;
visibility: hidden;
transform: translateY(-1rem) scale(0);
}

/* wheel positioned to the left of the page, and occupying 50% of whichever dimension is the biggest */
svg#wheel {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 500px;
height: 500px;
}

/* arrow positioned to the right of the wheel, and pointing at the very middle section */
svg#pin {
position: absolute;
left: 500px;
width: calc(50vmax / 25);
height: calc(50vmax / 25);
top: 50%;
transform: translateY(-50%);
fill: var(--color-theme);
}

/* instructions displayed on the right side, in a single column layout */
.instructions {
min-height: 600px;
color: var(--color-theme);
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding: 1rem;
}
.instructions h2 {
font-size: 1rem;
letter-spacing: 0.1rem;
position: relative;
}
/* beside a silly exclamation point add a simple word in the middle of the sentence hinting at the innocent nature of the project */
.instructions h2:after {
content: "!";
}
.instructions h2:before {
position: absolute;
content: "suspicious";
font-size: 0.75rem;
opacity: 0.6;
bottom: 100%;
left: 50%;
transform: translateX(-50%) rotate(-12deg);
}

.instructions button {
margin-top: 1rem;
padding: 0.25rem 0.75rem;
font-size: 1.55rem;
font-family: inherit;
color: inherit;
border: none;
border-radius: 10px;
box-shadow: 0 0 0 2px currentColor;
background: var(--color-bg);
/* transition for a simple hover and active state */
transition: all 0.5s ease-out;
}
.instructions button:hover {
box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 3px currentColor,
0 0 0 5px var(--color-bg), 0 0 0 7px currentColor;
}
.instructions button:active {
box-shadow: 0 0 0 2px currentColor, 0 0 0 4px var(--color-bg),
0 0 0 6px currentColor;
transform: scale(0.95) translateY(0.1rem);
}
/* cursor customized to grab, and not allowed when the wheel is spinning (class added in JS) */
.instructions button,
svg#pin {
cursor: grab;
}
.instructions button.isSpinning,
svg#pin.isSpinning {
cursor: not-allowed;
}
/*
animation for the pin, to have it soundly move up and down alongside the spinning wheel
the duration of the animation is customized in JS to have it run a certain number of times
*/
@keyframes pinWheel {
33% {
transform: translateY(-50%) rotate(-10deg);
}
67% {
transform: translateY(-50%) rotate(10deg);
}
}

</style>
<script>
// target the SVG and the pin right next to it
const containerSlices = document.querySelector('g#slices');
const pin = document.querySelector('svg#pin');

// immediately add simple dots around the wheel
for (let i = 0; i < 48; i += 1) {
const transform = `rotate(${360 / 48 * i}), translate(0 -49.5), rotate(${-360 / 48 * i})`;
const dot = `<circle r="0.5" cx="50" cy="50" fill="currentColor" transform="${transform}"/>`;
containerSlices.innerHTML += dot;
}

// target the heading and the button
const heading = document.querySelector('h17');
const spinButton = document.querySelector('button');

// variable updated for the timeout
let timeoutID = 0;

// utility functions returning a random integer in a range and a random hex value
const randomInt = (min = 0, max = 16) => Math.floor(Math.random() * (max - min) + min);
const randomHex = () => randomInt().toString(16);

// object used throughout the script, describing the colors and 3 particular rotation values
// the idea is to include the three slices aroud the wheel and have the arrow point always at one of them
const suspicious = [
{
rotation: 45,
color: 'A2CCB6'
},
{
rotation: 180,
color: 'FCEEB5'
},
{
rotation: 315,
color: 'EE786E'
}
];

// add a random fill color to the circle behind the slices
let randomFill = '';
for (let i = 0; i < 6; i += 1) {
randomFill += randomHex();
}
document.querySelector('svg circle#slice').style.fill = randomFill;

// create the slices, 24 in total, using a bit of trigonometry to compute the appropriate arc coordinates
for (let i = 360; i > 0; i -= 15) {
// values for the path element
const xCoor = 50 + Math.sin(i * Math.PI / 180) * 47;
const yCoor = 50 - Math.cos(i * Math.PI / 180) * 47;
const flags = i > 180 ? '0 1 1' : '0 0 1';

// initialize a variable for the fill color
let fill = '';
// create six random hex values for the fill color
// ! the look might be rather jarring
for (let j = 0; j < 6; j += 1) {
fill += randomHex();
}
// if the de-cremented variable matches the arbitrary rotation value of one of the objects, find the specific object
const suspect = suspicious.find(pairing => pairing.rotation === i);
// if existing, substitute the random hex with the value specified in said object
if (suspect) {
fill = suspect.color;
}

// create the path element and append it to the SVG container
const path = `
<path d="M 50 50 L 50 3 A 47 47 ${flags} ${xCoor} ${yCoor}" fill=#${fill} />
`;
containerSlices.innerHTML += path;
}

// function spinning the wheel
function spinWheel() {
// remove the event listener from the button and the wheel, to avoid running the function twice at the same time
spinButton.removeEventListener('click', spinWheel);
pin.removeEventListener('click', spinWheel);

// immediately hide the heading showing the matching color
heading.classList.add('isHidden');
// add a class to the pin and the button to show how they should not be clicked
pin.classList.add('isSpinning');
spinButton.classList.add('isSpinning');

// create variables for the duration of the rotation, as whell as the number of rotations achieved by the wheel
const randomDuration = randomInt(4, 10);
const randomRotate = randomInt(10, 20);
// crate a variable to pick from one of the objects at random
const randomSuspect = randomInt(0, 3);

// apply the transition and the transform properties
containerSlices.style.transformOrigin = '50%';
containerSlices.style.transition = `transform ${randomDuration}s ease-out`;
/* for the rotation, beside an arbitrary x360 rotation, remember to
- add 90 to match the position of the arrow (to the very right of the wheel)
- subtract the rotation of the slices
- add up to a slice as to have the arrow point within the slice's boundaries
*/
containerSlices.style.transform = `rotate(${randomRotate * 360 - suspicious[randomSuspect].rotation + 90 + randomInt(0, 360 / 24)}deg)`;

pin.style.animation = `pinWheel ${randomDuration / 10}s 10 ease-in-out`;

// after the time allocated for the rotation show the heading with the "random" color, update the custom property with its value
timeoutID = setTimeout(() => {
heading.textContent = `#${suspicious[randomSuspect].color}`;
heading.classList.remove('isHidden');
pin.style.animation = '';
document.documentElement.style.setProperty('--color-theme', `#${suspicious[randomSuspect].color}`);

// remove the class on the pin and button showing the forbidden cursor
pin.classList.remove('isSpinning');
spinButton.classList.remove('isSpinning');

// reset the event listener on the button and the pin
spinButton.addEventListener('click', spinWheel);
pin.addEventListener('click', spinWheel);

// clear the interval and set the boolean back to false
clearInterval(timeoutID);
}, randomDuration * 1000);
}

// attach a click event listener on the button, at which point call the spinWheel function
spinButton.addEventListener('click', spinWheel);

// call the same function when pressing the pin
pin.addEventListener('click', spinWheel);

</script>

<h17 class="isHidden" style="user-select: all;">#ffffff00</h17>

<div class="instructions">
<h2>Spin that color <span>wheel</span></h2>
<button>Spin!</button>
</div>
[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться182023-01-28 15:22:41

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
#container{
text-align:center;
width:340px;
height:480px;
margin:auto;
position:relative;
background:#006f81;
}
#menu{
padding-top:10px;
padding-left:20px;
font-size:55px;
width:100%;
}
#game{
padding-top:10px;
font-size:55px;
width:100%;
display:none;
}
#opcje{
padding-top:10px;
font-size:55px;
width:100%;
display:none;
}
#autor{
font-size:55px;
width:100%;
display:none;
}
.txt{
font-size:24px;
width:80%;
margin:auto;
}
.txt a{
text-decoration:none;
color:#000;
}
svg line{
stroke:#000;
stroke-width:5
}
#back{
text-align:center;
width:140px;
margin:auto;
background-color: #008499;
color: white;

font-size:24px;
cursor:pointer;
display:none;
}
#back:hover{
background-color:#4c9aa6;
}
#pass{
font-size:24px;
width:250px;
margin:5px auto 5px auto;
border-radius:10px;
background-color:#008499;
border: 1px black;
padding:4px 0;
cursor:default;
}
.title{
color:#ededed;
width:340px;
font-size:48px;
font-family:nosifer;
}
ul{
list-style-type: none;
margin:auto;
margin-top: 0;
width: 300px;
padding:0;
}
li a, li a.lock:hover{
width: 300px;
position:relative;
left:0;
font-size:24px;
margin:5px 0;
display: block;
color: white;
padding: 6px 0 6px 0;
text-decoration: none;
background-color: #005968;
cursor:pointer;
border-radius:5px;
}
li a:hover {
background-color:#008499
;
color: white;
width: 320px;
position:relative;
left:-10px;
cursor:hand;
}
li a.lock{
opacity:0.5;
}
#alphabet{
color:#fff;
font-size:18px;
margin: auto;
margin-bottom:5px;
display: flex;
flex-wrap: wrap;
width:90%;
justify-content: center;
}
#alphabet span{
background-color:#008499;
margin: 3px 5px;
height:25px;
width:25px;
padding:4px;
border-radius:30%;
cursor:pointer;
}

.red{
opacity:0.4 !important;
background:red !important;
}
.green{
opacity:0.4 !important;
background:lime !important;
}
#svg{
margin:auto;
background-color:#008499;
width:280px;
height:220px;
}
svg{
position:absolute;
left:50px;
}
.tb1{
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
stroke-linecap:round;
}
@keyframes dash {
to { stroke-dashoffset: 0; }
}
#stickman{
position:absolute;
left:190px;
bottom:0;
cursor:pointer;
}
@keyframes jmp{
0% { }
11%{ transform: rotate(270deg); bottom:30px; left:260px;}
22%{ transform: rotate(450deg); bottom:100px; left:0;}
33%{ transform: rotate(630deg); bottom:150px; left:260px;}
44%{ transform: rotate(810deg); bottom:210px; left:0;}
55%{ transform: rotate(990deg); bottom:250px; left:260px;}
66%{ transform: rotate(1170deg); bottom:200px; left:0;}
77%{ transform: rotate(1350deg); bottom:150px; left:260px;}
88%{ transform: rotate(1530deg); bottom:40px; left:0;}
100%{ transform: rotate(1800deg); }
}
</style>
<script>
errors=0;
pkt=0;
toggle=0;
word = [
"слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово", "слово"
];

$(document).ready(function(){
$("#alphabet span").click(function(){
var input = $(this).html();
var styyl = $(this).attr("id");
check(input, styyl);
});
});
function gra(){
startgame();
startpass();
hide();
$("#menu").hide();
$("#game").show();
$(".title").hide();
$("#back").toggle();
}
function showMenu() {
$("#menu").show();
$("#game").hide();
$("#opcje").hide();
$("#autor").hide();
$(".title").show();
$("#back").toggle();

}
function showOptions() {
$("#back").toggle();
$("#menu").hide();
$("#opcje").show();
}
function showInfo() {
$("#back").toggle();
$("#menu").hide();
$("#autor").show();
}
function exit(){
c=confirm("Are you sure?");
if (c==true){
window.location.href = "#";
}
}
function hide() {
$("#svg svg").hide();
}
function startpass(){
boxy = new Array();
hiden="";
hub=wordp;
i=hub.length;
for(i=0; i<hub.length; i++)
{
hiden=hiden+"*";
boxy[i]="*";
}
$("#pass").text(hiden);
}
function startgame(){
errors=0;
n=Math.floor(Math.random() * 110);
wordp=word[n];
clearAlphabet();
}
function jump(){
if(toggle==0){
$("#stickman").css("animation","jmp 4s ease-out ");
toggle=1;
}
else{
$("#stickman").css("animation","none");
toggle=0;
}
}

function win(){
if(hiden==wordp){
window.setTimeout(wygrana, 600);
}
}
</script>

<html>
<head>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<title>Виселица</title>
</head>

<body onselectstart="return false">

<div class="container">
<div id="container">
<div class="title">ВИСЕЛИЦА</div>

<div id="menu">
<div id="opt">
<ul>
<li><a onClick="gra();" id="play">ИГРАТЬ</a></li>
<li><a onClick="showInfo();" id="auth">ИНФОРМАЦИЯ</a></li>
<li><a onClick="exit();" id="exit">ВЫХОД</a></li>
</ul>
</div>
<svg id="stickman" onclick="jump()" width="80px" height="100px">
<circle cx="40" cy="20" r="13" stroke="black" stroke-width="5" fill="white" />
<line x1="40" y1="35" x2="40" y2="70" />
<line x1="40" y1="50" x2="10" y2="20" />
<line x1="40" y1="50" x2="70" y2="20" />
<line x1="40" y1="70" x2="20" y2="100" />
<line x1="40" y1="70" x2="60" y2="100" />
</svg>
</div>

<div id="game">
<div id="svg">
<svg id="t1" width="280px" height="250px" style="display:none">
<line class="tb1" x1="20" y1="200" x2="20" y2="20" />
</svg>
<svg id="t2" width="280px" height="250px" style="display:none">
<line class="tb1" x1="20" y1="20" x2="160" y2="20" />
</svg>
<svg id="t3" width="280px" height="250px" style="display:none">
<line class="tb1" x1="21" y1="160" x2="60" y2="200" />
</svg>
<svg id="t4" width="280px" height="250px" style="display:none">
<line class="tb1" x1="20" y1="50" x2="50" y2="20" />
</svg>
<svg id="t5" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="20" x2="140" y2="50" />
</svg>
<svg id="t6" width="280px" height="250px" style="display:none">
<circle class="tb1" cx="140" cy="50" r="15" stroke="black" stroke-width="5" fill="white" />
</svg>
<svg id="t7" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="65" x2="140" y2="100" />
</svg>
<svg id="t8" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="70" x2="120" y2="100" />
</svg>
<svg id="t9" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="70" x2="160" y2="100" />
</svg>
<svg id="t10" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="100" x2="120" y2="130" />
</svg>
<svg id="t11" width="280px" height="250px" style="display:none">
<line class="tb1" x1="140" y1="100" x2="160" y2="130" />
</svg>
</div>
<div id="pass"></div>
<div id="alphabet">
<span id="а">а</span><span id="б">б</span>
<span id="в">в</span><span id="г">г</span>
<span id="д">д</span><span id="и">и</span>
<span id="к">к</span><span id="л">л</span>
<span id="м">м</span><span id="н">н</span>
<span id="о">о</span><span id="п">п</span>
<span id="р">р</span><span id="с">с</span>
<span id="т">т</span><span id="у">у</span>
<span id="ф">ф</span><span id="х">х</span>
<span id="ц">ц</span><span id="ш">ш</span>
<span id="щ">щ</span><span id="ы">ы</span>
<span id="ь">ь</span><span id="ъ">ъ</span>
<span id="э">э</span><span id="ю">ю</span>
<span id="я">я</span>
</div>
</div>

<div id="opcje">
<div id="opt">
<ul>
<li><a class="lock" id="lang">LANGUAGE</a></li>
<li><a class="lock" id="sound">DIFFICULTY</a></li>
<li><a class="lock" id="login">LOGIN</a></li>
</ul>
</div>
</div>

<div id="autor">
<div class="txt">
Виселица ...
<br>
<p>©Автор<br>AOULI Oussama<a target='_blank' href='#'></a></p>
</div>
</div>

</html>
[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться192023-01-29 13:28:36

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
#container3 {
margin: 3em auto;
width: 90%;
text-align: center;
}
.item {
margin: 2em;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 20px;
transform: rotate(45deg);
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
padding:0;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin: 0 auto;
}
.item p {
position: absolute;
transform: rotate(-45deg);
top: 30%;
left: -20%;
background: rgba(0, 0, 0, 0.7);
padding: 2px!important;
width:130%;
text-align:center;
color: #fff;
transition: all 0.3s ease-in-out;
}

.item a {
color: #4f99d6;
white-space: break-spaces;
font-size: 16px;
}
.item:hover {
transform: none;
transform: scale(1.5);
z-index:2;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.item:hover > p {
transform: none;
top: 0;

}

img {
width: 100%;
height: 100%;
transition: 0.3s linear;
transform: rotate(-45deg) scale(1.4)

}
.item:hover > img {
transform: none;

}

</style>
<script>

</script>

<div id='container3'>
<div class="item tm1">
<img src="https://i.pinimg.com/736x/19/c1/ee/19c1ee1cf4832fd108b8160e6089da8d.jpg">
<p>Lorem Ipsum</p>
</div>
<div class="item tm2">
<img src="https://i.pinimg.com/736x/19/c1/ee/19c1ee1cf4832fd108b8160e6089da8d.jpg">
<p>Lorem Ipsum</p>
</div>

<div class="item tm3">
<img src="https://i.pinimg.com/736x/19/c1/ee/19c1ee1cf4832fd108b8160e6089da8d.jpg">
<p>Lorem Ipsum</p>
</div>

<div class="item tm4">
<img src="https://i.pinimg.com/736x/19/c1/ee/19c1ee1cf4832fd108b8160e6089da8d.jpg">
<p>Major Tourist Attractions In Morocco</p>
</div>

<div class="item tm5">
<img src="https://i.pinimg.com/736x/19/c1/ee/19c1ee1cf4832fd108b8160e6089da8d.jpg">
<p><a href="#">Ссылка куда-то</a></p>
</div>

<div class="item tm5">
<img src="https://i.pinimg.com/736x/19/c1/ee/19c1ee1cf4832fd108b8160e6089da8d.jpg">
<p>Чистый текст</p>
</div>

</div>
[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться202023-02-06 20:54:58

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
.face{
margin: 0;
min-height: 200px;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 30px;
background: #E0E4CC;
}

.face img {
--s: 100px; /* image size */
--b: 2px; /* border thickness */
--c: #ae3ec9; /* border color */
--cb: #e9ecef; /* background color */
--f: 1; /* initial scale */

width: var(--s);
height: 100%;
aspect-ratio: 1;
padding-top: calc(var(--s)/5);
cursor: pointer;
border-radius: 0 0 999px 999px;
--_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
--_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
outline: var(--b) solid var(--c);
outline-offset: var(--_o);
background:
radial-gradient(
circle closest-side,
var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000
) var(--_g);
-webkit-mask:
linear-gradient(#000 0 0) no-repeat
50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
transform: scale(var(--f));
transition: .5s;
}
.face img:hover {
--f: 1.4; /* hover scale */
}

</style>

[/html]

Подпись автора: "You don't need to be protected,
Because nothing shocks you any more." © Mesh

0

Поделиться212023-02-06 20:55:59

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

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

:root {
font-size:0.625em;
}

/*
Counters
*/

.menu ol {
counter-reset:menu;
}

/*
Regular menu items
*/

.menu-item a {
display:flex;
justify-content:flex-start; /*shrink towards text*/
color:currentColor;
text-decoration:none;
padding:0.3rem 0; /* avoid flickin' */
order:0;
}

.menu-item a::before { /* dots */
content:"";
display:block;
border-bottom:1px dotted black;
position:relative; top:-3px;
flex:1 1 auto;
margin:0 1rem;
order:1;
}

.menu-item a::after { /* item ids */
counter-increment:menu;
content:counters(menu, ".");
flex:0 0 auto;
order:2;
transform:rotate(30deg)scale(1.2);
text-decoration:underline;
}

/*
Sub menu & items
*/

.sub-menu {
font-size:1.6rem;
font-weight:normal;
}

.sub-menu > li > a {
text-indent:0ch; /*
Chrome indentS the "dots" elm, i.e. it counts pseudo-elm.
FF and Edge indents first non pseudo-elm.
Turn it off for consistency.
*/
padding:0.5rem 0 0.5rem 2ch;
margin:0;
}

/*
Main menu
*/

.menu {
width:22vw;
min-width:20ch;
display:flex;
flex-flow:column nowrap;
font:bold 2.4rem/1 'IM Fell English SC', serif;
position:relative;
transform:rotate(-30deg);
background: #ccc;
padding-right: 20px;
margin: 100px;
}

.menu::before {
content:"/";
align-self:center;
transform:rotate(30deg);
margin-bottom:1rem;
}

.menu::after {
content:"/";
align-self:center;
transform:rotate(30deg);
margin-top:1rem;
}

/*
Fx
*/

.menu { transition:transform 0.3s; }
.menu:hover { transform:rotate(0); }

.menu::before { transition:transform 0.5s; }
.menu:hover::before { transform:rotate(0); content:"__"; }
.menu::after { transition:transform 0.5s; }
.menu:hover::after { transform:rotate(0); content:"__"; }

.menu .menu-item a::after { transition:transform 0.3s }
.menu:hover .menu-item a::after { transform:rotate(0) }

.menu:hover > ol > .menu-item { opacity:0.3; }

.menu-item:hover {
transition:background-color 0.3s;
background:rgba(255,255,0,0.15);
opacity:1 !important;
}

.menu-item:hover a::after {
text-decoration:none;
}

.menu-item:hover > a::before {
transition:flex-grow 0.3s;
width:0; flex-grow:0;
transform-origin:center bottom;
}

/*
Collapse
*/

.sub-menu > .menu-item {
max-height:1ch;
transform:scaleY(0.1);
transform-origin:center top;
transition:transform 0.2s, max-height 0.5s;
}

.menu:hover .sub-menu .menu-item {
max-height:10em;
transform:scaleY(1);
}
</style>

<container style="height:500px;display:block">
<nav class="menu">
<ol>
<li class="menu-item"><a href="#0">Home</a></li>
<li class="menu-item"><a href="#0">About</a></li>
<li class="menu-item">
<a href="#0">Widgets</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Big Widgets</a></li>
<li class="menu-item"><a href="#0">Bigger Widgets</a></li>
<li class="menu-item"><a href="#0">Huge Widgets</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Kabobs</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Shishkabobs</a></li>
<li class="menu-item"><a href="#0">BBQ kabobs</a></li>
<li class="menu-item"><a href="#0">Summer kabobs</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Contact</a></li>
</ol>
</nav>
</container>
[/html]

0

Поделиться222023-02-21 14:33:35

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
h71 {
font-size: 26px;
text-align: center;
font-weight: 300;
margin-bottom: 10px;
font-family: Arial, sans-serif;
text-align: center;
display: block;
background: #a6a5d1;
color: #470a63;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
background: white;
height: 40px;
line-height: 40px;
color: #666;
}

li:nth-child(2n) {
background-color: #f7f7f7;
}

#container {
background: #f7f7f7;
width: 360px;
margin: 100px auto;
box-shadow: 0 0 3px rgba(0, 0, 0.1);
}

.completed {
color: lightslategray;
text-decoration: line-through;
}

.blue {
color: blue;
}

span {
background-color: #e74c3c;
margin-right: 20px;
height: 40px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}

li:hover span {
width: 40px;
opacity: 1;
}

.fa-plus {
float: right;
}

</style>
<script>
//check off simple todo by clicking

$("ul").on("click", "li", function() {
$(this).toggleClass("completed")
});

$("ul").on("click", "span", function() {
$(this).parent().fadeOut(500, function() {
$(this).remove();

});

event.stopPropagation();
});

</script>

<div id="container">
<h71>Вы приняты </h71>
<ul>
<li><span><i class="fa fa-trash-o"></i></span>1. Пройти регистрацию</li>
<li><span><i class="fa fa-trash-o"></i></span>2. Написать анкету</li>
<li><span><i class="fa fa-trash-o"></i></span>3. Порадоваться жизни </li>
<li><span><i class="fa fa-trash-o"></i></span>4. Закончить с этим</li>
<li><span><i class="fa fa-trash-o"></i></span>5. Заполнить профиль</li>
</ul>

</div>

[/html]

0

Поделиться232023-02-21 14:35:45

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
@import url(https://code.ionicframework.com/ionicon … ns.min.css);
.snip1434 {
font-family: 'Raleway', Arial, sans-serif;
border: none;
border-radius: 5px;
overflow: hidden;
color: #ffffff;
cursor: pointer;
padding: 0px 5px 0px 50px;
text-align: center;
display: inline-block;
margin: 12px 25px;
font-weight: 600;
outline: none;
position: relative;
font-size: 10px;
line-height: 35px;
background-color: #8a1a32;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.snip1434 i {
font-size: 4em;
width: 55px;
line-height: 50px;
position: absolute;
left: -13px;
top: 5px;
-webkit-transform: rotate(-25deg) scale(1);
transform: rotate(-25deg) scale(1);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.snip1434:hover,
.snip1434.hover {
color: #ffffff;
background-color: #ac203f;
cursor: url(http://s1.iconbird.com/ico/0512/32pxman … misc57.png), pointer;
}
.snip1434:hover i,
.snip1434.hover i {
-webkit-transform: rotate(-20deg) scale(1.3);
transform: rotate(-20deg) scale(1.3);
cursor: url(http://s1.iconbird.com/ico/0512/32pxman … misc57.png), pointer;
}

</style>

<button class="snip1434">Подписаться<i class="ion-settings"></i></button>
<button class="snip1434">Открыть<i class="ion-clipboard"></i></button>
<button class="snip1434">Добавить<i class="ion-stats-bars"></i></button>
<button class="snip1434">Удалить<i class="ion-person-stalker"></i></button>

[/html]

0

Поделиться242023-02-27 22:03:42

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
:root {
--bg1: url('https://i.pinimg.com/originals/bf/78/35/bf78358ddb423e409345ef9006c3415f.gif');
--bg2: url('https://i.pinimg.com/originals/18/b7/e5/18b7e55e0116dda0770a062cb8bacfdd.gif');
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

.container > div {
cursor: pointer;
height: 210px;
background-size: cover;
background-attachment: fixed;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #ccc;
transition: all 0.5s ease-in;
}

.container > div:hover {
opacity: 0.7;
transform: scale(0.98);
}

.container > div:nth-of-type(1) {
grid-column: 1 / 3;
}

.container > div:nth-of-type(6) {
grid-column: 3 / 5;
}

.container > div:nth-of-type(9) {
grid-column: 3 / 5;
}

.container > div:nth-of-type(10) {
grid-column: 1 / 3;
}

.bg1 {
background: var(--bg1);
}

.bg2 {
background: var(--bg2);
color: #333;
}

</style>
<script>

</script>
<div class="container">
<div class="bg1">
<h2>16 <span>| 24</span></h2>
<p>Goals Completed</p>
</div>
<div class="bg1">
<h2><i class="fas fa-battery-three-quarters"></i></h2>
<p>Respiration</p>
</div>
<div class="bg2">
<h2><i class="fas fa-running"></i></h2>
<p>Miles</p>
</div>
<div class="bg1">
<h2>36 °</h2>
<p>Temperature</p>
</div>
<div class="bg1">
<h2><i class="fas fa-bed"></i></h2>
<p>Sleep Keep</p>
</div>
<div class="bg2">
<h2>98 <span>bpm</span></h2>
<p>Heart Rate</p>
</div>
<div class="bg1">
<h2>170 <span>lbs</span></h2>
<p>Weight</p>
</div>
<div class="bg1">
<h2>28 <span>%</span></h2>
<p>Fat Percentage</p>
</div>
<div class="bg2">
<h2>118 <span>mgdl</span></h2>
<p>Blood Glucose</p>
</div>
<div class="bg2">
<h2>680 <span>kcal</span></h2>
<p>AVG Consumption</p>
</div>
<div class="bg2">
<h2><i class="fas fa-dumbbell"></i></h2>
<p>Workouts</p>
</div>
<div class="bg2">
<h2>85 <span>%</span></h2>
<p>Body Hydration</p>
</div>
</div>
[/html]

0

Поделиться252023-02-27 22:19:48

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
.container{
display:flex;
align-items: center;
justify-content: center;
height:100%;
background: #3d3d3d;
}
.clip-text {
padding:10px;
background: url(https://media.tenor.com/y6VDziqkACsAAAAC/fast-city.gif);
background-size: cover;
background-position: center;
-webkit-background-clip: text;
color: #00000047;
text-transform:uppercase;
font-size: 80px;
font-weight: 900;
letter-spacing:1px;
user-select:none;
border-top: solid 10px #00000057;
border-bottom: solid 10px #00000057;
text-align:center;
}
</style>
<div class="container">
<h1 class="clip-text" style="font-size: 10em; font-weight: 900;">
Road Trip
</h1>
</div>

[/html]

0

Поделиться262023-03-01 13:07:05

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<main>
<style>
*{
box-sizing:border-box;
}
body{
background-color:#abd9e9;
font-family:Arial;
}
#container{
background:#eff3f7;
margin:0 auto;
font-size:0;
border-radius:5px;
overflow:hidden;
}
aside{
width:260px;
height:800px;
background-color:#3b3e49;
display:inline-block;
font-size:15px;
vertical-align:top;
}
main{
/* width:490px; */
height:800px;
font-size:15px;
vertical-align:top;
}

aside ul{
padding-left:0;
margin:0;
list-style-type:none;
overflow-y:scroll;
height:690px;
}
aside li{
padding:10px 0;
}
aside li:hover{
background-color:#5e616a;
}
h2,h3{
margin:0;
}
aside li img{
border-radius:50%;
margin-left:20px;
margin-right:8px;
}
aside li div{
display:inline-block;
vertical-align:top;
margin-top:12px;
}
aside li h2{
font-size:14px;
color:#fff;
font-weight:normal;
margin-bottom:5px;
}
aside li h3{
font-size:12px;
color:#7e818a;
font-weight:normal;
}

#chat{
padding-left:0;
margin:0;
list-style-type:none;
overflow-y:scroll;
height: 500px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
background: #fff;
}
#chat li{
padding:10px 30px;
}
#chat h2,#chat h3{
display:inline-block;
font-size:13px;
font-weight:normal;
}
#chat h3{
color:#bbb;
}
#chat .entete{
margin-bottom:5px;
}
#chat .message{
padding:20px;
color:#fff;
line-height:25px;
max-width:90%;
display:inline-block;
text-align:left;
border-radius:5px;
}
#chat .me{
text-align:right;
}
#chat .you .message{
background-color:#58b666;
}
#chat .me .message{
background-color:#6fbced;
}
#chat .triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
}
#chat .you .triangle{
border-color: transparent transparent #58b666 transparent;
margin-left:15px;
}
#chat .me .triangle{
border-color: transparent transparent #6fbced transparent;
margin-left:375px;
}

</style>
<ul id="chat">
<li class="you">
<div class="entete">
<h2>Контакт 1</h2>
<h3>10:12, Сегодня</h3>
</div>
<div class="triangle"></div>
<div class="message">Добрый день, юнная леди, вы занимаетесь любовью с незнакомцами?</div>
</li>
<li class="me">
<div class="entete">
<h2>Арчер</h2>
<h3>10:12, Сегодня</h3>
</div>
<div class="triangle"></div>
<div class="message">
Конечно нет!
</div>
</li>
<li class="you">
<div class="entete">
<span class="status green"></span>
<h2>Контакт 1</h2>
<h3>10:13, Сегодня</h3>
</div>
<div class="triangle"></div>
<div class="message">
Тогда позвольте представиться...
</div>
</li>

</ul>

</main>
[/html]

0

Поделиться272023-03-01 13:19:56

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<main>
<style>
#container{
background:#eff3f7;
margin:0 auto;
font-size:0;
border-radius:5px;
overflow:hidden;
}
aside{
width:260px;
height:800px;
background-color:#3b3e49;
display:inline-block;
font-size:15px;
vertical-align:top;
}
main{
/* width:490px; */
height:800px;
font-size:15px;
vertical-align:top;
}

aside ul{
padding-left:0;
margin:0;
list-style-type:none;
overflow-y:scroll;
height:690px;
}
aside li{
padding:10px 0;
}
aside li:hover{
background-color:#5e616a;
}
h2,h3{
margin:0;
}
aside li img{
border-radius:50%;
margin-left:20px;
margin-right:8px;
}
aside li div{
display:inline-block;
vertical-align:top;
margin-top:12px;
}
aside li h2{
font-size:14px;
color:#fff;
font-weight:normal;
margin-bottom:5px;
}
aside li h3{
font-size:12px;
color:#7e818a;
font-weight:normal;
}

#chat{
padding-left:0;
margin:0;
list-style-type:none;
overflow-y:scroll;
height: 500px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
background: #fff;
}
#chat li{
padding:10px 30px;
}
#chat h2,#chat h3{
display:inline-block;
font-size:13px;
font-weight:normal;
}
#chat h3{
color:#bbb;
}
#chat .entete{
margin-bottom:5px;
}
#chat .message{
padding:20px;
color:#fff;
line-height:25px;
max-width:90%;
display:inline-block;
text-align:left;
border-radius:5px;
}
#chat .me{
text-align:right;
}
#chat .you .message{
background-color:#58b666;
}
#chat .me .message{
background-color:#6fbced;
}
#chat .triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
}
#chat .you .triangle{
border-color: transparent transparent #58b666 transparent;
margin-left:15px;
}
#chat .me .triangle{
border-color: transparent transparent #6fbced transparent;
margin-left:375px;
}

</style>

<ul id="chat">
<li class="you">
<div class="entete">
<h2>Контакт 1</h2>
<h3>10:12, Сегодня</h3>
</div>
<div class="triangle"></div>
<div class="message">Добрый день, юнная леди, вы занимаетесь любовью с незнакомцами?</div>
</li>
<li class="me">
<div class="entete">
<h2>Арчер</h2>
<h3>10:12, Сегодня</h3>
</div>
<div class="triangle"></div>
<div class="message">
Конечно нет!
</div>
</li>
<li class="you">
<div class="entete">
<span class="status green"></span>
<h2>Контакт 1</h2>
<h3>10:13, Сегодня</h3>
</div>
<div class="triangle"></div>
<div class="message">
Тогда позвольте представиться...
</div>
</li>

</ul>

</main>
[/html]

0

Поделиться282023-05-04 10:49:45

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
h5 {
opacity: 0.66;
font-weight: normal;
font-size: 1.25rem;
}

.container {
position: relative;
width: 430px;
height: 350px;
margin: 50px auto;
background: #fafafa;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
}

.time {
padding: 10px;
display: flex;
justify-content: space-around;
}

.time-item {
flex: 1 1 auto;
border-radius: 5px;
margin-right: 5px;
height: 10px;
background-color: rgba(0,0,0,0.10);
position: relative;
overflow: hidden;
}

.time-item:last-child {
margin-right: 0;
}

.time-item > div {
position: absolute;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}

.content {
position: absolute;
height: 350px;
width:430px;
background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(0,0,0,0.15) 100%);

display: flex;
flex-direction: column;
justify-content: flex-end;
}
.texts {
padding: 7%;
}

#back, #next {
position: absolute;
top: 0;
}

#back {
left: 0;
height: 100%;
width: 50%;
}

#next {
left: 50%;
height: 100%;
width: 50%;
}

</style>
<script>

const stories = [
{
title: 'Story 1',
description: 'description 1',
image: 'https://i.pinimg.com/736x/2e/be/62/2ebe623d6d27d70ea13731a01b4210e9.jpg',
time: 3500
},
{
title: 'Story 2',
description: 'description 2',
image: 'https://i.pinimg.com/736x/7c/f8/18/7cf818809ed21f9d21263b8a8417d504.jpg',
time: 4000
},{
title: 'Story 3',
description: 'description 3',
image: 'https://i.pinimg.com/736x/b7/7b/e1/b77be1a020e21187490bb65859d2832c.jpg',
time: 2500
},
{
title: 'Story 4',
description: 'description 4',
image: 'https://i.pinimg.com/736x/8d/77/5e/8d775e040b58466a44518ad6b5c2a678.jpg',
time: 7500
}
]

const container = document.querySelector('.container')
const nextButton = document.querySelector('#next')
const backButton = document.querySelector('#back')

function Storyfier(storiesArray, rootEl) {
this.stories = storiesArray
this.root = rootEl
this.times = rootEl.querySelector('#times')
this.currentTime = 0
this.currentIndex = 0

// create breakpoints for when the slides should change
this.intervals = this.stories.map((story, index) => {
// TODO change so that it just uses the previous value + current time
let sum = 0
for (let i = 0; i < index; i++){
sum += this.stories[i].time
}
return sum
})

// necessary to make sure the last slide plays to completion
this.maxTime = this.intervals[this.intervals.length - 1] + this.stories[this.stories.length - 1].time

// render progress bars
this.progressBars = this.stories.map(() => {
const el = document.createElement('div')
el.classList.add('time-item')
el.innerHTML = '<div style="width: 0%"></div>'
return el
})

this.progressBars.forEach((el) => {
this.times.appendChild(el)
})

// methods
this.render = () => {
const story = this.stories[this.currentIndex]
this.root.style.background = `url('${story.image}')`
this.root.querySelector('#title').innerHTML = story.title
this.root.querySelector('#description').innerHTML = story.description
}

this.updateProgress = () => {
this.progressBars.map((bar, index) => {
// Fill already passed bars
if (this.currentIndex > index) {
bar.querySelector('div').style.width = '100%'
return
}

if (this.currentIndex < index) {
bar.querySelector('div').style.width = '0%'
return
}

// update progress of current bar
if (this.currentIndex == index) {
const timeStart = this.intervals[this.currentIndex]

let timeEnd;
if (this.currentIndex == this.stories.length - 1){
timeEnd = this.maxTime
} else {
timeEnd = this.intervals[this.currentIndex + 1]
}

const animatable = bar.querySelector('div')
animatable.style.width = `${((this.currentTime - timeStart)/(timeEnd - timeStart))*100}%`

}
})
}
}

Storyfier.prototype.start = function(){
// Render initial state
this.render()

// START INTERVAL
const test = setInterval(() => {
this.currentTime += 10
this.updateProgress()

if (this.currentIndex >= this.stories.length - 1 && (this.currentTime > this.maxTime)){
clearInterval(test)
return
}

const lastIndex = this.currentIndex
if (this.currentTime >= this.intervals[this.currentIndex + 1]){
this.currentIndex += 1
}

if (this.currentIndex != lastIndex) {
this.render()
}
}, 10)
}

Storyfier.prototype.next = function(){
const next = this.currentIndex + 1
if (next > this.stories.length - 1){
return
}

this.currentIndex = next
this.currentTime = this.intervals[this.currentIndex]
this.render()
}

Storyfier.prototype.back = function(){
if ((this.currentTime > (this.intervals[this.currentIndex] + 350)) || this.currentIndex === 0){
this.currentTime = this.intervals[this.currentIndex]
return
}

this.currentIndex -= 1
this.currentTime = this.intervals[this.currentIndex]
this.render()
}

const setup = async () => {
const loadImages = stories.map(({ image }) => {
return new Promise((resolve, reject) => {
let img = new Image()
img.onload = () => {
resolve(image)
}
img.src = image
})
})

await Promise.all(loadImages)

const s = new Storyfier(stories, container);
s.start()

nextButton.addEventListener('click', () => {
s.next()
})

backButton.addEventListener('click', () => {
s.back()
})
}

setup()

</script>
<div class="container">
<div id="times" class="time">
</div>

<div id="back"></div>
<div id="next"></div>
</div>
[/html]

0

Поделиться292023-05-04 11:06:44

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
.anim750{
transition: all 750ms ease-in-out;
}

#Awesome{
position: relative;
width: 180px;
height: 180px;
margin: 0 auto;

backface-visibility: hidden;
}

#Awesome .sticky{
transform: rotate(45deg);
}

#Awesome:hover .sticky{
transform: rotate(10deg);
}

#Awesome .sticky{
position: absolute;
top: 0;
left: 0;
width:180px;
height: 180px;
}

#Awesome .reveal .circle{
box-shadow: 0 1px 0px rgba(0,0,0,.15);

font-family: 'helvetica neue', arial;
font-weight: 200;
line-height: 140px;
text-align: center;

cursor: pointer;
}

#Awesome .reveal .circle{
background: #fafafa;
}

#Awesome .circle_wrapper{
position: absolute;
width: 180px;
height: 180px;
left: 0px;
top: 0px;
overflow: hidden;
}

#Awesome .circle{
position: absolute;
width: 140px;
height: 140px;
margin: 20px;

border-radius: 999px;
}

#Awesome .back{
height: 10px;
top: 30px;
}

#Awesome:hover .back{
height: 90px;
top: 110px;
}

#Awesome .back .circle{
margin-top: -130px;
background-color: #fbec3f;

background-image: -webkit-linear-gradient(bottom, rgba(251,236,63,.0), rgba(255,255,255,.8));
}

#Awesome:hover .back .circle{
margin-top: -50px;
}

#Awesome .front{
height: 150px;
bottom: 0;
top: auto;

-webkit-box-shadow: 0 -140px 20px -140px rgba(0,0,0,.3);
}

#Awesome:hover .front{
height: 70px;

-webkit-box-shadow: 0 -60px 10px -60px rgba(0,0,0,.1);
}

#Awesome .front .circle{
margin-top: -10px;
background: #fbec3f;

background-image: -webkit-linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%);
background-image: -moz-linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%);
background-image: linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%);
}

#Awesome h4{
font-family: 'helvetica neue', arial;
font-weight: 200;
text-align: center;
position: absolute;
width: 180px;
height: 140px;
line-height: 140px;

transition: opacity 50ms linear 400ms;
}

#Awesome:hover h4{
opacity: 0;

transition: opacity 50ms linear 300ms;
}

#Awesome:hover .front .circle{
margin-top: -90px;
background-color: #e2d439;
background-position: 0 100px;
}
</style>
<div id="Awesome" class="anim750">

<div class="reveal circle_wrapper">
<div class="circle">У того есть паренек</div>
</div>

<div class="sticky anim750">
<div class="front circle_wrapper anim750">
<div class="circle anim750"></div>
</div>
</div>

<h4>Кто откроет уголок</h4>

<div class="sticky anim750">
<div class="back circle_wrapper anim750">
<div class="circle anim750"></div>
</div>
</div>

</div>

[/html]

0

Поделиться302023-05-04 11:22:01

Автор: Esymeo
Администратор
Сообщений: 86
Уважение: [+0/-0]
Последний визит:
2025-03-20 14:31:00

[html]
<style>
#demo {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
}
</style>
<script>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

// Design тут можно заменить цвет точек в двух местах
var circleFill = "rgba(255,160,30,1)";

var Particle = function (sx, sy) {
this.sx = sx;
this.sy = sy;
this.vx = 0.0;
this.vy = 0.0;
};

// create particles здесь же в n меняется кол во точек если лагает меньше
var n = 255;
var particles = [];
for (var i = 0; i < n; ++i) {
var sx = Math.random() * canvas.width;
var sy = Math.random() * canvas.height;
particles[i] = new Particle(sx, sy);
}

var drawLine = function (x0, y0, x1, y1, alpha) {
context.lineWidth = "hairline";
context.strokeStyle = "rgba(255,160,30," + alpha + ")";
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.closePath();
context.stroke();
};

var drawCircle = function (x, y, r) {
context.fillStyle = circleFill;
context.beginPath();
context.arc(x, y, r, 0.0, Math.PI * 2.0);
context.closePath();
context.fill();
};

var mouseX = 0.0;
var mouseY = 0.0;

// Physics Properties
var particleInfluenceRadius = 26.0;
var particleAttractionRadius = 18.0;
var partcileAttrationForce = 1.0 / 200.0;
var partcileVelocityDecay = 0.99;
var particleMouseInfluenceRadius = 48.0;
var particleMouseRejectionForce = 1.0 / 96.0;

var enterFrame = function () {
context.clearRect(0, 0, width, height);
solveAndDraw();
moveAndDraw();
window.requestAnimationFrame(enterFrame);
};

var mouseMove = function (e) {
mouseX = e.offsetX;
mouseY = e.offsetY;
};

window.requestAnimationFrame(enterFrame);
canvas.addEventListener("mousemove", mouseMove);
</script>
<div id="demo">
<canvas id="canvas" width="800" height="200">no canvas, no shlanvas</canvas>
</div>

[/html]

0

Тестовый форум для дизайнов

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

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

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

Тестовая тема для хтмл

Сообщений 1 страница 30 из 32

Поделиться12022-05-30 21:46:15

Поделиться22022-06-05 18:26:49

Поделиться32022-11-28 18:26:13

Поделиться42022-11-28 18:30:21

Поделиться52022-11-28 18:58:55

Поделиться62022-11-28 18:59:47

Поделиться72022-11-28 19:00:05

Поделиться82022-12-06 13:27:24

Поделиться92022-12-07 15:50:42

Поделиться102022-12-08 20:38:07

Поделиться112022-12-08 20:55:04

Поделиться122022-12-11 12:39:22

Поделиться132022-12-11 13:02:41

Поделиться142022-12-13 00:43:55

Поделиться152022-12-16 18:28:01

Поделиться162023-01-15 17:07:47

Поделиться172023-01-28 15:08:33

Поделиться182023-01-28 15:22:41

Поделиться192023-01-29 13:28:36

Поделиться202023-02-06 20:54:58

Поделиться212023-02-06 20:55:59

Поделиться222023-02-21 14:33:35

Поделиться232023-02-21 14:35:45

Поделиться242023-02-27 22:03:42

Поделиться252023-02-27 22:19:48

Поделиться262023-03-01 13:07:05

Поделиться272023-03-01 13:19:56

Поделиться282023-05-04 10:49:45

Поделиться292023-05-04 11:06:44

Поделиться302023-05-04 11:22:01