made change

This commit is contained in:
Juthatip McDevitt 2024-04-10 01:28:17 -05:00
parent df2884c815
commit f07a427dd8
2 changed files with 81 additions and 140 deletions

View file

@ -66,20 +66,21 @@ loadingAnimation()
//navbar //navbar
function menuAnimation() { function menuAnimation() {
var menu = document.querySelector("nav h3")
var full = document.querySelector("#full-screen") var menu = document.querySelector("nav h3")
var navimg = document.querySelector("nav img") var full = document.querySelector("#full-screen")
var flag = 0 var navimg = document.querySelector("nav img")
menu.addEventListener("click", function () { var flag = 0
if (flag == 0) { menu.addEventListener("click", function () {
full.style.top = 0 if (flag == 0) {
navimg.style.opacity = 0 full.style.top = 0
flag = 1 navimg.style.opacity = 0
} else { flag = 1
full.style.top = "-100%" } else {
navimg.style.opacity = 1 full.style.top = "-100%"
flag = 0 navimg.style.opacity = 1
} flag = 0
}) }
})
} }
menuAnimation() menuAnimation()

View file

@ -5,10 +5,14 @@
box-sizing: border-box; box-sizing: border-box;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
} }
html, body{ html{
height: 100%; height: 100%;
width: 100%; width: 100%;
color: black; color: black;
scrollbar-width: none;
}
li{
list-style: none;
} }
a{ a{
text-decoration: none; text-decoration: none;
@ -140,17 +144,13 @@ nav h3{
} }
#left h3{ #left h3{
width: 25vw; width: 25vw;
font-size: 30px; font-size: 1.8vw;
line-height: 30px; line-height: 2vw;
font-weight: 600;
letter-spacing: -1px;
} }
#right h1{ #right h1{
font-size: 10vw;
text-align: right; text-align: right;
font-size: 190px; line-height: 8vw;
font-weight: 600;
line-height: 150px;
letter-spacing: -10px;
} }
#hero-bottom{ #hero-bottom{
position: absolute; position: absolute;
@ -510,7 +510,6 @@ nav h3{
z-index: 9; z-index: 9;
bottom: 0; bottom: 0;
display: flex; display: flex;
/* align-items: flex-end; */
justify-content: flex-end; justify-content: flex-end;
flex-direction: column; flex-direction: column;
padding: 1vw 3vw; padding: 1vw 3vw;
@ -551,163 +550,104 @@ nav h3{
} }
/*========== Responsive ==========*/ /*========== Responsive ==========*/
@media (max-width: 1450px){ @media (max-width:1200px){
#hero-top{
height: 55vh;
}
#left h3{
font-size: 26px;
line-height: 26px;
letter-spacing: -2px;
}
#right h1{
font-size: 150px;
line-height: 130px;
}
}
@media (max-width: 1200px){
#hero-top{
height: 50vh;
}
#left h3{
width: 30vw;
font-size: 24px;
}
#hero-bottom{
top: 55vh;
}
}
@media (max-width: 980px){
#hero-top{ #hero-top{
height: 45vh; height: 45vh;
} }
#left h3{ #left h3{
font-size: 20px; width: 30vw;
line-height: 20px; font-size: 2vw;
letter-spacing: -2px;
} }
#right h1{ #right h1{
font-size: 120px; font-size: 12vw;
line-height: 120px; text-align: right;
line-height: 10vw;
} }
#hero-bottom{ #hero-bottom{
top: 50vh; top: 50vh;
} }
} }
@media (max-width:750px) { @media (max-width:890px){
#hero-top{
height: 35vh;
}
#hero-bottom{
top: 40vh;
}
}
@media (max-width:600px){
.loading h1{
font-size: 9vw;
}
.section-1{ .section-1{
min-height: 100vh; min-height: 100vh;
width: 100vw; width: 100vw;
} padding: 0 0vw;
#section-1 video {
position: relative;
border-radius: 15px;
margin-top: 4vw;
height: 30vh;
object-fit: cover;
object-position: center;
width: 92%;
margin-left: 4%;
} }
nav{ nav{
padding: 20px 20px; padding: 8vw 5vw;
background-color: #EFEAE3; background-color: #EFEAE3;
} }
nav img{ nav img{
width: 130px; transition: all ease 0.2s;
height: 9vh;
} }
#navbar{ #navbar{
display: none; display: none;
} }
nav h3{ nav h3{
display: block; display: block;
padding: 10px 15px; padding: 3vw 5vw;
border: 1px solid #ababab; border: 1px solid #ababab;
border-radius: 50px; border-radius: 50px;
font-size: 16px; font-size: 4vw;
font-weight: 200; font-weight: 200;
padding-left: 10vw; padding-left: 10vw;
cursor: pointer;
} }
#hero-top{ #hero-top{
height: 70vh;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid transparent; border-bottom: 1px solid #0000003c;
padding: 20px 20px; padding: 7vw 5vw;
padding-bottom: 10vw; padding-bottom: 10vw;
flex-direction: column-reverse; flex-direction: column-reverse;
position: relative; position: relative;
z-index: 9; z-index: 9;
} }
#left h3 { #left h3 {
width: 50%; width: 80%;
font-size: 22px; font-size: 5vw;
line-height: 20px; line-height: 6vw;
} }
#hero-top h1 { #hero-top h1{
font-size: 100px; font-size: 17vw;
text-align: right; text-align: right;
line-height: 80px; line-height: 15vw;
letter-spacing: -8px;
} }
#hero-2{ .section-1 video {
height: 50vw; position: relative;
width: 80vw; border-radius: 15px;
} margin-top: 4vw;
#hero-3{ height: 70vh;
height: 50vw; object-fit: cover;
width: 80vw; object-position: center;
width: 92%;
margin-left: 4%;
} }
#hero-bottom{ #hero-bottom{
top: 45vh; top: 60vh;
} }
} }
@media (max-width:590px) { @media (max-width:450px){
#hero-top{ #hero-top{
height: 40vh; height: 60vh;
}
#left h3 {
width: 60%;
font-size: 21px;
line-height: 20px;
}
#hero-bottom{
width: 60vw;
height: 60vw;
top: 40vh;
} }
} }
@media (max-width:480px) { @media (max-width:380px){
#section-1 video { #hero-top{
height: 50vh; height: 50vh;
} }
#hero-top{
height: 35vh;
}
#left h3 {
width: 80%;
font-size: 21px;
line-height: 20px;
}
#hero-top h1 {
font-size: 65px;
text-align: right;
line-height: 50px;
letter-spacing: -5px;
}
#hero-bottom{
width: 60vw;
height: 60vw;
top: 35vh;
}
}
@media (max-width:380px) {
#section-1 video {
height: 40vh;
}
#left h3 {
width: 100%;
}
} }