tykayn
/
digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ajust overlap of sections

This commit is contained in:
Tykayn 2023-04-25 11:50:53 +02:00 committed by tykayn
parent 0dcb47c1ff
commit dafeb5dcb4
3 changed files with 76 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/cover.css
View File

@ -1,41 +1,42 @@
#hand {
background: url('/img/hand 1.png');
background: url('/img/hand 1.png') center;
background-size: cover;
position: absolute;
position: relative;
width: 100vw;
height: 1300px;
left: 1px;
top: -2px;
z-index: 0
}
#main_title_container{
position:absolute;
z-index: 2;
top: 0;
backdrop-filter: blur(3px);
}
#cover {
background: url('/img/BG 1.png') no-repeat;
background: url('/img/BG 1.png') center no-repeat;
background-size: cover;
}
#cover
.title-container{
text-align:center;
}
#cover h2 {
position: absolute;
top: 10vh;
left: 42vw;
/* Subtitle/desktop_1 */
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 120%;
/* or 48px */
text-align: center;
letter-spacing: -0.04em;
/* Secondary 100 */
color: #FFFDFC;
z-index: 2;
position: relative;
}
#cover .button {
@ -43,21 +44,17 @@
position: relative;
right: 0;
top: calc(1 / 3 * 100vh);
top: 33vh;
bottom: 0;
width: 150px;
height: 150px;
padding: 1rem;
color: white;
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 26px;
background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
backdrop-filter: blur(2.96px);
/* Note: backdrop-filter has minimal browser support */
backdrop-filter: blur(3px);
border-radius: 100%;
left: 3rem;
}

64
css/welcome.css
View File

@ -1,12 +1,48 @@
/************ section 2 ************/
#welcome{
text-shadow: 0 0 1rem #333;
position: absolute;
background: #000;
}
#welcome img {
position: absolute;
}
#welcome h2 {
font-weight: 600;
font-size: 100px;
line-height: 90px;
text-align: center;
letter-spacing: -0.04em;
color: #F9F3F1;
z-index: 2;
position: relative;
width: 1060px;
margin-top:400px;
}
#welcome .color-emphasis,
#content .color-emphasis {
color: #1E33DA;
}
#welcome .phone-container {
background: url('/img/section2_phone.png');
background-size: cover;
}
/************ phones ************/
.phones-land{
z-index:-1;
position: static;
float:left;
}
#phone-watches-1 {
position: absolute;
width: 345px;
height: 690px;
left: 137px;
@ -36,30 +72,4 @@
top: 1523px;
filter: blur(6px);
}
#welcome img {
position: absolute;
}
#welcome h2 {
font-weight: 600;
font-size: 100px;
line-height: 90px;
text-align: center;
letter-spacing: -0.04em;
color: #F9F3F1;
z-index: 2;
position: relative;
width: 1060px;
margin-top:400px;
}
#welcome .color-emphasis,
#content .color-emphasis {
color: #1E33DA;
}
#welcome .phone-container {
background: url('/img/section2_phone.png');
background-size: cover;
}

24
js/main.js
View File

@ -5,15 +5,15 @@ let development_debug = true;
gsap.fromTo("#main_title", {
opacity: 0,
top: 200
},{
opacity:1,
}, {
opacity: 1,
top: 100,
duration: 1.5,
ease: "sine"
})
gsap.to("#hand", {
top: 400,
top: 300,
duration: 1,
scrollTrigger: {
trigger: '#cover',
@ -21,3 +21,21 @@ gsap.to("#hand", {
markers: development_debug,
}
});
gsap.fromTo("#phone-watches-1", {
top: 1531,
left: -100,
position:"relative",
},
{
left: 50,
top: (1531 - 200) ,
scale: 0.8,
duration: 1.5,
ease: "sine",
scrollTrigger: {
trigger: '#welcome',
scrub: 1,
markers: development_debug,
}
})