Skip to content

Instantly share code, notes, and snippets.

View beatrizsmerino's full-sized avatar
🏠
Working from home

Beatriz Sopeña Merino beatrizsmerino

🏠
Working from home
36 followers · 54 following
View GitHub Profile
@beatrizsmerino
beatrizsmerino / index.html
Created October 5, 2019 11:20
Sample HTML5 Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Sample HTML5 Layout">
<meta name="keywords" content="keyword 1, keyword 2, keyword 3">
<meta name="author" content="Beatriz Sopeña Merino">
<meta name="copyright" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@beatrizsmerino
beatrizsmerino / popup.js
Last active October 22, 2019 16:26
Pop up inside the html to position it above all
$(document).ready(function () {
// open popup
$(".popup__button-open").on("click", function () {
var $this = $(this),
$thisPopUp = $this.closest(".swiper-slide").find('.popup');
$thisPopUp.clone().appendTo(".global-locations").addClass("is-view");
@beatrizsmerino
beatrizsmerino / cleanStorage.js
Created December 26, 2019 23:38
Clean the browser storage to delete the POST variables from the forms and prevent them from being resent when clicking on the button again.
if(window.history.replaceState){
window.history.replaceState(null, null, window.location.href);
}
@beatrizsmerino
beatrizsmerino / index.html
Last active February 10, 2020 15:26
Service worker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mi primer Service worker</title>
</head>
@beatrizsmerino
beatrizsmerino / clickTarget-javascript.js
Last active April 2, 2020 15:00
Check element on click
window.addEventListener("click", function (e) {
e.preventDefault();
console.dir(e.target);
});
@beatrizsmerino
beatrizsmerino / _abstracts-mixins-variables-root.scss
Last active May 15, 2020 08:43
How use a variable root css in scss
// ABSTRACTS - MIXINS
// variables-root
// =================================================
// Creation of the mixin: root-prop
@mixin root-prop($prop: null, $value: null) {
@if ($prop and $value) {
#{$prop}: $value;
@beatrizsmerino
beatrizsmerino / reset.css
Last active June 4, 2020 14:01
Reset css
*,
&:after,
&:before {
margin: 0;
padding: 0;
border-box: box-sizing;
font-family: sans-serif;
}
html, body, div, span, applet, object, iframe,
@beatrizsmerino
beatrizsmerino / get-list-class-css.js
Created July 29, 2020 11:15
Get list of Css class use in the HTML file
function getListClassCss() {
let list = [];
let selectorsAll = document.querySelectorAll("[class]");
selectorsAll.forEach((event) => {
let selectorClassAll = event.getAttribute("class").split(" ");
selectorClassAll.forEach(
(classCss) => {
if (classCss.length > 0 && list.indexOf(classCss) < 0) {
@beatrizsmerino
beatrizsmerino / _tools-getClosest.js
Last active August 5, 2020 21:53
Function getClosest. Get the parent element with a specific selector
/**
* @function getClosest
* @description Get the parent element with a specific selector
* @param {Element} sonElement - Son node
* @param {String} parentSelector - Parent selector
* @returns {Element|null}
*/
function getClosest(sonElement, parentSelector) {
// Element.matches() polyfill
@beatrizsmerino
beatrizsmerino / index.html
Created October 5, 2020 16:55
zYBOGBO
<svg data-name="loader-cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 267.6 168">
<title>loader-cloud</title>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#3be0ec" />
<stop offset="100%" stop-color="#5eaefd" />
</linearGradient>
<path data-name="circle-1" d="M54.77,67.09A50,50,0,1,1,51,67c1.26,0,2.51,0,3.75.14" stroke="url(#gradient)" />
<path data-name="circle-2" d="M110.71,34.41a49.51,49.51,0,1,1-9.08-.84,49.51,49.51,0,0,1,9.08.84" stroke="url(#gradient)" />
<path data-name="circle-3" d="M110.71,34.4a65.45,65.45,0,1,1-8.37,32,65.42,65.42,0,0,1,8.37-32" stroke="url(#gradient)"/>
<path data-name="circle-4" d="M233.22,70.65A49.55,49.55,0,1,1,217.12,68a49.53,49.53,0,0,1,16.1,2.67" stroke="url(#gradient)" />