Website Demo

Demo to test the website entries

by yyyyaaaannnnoooo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sBlog">
  <selena>
    My meaningful contribution
    <img src="https://i.ytimg.com/vi/dGFSjKuJfrI/maxresdefault.jpg">
  </selena>
</div>

CSS

body {
  /* background-color: chartreuse; */
  position: relative;
  padding: 0px;
  margin: 0px;
  font-family: 'Source Code Pro', mono;
  padding-bottom: 0rem;
  height: 100vh;
}
/* Personal styles for team members */

yano,
micha,
shintaro,
selena,
viktor,
kayla {
  line-height: 25pt;
  /* border: solid 3px #f00;  */
  /* font-family: 'Source Code Pro', mono; */
}
/*Down here zou can fill your personal CSS style*/
yano {
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: rgb(0, 255, 30);
  border-bottom: solid 2px rgb(255, 153, 0);
  background-color: black;
}

selena {
  /* font-family: Georgia, 'Times New Roman', Times, serif; */
  color: #f00;
  /* border-bottom: solid 2px #0cf; */
}

micha {
  /* font-family: Georgia, 'Times New Roman', Times, serif; */
  color: #f50;
  border-bottom: solid 2px #0cf;
}

shintaro {
  /* font-family: Georgia, 'Times New Roman', Times, serif; */
  color: rgb(255, 255, 255);
  border-bottom: solid 2px #0cf;
  background-color: black;
}

kayla {
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #f50;
  border-bottom: solid 2px #0cf;
}

viktor {
  /* font-family: Georgia, 'Times New Roman', Times, serif; */
  color: #f50;
  border-bottom: solid 2px rgb(43, 255, 0);
}


/* custom scrollbars */

::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1); */
  background-color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  background-color: #f50;
  /* border: 2px solid #555555; */
}

canvas {
  position: fixed;
  top: 0px;
  left: 0px;
}


img {
  position: relative;
  width: 100%;
  height: auto;
  float: right;
  max-width: 650px;
  border: solid 3px #f50;
}

a {
  color: #f50;
  text-decoration: none;
}

a:hover {
  /* font-style: italic; */
  font-weight: 100;
  /* border-bottom: solid 5px #0cf; */
}

letterLink {
  color: #f50;
}

menuelement {
  background-color: #fff;
  font-family: inherit;
  font-size:...

JavaScript

/**
 * this function enlarges the divs by clicking on them
 */
let previous = null,
  prevH, prevW, prev;
// needs refactoring
$(".project, .sBlog, .moodBoard, .team").click(function() {
  let myDiv = this;
  // if (e.target.tagName.includes('IMG')) return;//here we handle the the case we click on an image
  if (previous == null) {
    //needs refactoring!!!!!!!
  } else {
    //reset the previous clicked div to its initial state
    setNumberOfColumns(previous, 'initial');
    previous.style.height = prevH;
    previous.style.width = prevW;
    previous.style.overflowY = 'scroll';
  }
  //let's save the div so we can reset it later
  previous = this;
  prevH = this.style.height;
  prevW = this.style.width;
  //here we enlarge the div
  myDiv.style.overflowY = 'hidden';
  myDiv.style.width = '100%';
  myDiv.style.height = 'auto';
  //here we set the number of columns
  setNumberOfColumns(myDiv, '2');
  // console.log(this);
  //here we get the height of the top menu (needs refactoring set it as gloal variable)
  // let menuH = document.getElementById('myMenu').getBoundingClientRect().height;
  let y = parseFloat(this.getBoundingClientRect().y) + window.scrollY; //this helps us to get the position of the div to scroll to
  window.scrollTo(0, y);
  // goTo(0, y);
});