From 1080ae32c05e4b4e924ebc998c9d7545a79ec03e Mon Sep 17 00:00:00 2001 From: Brando12JL Date: Fri, 12 Apr 2024 09:39:01 +0200 Subject: [PATCH] Marcas Brando --- Brando/css/estilos.css | 51 ++++++++++++ Brando/index.html | 26 ++++++ Brando/particlesjs-config.json | 110 ++++++++++++++++++++++++++ Brando/script/app.js | 76 ++++++++++++++++++ Brando/script/particlesjs-config.json | 110 ++++++++++++++++++++++++++ css/stilos.css | 3 +- index.html | 10 +-- particlesjs-config.json | 110 ++++++++++++++++++++++++++ 8 files changed, 486 insertions(+), 10 deletions(-) create mode 100644 Brando/css/estilos.css create mode 100644 Brando/index.html create mode 100644 Brando/particlesjs-config.json create mode 100644 Brando/script/app.js create mode 100644 Brando/script/particlesjs-config.json create mode 100644 particlesjs-config.json diff --git a/Brando/css/estilos.css b/Brando/css/estilos.css new file mode 100644 index 0000000..6abfaf5 --- /dev/null +++ b/Brando/css/estilos.css @@ -0,0 +1,51 @@ +/* ---- reset ---- */ +body { + margin: 0; + font: normal 75% Arial, Helvetica, sans-serif; + } + canvas { + display: block; + vertical-align: bottom; + } /* ---- particles.js container ---- */ + #particles-js { + position: absolute; + width: 100%; + height: 100%; + background-color: #000000; + background-image: url(""); + background-repeat: no-repeat; + background-size: cover; + background-position: 50% 50%; + } /* ---- stats.js ---- */ + .count-particles { + background: #000022; + position: absolute; + top: 48px; + left: 0; + width: 80px; + color: #13e8e9; + font-size: 0.8em; + text-align: left; + text-indent: 4px; + line-height: 14px; + padding-bottom: 2px; + font-family: Helvetica, Arial, sans-serif; + font-weight: bold; + } + .js-count-particles { + font-size: 1.1em; + } + #stats, + .count-particles { + -webkit-user-select: none; + margin-top: 5px; + margin-left: 5px; + } + #stats { + border-radius: 3px 3px 0 0; + overflow: hidden; + } + .count-particles { + border-radius: 0 0 3px 3px; + } + \ No newline at end of file diff --git a/Brando/index.html b/Brando/index.html new file mode 100644 index 0000000..ea2517c --- /dev/null +++ b/Brando/index.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/Brando/particlesjs-config.json b/Brando/particlesjs-config.json new file mode 100644 index 0000000..c009c21 --- /dev/null +++ b/Brando/particlesjs-config.json @@ -0,0 +1,110 @@ +{ + "particles": { + "number": { + "value": 19, + "density": { + "enable": true, + "value_area": 881.8766334760375 + } + }, + "color": { + "value": "#e6e6e6" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 17, + "color": "#4d4d4d" + }, + "polygon": { + "nb_sides": 4 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.9299789953020032, + "random": true, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 71.02328774690454, + "random": false, + "anim": { + "enable": true, + "speed": 10, + "size_min": 40, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 224.4776885211732, + "color": "#ffffff", + "opacity": 1, + "width": 2 + }, + "move": { + "enable": true, + "speed": 2, + "direction": "top", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": false, + "mode": "grab" + }, + "onclick": { + "enable": false, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true +} \ No newline at end of file diff --git a/Brando/script/app.js b/Brando/script/app.js new file mode 100644 index 0000000..1128d5d --- /dev/null +++ b/Brando/script/app.js @@ -0,0 +1,76 @@ +particlesJS("particles-js", { + particles: { + number: { + value: 19, + density: { enable: true, value_area: 881.8766334760375 } + }, + color: { value: "#e6e6e6" }, + shape: { + type: "circle", + stroke: { width: 17, color: "#4d4d4d" }, + polygon: { nb_sides: 4 }, + image: { src: "img/github.svg", width: 100, height: 100 } + }, + opacity: { + value: 0.9299789953020032, + random: true, + anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } + }, + size: { + value: 71.02328774690454, + random: false, + anim: { enable: true, speed: 10, size_min: 40, sync: false } + }, + line_linked: { + enable: true, + distance: 224.4776885211732, + color: "#ffffff", + opacity: 1, + width: 2 + }, + move: { + enable: true, + speed: 2, + direction: "top", + random: false, + straight: false, + out_mode: "out", + bounce: false, + attract: { enable: false, rotateX: 600, rotateY: 1200 } + } + }, + interactivity: { + detect_on: "canvas", + events: { + onhover: { enable: false, mode: "grab" }, + onclick: { enable: false, mode: "push" }, + resize: true + }, + modes: { + grab: { distance: 400, line_linked: { opacity: 1 } }, + bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, + repulse: { distance: 200, duration: 0.4 }, + push: { particles_nb: 4 }, + remove: { particles_nb: 2 } + } + }, + retina_detect: true + }); + var count_particles, stats, update; + stats = new Stats(); + stats.setMode(0); + stats.domElement.style.position = "absolute"; + stats.domElement.style.left = "0px"; + stats.domElement.style.top = "0px"; + document.body.appendChild(stats.domElement); + count_particles = document.querySelector(".js-count-particles"); + update = function () { + stats.begin(); + stats.end(); + if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { + count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; + } + requestAnimationFrame(update); + }; + requestAnimationFrame(update); + \ No newline at end of file diff --git a/Brando/script/particlesjs-config.json b/Brando/script/particlesjs-config.json new file mode 100644 index 0000000..6d6ffd4 --- /dev/null +++ b/Brando/script/particlesjs-config.json @@ -0,0 +1,110 @@ +{ + "particles": { + "number": { + "value": 19, + "density": { + "enable": true, + "value_area": 800 + } + }, + "color": { + "value": "#000000" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 10, + "color": "#020202" + }, + "polygon": { + "nb_sides": 7 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.6493818846505367, + "random": true, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 92.19619349976756, + "random": false, + "anim": { + "enable": true, + "speed": 10, + "size_min": 40, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 352.750653390415, + "color": "#030e0d", + "opacity": 0.30464829156444934, + "width": 10.742860807799001 + }, + "move": { + "enable": true, + "speed": 4.810236182596568, + "direction": "top", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 1282.7296486924183, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": false, + "mode": "bubble" + }, + "onclick": { + "enable": true, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": false +} \ No newline at end of file diff --git a/css/stilos.css b/css/stilos.css index 1fc9f1c..e308726 100644 --- a/css/stilos.css +++ b/css/stilos.css @@ -35,4 +35,5 @@ h1 { .link:hover { background-color: darkslateblue; -} \ No newline at end of file +} + diff --git a/index.html b/index.html index 68b2c5f..bb5faf8 100644 --- a/index.html +++ b/index.html @@ -7,18 +7,10 @@ + - -
-

Enlaces hacia las Páginas Web

-
- Accesibilidad - Usabilidad -
-
-

Buenas

diff --git a/particlesjs-config.json b/particlesjs-config.json new file mode 100644 index 0000000..c009c21 --- /dev/null +++ b/particlesjs-config.json @@ -0,0 +1,110 @@ +{ + "particles": { + "number": { + "value": 19, + "density": { + "enable": true, + "value_area": 881.8766334760375 + } + }, + "color": { + "value": "#e6e6e6" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 17, + "color": "#4d4d4d" + }, + "polygon": { + "nb_sides": 4 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.9299789953020032, + "random": true, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 71.02328774690454, + "random": false, + "anim": { + "enable": true, + "speed": 10, + "size_min": 40, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 224.4776885211732, + "color": "#ffffff", + "opacity": 1, + "width": 2 + }, + "move": { + "enable": true, + "speed": 2, + "direction": "top", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": false, + "mode": "grab" + }, + "onclick": { + "enable": false, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true +} \ No newline at end of file