We Keep Coding

keyframes filling color in the circle with css and jquery

As we scroll down the page, I want to fill the color in the circle as clockwise. I found a way to fill the color on the link https://codepen.io/HugoGiraudel/pen/BHEwo
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
.wrapper {
position: relative;
margin: 40px auto;
background: white;
}
#mixin timer($item, $duration, $size, $color, $border, $hover: running) {
#{$item} {
width: $size;
height: $size;
}
#{$item} .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: $color;
}
#{$item} .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none;
animation: rota $duration + s linear infinite;
}
#{$item}:hover .spinner,
#{$item}:hover .filler,
#{$item}:hover .mask {
animation-play-state: $hover;
}
#{$item} .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: opa $duration + s steps(1,end) infinite reverse;
border-left: none;
}
#{$item} .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: opa $duration + s steps(1,end) infinite;
}
#keyframes rota {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes opa {
0% { opacity: 1; }
50%, 100% { opacity: 0; }
}
}
#include timer('.wrapper', 5, 250px, #08C, '5px solid rgba(0,0,0,0.5)');
if $(document).scrollTop() is between 100, it starts filling from 9o'clock, as $(document).scrollTop() is getting bigger then it fills as clockwise until it reaches to 1000.
Any way to implement this?

If you are having a problem in downloading Sass below is the code without compass component just pure css.
This will work in your apache server.
var timer=document.getElementsByClassName('timer')[0];
var timer_1=document.getElementsByClassName('timer_1')[0];
timer_1.style.transform="rotate(360deg)";
timer_1.style.background="#ddd";
window.addEventListener('scroll',function(){
var scrolled=window.scrollY;
var diff=scrolled-180;
if(scrolled>=0 && scrolled<=180 ){
timer_1.style.background="#ddd";
timer_1.style.transform="rotate("+(360-scrolled)+"deg)";
if(scrolled==180){
timer_1.style.transform="rotate(180deg)";
}
}
else{
if(scrolled>=180.0001){
timer_1.style.background="#6c6";
timer_1.style.transform="rotate("+(360-diff)+"deg)";
if(scrolled>=360){
timer_1.style.transform="rotate(180deg)";
}
}
}
})
body{
min-height: 3000px;
}
.timer { margin-top:100px;background: linear-gradient(90deg, #6c6 50%, #ddd 50%); border-radius: 50%; height: 6em; position: fixed; width: 6em; }
.timer_1 { border-radius: 100% 0 0 100% / 50% 0 0 50%; content: ''; height: 100%; left: 0; position: absolute; top: 0; transform-origin: 100% 50%; width: 50%;}
p{
font-size: 20px;
font-family:'arial';
margin-left: 500px;
width: 60%;
}
<div class="timer">
<div class="timer_1"></div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>

Add this JS code and change css with the one given below and you will get what you need.
JS
var wrapper=document.getElementsByClassName('wrapper')[0];
var spinner=document.getElementsByClassName('spinner')[0];
var filler=document.getElementsByClassName('filler')[0];
var mask=document.getElementsByClassName('mask')[0];
var count=0;
window.addEventListener('scroll',function(){
var scrolled=window.scrollY;
spinner.style.transform="rotate(" + scrolled+ "deg)";
if(count%2==0)
{
if(scrolled>=180){
filler.style.opacity=1;
mask.style.opacity=0;
count++;
}
}
else{
if(scrolled<=180){
filler.style.opacity=0;
mask.style.opacity=1;
count++;
}
}
if(scrolled>=360)
{
if(scrolled==360)
{
mask.style.opacity=0;
}
spinner.style.transform="rotate(360deg)";
}
})
CSS
#import "compass/css3";
body{
min-height:2400px;
}
.wrapper {
position: fixed;
margin: 40px auto;
background: white;
}
#mixin timer($item, $duration, $size, $color, $border, $hover: running) {
#{$item}, #{$item} * { #include box-sizing(border-box); }
#{$item} {
width: $size;
height: $size;
}
#{$item} .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: $color;
border: #{$border};
}
#{$item} .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none;
}
#{$item}:hover .spinner,
#{$item}:hover .filler,
#{$item}:hover .mask {
animation-play-state: $hover;
}
#{$item} .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
border-left: none;
}
#{$item} .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
}
#keyframes rota {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes opa {
0% { opacity: 1; }
50%, 100% { opacity: 0; }
}
}
#include timer('.wrapper', 5, 250px, #08C, '5px solid rgba(0,0,0,0.5)');
This will work

How to align three text expressions evenly and centered in one line vertically

I have a single page HTML which I want its header contents in mobile/tablet to be like in the photo attached . I have tried several ways but no luck :
Here is the desired result :
And Here is the Code I've Used :
body {
margin: 0;
background-color: black;
}
.title {
text-align: center;
background-color : white;
color : black;
height: 100px;
padding: 35px 0;
margin: 0;
width: 100%;
z-index: 1;
position: fixed;
font-family: Clearface, sans-serif;
font-size: 40px;
}
.header #accordion-0 {
font-size: 25px;
}
#about {
background-color: black;
color : white;
float : left;
width : 50%;
height : 100vh;
font-family: Clearface, sans-serif;
margin-top: 170px;
position: fixed;
}
#about h2 {
font-size: 80px;
padding: 30px 70px 0 70px;
}
#about p {
font-size: 30px;
padding : 70px;
padding-top: 0;
}
#projects .accordion {
background-color: #333648;
color: white;
cursor: pointer;
padding: 20px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 17px;
transition: 0.5s;
height: 20%;
font-family: 'Univers LT Std', sans-serif;
font-size: 20px;
opacity: 0.7;
}
#projects .active, #projects .accordion:hover {
background-color: #ccc;
color: black;
opacity: 1;
}
.panel {
padding:0 18px;
background-color: white;
max-height: 0;
overflow-y: hidden;
transition: max-height 0.3s ease-out;
}
.post {
padding: 0 20%;
font-family: 'Univers LT Std', sans-serif;
font-size: 20px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
margin: 50px auto;
}
#projects {
float : right;
width: 50%;
height: 100vh;
font-family: 'Univers LT Std', sans-serif;
font-size : 20px;
margin-top: 170px;
}
#about-accordion h2, #about-accordion p{
font-family: Clearface, sans-serif;
}
#about-accordion .panel{
background-color: black;
color : white;
}
#about-accordion {
font-size: 30px;
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#about {
display : none;
}
#projects {
width: 100%;
}
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#about {
display : none;
}
#projects {
width: 100%;
}
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
#about-accordion {
display : none;
}
.header #accordion-0 {
display : none;
}
#dash {
display : none;
}
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
#about-accordion {
display : none;
}
.header #accordion-0 {
display : none;
}
#dash {
display : none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="header title">
<span id="hello-back"> Hello <br> Back </span>
<span id="dash"> - </span>
<span id="accordion-0" class="accordion">About Me</span>
</h1>
<div id="about">
<h2>
Hello!
</h2>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
</p>
</div>
<div id="projects">
<div id="about-accordion">
<div id="panel-0" class="panel">
<div class="post">
<h2>
Hello!
</h2>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
</p>
</div>
</div>
</div>
<button id="accordion-1" class="accordion">Project 1</button>
<div id="panel-1" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button id="accordion-2" class="accordion">Project 2</button>
<div id="panel-2" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button id="accordion-3" class="accordion">Project 3</button>
<div id="panel-3" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button id="accordion-4" class="accordion">Project 4</button>
<div id="panel-4" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button id="accordion-5" class="accordion">Project 5</button>
<div id="panel-5" class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<script>
var accordion = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", function() {
var patt = /(accordion-)(\d)/gm;
var match = patt.exec(this.id);
panel = document.getElementById("panel-" + match[2]);
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panels = document.getElementsByClassName('panel');
for(j = 0; j < panels.length; j++) {
if(panels[j].id != panel.id) {
panels[j].style.maxHeight = null;
panels[j].classList.remove('active');
}
}
panel.style.maxHeight = panel.scrollHeight + "px";
}
this.classList.toggle("active");
});
}
function hscrollbar() {
/* First, we need the horizontal scroll position of the viewer's display,
but there are different ways to call it in JS depending on browser.
I'm using the if/else shorthand notation to detect if a call is legit:
somevar = (statement) ? statement_true_value : statement_false_value */
var left =
/* window.pageXOffset should work for most recent browsers: */
window.pageXOffset ? window.pageXOffset :
/* If it DOESN'T, let's try this: */
document.documentElement.scrollLeft ? document.documentElement.scrollLeft :
/* And if THAT didn't work: */
document.body.scrollLeft;
/* Now that we have the horizontal scroll position, set #footpanel's left
position to NEGATIVE the value, so it APPEARS to follow the scroll: */
document.getElementById('about').style.left = -left;
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */
</script>
</body>
</html>

You can use flex-box, add to your .title class the following:
.title {
display: flex;
justify-content: space-between;
align-items: center;
}

How to have Accordin buttons' heights fill the remaining space evenly

I have developed a layout in which button elements should fill the empty space below them when they are closed . I tried several approaches but no luck.
Here is my code :
var accordion = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", function() {
panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
for(j = 0; j < accordion.length; j++) {
if(j != i) {
accordion[j].nextElementSibling.style.maxHeight = null;
accordion[j].classList.remove('active');
}
}
panel.style.maxHeight = panel.scrollHeight + "px";
}
this.classList.toggle("active");
});
}
body {
margin: 0;
background-color: #e0d9d4;
}
.container {
height: 100%;
}
.about {
float: left;
width: 50%;
color : white;
background-color : black;
}
.projects {
float : right;
width : 50%;
}
.about h2 {
font-family: Clearface;
font-size : 80px;
padding: 30px;
}
.about p {
font-family: Clearface;
font-size : 30px;
padding: 30px;
}
.accordion {
background-color: #333648;
color: white;
cursor: pointer;
padding: 20px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 17px;
transition: 0.5s;
}
.active, .accordion:hover {
background-color: #ccc;
color: black;
}
.panel {
padding:0 18px;
background-color: white;
max-height: 0;
overflow-y: hidden;
transition: max-height 0.3s ease-out;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
margin: 50px auto;
}
.header-img-responsive {
display: block;
width: 100%;
height: auto;
}
.post {
padding: 0 20%;
}
.title {
text-align: center;
color: #932D26;
}
<div class="container">
<div class="about">
<h2>
Hello!
</h2>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
</p>
</div>
<div class="projects">
<button class="accordion">Project 1</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button class="accordion">Project 2</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button class="accordion">Project 3</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button class="accordion">Project 4</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button class="accordion">Project 5</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
how can I achieve this effect ?

Add display: flex in .container class and add height: 20% in class accordion and it'll work. Check following working code.
var accordion = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", function() {
panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
for(j = 0; j < accordion.length; j++) {
if(j != i) {
accordion[j].nextElementSibling.style.maxHeight = null;
accordion[j].classList.remove('active');
}
}
panel.style.maxHeight = panel.scrollHeight + "px";
}
this.classList.toggle("active");
});
}
body {
margin: 0;
background-color: #e0d9d4;
}
.container {
height: 100%;
display: flex;
}
.about {
float: left;
width: 50%;
color : white;
background-color : black;
}
.projects {
float : right;
width : 50%;
}
.about h2 {
font-family: Clearface;
font-size : 80px;
padding: 30px;
}
.about p {
font-family: Clearface;
font-size : 30px;
padding: 30px;
}
.accordion {
background-color: #333648;
color: white;
cursor: pointer;
padding: 20px;
width: 100%;
height: 20%;
border: none;
text-align: center;
outline: none;
font-size: 17px;
transition: 0.5s;
}
.active, .accordion:hover {
background-color: #ccc;
color: black;
}
.panel {
padding:0 18px;
background-color: white;
max-height: 0;
overflow-y: hidden;
transition: max-height 0.3s ease-out;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
margin: 50px auto;
}
.header-img-responsive {
display: block;
width: 100%;
height: auto;
}
.post {
padding: 0 20%;
}
.title {
text-align: center;
color: #932D26;
}
<div class="container">
<div class="about">
<h2>
Hello!
</h2>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
</p>
</div>
<div class="projects">
<button class="accordion">Project 1</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button class="accordion">Project 2</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button class="accordion">Project 3</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button class="accordion">Project 4</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
<button class="accordion">Project 5</button>
<div class="panel">
<div class="post">
<h2>TITLE HEADING</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div>
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
<img src="images/placeholder.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>

CSS transition not working when removing class

I want to add a fixed header when I scroll and I would like to add a transition when the class is added/removed. Currently the animation is only working when the class is added.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
$(".nav").addClass("sticky");
} else {
$(".nav").removeClass("sticky");
}
});
.nav {
font-weight: 600;
text-transform: uppercase;
transition: all 400ms ease;
&__link {
text-decoration: none;
color: white;
&:not(:last-child) {
margin-right: 6rem;
}
}
}
.sticky {
position: fixed;
top: 0;
left: 0;
padding: 1rem 0;
width: 100%;
z-index: 1;
text-align: center;
background: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
Home
About us
Menu
Drinks
Reservations
</nav>

In your css, the properties like position, text-align etc do not support transition.So I moved that properties from css and is now injecting through js with/with out a delay. Also I applied position:absolute for the navigation and aligned it at the top of the body. It normally behaves as a floated block element. May be you have to apply a top margin for the proceeding element to avoid overlap. If that is okay, you may try the below example. <div class="spacer"></div> is a dummy element to make the page scroll-able.
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
$(".nav").css({
'position': 'fixed',
'text-align': 'center'
});
$(".nav").addClass("sticky");
} else {
$(".nav").removeClass("sticky");
setTimeout(function (){
$(".nav").css({
'position': 'static',
'text-align': 'left'
});
},400);
}
});
.nav {
position:absolute;
top: 0;
left: 0;
width: 100%;
font-weight: 600;
text-transform: uppercase;
transition: all 400ms ease;
&__link {
text-decoration: none;
color: white;
&:not(:last-child) {
margin-right: 6rem;
}
}
}
.sticky {
padding: 1rem 0;
width: 100%;
z-index: 1;
text-align: center;
background: #ccc;
position: fixed;
}
.spacer{
width: 100%;
height: 2000px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
Home
About us
Menu
Drinks
Reservations
</nav>
<div class="spacer"></div>

$(document).ready(function() {
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function() {
checkScroll();
});
}
});
function checkScroll() {
var startY = $('.navbar').height() * 2;
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("scrolled");
} else {
$('.navbar').removeClass("scrolled");
}
}
p{
padding-top:72px;
}
.navbar{
background: #ffee58;
font-weight: 600;
text-transform: uppercase;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.navbar.scrolled {
background: #37474f;
/* IE */
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .2);
z-index: 999;
/* NON-IE */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<header>
<nav class="navbar fixed-top stroke">
Home
About us
Menu
Drinks
Reservations
</nav>
</header>
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
<p>
</body>

Try adding transition for .sticky class also
.sticky {
position: fixed;
top: 0;
left: 0;
padding: 1rem 0;
width: 100%;
z-index: 1;
text-align: center;
background: #222;
transition: all 400ms ease;
}

how to write a small image popup using java script?

I have a product page in my website and there are 12 products and each product have a unique photo and description table. and I need a small popup model to show the description table when an user click the product photo. how can i do the task? this is my product page's code
<!--1-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--2-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--3-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--4-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--5-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--6-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--7-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--8-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--9-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--10-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--11-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div>
<!--12-->
<div class="thumbnail">
<div class="image">
<p>
<img style="width: 100%; border-radius: 60px 20px 60px 20px;
overflow: hidden; border: 7px solid #3366ff;" src="http://steelrich.com/SR/wp-content/uploads/2016/11/deformed_steel_bar_for_construction_8537_1.jpg" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,</p>
</div></div></div>

http://www.w3schools.com/howto/howto_css_modals.asp
Although I second Shailesh Singh's bootstrap model idea.
This way doesn't require use of bootstrap, making it one full step easier.

A concept: Create a div (your popup) with dispay hidden and give each photo an unique id or attribute. Add an on click event listener on the photo div classes. When clicking a photo, get the clicked attribute or Id and change the content of your hidden popup div to your description table. Then set the display of the popup to block.