try

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 data-number="0">1</span></a></li>
              <li><a class="info"><span data-number="0">2</span></a></li>
              <li><a class="info"><span data-number="0">3</span></a></li>
              <li><a class="info"><span data-number="0">4</span></a></li>
              <li><a class="info"><span data-target="1" class="number">5</span></a></li>
              <li><a class="info"><span data-number="0">6</span></a></li>
              <li><a class="info"><span data-number="0">7</span></a></li>
              <li><a class="info"><span data-number="0">8</span></a></li>
              <li><a class="info"><span data-number="0">9</span></a></li>
              <li><a class="info"><span data-number="0">10</span></a></li>
              <li><a class="info"><span data-number="0">11</span></a></li>
              <li><a class="info"><span data-number="0">12</span></a></li>
              <li><a class="info"><span data-number="0">13</span></a></li>
              <li><a class="info"><span...

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

$(document).ready(function() {
  /* Winners calendar slide action */
  $(".december").hide();
  $(".winners-row .november .prev, .winners-row .november .next").on('click', function() {
    $(".november").hide();
    $(".december").fadeIn(500);
  })
  $(".winners-row .december .prev, .winners-row .december .next").on('click', function() {
    $(".december").hide();
    $(".november").fadeIn(500);
  });

  /* winners-row*/
  let eventDay = $('.winners-row .days li a.info span');
  let winnerItems = $('.winners-row .winners-items');
  let winnerListNum = $('.winner-list-num');
  let winnerListMonth = $('.winner-list-month');
  let winnersName = $('.winners-row .winners');

  showActiveContent(eventDay, winnerItems, winnerListNum, winnerListMonth, winnersName);
});



function showActiveContent(eventDay, winnerItems, winnerListNum, winnerListMonth, winnersName) {

  winnerItems.hide();

  eventDay.on('click', function() {
    winnerItems.show();
    eventDay.removeClass('active');
    $(this).addClass('active');

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


    for (var i = 0; i < eventDay.length; i++) {
      for (var j = 0; j < winnersName.length; j++) {
        if (eventDay.data('target') == winnersName.data('target')) {
          let target = $(this).data('target');
          target.show();
        } else if ($(this).data('number') == 0) {
          winnersName.hide();
          winnerListNum.html('\xa0' + dateNum + '.' + '<br> Ezen a napon még nincs nyertes.');
        } else if ($(this).data('number') == 2) {
          winnersName.hide();
          winnerListNum.html('\xa0' + dateNum + '.' + '<br> A sorsolás 30.án végetért, ezen a napon nincs nyertes.');
        } else {
          winnersName.show();
          winnerListNum.html('\xa0' + dateNum + '.');
        }

      }
    }


  });

}
/* background */

(function() {
  // Variables
  var $curve...