muayjtp/awwwards_series
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made change

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

33
awwwards_ss2/main.js
View file

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

188
awwwards_ss2/style.css
View file

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