Pure css, html calendar with Jquery with Dynamic content

by Zsanett Tamás

HTML

<body>


  <div class="svg-container">
    <svg viewbox="0 0 800 400" class="svg">
      <path id="curve" fill="#efa0c1" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
      </path>
    </svg>
  </div>

  <header>
    <h1>This is a header title</h1>
    <h3>Here you are, scroll down.</h3>
  </header>

  <main>
    <section class="smarties-contanier" id="nyertesek">

      <h2>Main</h2>
      <div class="winners-row">
        <div class="calendar">
          <div class="november">
            <div class="month">
              <ul>
                <li><a class="prev"></a></li>
                <li><a class="next"></a></li>
                <li>
                  <span>2019.</span>
                  <span class="actual-month">November</span>
                </li>
              </ul>
            </div>
            <ul class="days" id="november">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li><a class="info"><span>1</span></a></li>
              <li><a class="info"><span>2</span></a></li>
              <li><a class="info"><span>3</span></a></li>
              <li><a class="info"><span>4</span></a></li>
              <li><a class="info"><span data-id="november5" class="number">5</span></a></li>
              <li><a class="info"><span>6</span></a></li>
              <li><a class="info"><span>7</span></a></li>
              <li><a class="info"><span>8</span></a></li>
              <li><a class="info"><span>9</span></a></li>
              <li><a class="info"><span>10</span></a></li>
              <li><a class="info"><span>11</span></a></li>
              <li><a class="info"><span>12</span></a></li>
              <li><a class="info"><span>13</span></a></li>
              <li><a class="info"><span>14</span></a></li>
              <li><a class="info"><span data-id="november15" class="number">15</span></a></li>
              <li><a class="info"><span>16</span></a></li>
              <li><a...

CSS

@import "https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700";

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
}

.svg-container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
}



body {
  background: #fff;
  color: #333;
  font-family: 'Ubuntu', sans-serif;
  position: relative;
}

h3 {
  font-weight: 400;
}

header {
  color: #fff;
  padding-top: 10vw;
  padding-bottom: 30vw;
  text-align: center;
}

main {
  background: linear-gradient(to bottom, #ffffff 0%, #013d7c 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5vh;
  position: relative;
  text-align: center;
  overflow: hidden;
}

main::after {
  content: '';
  position: absolute;
  top: calc(10vh + 1.618em);
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100%;
}

footer {
  background: #013d7c;
  padding: 5vh 0;
  text-align: center;
  position: relative;
  color: #fff;
}

small {
  opacity: .5;
  font-weight: 300;
}

small a {
  color: inherit;
}


/* WINNERS - SECTION */
#nyertesek {
  position: relative;
}

.winners-row {
  padding-top: 2rem;
}

.calendar .november,
.calendar .december {
  margin-bottom: 7rem;
}

.winners-row ul {
  list-style-type: none;
  padding: 0 10px;
}

.winners-row .month {
  position: relative;
  padding: 25px 15px;
  width: 100%;
  text-align: center;
}

.winners-row .month ul {
  margin: 0;
  padding: 0;
}

.winners-row .month ul li {
  color: #013d7c;
  font-size: 20px;
}

.winners-row .month .prev {
  padding-top: 19px;
  background-repeat: no-repeat;
  position: absolute;
  width: 15px;
  top: 2rem;
  left: 6rem;
  background-image: url("https://image.flaticon.com/icons/svg/137/137531.svg");
  cursor: pointer;
}

.winners-row .month .next {
  padding-top: 19px;
  background-repeat: no-repeat;
  position: absolute;
  width: 15px;
  top: 2rem;
  right: 6rem;
  background-image: url("https://image.flaticon.com/icons/svg/137/137530.svg");
  cursor: pointer;
}

.winners-row .days {
  padding: 0;
  margin:...

JavaScript

function showActiveContent(eventDay, winnerItems, winnerListDateNum, winnerListMonth, winnerDetails, dynamicSectionName, dynamicSectionReward, dynamicSectionCurrently) {

  winnerItems.hide();

  eventDay.on('click', function() {

    winnerItems.show();
    eventDay.removeClass('active');
    $(this).addClass('active');

    const winners = {
      november5: {
        name: 'Winner1 Kriszta',
        reward: 'Reward1',
        currently: 'Sikeres'
      },
      november24: {
        name: 'Winner2 Kriszta',
        reward: 'Reward2',
        currently: 'Adategyeztetés alatt'
      },
      november11: {
        name: 'Winner3 Zsolt',
        reward: 'Reward3',
        currently: 'Sikeres'
      },
      november15: {
        name: 'Winner4 István',
        reward: 'Reward4',
        currently: 'Adategyeztetés alatt'
      },
      december14: {
        name: 'Winner5 Jakab',
        reward: 'Reward5',
        currently: 'Adategyeztetés alatt'
      },
      december24: {
        name: 'Winner6 Sándor',
        reward: 'Reward6',
        currently: 'Adategyeztetés alatt'
      },
    };

    let id = $(this).data('id');
    let dateNum = $(this).html();
    let actualMonth = $(this).parentsUntil('.calendar').find('.actual-month').text();
    winnerListMonth.html(actualMonth);

    if (id === undefined || id === null) {
      winnerDetails.hide();
      winnerListDateNum.html('\xa0' + dateNum + '.' + '<br> Ezen a napon még nincs nyertes.');
    } else if ($(this).data('number') == 2) {
      winnerDetails.hide();
      winnerListDateNum.html('\xa0' + dateNum + '.' + '<br> A sorsolás 30.án végetért, ezen a napon nincs nyertes.');
    } else {
      winnerDetails.show();
      winnerListDateNum.html('\xa0' + dateNum + '.');
      dynamicSectionName.html(winners[id].name);
      dynamicSectionReward.html(winners[id].reward);
      dynamicSectionCurrently.html(winners[id].currently);
    }
  });

}

$(document).ready(function() {

/* Winners calendar slide action...