<div class="container"><h1>Bootstrap tab panel example (using nav-pills) </h1></div>
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
<a href="#1a" data-toggle="tab">Overview</a>
</li>
<li><a href="#2a" data-toggle="tab">Using nav-pills</a>
</li>
<li><a href="#3a" data-toggle="tab">Applying clearfix</a>
</li>
<li><a href="#4a" data-toggle="tab">Background color</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="4a">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>
<hr></hr>
<div class="container"><h2>Example tab 2 (using standard nav-tabs)</h2></div>
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab">Overview</a>
</li>
<li><a href="#2" data-toggle="tab">Without clearfix</a>
</li>
<li><a href="#3" data-toggle="tab">Solution</a>
</li>
</ul>
<div class="tab-content ">
<div class="tab-pane active" id="1">
<h3>Standard tab panel created on bootstrap using nav-tabs</h3>
</div>
<div class="tab-pane" id="2">
<h3>Notice the gap between the content and tab after applying a background color</h3>
</div>
<div class="tab-pane" id="3">
<h3>add clearfix to tab-content (see the css)</h3>
</div>
</div>
</div>
<hr></hr>
<div class="container"><h2>Example 3 </h2></div>
<div id="exTab3" class="container">
<ul class="nav nav-pills">
<li class="active">
<a href="#1b" data-toggle="tab">Overview</a>
</li>
<li><a href="#2b" data-toggle="tab">Using nav-pills</a>
</li>
<li><a href="#3b" data-toggle="tab">Applying clearfix</a>
</li>
<li><a href="#4a" data-toggle="tab">Background color</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1b">
<h3>Same as example 1 but we have now styled the tab's corner</h3>
</div>
<div class="tab-pane" id="2b">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3b">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="4b">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Para mi Mejor Amiga</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(120deg, #ff9a9e, #fad0c4);
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden; /* Para evitar barras de desplazamiento */
}
.container {
text-align: center;
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
}
h1 {
color: #ff6f91;
}
p {
font-size: 18px;
margin: 15px 0;
}
.heart {
font-size: 50px;
color: #ff6f91;
margin: 20px 0;
}
.button {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
text-decoration: none;
background: #ff6f91;
color: white;
border-radius: 5px;
font-size: 16px;
transition: background 0.3s ease;
}
.button:hover {
background: #ff4f6d;
}
/* Estilo para los corazoncitos que aparecerán */
.heart-icon {
position: absolute;
font-size: 30px;
color: #ff6f91;
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-50px) scale(1.2);
}
100% {
transform: translateY(0) scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<h1>Para mi Mejor Amiga</h1>
<div class="heart">❤️</div>
<p>Eres como el código perfecto: sin errores y siempre funcionando a mi favor.</p>
<p>Gracias por estar siempre ahí, amiga. Eres una de las mejores partes de mi vida.</p>
<a class="button" href="#">¡Eres la mejor!</a>
</div>
<script>
// Selecciona el botón
const button = document.querySelector('.button');
// Función que dispersa los corazoncitos
button.addEventListener('mouseenter', function() {
for (let i = 0; i < 30; i++) {
const heart = document.createElement('span');
heart.classList.add('heart-icon');
heart.textContent = '❤️';
// Establece una posición aleatoria en la pantalla
heart.style.left = `${Math.random() * 100}vw`;
heart.style.top = `${Math.random() * 100}vh`;
// Agrega el corazón al body
document.body.appendChild(heart);
// Elimina el corazón después de la animación
setTimeout(() => {
heart.remove();
}, 2000); // Tiempo de la animación (2 segundos)
}
});
</script>
</body>
</html>
This Pen doesn't use any external JavaScript resources.