1
Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo que una amiga (a la que hacía demasiado tiempo que no miraba) me dijo que publicase. El otro día se vino a mi casa a tomar un café (que ahora que estoy soltero y sin compromiso, ya no le da cosa venir a verme), y siendo una friki de los ordenadores y la informática, se fijó en que yo utilizo una página de inicio personalizada en el navegador web. Vamos, que además de permitir buscar en google, permite buscar en diferentes servicios que suelo utilizar. Y se ve que esto le gustó, y me preguntó por el código de la página. Le respondí que para crear tu propio buscador, solo hace falta un poco de HTML, CSS y JavaScript.
Pues bien, teniendo en cuenta los servicios que ella me dijo que solía utilizar, le he personalizado el código un poco a su gusto. Aun que modificar los servicios en los que buscar, es bastante sencillo como se verá más adelante. Este servicio de busqueda, se puede alojar en un servidor, pero funciona mucho más rápido si lo utilizas en local y le indicas al navegador web donde tiene que buscar la página de inicio.
Esto de montar una página de inicio personalizada, es algo que hace ya muchos años hice para el ciclo medio que estudié en su día, pero como se quedó bastante desfasado, y nunca me molesté en actualizar aquel código, pues he cambiado el método de funcionamiento de aquel buscador por algo un poco más actual.
Crear tu propio buscador
Este buscador que vamos a ver, consta solo de tres archivos y de una carpeta para las imágenes. Los archivos son los tres típicos, el index.html, el style.css y script.js. Dentro de la carpeta de las imágenes se encuentran el logo y el favicon que utilizo.
Para crear tu propio buscador, tan solo será necesario crear estos archivos indicados líneas más arriba y pegar dentro de cada uno de ellos los siguientes códigos.
Archivo index.html
El archivo index.html, contendrá el código fuente de una página web. El código comienza con la definición de un tipo de documento y el lenguaje utilizado, y a continuación se establecen las etiquetas HTML de inicio.
Dentro de la sección head se establecen varias etiquetas meta y link que se utilizan para definir el título de la página, la codificación de caracteres, la escala de visualización, los estilos CSS y los íconos de la página.
En el cuerpo de la página, se encuentra un contenedor principal llamado «main-wrapper» con una clase «fancy-scrollbar«. Dentro de este contenedor se definen varios elementos, incluyendo un encabezado, un contenedor de enlaces, un contenedor de redes sociales, un campo de búsqueda y una sección de motores de búsqueda.
El encabezado contiene un logotipo y un título editable. El contenedor de enlaces contiene tres enlaces a Gmail, al sitio web del autor y a la sección Acerca de. El contenedor de redes sociales contiene enlaces a varias redes sociales. El campo de búsqueda permite al usuario buscar en Google, pero desde la sección de motores de búsqueda, se puede cambiar el motor de busqueda seleccionando uno u otro.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Local</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="icon" type="image/jpg" href="./Img/favicon.ico" />
</head>
<body>
<div id="main-wrapper" class="fancy-scrollbar">
<div id="main">
<div class="mycontainer">
<div id="content">
<div id="links-container" style="padding-left: 30%; padding-right: 30%;">
<a href="https://gmail.com" target="_blank" title="Gmail">Gmail</a>
<a href="https://entreunosyceros.net" target="_blank" title="Mi Web">Mi sitio</a>
<a href="https://entreunosyceros.net/about/" target="_blank" title="About entreunosyceros">About</a>
</div>
<div id="header-container">
<div class='parent'>
<!-- Logo electron -->
<div class='child'>
<main>
<div class="atom">
<div class="electron"><img src="./Img/logo.png" style="height: 75px; width: 75px; " alt="Logo" />
</div>
<div class="electron-alpha"></div>
<div class="electron-omega"></div>
</div>
</main>
</div>
<div class='child'>
<!-- Iconos sociales -->
<div class="social-buttons">
<a href="https://www.instagram.com/entreunosyceros/" class="social-button social-button--instagram"
aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.youtube.com/@entreunosyceros/" class="social-button social-button--youtube"
aria-label="YouTube">
<i class="fab fa-youtube"></i>
</a>
<a href="https://www.facebook.com/entreunosyceros/" class="social-button social-button--facebook"
aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://github.com/sapoclay/" class="social-button social-button--github"
aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="https://twitter.com/entreunosyceros/" class="social-button social-button--twitter"
aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
</div>
</div>
<!-- Texto luminoso -->
<div class="txt-ne">
<h3 style=" margin-left: 25%; top: 40%;" data-text="entreunosyceros">
<div id="editable-text" contenteditable="true" >entreunosyceros ❤️🩹</div>
</h3>
</div>
<!-- Buscador -->
<div id="search-container" style="margin-top: 5%;">
<div id="search-input-container">
<img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" alt="google" id="search-icon" />
<input type="text" placeholder="Buscar en Google" id="search"
data-search-engine="https://www.google.com/search?q=" />
</div>
<button id="image-button" onclick="googleSearch();" type="button" title="Buscar">
<i class="fa-regular fa-search"></i>
</button>
<button onclick="borrarInput()" title="Borrar">
<i class="fa-solid fa-trash"></i>
</button>
</div>
<!-- Motores de búsqueda -->
<div id="apps-container">
<a href="#" id="link0">
<i class="fa-brands fa-google"></i>
<div class="label">
<span class="name">Google</span>
<span class="url">google.com</span>
</div>
</a>
<a href="#" id="link1">
<i class="fa-brands fa-stack-overflow"></i>
<div class="label">
<span class="name">Stack Overflow</span>
<span class="url">stackoverflow.com</span>
</div>
</a>
<a href="#" id="link2">
<i class="fa-brands fa-github"></i>
<div class="label">
<span class="name">Github</span>
<span class="url">github.com</span>
</div>
</a>
<a href="https://chat.openai.com">
<svg width="26" height="26" viewBox="0 0 41 41" fill="#10A37F" xmlns="http://www.w3.org/2000/svg"
stroke-width="1.5" class="h-6 w-6">
<path
d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z"
fill="currentColor"></path>
</svg>
<div class="label">
<span class="name">Chat GPT</span>
<span class="url">chat.openai.com</span>
</div>
</a>
<a href="#" id="link3">
<i class="fa-brands fa-codepen"></i>
<div class="label">
<span class="name">CodePen</span>
<span class="url">codepen.io</span>
</div>
</a>
<a href="#" id="link4">
<i class="fa-brands fa-youtube"></i>
<div class="label">
<span class="name">YouTube</span>
<span class="url">youtube.com</span>
</div>
</a>
<a href="#" id="link5">
<i class="fa-brands fa-spotify"></i>
<div class="label">
<span class="name">Spotify</span>
<span class="url">spotify.com</span>
</div>
</a>
<a href="#" id="link6">
<i class="fa fa-linkedin"></i>
<div class="label">
<span class="name">Linkedin</span>
<span class="url">linkedin.com</span>
</div>
</a>
<a href="#" id="link7">
<i class="fa fa-facebook"></i>
<div class="label">
<span class="name">Facebook</span>
<span class="url">facebook.com</span>
</div>
</a>
<a href="#" id="link8">
<i class="fa fa-instagram"></i>
<div class="label">
<span class="name">Instagram</span>
<span class="url">instagram.com</span>
</div>
</a>
<a href="#" id="link9">
<i class="fa fa-wikipedia-w"></i>
<div class="label">
<span class="name">Wikipedia</span>
<span class="url">wikipedia.com</span>
</div>
</a>
<a href="#" id="link10">
<i class="fa fa-images"></i>
<div class="label">
<span class="name">Unsplash</span>
<span class="url">unsplash.com</span>
</div>
</a>
<a href="#" id="link11">
<i class="fa fa-magnifying-glass"></i>
<div class="label">
<span class="name">Bing</span>
<span class="url">bing.com</span>
</div>
</a>
<a href="#" id="link12">
<i class="fa fa-magnifying-glass"></i>
<div class="label">
<span class="name">DuckDuckGo</span>
<span class="url">duckcuckgo.com</span>
</div>
</a>
<a href="#" id="link13">
<i class="fa fa-twitter"></i>
<div class="label">
<span class="name">Twitter</span>
<span class="url">twitter.com</span>
</div>
</a>
<a href="#" id="link14">
<i class="fa fa-amazon"></i>
<div class="label">
<span class="name">Amazon</span>
<span class="url">amazon.com</span>
</div>
</a>
<a href="#" id="link15">
<i class="fa fa-amazon"></i>
<div class="label">
<span class="name">Amazon Prime Video</span>
<span class="url">amazon.com</span>
</div>
</a>
<a href="#" id="link16">
<i class="fa fa-reddit"></i>
<div class="label">
<span class="name">Reddit</span>
<span class="url">reddit.com</span>
</div>
</a>
</div>
<a href="https://entreunosyceros.net/about/" title="About entreunosyceros"
target="_blank">entreunosyceros</a>
</div>
</div>
</div>
</div>
<!-- JavaScript personalizado -->
<script src="./script.js"></script>
</body>
</html>Archivo script.js
Dentro del archivo script.js solo habrá que guardar el siguiente código. Este código de JavaScript realiza varias tareas en un sitio web. A continuación, se detalla la funcionalidad de cada una de las secciones del código:
- La primera sección del código busca un elemento en el HTML con el id «editable-text». Si se ha guardado texto previamente en el almacenamiento local, se establece como valor de ese elemento. Si se escribe algo en ese elemento, se guarda el valor en el almacenamiento local.
- Luego se agrega un icono de Font Awesome al cuerpo de la página.
- El código agrega un listener al campo de entrada de búsqueda. Si se presiona la tecla «Enter», se llama a una función «submitForm«.
- A continuación, se definen 16 enlaces, cada uno de los cuales tiene un listener que cambia el ícono y la URL de búsqueda en función del enlace que se haya hecho clic.
- La función «submitForm» recoge el valor de entrada del campo de búsqueda y la URL de búsqueda del enlace correspondiente y abre una nueva pestaña con la búsqueda en esa URL.
El código que hará todo esto es el siguiente:
const editableText = document.getElementById('editable-text');
if (localStorage.getItem('savedText')) {
editableText.textContent = localStorage.getItem('savedText');
}
editableText.addEventListener('input', function () {
localStorage.setItem('savedText', this.textContent);
})
// Añadimos fontawesome
const script = document.createElement("script");
script.src = "https://kit.fontawesome.com/1ee8f271b9.js";
document.body.appendChild(script);
const searchIcon = document.getElementById('search-icon');
const searchInput = document.getElementById('search');
// Se envía el formulario al pulsar Intro
searchInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault();
submitForm();
}
});
function submitForm() {
const query = searchInput.value;
const searchEngine = searchInput.dataset.searchEngine
window.open(`${searchEngine}${query}`, '_blank');
}
// Motores de búsqueda
const link0 = document.getElementById('link0');
const link1 = document.getElementById('link1');
const link2 = document.getElementById('link2');
const link3 = document.getElementById('link3');
const link4 = document.getElementById('link4');
const link5 = document.getElementById('link5');
const link6 = document.getElementById('link6');
const link7 = document.getElementById('link7');
const link8 = document.getElementById('link8');
const link9 = document.getElementById('link9');
const link10 = document.getElementById('link10');
const link11 = document.getElementById('link11');
const link12 = document.getElementById('link12');
const link13 = document.getElementById('link13');
const link14 = document.getElementById('link14');
const link15 = document.getElementById('link15');
const link16 = document.getElementById('link16');
link0.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/300/300221.png';
searchInput.placeholder = 'Buscar en Google';
searchInput.dataset.searchEngine = 'https://www.google.com/search?q=';
});
link1.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/2111/2111690.png';
searchInput.placeholder = 'Buscar en Stack Overflow';
searchInput.dataset.searchEngine = 'https://stackoverflow.com/questions/tagged/';
});
link2.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/2175/2175377.png';
searchInput.placeholder = 'Buscar en Github';
searchInput.dataset.searchEngine = 'https://github.com/search?q=';
});
link3.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/2111/2111351.png';
searchInput.placeholder = 'Buscar en CodePen';
searchInput.dataset.searchEngine = 'https://codepen.io/search/pens?q=';
});
link4.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/174/174883.png';
searchInput.placeholder = 'Buscar en Youtube';
searchInput.dataset.searchEngine = 'https://www.youtube.com/results?search_query=';
});
link5.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/174/174872.png';
searchInput.placeholder = 'Buscar en Spotify';
searchInput.dataset.searchEngine = 'https://open.spotify.com/search/';
});
link6.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/174/174857.png';
searchInput.placeholder = 'Buscar en Linkedin';
searchInput.dataset.searchEngine = 'https://www.linkedin.com/search/results/all/?keywords=';
});
link7.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/124/124010.png';
searchInput.placeholder = 'Buscar en Facebook';
searchInput.dataset.searchEngine = 'https://www.facebook.com/search/top/?q=';
});
link8.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/174/174855.png';
searchInput.placeholder = 'Buscar en Instagram';
searchInput.dataset.searchEngine = 'https://www.instagram.com/';
});
link9.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/174/174880.png';
searchInput.placeholder = 'Buscar en Wikipedia';
searchInput.dataset.searchEngine = 'https://es.wikipedia.org/w/index.php?go=Ir&search=';
});
link10.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/5968/5968763.png';
searchInput.placeholder = 'Buscar en Unsplash';
searchInput.dataset.searchEngine = 'https://unsplash.com/es/s/fotos/';
});
link11.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/888/888844.png';
searchInput.placeholder = 'Buscar en Bing';
searchInput.dataset.searchEngine = 'https://www.bing.com/search?q=';
});
link12.addEventListener('click', () => {
searchIcon.src = 'https://w7.pngwing.com/pngs/124/307/png-transparent-duckduckgo-web-search-engine-google-search-anonymity-eyebrows-miscellaneous-logo-smiley.png';
searchInput.placeholder = 'Buscar en DuckDuckgo';
searchInput.dataset.searchEngine = 'https://duckduckgo.com/?q=';
});
link13.addEventListener('click', () => {
searchIcon.src = 'https://cdn.icon-icons.com/icons2/1584/PNG/512/3721677-twitter_108058.png';
searchInput.placeholder = 'Buscar en Twitter';
searchInput.dataset.searchEngine = 'https://twitter.com/search?q=';
});
link14.addEventListener('click', () => {
searchIcon.src = 'https://icons-for-free.com/iconfiles/png/512/Amazon-1320568265160748167.png';
searchInput.placeholder = 'Buscar en Amazon';
searchInput.dataset.searchEngine = 'https://www.amazon.es/s?k=';
});
link15.addEventListener('click', () => {
searchIcon.src = 'https://img.icons8.com/plasticine/512/amazon-prime-video.png';
searchInput.placeholder = 'Buscar en Amazon Prime Vídeo';
searchInput.dataset.searchEngine = 'https://www.primevideo.com/region/eu/search/ref=atv_nb_sug?ie=UTF8&phrase=';
});
link16.addEventListener('click', () => {
searchIcon.src = 'https://cdn-icons-png.flaticon.com/512/1409/1409938.png';
searchInput.placeholder = 'Buscar en Reddit';
searchInput.dataset.searchEngine = 'https://www.reddit.com/search/?q=';
});
// Primera búsqueda
function googleSearch() {
const query = searchInput.value;
const searchEngine = searchInput.dataset.searchEngine || 'https://www.google.com/search?q=';
window.open(`${searchEngine}${query}`, '_blank');
}
// Botón borrar
function borrarInput() {
searchInput.value = '';
}Archivo style.css
Dentro del archivo style.css vamos a guardar las reglas CSS con las que darle un aspecto bonito a la hora de crear tu propio buscador. El código CSS proporciona un conjunto de reglas que se aplicarán a un documento HTML en particular. En este caso, el código define una serie de estilos para diferentes elementos HTML. En la primera línea, se importa una fuente llamada Pacifico desde Google Fonts.
Después, se definen tres variables de root para el color de fondo del cuerpo, el color de fuente y el color de resaltado. Luego, se establece el fondo degradado del cuerpo con dos colores diferentes. A continuación, se personalizan las barras de desplazamiento de la página con tres reglas diferentes.
Se establece el tamaño de la caja de todos los elementos HTML a «border-box», que asegura que el tamaño total de cada elemento incluya el relleno y el borde, y no solo el contenido. Después, se establece el color de fuente, el tipo de fuente y el tamaño de fuente predeterminados para varios elementos HTML, incluidos encabezados, párrafos, enlaces, botones y entradas de formulario.
También se eliminan los bordes de los botones, enlaces e inputs que estén enfocados. También se definen algunas reglas de estilo para las barras de desplazamiento personalizadas que se han agregado en la página.
A continuación, se establecen algunos estilos para varios contenedores en la página, incluido el contenedor principal, el contenedor de enlaces y el contenedor del logotipo. Se definen algunos estilos adicionales para un cuadro de búsqueda y un contenedor de aplicaciones.
La directiva @media para aplicar ciertos estilos cuando el ancho de la pantalla es menor o igual a 1300px. En este caso, establece que el cuerpo del documento (body) tendrá un desplazamiento automático (overflow: auto) para permitir que el usuario desplace el contenido verticalmente, si es necesario. Luego, establece algunos estilos de padding y ancho para la clase «mycontainer«, el ancho y el crecimiento flexible para el id «main-wrapper» y el tamaño de fuente para el elemento con el id «editable-text«. Finalmente, establece la posición de los seudoelementos ::after de los encabezados de tercer nivel h3.
Después se establecen estilos para una serie de botones de redes sociales que utilizan la clase «social-button«. Establece que los botones se mostrarán en una línea flexible con envoltura, y que los márgenes entre los botones serán de 8px. Además, se establecen los estilos básicos de los botones, como el tamaño, la forma, el borde y el fondo, y se agrega un efecto de aumento de tamaño cuando se enfoca o se coloca el cursor sobre el botón. Además, cada botón de red social tiene su propio conjunto de estilos para el color, el fondo y el seudoelemento ::after.
Por último, el código incluye una sección que define una animación para crear un efecto de átomo en una clase «atom». La animación establece una serie de transformaciones y rotaciones para los elementos que componen el átomo.
En general, este código CSS establece una variedad de estilos para los elementos HTML que se encuentran en una página web, lo que permite personalizar el aspecto de la página y crear una apariencia más atractiva y coherente. El código que va a hacer todo esto, es el siguiente:
@import url('https://fonts.googleapis.com/css?family=Pacifico');
:root {
--body-color: 48 48 58;
--font-color: 255 255 255;
--highlight-color: 0 0 0;
}
body {
background: linear-gradient(to top, #1a1a1a, #636363);
margin: 0px;
}
body::-webkit-scrollbar {
width: 4px;
}
body::-webkit-scrollbar-track {
background-color: rgb(var(--theme-background));
}
body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
* {
box-sizing: border-box;
}
h1, h2, h3, h4, input, select, button, span, a, p {
color: rgb(var(--font-color));
font-family: "Noto Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
margin: 0px;
}
button, a, input {
outline: none;
}
.highlight {
color: rgb(var(--highlight-color));
}
.fancy-scrollbar::-webkit-scrollbar {
height: 4px;
width: 4px;
}
.fancy-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
.fancy-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
.no-scrollbar::-webkit-scrollbar {
height: 0px;
width: 0px;
}
#main-wrapper {
height: 100%;
overflow: auto;
}
#main {
height: 100%;
}
#content {
padding: 1rem;
}
.mycontainer{
padding-left: 30%;
padding-right: 30%;
padding-top: 1%;
}
#links-container {
display: flex;
align-items: center;
justify-content: space-around;
gap: 0.75rem;
}
#links-container > a {
color: rgb(255 255 255 / 80%);
font-size: 0.75rem;
text-decoration: none;
border: 0.5px solid rgb(250, 0, 0);
font-weight: bold;
}
#header-container {
width: 100%;
position: relative;
margin-top: 1rem;
}
#logo {
display: flex;
width: 100%;
border-radius: 0.5rem;
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
#search-container {
display: flex;
gap: 0.2rem;
margin-top: 0.2rem;
}
#search-input-container > input,
#search-container > button {
background-color: rgb(255 255 255 / 10%);
color: rgb(255 255 255 / 80%);
font-size: 1rem;
border: none;
}
#search-input-container > input:focus,
#search-container > button:focus {
background-color: rgb(255 255 255 / 16%);
}
#search-container > button {
width: 3.5rem;
border-radius: 0.2rem;
cursor: pointer;
}
#search-container > #image-button {
border-bottom-right-radius: 0.5rem;
}
#search-input-container {
display: flex;
align-items: center;
gap: 0.75rem;
background-color: rgb(255 255 255 / 10%);
padding-left: 1rem;
border-radius: 0.2rem;
border-bottom-left-radius: 0.5rem;
width: 100%;
}
#search-input-container > img {
height: 1.5rem;
}
#search-input-container > input {
width: 100%;
height: 3.25rem;
background-color: transparent;
padding: 1rem;
padding-left: 1rem;
}
#apps-container {
display: grid;
gap: 0.2rem;
grid-template-columns: repeat(2, 50%);
margin: 3rem 0rem;
}
#apps-container > a {
display: flex;
align-items: center;
gap: 0.5rem;
background-color: rgb(255 255 255 / 5%);
padding: 1rem 0.75rem;
border-radius: 0.2rem;
text-decoration: none;
}
#apps-container > a > i {
height: 2rem;
width: 2rem;
flex-shrink: 0;
font-size: 1.5rem;
line-height: 2rem;
text-align: center;
}
#apps-container > a > .label {
width: calc(100% - 2.5rem);
display: flex;
flex-direction: column;
align-self: flex-start;
overflow: hidden;
}
#apps-container > a > .label > :is(.name, .url) {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#apps-container > a > .label > .name {
font-size: 0.8rem;
font-weight: bold;
}
#apps-container > a > .label > .url {
font-size: 0.7rem;
color: rgba(0, 0, 0, 0.5);
}
#apps-container > a:is(:hover, :focus) {
background-color: rgb(255 255 255 / 16%);
}
#apps-container > a:first-child {
color: rgb(255, 238, 0);
border-top-left-radius: 0.5rem;
}
#apps-container > a:nth-child(2) {
color: rgb(194, 126, 0);
border-top-right-radius: 0.5rem;
}
#apps-container > a:nth-child(3) {
color: rgb(41, 41, 41);
}
#apps-container > a:nth-child(4) {
color: rgb(28, 228, 105);
}
#apps-container > a:nth-child(5) {
color: rgb(14, 14, 14);
}
#apps-container > a:nth-child(6){
color: rgb(148, 0, 0);
}
#apps-container > a:nth-child(7) {
color: rgb(0, 209, 63);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(8) {
color:rgb(30, 2, 151);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(9) {
color:rgb(44, 17, 163);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(10) {
color:rgb(163, 148, 17);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(11) {
color:rgb(0, 0, 0);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(12) {
color:rgba(56, 56, 56, 0.712);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(13) {
color: rgb(24, 14, 118);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(14) {
color: rgb(118, 14, 101);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(15) {
color: rgb(0, 183, 255);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(16) {
color: rgb(255, 255, 255);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:nth-child(17) {
color: rgb(255, 255, 255);
border-bottom-left-radius: 0.5rem;
}
#apps-container > a:last-child {
color: rgb(255, 60, 0);
border-bottom-right-radius: 0.5rem;
}
@media(max-width: 1300px) {
body {
overflow: auto;
}
.mycontainer{
padding-left: 0%;
padding-right: 0%;
padding-top: 1%;
}
#main-wrapper {
width: 100%;
flex-grow: 1;
}
#editable-text {
font-size: 15px;
}
h3::after {
top: -10px !important;
left: -30px !important;
}
}
.social-buttons {
display: flex;
flex-wrap: wrap;
justify-content: right;
gap: 8px;
}
.social-button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
outline: none;
width: 30px;
height: 30px;
text-decoration: none;
border-radius: 100%;
background: #fff;
text-align: center;
}
.social-button::after {
content: '';
position: absolute;
top: -1px;
left: 50%;
display: block;
width: 0;
height: 0;
border-radius: 100%;
transition: 0.3s;
}
.social-button:focus, .social-button:hover {
color: #fff;
}
.social-button:focus::after, .social-button:hover::after {
width: calc(100% + 2px);
height: calc(100% + 2px);
margin-left: calc(-50% - 1px);
}
.social-button i, .social-button svg {
position: relative;
z-index: 1;
transition: 0.3s;
}
.social-button i {
font-size: 20px;
}
.social-button svg {
height: 40%;
width: 40%;
}
.social-button--instagram {
color: #3f729b; /* adjust the color to match your design */
background-color: white;
border: none;
padding: 0;
margin: 0 5px;
font-size: 24px; /* adjust the font size to match the other icons */
}
.social-button--youtube {
color: #ff0000; /* adjust the color to match your design */
background-color: white;
border: none;
padding: 0;
margin: 0 5px;
font-size: 24px; /* adjust the font size to match the other icons */
}
.social-button--mail {
color: #0072c6;
}
.social-button--mail::after {
background: #0072c6;
}
.social-button--facebook {
color: #3b5999;
}
.social-button--facebook::after {
background: #3b5999;
}
.social-button--linkedin {
color: #0077b5;
}
.social-button--linkedin::after {
background: #0077b5;
}
.social-button--github {
color: #6e5494;
}
.social-button--github::after {
background: #6e5494;
}
.social-button--twitter {
color: #00c8fa;
}
.social-button--twitter::after {
background: #00c8fa;
}
.social-button--steam {
color: #7da10e;
}
.social-button--steam::after {
background: #7da10e;
}
.social-button--snapchat {
color: #eec900;
}
.social-button--snapchat::after {
background: #eec900;
}
.social-button--twitter {
color: #55acee;
}
.social-button--twitter::after {
background: #55acee;
}
.social-button--instagram {
color: #e4405f;
}
.social-button--instagram::after {
background: #e4405f;
}
.social-button--npmjs {
color: #c12127;
}
.social-button--npmjs::after {
background: #c12127;
}
/* animated logo effect */
:root {
--atom-size: 180px;
--atom-color-hex: #00d8ff;
--atom-color-rgb: 0, 216, 255;
--nucleus-size: calc(var(--atom-size) / 5);
--electron-color-hex: #99f8ff;
--electron-size : calc(var(--atom-size) / 25);
--electron-orbit-size : calc(var(--atom-size) / 2.5);
--electron-speed : 1.2s;
--electron-speed-alpha : 1s;
--electron-speed-omega : .8s;
}
*, *:before, *::after { box-sizing: border-box; }
/* Atom */
.atom {
position: relative;
width: var(--atom-size);
height: var(--atom-size);
animation: 20s atom infinite cubic-bezier(.5, .25, 0, .75);
}
@keyframes atom {
0% { transform: rotate(0deg) scale(1); }
12.5% { transform: rotate(-45deg) scale(.9); }
25% { transform: rotate(-90deg) scale(1); }
37.5% { transform: rotate(-135deg) scale(.9); }
50% { transform: rotate(-180deg) scale(1); }
62.5% { transform: rotate(-225deg) scale(.9); }
75% { transform: rotate(-270deg) scale(1); }
87.5% { transform: rotate(-315deg) scale(.9); }
100% { transform: rotate(-360deg) scale(1); }
}
/* Nucleus */
@keyframes nucleus {
0% { transform: scale(1); }
25% { transform: scale(.9); }
50% { transform: scale(1); }
75% { transform: scale(.80); }
100% { transform: scale(1); }
}
/* Electron Orbit */
.atom > [class^="electron"] {
border-top: solid rgba(var(--atom-color-rgb), 15) 30px;
border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
border-bottom: solid rgba(var(--atom-color-rgb), 15) 30px;
border-left: solid rgba(var(--atom-color-rgb), .35) 2px;
border-radius: 100%;
width: 75%;
height: var(--electron-orbit-size);
position: absolute;
top: 50%;
margin-top: calc(var(--electron-orbit-size) / -3);
animation: var(--electron-speed) electron-orbit infinite linear;
}
.atom > .electron-alpha {
transform: rotate(75deg);
animation: var(--electron-speed-alpha) electron-orbit infinite linear;
}
.atom > .electron-omega {
transform: rotate(-60deg);
animation: var(--electron-speed-omega) electron-orbit infinite linear;
}
@keyframes electron-orbit {
0% {
border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
}
25% {
border-top: solid rgba(var(--atom-color-rgb), .35) 1px;
border-right: solid rgba(var(--atom-color-rgb), .2) 2px;
border-bottom: solid rgba(var(--atom-color-rgb), 0) 4px;
border-left: solid rgba(var(--atom-color-rgb), .5) 2px;
}
50% {
border-top: solid rgba(var(--atom-color-rgb), .2) 1px;
border-right: solid rgba(var(--atom-color-rgb), 0) 2px;
border-bottom: solid rgba(var(--atom-color-rgb), .5) 4px;
border-left: solid rgba(var(--atom-color-rgb), .35) 2px;
}
75% {
border-top: solid rgba(var(--atom-color-rgb), 0) 1px;
border-right: solid rgba(var(--atom-color-rgb), .5) 2px;
border-bottom: solid rgba(var(--atom-color-rgb), .35) 4px;
border-left: solid rgba(var(--atom-color-rgb), .2) 2px;
}
100% {
border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
}
}
/* Electron Unit */
.atom [class^="electron"]::after {
content: '';
display: block;
width: var(--electron-size);
height: var(--electron-size);
background: var(--electron-color-hex);
border-radius: 50%;
margin-top: calc(var(--electron-size) / -3);
position: absolute;
top: 50%;
left: calc(var(--electron-size) / -3);
transform: scale(1);
animation: calc(var(--electron-speed) * 2) electron infinite ease-in-out;
}
.atom .electron-alpha::after { animation: calc(var(--electron-speed-alpha) * 2) electron infinite ease-in-out; }
.atom .electron-omega::after { animation: calc(var(--electron-speed-omega) * 3) electron infinite ease-in-out; }
@keyframes electron {
0% {
left: calc(var(--electron-size) / -1);
transform: scale(1);
}
12.5% {
top: 100%;
transform: scale(1.5);
}
25% {
left: 100%;
transform: scale(1);
}
37.5% {
top: 0%;
transform: scale(.25);
}
50% {
left: calc(var(--electron-size) / -1);
transform: scale(1);
}
62.5% {
top: 100%;
transform: scale(1.5);
}
75% {
left: 100%;
transform: scale(1);
}
87.5% {
top: 0%;
transform: scale(.25);
}
100% {
left: calc(var(--electron-size) / -1);
transform: scale(1);
}
}
/* Shadow */
main { position: relative; }
main::after {
content: '';
display: block;
position: absolute;
top: 110%;
left: 0;
width: var(--atom-size);
height: var(--nucleus-size);
background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0));
border-radius: 100%;
transform: scale(1, .6);
animation: 20s shadow infinite cubic-bezier(.5, .25, 0, .75);
}
@keyframes shadow {
0% { transform: scale(1, .8) translateY(0); }
12.5% { transform: scale(.7, .7) translateY(-20px); }
25% { transform: scale(1, .8) translateY(0); }
37.5% { transform: scale(.7, .7) translateY(-20px); }
50% { transform: scale(1, .8) translateY(0); }
62.5% { transform: scale(.7, .7) translateY(-20px); }
75% { transform: scale(1, .8) translateY(0); }
87.5% { transform: scale(.7, .7) translateY(-20px); }
100% { transform: scale(1, .8) translateY(0); }
}
/* Credits */
a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Helvetica Neue", Arial, sans-serif;;
font-size: smaller;
font-weight: lighter;
text-decoration: none !important;
padding: .6rem .8rem;
border-radius: .3rem;
color: rgba(255, 255, 255, .25);
background: rgba(0, 0, 0, 0);
transition: all .35s ease-in-out;
}
a:hover {
color: rgba(255, 255, 255, 1);
background: rgba(0, 0, 0, .5);
}
.parent {
border: 2px solid rgb(27, 27, 27);
border-radius: 5%;
margin: 1rem;
padding: 2rem 2rem;
text-align: center;
background: linear-gradient(to bottom, #2a2525, #5b5b5b);
}
.child {
display: inline-block;
padding: 1rem 1rem;
vertical-align: middle;
}
button {
border: none;
cursor: pointer;
background-color: transparent;
outline: none;
}
@-webkit-keyframes blinkH1 {
0% {
color: #fff;
text-shadow: 0px 0px 20px #00aad4;
}
19% {
color: #fff;
text-shadow: 0px 0px 20px #00aad4;
}
20% {
color: #9E9E9E;
text-shadow: none;
}
21% {
color: #fff;
text-shadow: 0px 0px 20px #00aad4;
}
60% {
color: #fff;
text-shadow: 0px 0px 20px #00aad4;
}
61% {
color: #9E9E9E;
text-shadow: none;
}
62% {
color: #fff;
text-shadow: 0px 0px 20px #00aad4;
}
63% {
color: #9E9E9E;
text-shadow: none;
}
64% {
color: #fff;
text-shadow: 0px 0px 20px #00aad4;
}
100% {
color: #fff;
text-shadow: 0px 0px 20px #00aad4;
}
}
@-webkit-keyframes blinkH1After {
0% {
color: #00aad4;
}
19% {
color: #00aad4;
}
20% {
color: transparent;
}
21% {
color: #00aad4;
}
60% {
color: #00aad4;
}
61% {
color: transparent;
}
62% {
color: #00aad4;
}
63% {
color: transparent;
}
64% {
color: #00aad4;
}
100% {
color: #00aad4;
}
}
@-webkit-keyframes blinkH1Before {
0% {
background: #00aad4;
}
19% {
background: #00aad4;
}
20% {
background: transparent;
}
21% {
background: #00aad4;
}
60% {
background: #00aad4;
}
61% {
background: transparent;
}
62% {
background: #00aad4;
}
63% {
background: transparent;
}
64% {
background: #00aad4;
}
100% {
background: #00aad4;
}
}
h3{
font-family: 'Pacifico', cursive;
font-weight: 100;
margin: 0px;
position: absolute;
top: 20% !important;
left: 38%;
transform: translate(-50% ,-50%);
color: #fff;
font-size: 30px;
text-shadow: 0px 0px 20px #00aad4;
-webkit-animation: blinkH1 5s infinite;
animation: blinkH1 5s infinite;
}
h3:after{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: #00aad4;
z-index: -1;
filter: blur(15px);
-webkit-animation: blinkH1After 5s infinite;
animation: blinkH1After 5s infinite;
}
h3:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00aad4;
z-index: -2;
opacity: 0.7;
filter: blur(50px);
-webkit-animation: blinkH1Before 5s infinite;
animation: blinkH1Before 5s infinite;
}
h3.txt-by{
z-index: 2;
font-size: 30px;
top: calc(50% - 55px);
}
h3.txt-ne{
top: calc(50% + 5px);
text-align: center;
line-height: 1;
margin-top: 15px;
}
.searchContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.box {
width: 45%;
height: 200px;
background-color: #f2f2f2;
border: 1px solid #ccc;
box-sizing: border-box;
}Descarga el código desde GitHub para crear tu propio buscador
Si te interesa descargar el código de este buscador, podrás crear tu propio buscador en local descargando el código completo desde el repositorio en GitHub donde alojé este proyecto, donde encontrarás también disponibles las imágenes que acompañan a este ejemplo. Si antes de descargar el código quieres ver cómo funciona, puedes verlo en el siguiente enlace.
Y bueno, con esto, espero que mi amiga pueda usar una página de inicio como la que ella quería tener en su equipo. Y que ya sabe que si tiene algún problema al personalizar el código, solo tiene que escribirme ;), que no le voy a cobrar.
