CodePen Embed - wecoded

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WeCoded Celebration</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Header -->
  <header>
    <div class="logo">
      <img src="wecoded-logo.png" alt="WeCoded Logo">
    </div>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#stories">Stories</a></li>
        <li><a href="#resources">Resources</a></li>
      </ul>
    </nav>
  </header>

  <!-- Hero Section -->
  <section id="hero">
    <h1>Welcome to WeCoded</h1>
    <p>Celebrating diversity and inclusion in tech</p>
    <a href="#stories" class="btn">Explore Stories</a>
  </section>

  <!-- About Section -->
  <section id="about">
    <h2>About WeCoded</h2>
    <p>WeCoded is an annual celebration on DEV.to that highlights the contributions of underrepresented groups in the tech industry. Launched to coincide with International Women's Day, it emphasizes diversity and inclusion by showcasing inspiring stories and encouraging community participation.</p>
    <p>International Women's Day, celebrated on March 8th, recognizes women's achievements and advocates for gender equality. In tech, it underscores efforts to create an inclusive environment for all.</p>
    <img src="icon1.png" alt="Decorative Icon">
  </section>

  <!-- Featured Story -->
  <section id="featured">
    <h2>Featured Story</h2>
    <div id="featured-article"></div>
  </section>

  <!-- All Stories -->
  <section id="stories">
    <h2>WeCoded Stories</h2>
    <div class="article-container" id="article-container"></div>
    <div id="loading" style="display: none;">Loading...</div>
    <div id="error" style="display: none;">Failed to load articles. Please try again later.</div>
    <button id="load-more">Load More</button>
  </section>

  <!-- Resources -->
  <section id="resources">
    <h2>Resources</h2>
    <ul>
      <li><a href="https://dev.to/t/wecoded">DEV.to WeCoded Tag</a></li>
      <li><a href="https://www.womenwhocode.com/">Women Who Code</a></li>
      <li><a href="https://girlswhocode.com/">Girls Who Code</a></li>
    </ul>
  </section>

  <!-- Footer -->
  <footer>
    <p>Designed and built by Arion </p>
    <p><a href="https://dev.to/aniruddhadak">My Profile</a></p>
    <p>&copy; 2025 WeCoded</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

:root {
  --blue: #4531EA;
  --green: #CCEA71;
  --purple: #9D00E5;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Header */
header {
  background-color: var(--blue);
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 50px;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin-left: 1rem;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

/* Hero */
#hero {
  background: linear-gradient(to right, var(--blue), var(--purple));
  color: white;
  text-align: center;
  padding: 4rem 2rem;
}

#hero h1 {
  font-size: 3rem;
  margin: 0;
}

#hero p {
  font-size: 1.5rem;
}

.btn {
  background-color: var(--green);
  color: var(--blue);
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}

/* Sections */
#about, #featured, #stories, #resources {
  padding: 2rem;
  text-align: center;
}

h2 {
  color: var(--purple);
}

#about img {
  width: 100px;
  margin-top: 1rem;
}

/* Article Cards */
.article-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.article-card {
  border: 1px solid var(--blue);
  margin: 1rem;
  padding: 1rem;
  border-radius: 5px;
  width: calc(33.33% - 2rem);
  box-sizing: border-box;
  transition: transform 0.2s;
}

.article-card:hover {
  transform: scale(1.05);
}

.article-card img {
  width: 100%;
  height: auto;
}

.article-card h3 {
  color: var(--purple);
  font-size: 1.2rem;
}

.article-card a {
  color: var(--green);
  text-decoration: none;
}

#featured-article {
  margin: 0 auto;
  max-width: 800px;
  padding: 1rem;
}

#load-more {
  background-color: var(--green);
  color: var(--blue);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Footer */
footer {
  background-color: var(--blue);
  color: white;
  text-align: center;
  padding: 1rem;
}

footer a {
  color: var(--green);
}

/* Responsive Design */
@media (max-width: 768px) {
  header {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    align-items: center;
  }
  nav ul li {
    margin: 0.5rem 0;
  }
  #hero h1 {
    font-size: 2rem;
  }
  #hero p {
    font-size: 1rem;
  }
  .article-card {
    width: calc(50% - 2rem);
  }
}

@media (max-width: 480px) {
  .article-card {
    width: 100%;
  }
}

let page = 1;
const perPage = 10;

function fetchArticles() {
  document.getElementById('loading').style.display = 'block';
  fetch(`https://dev.to/api/articles?tag=wecoded&page=${page}&per_page=${perPage}`)
    .then(response => response.json())
    .then(data => {
      document.getElementById('loading').style.display = 'none';
      if (data.length === 0 && page === 1) {
        document.getElementById('article-container').innerHTML = '<p>No articles found.</p>';
        document.getElementById('load-more').style.display = 'none';
      } else {
        if (page === 1 && data.length > 0) {
          const featuredArticle = data[0];
          displayFeaturedArticle(featuredArticle);
          displayArticles(data.slice(1));
        } else {
          displayArticles(data);
        }
        if (data.length < perPage) {
          document.getElementById('load-more').style.display = 'none';
        } else {
          page++;
        }
      }
    })
    .catch(error => {
      document.getElementById('loading').style.display = 'none';
      document.getElementById('error').style.display = 'block';
      console.error('Error fetching articles:', error);
    });
}

function displayFeaturedArticle(article) {
  const featuredContainer = document.getElementById('featured-article');
  featuredContainer.innerHTML = `
    <article>
      <img src="${article.cover_image || 'placeholder.jpg'}" alt="${article.title}">
      <h3>${article.title}</h3>
      <p>By ${article.user.name} on ${article.readable_publish_date}</p>
      <p>${article.description}</p>
      <a href="${article.url}" target="_blank">Read more</a>
    </article>
  `;
}

function displayArticles(articles) {
  const container = document.getElementById('article-container');
  articles.forEach(article => {
    const card = document.createElement('article');
    card.className = 'article-card';
    card.innerHTML = `
      <img src="${article.cover_image || 'placeholder.jpg'}" alt="${article.title}">
      <h3>${article.title}</h3>
      <p>By ${article.user.name} on ${article.readable_publish_date}</p>
      <p>${article.description}</p>
      <a href="${article.url}" target="_blank">Read more</a>
    `;
    container.appendChild(card);
  });
}

document.getElementById('load-more').addEventListener('click', fetchArticles);

// Initial fetch on page load
fetchArticles();

This Pen is owned by ANIRUDDHA ADAK on CodePen.

See more by @aniruddhaadak on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.