-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
34 lines (29 loc) · 1.05 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
alert(`This is a Profile card design, designs are pure CSS.
- Slider is to control the background opacity
- Click the three dots above the profile pic to toggle visibility of slider
- Click Connect to connect in LinkedIn
`);
const slider = document.querySelector("#opaAdj>input");
const card = document.querySelector("#card");
const frame = document.querySelector("#frame");
slider.addEventListener("input",()=>{
let o = slider.value/100;
card.style.background = `rgba(255,70,100,${o})`;
frame.style.background = `radial-gradient(at top right,rgba(100,110,215,${o}),rgba(120,140,180,${o}))`;
})
const opaAdj = document.querySelector("#opaAdj");
const nav = document.querySelector("#col_nav");
nav.addEventListener("click",()=>{
if(opaAdj.style.opacity==1){
opaAdj.style.opacity = 0;
opaAdj.style.marginBottom = "-36px";
setTimeout(()=>opaAdj.style.display="none",200);
}
else{
opaAdj.style.display="block";
setTimeout(()=>{
opaAdj.style.opacity = 1;
opaAdj.style.marginBottom = "16px";
})
}
})