We Keep Coding

Div going up, on scroll down

I am creating a single article page to show articles.What i wanted is to have a nice background (article image)and my article body,around midway of my page.When i scroll down though,i want the article body to go up.
This is what i have done so far.I tried to play around with scrollY and what i'm essentially trying to do is subtract from my "top" attibute ,every time there is a scroll. F.e. my article body has top=100px,when i scroll down 20px,i want my "top" to be 100-20=80.
const container = document.getElementById('article-container');
window.addEventListener('scroll',()=>{
console.log(scrollY)
container.style.top= `${378-scrollY} px`
})
main{
display: flex;
flex-direction: column;
align-items: center;
}
.article-image{
position: absolute;
z-index: 0.9;
min-height: 85vh;
opacity: 0.9;
}
.article-container{
width: 50%;
position: relative;
top: 35vh;
z-index:1;
background-color: white;
min-height: 50vh;
padding: 30px;
color: #1A2434;
-webkit-box-shadow: 0px 0px 15px 5px #1A2434 ;
box-shadow: 0px 0px 15px 5px #1A2434 ;
}
.article-container h1{
font-size: 3rem;
}
.article-container .date{
font-size: 0.8rem;
padding-top: 4vh;
font-family: 'Zona Pro Thin';
color: rgba(0, 0, 0, 0.5);
}
.article-container .article-description{
font-size: 1.2 rem;
padding-top: 4vh;
font-family: 'Zona Pro Thin';
color:#1a2434d0;
font-weight: bolder;
}
<main>
<img class='article-image' src="<%= article.image %>">
<div class="article-container" id="article-container">
<h1>Article Title</h1>
<div class="date">
21/6/2022
</div>
<div class="article-description">
Article Description
</div>
</div>
</main>

No need to JS, You can make a div as background and set it's height:100vh; overflow-y: overlay|scroll; and background: url('your photo') no-repeat center fixed;.
Then create another div for holding your articles and add margin-top:50vh; to it, and ... there you go :)
body {
margin: 0;
overflow: hidden;
}
main {
display: flex;
flex-direction: column;
/* set your picture's link here */
background: url("https://source.unsplash.com/iuyR_HEwk24/1600x900") no-repeat center fixed;
background-size: cover;
height: 100vh;
overflow-y: overlay;
}
.articles {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 50vh;
}
.article-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 15px;
width: 45vw;
padding: 30px;
color: #1a2434;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 15px;
}
.article-container:last-child {
margin-bottom: 30px;
}
<main>
<div class="articles">
<div class="article-container" id="article-container">
<h1>Article Title</h1>
<div class="date">21/6/2022</div>
<div class="article-description">Article Description</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 typespecimen 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 withdesktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy textever since the 1500s, when anunknown 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. Itwas popularised in the 1960s with therelease of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy textof the printing and typesetting industry. LoremIpsum 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 onlyfive 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 publishingsoftware like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="article-container" id="article-container">
<h1>Article Title</h1>
<div class="date">21/6/2022</div>
<div class="article-description">Article Description</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 typespecimen 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,</p>
</div>
</div>
</main>

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

CSS equivalent for QML's "elide: Text.ElideMiddle"

QML Text has got a property named elide, which is used to elide some part of a text. Its CSS equivalent is text-overflow. One possible value for elide is Text.ElideMiddle, used to elide the text in the middle. I have searched such a value for text-overflow but I have not found it yet. It is possible to elide at the left and at the right in CSS (with text-overflow: ellipsis ellipsis; on Firefox only), but I want the opposite. I want something like "1 2 3 … 7 8 9" instead of "… 4 5 6 …".
So my question is simple: How to simulate QML's elide: Text.ElideMiddle in CSS? I am running short of ideas about this.

Simulation with css is possible, but I would do it in back-end (php, offline js) as that is the only way to get it right - just replacement the middle of the string with ellipsis.
I assume, that you can predict the length of this string. If not, the code will be longer by length count and condition.
With css you can cut string with less reasonable effect, imitation is possible with flex and repetition of the string. If you can't predict length of the string - back-end handling will be necessary and using css seems to be just redundancy.
... I can't force a snippet to read the function - it will be with inline js...
function elip(i,str){
var x = str.replace(str.slice(i,-i),' ... ');
document.write(x);}
/* for snippet only */
section{ background: #014; color: #fff; padding: 20px; margin: 20px auto}
p{ min-width: 5em; white-space: nowrap; display: flex; }
span{ background: #fff; color: #014; padding: 5px}
hr{ background: 0; border: 0}
/* imitation */
p{ white-space: nowrap; display: flex}
span{ display: inline-block; overflow: hidden; min-width: 1em}
.short{ width: 5em}
.mid{ width: 20em}
#css span{ max-width: 50%}
#css span:first-child{ display: flex; justify-content: flex-start}
#css span:last-child{ display: flex; justify-content: flex-end}
#css:hover span:nth-child(2){ background: #abc}
#css .triple span:nth-child(2){ color: transparent; width: 1em}
#css .triple span:nth-child(2)::before{ content: ' ... '; color: initial}
<section><h1>js</h1>
i=3 <hr>
<span><script>var i=3; var str='Beethoven'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span>
<hr> i = 20; - more than string length - too much <hr>
<span><script>var i=20; var str='Beethoven'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span>
<hr> i = 20 <hr>
<span><script>var i=20; var str='Lorem ipsum dolor sit amet, consectetur adipiscing elit'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span></section>
<section id="css"><h1>css</h1> <h3>string - ellipsis - string</h3>
5em<p class="short">
<span>Beethoven</span><span>...</span><span>Beethoven</span></p>
20em<p class="mid">
<span>Beethoven</span><span>...</span><span>Beethoven</span></p>
20em<p class="mid">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
<span>...</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></p>
<h3>lazy - triple string</h3>
5em<p class="short triple">
<span>Beethoven</span><span>Beethoven</span><span>Beethoven</span></p>
20em<p class="mid triple">
<span>Beethoven</span><span>Beethoven</span><span>Beethoven</span></p>
20em<p class="mid triple">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></p>
</section>

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;
}

Hiding content with shadow [duplicate]

This question already has answers here:
Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
(5 answers)
Closed 8 years ago.
I need to use JS/CSS/HTML5 to make the content hidden in a div container with shadow. It should be similar to the image I posted here. Also color of shadow should be changeable.
If it is a duplicate question, please refer to the original one.
HTML:
<div class="makehidden">
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.
</div>
CSS:
.makehidden{
height: 100px;
width: 600px;
box-shadow:10px 10px 50px 20px pink inset;
}

I would use something like this:
http://jsfiddle.net/5BsXs/
.hidden-with-shadow {
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
}
.hidden-with-shadow:after {
content: " ";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}
All these scary background stuff are just the css rules to create the correct gradient (white to transparent) on every browser. You can change the color by swapping the #ffffff with the color you want. I suggest you use something like sass with compass (scss), so you can write like:
background: linear_gradien(rgba(255,255,255,255), rgba(255,255,255,0))

One way would be to make the content of the div you want to hide position:relative; and then have an element inside it with:
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: /* Some gradient that you could generate */
Gradient Generator
This would cover the element completely with the background gradient as an overlay.

Here you are. Hope It will help you.
HTML
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget elit sed metus pellentesque rutrum. Etiam sodales auctor eros, id luctus elit. In hac habitasse platea dictumst. Sed cursus nec sem a tincidunt. Proin vitae nulla augue. Vestibulum adipiscing a magna sit amet convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<div class="shadow"></div>
</div>
CSS
.text {
position: relative;
}
.shadow {
position: absolute;
bottom: 0;
left: 0;
height: 75%;
width: 100%;
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.2)));
}
http://jsfiddle.net/Gj6UZ/2/

change your box-shadow to box-shadow: 0 -50px 50px -30px pink inset;
http://jsfiddle.net/7ukhp/1/