Skip to content

Instantly share code, notes, and snippets.

View LyudmilaM's full-sized avatar

LyudmilaM

1 follower · 0 following
View GitHub Profile
@LyudmilaM
LyudmilaM / common.js
Last active August 3, 2020 05:36
Проверка, что соглашение прочитано пользователем и он с ним согласен
// HTML
//
// <form name="registration">
// <p>
// <textarea id="rules">
// Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio, unde ut officiis enim? Atque ad nostrum officiis eaque, sapiente aliquid laudantium a molestias molestiae quaerat. Illum, maiores corporis accusamus!
// </textarea>
// </p>
// <p>
@LyudmilaM
LyudmilaM / index.html
Created August 3, 2020 11:10
Стартовый шаблон HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Шаблон</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="favicon-apple-touch-icon-180x180.png" sizes="180x180" type="image/png">
<link rel="icon" href="img/favicon/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="shortcut icon" href="img/favicon/favicon-shortcut-16x16.ico" sizes="16x16" type="image/x-icon">
@LyudmilaM
LyudmilaM / main.sass
Created August 3, 2020 11:12
Стартовый шаблон CSS/SASS
@import 'helper/fonts'
@import 'helper/variables'
@import 'helper/libs'
// ----------------- Сброс стилей -----------------
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
@LyudmilaM
LyudmilaM / common.js
Created October 27, 2020 23:46
Анимированая карточка товара с 3D эффектом и реагированием движение мышки
document.addEventListener('DOMContentLoaded', function(event){
//Movement Animation to happen
const card = document.querySelector('.card');
const container = document.querySelector('.containe');
// Items
const title = document.querySelector('.title');
const sneaker = document.querySelector('.sneaker img');
const purchase = document.querySelector('.purchase button');
@LyudmilaM
LyudmilaM / common.js
Created November 7, 2020 01:48
Звездный рейтинг 1
(function getRaiting() {
// IE doesn't support 'forEach' for NodeList, and we do array
const raitingItemsList = document.querySelectorAll('.raiting__item');
const raitingItemsArray = Array.prototype.slice.call(raitingItemsList);
raitingItemsArray.forEach((item) => {
item.addEventListener('click', () => {
let raitingValue = item.dataset.itemValue;
item.parentNode.dataset.totalValue = raitingValue;
});
@LyudmilaM
LyudmilaM / main.sass
Created November 7, 2020 01:56
Анимация заголовка - shake
h3
position: relative
color: #fff
font-size: 20px
padding: 5px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
&:hover
animation: 1s tada infinite linear
@LyudmilaM
LyudmilaM / index.html
Last active November 29, 2020 07:12
SVG baground poligon
<div class="block3">
<h2>Section Content</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon class="svg--sm" fill="white" points="0,0 30, 100 65, 21 90, 100 100, 75 100, 100 0,100"/>
<polygon class="svg--lg" fill="white" points="0,0 15,100 33,21 45,100 50,75 55,100 72,20 85,100 95,50 100,80 100,100 0, 100"/>
</svg>
</div>
@LyudmilaM
LyudmilaM / common.js
Last active November 29, 2020 06:59
burger
(
let burger = document.querySelector('.header__burger');
let header = document.querySelector('.header');
let headerContent = document.querySelector('.header__content');
let headerBox = document.querySelector('.header__box');
let headerNav = document.querySelector('.header__nav');
let headerAdditionalNav = document.querySelector('.header__additional-nav');
let contentWrp = document.querySelector('.contentWrp');
let footer = document.querySelector('footer');
let body = document.querySelector('body');
@LyudmilaM
LyudmilaM / index.html
Last active December 1, 2020 08:44
карточка товара - вверху img, внизу текст
<li class="cards__item card">
<a href="##" class="card__img-box"><img src="img/news/news1.jpg" alt="Scheduled task monitoring for Laravel" class="card__img"></a>
<div class="card__content">
<time class="card__label" datetime="2020-11-20">Nov 20, 2020</time>
<h3 class="card__title"><a href="##" class="card__link">Using Laravel Scheduled Tasks? You should be using thenping.me</a></h3>
</div>
</li>
<li class="cards__item card card_dark about-us__sponsor">
<a class="card__img-box" href="##"><img src="img/top/top4.png" alt="Eloquent performance patterns" class="card__img"></a>
@LyudmilaM
LyudmilaM / main.sass
Created November 29, 2020 07:19
Подчеркивание сплошной линией
span.solid-underline
display: inline-block
text-shadow: .05em 0 #fff, -.05em 0 #fff
background-image: linear-gradient(#989898, #989898)
background-repeat: no-repeat
background-position: 0 1.25em
background-size: 100% 1px