Code Snippets

How to have the layout for the code stipets code. You will need to escape the HTML you will be putting inside the box or it will break!

CSS
.codes-container {
  padding: 20px;
  color: #e8dede;
  font-family: monospace;
}

.codes-header {
  text-align: left;
  margin-bottom: 20px;
}

.codes-header h2 {
  font-size: 18px;
  margin: 0;
  color: #e7dede;
  letter-spacing: 1.5px;
}

.codes-header p {
  font-size: 12px;
  color: #f2e4e4;
  margin-top: 4px;
}

.code-block {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.code-box {
  width: 200px;           /* Fixed width */
  max-width: 200px;
  max-height: 180px;      /* Limit height to 180px */
  background-color: #1f1b1b;
  border: 1px solid #ff99cc;
  border-radius: 6px;
  padding: 10px;
  position: relative;
  box-shadow: 0 0 6px rgba(255, 153, 204, 0.3);
  display: flex;
  flex-direction: column;
  overflow-y: auto;       /* Enable vertical scroll */
}

.code-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 12px;
  color: #ff99cc;
  text-shadow: 0 0 3px #ff99cc;
  flex-shrink: 0;
}

pre {
  margin: 0;
  font-size: 11px;
  color: #f8e1e1;
  white-space: pre-wrap;   /* Wrap lines inside */
  word-wrap: break-word;
  flex-grow: 1;
}

/* Copy button styling */
.copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  background-color: #2c1a1a;
  color: #ff99cc;
  border: 1px solid #ff99cc;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
}

.copy-btn:hover {
  background-color: #ff99cc;
  color: #2c1a1a;
}

/* Divider between code sections */
.code-divider {
  margin: 24px 0;
  border: none;
  border-top: 1px dashed #ff99cc;
  opacity: 0.4;
}
HTML
<div class="codes-container">
  <div class="codes-header">
    <h2>Code Snippets</h2>
    <p>Useful bits of code you can copy and paste easily.</p>
  </div>

  <!-- Code Block Section Start -->
  <div class="code-block">
    <div class="code-box">
      <div class="code-title">CSS</div>
      <pre><code>.example {
  color: pink;
  font-weight: bold;
}</code></pre>
      <button class="copy-btn" onclick="copyCode(this)">Copy</button>
    </div>

    <div class="code-box">
      <div class="code-title">HTML</div>
      <pre><code>&lt;div class="example"&gt;Hello&lt;/div&gt;</code></pre>
      <button class="copy-btn" onclick="copyCode(this)">Copy</button>
    </div>

    <div class="code-box">
      <div class="code-title">JS</div>
      <pre><code>console.log("Hello, world!");</code></pre>
      <button class="copy-btn" onclick="copyCode(this)">Copy</button>
    </div>
  </div>
  <!-- Code Block Section End -->

  <hr class="code-divider" />
</div>
JS
function copyCode(button) {
  const code = button.closest('.code-box').querySelector('code');
  if (!code) return;

  const textToCopy = code.textContent;

  navigator.clipboard.writeText(textToCopy)
    .then(() => {
      alert('Code copied to clipboard!');
    })
    .catch(err => {
      alert('Failed to copy code: ' + err);
    });
}

Small clock

I t has hours, minutes and secons. It is always counting.

CSS
.clock {
  position: fixed;
  top: -5px;
  right: 20px;
  color: #e38b8b;
  font-family: 'Bodoni Moda', serif;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 9999;
  letter-spacing: 1px;
  text-shadow: 0 0 2px #ff99cc;
   -webkit-text-stroke: 1px #f5eaea; /* Clean thick border */
  letter-spacing: 0.5px;
  white-space: nowrap; /* Force single line */
  z-index: 1;
  text-shadow: none; /* Remove glow */
}
HTML
<div id="clock" class="clock"></div>
JS
 function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
  }

  setInterval(updateClock, 1000);
  updateClock(); // initial call

Montly calendar

Useful bits of code you can copy and paste easily.

CSS

/* Calendar container styling */
.calendar-container {
  width: 200px;
  background: #1f1b1b;
  color: #e38b8b;
  font-family: 'Verdana', sans-serif;
  font-size: 11px;
  padding: 8px;
  margin: 20px auto;
  border: 1px solid #e38b8b;
  box-sizing: border-box;
}

/* Calendar header */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-weight: bold;
  color: #FF99FF;
  font-size: 12px;
}

/* Calendar grid */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  text-align: center;
}

/* Days and dates boxes */
.calendar-day,
.calendar-date {
  width: 22px;
  height: 22px;
  line-height: 24px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

/* Date boxes */
.calendar-date {
  border-radius: 2px;
  transition: background-color 0.2s;
  border: 1px dotted #e38b8b;
  margin: 1px;
}

/* Hover effect on date boxes */
.calendar-date:hover {
  background-color: #ffb6c1;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 0 3px #ffb6c1;
}

/* Today’s date styling */
.calendar-date.today {
  background-color: #ff99cc;
  color: white;
  position: relative;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 0 5px #ff99cc;
  animation: sparkle 1.2s infinite alternate;
}

/* Sparkle animation for today's date */
@keyframes sparkle {
  0% { transform: scale(1); }
  100% { transform: scale(1) rotate(5deg); }
}

/* Calendar header buttons styling */
.calendar-header button {
  background-color: #5a414a; 
  border: 1px solid #4a3740;
  color: #d8a9b8;
  font-weight: bold;
  font-family: 'Verdana', sans-serif;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 4px #4a3740;
}

/* Hover effect for calendar header buttons */
.calendar-header button:hover {
  background-color: #6f4a56; 
  color: #e6c2ce; 
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 0 6px #6f4a56;
}
HTML
      <div class="calendar-container">
        <div id="calendar"></div>
      </div>
      <link rel="stylesheet" href="calendar.css" />
      <script src="calendar.js"></script>
  </div>
JS
const calendarEl = document.getElementById('calendar');

// Function to render the calendar with month navigation
const renderCalendar = (monthOffset = 0) => {
  const now = new Date();
  const today = new Date(); // current real date

  now.setMonth(now.getMonth() + monthOffset); // adjust month based on offset
  const year = now.getFullYear();
  const month = now.getMonth();

  const firstDay = new Date(year, month, 1).getDay(); // day of week for 1st of month
  const daysInMonth = new Date(year, month + 1, 0).getDate(); // total days in month

  const monthNames = ["January", "February", "March", "April", "May", "June",
                      "July", "August", "September", "October", "November", "December"];
  const dayNames = ["S", "M", "T", "W", "T", "F", "S"];

  // Generate date elements with 'today' class and star for current day
  const calendarDates = Array(daysInMonth).fill(0).map((_, i) => {
    const day = i + 1;
    const isToday =
      day === today.getDate() &&
      month === today.getMonth() &&
      year === today.getFullYear();

    return `<div class="calendar-date${isToday ? ' today' : ''}">
              ${day}
              ${isToday ? '<span class="star"></span>' : ''}
            </div>`;
  });

  // Build and insert the calendar HTML
  calendarEl.innerHTML = `
    <div class="calendar-header">
      <button onclick="renderCalendar(${monthOffset - 1})">&lt;</button>
      <div>${monthNames[month]} ${year}</div>
      <button onclick="renderCalendar(${monthOffset + 1})">&gt;</button>
    </div>
    <div class="calendar">
      ${dayNames.map(day => `<div class="calendar-day">${day}</div>`).join('')}
      ${Array(firstDay).fill('<div></div>').join('')}
      ${calendarDates.join('')}
    </div>
  `;
};

// Initial render of calendar
renderCalendar();

Code Snippets

Useful bits of code you can copy and paste easily.

CSS
.example {
  color: pink;
  font-weight: bold;
}
HTML
<div class="example">Hello</div>
JS
console.log("Hello, world!");

Code Snippets

Useful bits of code you can copy and paste easily.

CSS
.example {
  color: pink;
  font-weight: bold;
}
HTML
<div class="example">Hello</div>
JS
console.log("Hello, world!");

Code Snippets

Useful bits of code you can copy and paste easily.

CSS
.example {
  color: pink;
  font-weight: bold;
}
HTML
<div class="example">Hello</div>
JS
console.log("Hello, world!");

Code Snippets

Useful bits of code you can copy and paste easily.

CSS
.example {
  color: pink;
  font-weight: bold;
}
HTML
<div class="example">Hello</div>
JS
console.log("Hello, world!");

Code Snippets

Useful bits of code you can copy and paste easily.

CSS
.example {
  color: pink;
  font-weight: bold;
}
HTML
<div class="example">Hello</div>
JS
console.log("Hello, world!");