libro electrónico

Abrir en el editor Publica tu código

Recomendado

18 June 2025

Tienda de comercio electrónico

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Introduction to Personal Development kevakıbhck</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #f0f0f0;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

.container {
    max-width: 720px;
    margin: 3rem auto 5rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 3.5rem 3rem 4rem;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease forwards;
    opacity: 0;
  }

/* Decorative shapes */
  .container::before, .container::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    z-index: 0;
  }
  .container::before {
    width: 220px;
    height: 220px;
    background: #764ba2;
    top: -60px;
    right: -80px;
    animation: float 6s ease-in-out infinite;
  }
  .container::after {
    width: 160px;
    height: 160px;
    background: #667eea;
    bottom: -50px;
    left: -70px;
    animation: float 8s ease-in-out infinite;
    animation-delay: 2s;
  }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
  }

@keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
    from {
      opacity: 0;
      transform: translateY(20px);
    }
  }

h1, h2, h3 {
    font-family: 'Merriweather', serif;
    color: #3e2d58;
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    z-index: 1;
  }

h1 {
    font-size: 3.4rem;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 2.5px;
    color: #4a298f;
    text-shadow: 0 5px 8px rgba(118, 75, 162, 0.7);
  }

h2 {
    font-size: 2.6rem;
    border-bottom: 4px solid #764ba2;
    padding-bottom: 0.5rem;
  }

h3 {
    font-size: 1.7rem;
    margin-top: 1.8rem;
    color: #5a427f;
  }

p {
    margin-bottom: 1.4rem;
    font-size: 1.15rem;
    color: #4a4a4a;
  }

ul {
    margin: 1.2rem 0 1.8rem 1.8rem;
    color: #555;
    font-size: 1.1rem;
  }

ul li {
    margin-bottom: 0.7rem;
    position: relative;
    padding-left: 1.4rem;
  }

ul li:before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #764ba2;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }

a {
    color: #764ba2;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
  }

a:hover {
    color: #4a298f;
    text-decoration: underline;
  }

nav.toc {
    margin-bottom: 3.5rem;
    padding-left: 1rem;
    position: relative;
    z-index: 1;
  }

nav.toc ul {
    list-style: none;
    padding-left: 0;
  }

nav.toc ul li {
    margin: 0.8rem 0;
  }

nav.toc ul li a {
    font-weight: 600;
    color: #5a427f;
  }

nav.toc ul li a:hover {
    color: #4a298f;
  }

footer {
    text-align: center;
    color: #999;
    font-size: 0.95rem;
    border-top: 1px solid #eee;
    padding-top: 1.3rem;
    margin-top: 4rem;
    position: relative;
    z-index: 1;
  }

.page-break {
    page-break-after: always;
  }

blockquote {
    border-left: 6px solid #764ba2;
    padding-left: 1.2rem;
    color: #6b4b8a;
    font-style: italic;
    margin: 2rem 0 2rem 0;
    background: #f6f4fb;
    border-radius: 6px;
    box-shadow: 2px 2px 10px rgba(118, 75, 162, 0.1);
  }

.highlight-box {
    background: #f6f4fb;
    border-left: 8px solid #764ba2;
    margin: 2rem 0;
    padding: 1.2rem 1.8rem;
    border-radius: 8px;
    color: #5a427f;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(118, 75, 162, 0.15);
  }

.image-section {
    text-align: center;
    margin: 2rem 0;
    animation: fadeInImage 1.4s ease forwards;
    opacity: 0;
  }

.image-section img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 28px rgba(118, 75, 162, 0.25);
    transform: scale(0.95);
    transition: transform 0.5s ease;
  }

.image-section img:hover {
    transform: scale(1);
  }

.image-caption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #7d6f9e;
    font-style: italic;
  }

@keyframes fadeInImage {
    to {
      opacity: 1;
      transform: translateY(0);
    }
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

/* Scroll to top button */
  #scrollTopBtn {
    position: fixed;
    bottom: 35px;
    right: 35px;
    background: #764ba2;
    color: white;
    border: none;
    padding: 0.8rem 1rem;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 5px 12px rgba(118, 75, 162, 0.6);
    display: none;
    z-index: 1000;
    transition: background 0.3s ease;
  }

#scrollTopBtn:hover {
    background: #4a298f;
  }

/* Responsive adjustments */
  @media (max-width: 768px) {
    .container {
      margin: 1.5rem 1.5rem 3rem;
      padding: 2.5rem 2rem 3.5rem;
    }

h1 {
      font-size: 2.6rem;
    }

h2 {
      font-size: 2rem;
      border-bottom-width: 3px;
    }

h3 {
      font-size: 1.3rem;
    }
  }
</style>
</head>
<body>
  <article class="container" role="main" aria-label="Personal Development eBook">
    
    <section id="cover" style="text-align:center; padding: 6rem 1rem;">
      <h1>Introduction to Personal Development</h1>
      <p class="subtitle" style="color:#764ba2; font-size: 1.3rem; font-style: italic; margin-top: 0; max-width: 460px; margin-left: auto; margin-right: auto;">
        A concise guide to empowering your life through mindful growth, emotional intelligence, and effective goal-setting.
      </p>
      <p style="font-weight: 600; font-size: 1.25rem; margin-top: 50px; color:#615377;">By Your Name</p>
      <div class="image-section" style="animation-delay: 0.2s;">
        <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80" alt="Peaceful sunrise over calm lake" />
        <div class="image-caption">Start your journey like a calm sunrise—step by step.</div>
      </div>
    </section>

<nav class="toc" aria-label="Table of Contents">
      <h2>Table of Contents</h2>
      <ul>
        <li><a href="#chapter1">Chapter 1: Understanding Yourself</a></li>
        <li><a href="#chapter1-1">1.1 Self-Awareness and Reflection</a></li>
        <li><a href="#chapter1-2">1.2 Emotional Intelligence</a></li>
        <li><a href="#chapter2">Chapter 2: Setting Goals</a></li>
        <li><a href="#chapter2-1">2.1 SMART Goals</a></li>
        <li><a href="#chapter2-2">2.2 Overcoming Obstacles</a></li>
        <li><a href="#chapter3">Chapter 3: Building Positive Habits</a></li>
        <li><a href="#chapter3-1">3.1 Habit Formation Techniques</a></li>
        <li><a href="#chapter3-2">3.2 Maintaining Motivation</a></li>
        <li><a href="#chapter4">Chapter 4: Mindfulness and Stress Management</a></li>
        <li><a href="#chapter5">Chapter 5: Continuous Learning and Growth</a></li>
      </ul>
    </nav>

<section id="chapter1" style="animation-delay: 0.3s;">
      <h2>Chapter 1: Understanding Yourself</h2>
      <p>
        Personal development begins with a commitment to deeply know yourself. Understanding your values, strengths, weaknesses, and core beliefs provides a foundation upon which meaningful growth can occur. Without this insight, efforts towards self-improvement may lack direction or authenticity.
      </p>

<section id="chapter1-1">
        <h3>1.1 Self-Awareness and Reflection</h3>
        <p>
          Self-awareness refers to the conscious knowledge of your character, feelings, motives, and desires. It is a critical skill that helps you identify your emotional triggers, decision-making patterns, and the impact you have on others.
        </p>
        <p>
          Strategies to enhance self-awareness include:
        </p>
        <ul>
          <li><strong>Journaling:</strong> Writing regularly about your thoughts and experiences can uncover unconscious patterns.</li>
          <li><strong>Mindfulness Meditation:</strong> Practices that promote presence help you observe your thoughts non-judgmentally.</li>
          <li><strong>Seeking Feedback:</strong> Honest feedback from trusted friends, family, or mentors provides perspectives you might miss.</li>
        </ul>
        <blockquote>
          “Knowing yourself is the beginning of all wisdom.” – Aristotle
        </blockquote>
        <div class="image-section" style="animation-delay: 0.4s;">
          <img src="https://images.unsplash.com/photo-1529139368490-c1fca799b9d9?auto=format&fit=crop&w=800&q=80" alt="Person writing in journal" />
          <div class="image-caption">Journaling is a powerful tool for self-discovery.</div>
        </div>
      </section>

<section id="chapter1-2">
        <h3>1.2 Emotional Intelligence</h3>
        <p>
          Emotional intelligence (EQ) is the ability to understand, use, and manage your own emotions positively to relieve stress, communicate effectively, empathize with others, and overcome challenges. High EQ contributes to better personal and professional relationships.
        </p>
        <div class="highlight-box">
          <strong>Key Emotional Intelligence components:</strong>
          <ul>
            <li>Self-regulation: Managing your impulses and moods thoughtfully.</li>
            <li>Empathy: Understanding others' emotions and perspectives.</li>
            <li>Social Skills: Building rapport and networks effectively.</li>
          </ul>
        </div>
        <p>
          Developing EQ involves consistent practice, emotional reflection, and learning to respond rather than react.
        </p>
        <div class="image-section" style="animation-delay: 0.5s;">
          <img src="https://images.unsplash.com/photo-1497493292307-31c376b6e479?auto=format&fit=crop&w=800&q=80" alt="Group of people collaborating and smiling" />
          <div class="image-caption">Empathy and social skills foster strong relationships.</div>
        </div>
      </section>
      <a href="#cover">Back to top</a>
    </section>

<section id="chapter2" style="animation-delay: 0.6s;">
      <h2>Chapter 2: Setting Goals</h2>
      <p>
        Goal setting is a powerful process that provides focus, measures progress, and helps align your daily actions with your broader vision.
      </p>
      <p>
        Without clear goals, it’s easy to drift or become overwhelmed by distractions. Properly structured goals, however, motivate and guide you.
      </p>

<section id="chapter2-1">
        <h3>2.1 SMART Goals</h3>
        <p>One of the most effective frameworks for goal setting is the SMART criteria, which ensures goals are:</p>
        <ul>
          <li><strong>Specific:</strong> Clearly defined and unambiguous.</li>
          <li><strong>Measurable:</strong> Quantifiable to track progress.</li>
          <li><strong>Achievable:</strong> Realistic and attainable.</li>
          <li><strong>Relevant:</strong> Meaningful and aligned with values.</li>
          <li><strong>Time-bound:</strong> Set within a specific deadline.</li>
        </ul>
        <p>
          Example: Instead of "Get fit," a SMART goal would be, "Jog 3 kilometers, three times a week for the next two months."
        </p>
        <div class="image-section" style="animation-delay: 0.7s;">
          <img src="https://images.unsplash.com/photo-1526403224098-b90e81251e87?auto=format&fit=crop&w=800&q=80" alt="Checklist and pen on wooden table" />
          <div class="image-caption">Defining clear, measurable goals keeps you on track.</div>
        </div>
      </section>

<section id="chapter2-2">
        <h3>2.2 Overcoming Obstacles</h3>
        <p>
          Challenges are inevitable on the path to achieving goals. Recognizing potential hurdles beforehand and developing contingency plans helps maintain momentum.
        </p>
        <div class="highlight-box">
          <strong>Strategies to overcome obstacles:</strong>
          <ul>
            <li>Identify possible setbacks and plan responses.</li>
            <li>Maintain a growth mindset: view failures as learning opportunities.</li>
            <li>Use accountability partners or tracking tools.</li>
          </ul>
        </div>
        <div class="image-section" style="animation-delay: 0.8s;">
          <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=800&q=80" alt="Person climbing mountain peak" />
          <div class="image-caption">Persistence and planning help you overcome challenges.</div>
        </div>
      </section>
      <a href="#cover">Back to top</a>
    </section>

<section id="chapter3" style="animation-delay: 0.9s;">
      <h2>Chapter 3: Building Positive Habits</h2>
      <p>
        Habits are the daily behaviors that, compounded over time, determine your long-term success and wellbeing. Creating positive habits reduces decision fatigue and automates productive actions.
      </p>

<section id="chapter3-1">
        <h3>3.1 Habit Formation Techniques</h3>
        <ul>
          <li><strong>Start Small:</strong> Begin with manageable changes to avoid burnout.</li>
          <li><strong>Habit Stacking:</strong> Link a new habit to an existing one. For example, after brushing your teeth, do 5 minutes of stretching.</li>
          <li><strong>Environmental Design:</strong> Modify your surroundings to support your habits, like placing a book on your pillow to encourage reading before bed.</li>
          <li><strong>Track Your Progress:</strong> Use journals or apps to visualize streaks and growth.</li>
        </ul>
        <div class="image-section" style="animation-delay: 1s;">
          <img src="https://images.unsplash.com/photo-1518609878373-06d740f60d8b?auto=format&fit=crop&w=800&q=80" alt="Calendar with checked days" />
          <div class="image-caption">Tracking habits builds positive momentum.</div>
        </div>
      </section>

<section id="chapter3-2">
        <h3>3.2 Maintaining Motivation</h3>
        <p>
          Motivation fluctuates naturally, so it’s vital to create systems that keep your progress consistent despite low motivation days.
        </p>
        <ul>
          <li>Set reminders and alarms.</li>
          <li>Reward yourself for achievements.</li>
          <li>Surround yourself with supportive communities or accountability partners.</li>
          <li>Visualize your end goal regularly.</li>
        </ul>
        <p>
          Remember, patience is key — meaningful change takes time but yields profound rewards.
        </p>
        <div class="image-section" style="animation-delay: 1.1s;">
          <img src="https://images.unsplash.com/photo-1526045612212-70caf35c14df?auto=format&fit=crop&w=800&q=80" alt="Group of people cheering and motivating each other" />
          <div class="image-caption">Community support fuels sustained motivation.</div>
        </div>
      </section>
      <a href="#cover">Back to top</a>
    </section>

<section id="chapter4" style="animation-delay: 1.2s;">
      <h2>Chapter 4: Mindfulness and Stress Management</h2>
      <p>
        Mindfulness involves paying full attention to the present moment non-judgmentally. It reduces stress and increases emotional resilience, enabling you to respond thoughtfully to life’s challenges.
      </p>
      <p>
        Techniques for practicing mindfulness include:
      </p>
      <ul>
        <li>Breath Awareness: Focusing on your breathing to center your mind.</li>
        <li>Body Scan: Notice sensations in different parts of your body to ease tension.</li>
        <li>Mindful Walking: Walking slowly and attentively, noticing every movement and sound.</li>
        <li>Guided Meditation: Using recorded meditations to cultivate mindfulness.</li>
      </ul>
      <blockquote>
        “Mindfulness is the aware, balanced acceptance of the present experience.” – Tara Brach
      </blockquote>
      <div class="image-section" style="animation-delay: 1.3s;">
        <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=800&q=80" alt="Person meditating near water" />
        <div class="image-caption">Meditation calms the mind and reduces stress.</div>
      </div>
      <a href="#cover">Back to top</a>
    </section>

<section id="chapter5" style="animation-delay: 1.4s;">
      <h2>Chapter 5: Continuous Learning and Growth</h2>
      <p>
        Life-long learning nurtures personal and professional growth. By consistently challenging yourself to acquire new knowledge and skills, you build adaptability and creativity.
      </p>
      <p>
        Strategies to cultivate continuous learning:
      </p>
      <ul>
        <li>Read regularly; diversify your topics and genres.</li>
        <li>Attend workshops, webinars, and courses.</li>
        <li>Join discussion groups and learning communities.</li>
        <li>Reflect on lessons learned and apply them.</li>
      </ul>
      <div class="image-section" style="animation-delay: 1.5s;">
        <img src="https://images.unsplash.com/photo-1504386106331-3e4e71712b38?auto=format&fit=crop&w=800&q=80" alt="Person reading by window" />
        <div class="image-caption">Expand your horizons through learning.</div>
      </div>
      <a href="#cover">Back to top</a>
    </section>

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
      if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        scrollBtn.style.display = "block";
      } else {
        scrollBtn.style.display = "none";
      }
    }

scrollBtn.onclick = function() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    };
  </script>
</body>
</html>

libro electrónico

Recomendado

Libro de brujas

Interruptor electrónico

Tienda de comercio electrónico

HTML

CSS

JS

Recomendado

Libro de brujas

Interruptor electrónico

Tienda de comercio electrónico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS