updated section1 responsive design
This commit is contained in:
parent
ffae7c61a2
commit
df2884c815
2 changed files with 190 additions and 11 deletions
|
|
@ -64,3 +64,22 @@ function loadingAnimation() {
|
|||
}
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
menuAnimation()
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
html, body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #EFEAE3;
|
||||
color: black;
|
||||
}
|
||||
a{
|
||||
|
|
@ -79,16 +78,16 @@ a{
|
|||
margin-top: 4vw;
|
||||
width: 100%;
|
||||
}
|
||||
nav {
|
||||
nav{
|
||||
padding: 2vw 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
z-index: 99;
|
||||
z-index: 100;
|
||||
}
|
||||
nav h3 {
|
||||
nav h3{
|
||||
display: none;
|
||||
}
|
||||
#navbar{
|
||||
|
|
@ -141,16 +140,17 @@ nav h3 {
|
|||
}
|
||||
#left h3{
|
||||
width: 25vw;
|
||||
font-size: 1.8vw;
|
||||
line-height: 2vw;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -2px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
#right h1{
|
||||
text-align: right;
|
||||
font-size: 10vw;
|
||||
font-size: 190px;
|
||||
font-weight: 600;
|
||||
line-height: 8vw;
|
||||
line-height: 150px;
|
||||
letter-spacing: -10px;
|
||||
}
|
||||
#hero-bottom{
|
||||
position: absolute;
|
||||
|
|
@ -523,13 +523,13 @@ nav h3 {
|
|||
width: 100%;
|
||||
background: linear-gradient(to top right, #ff2d03, #ff5c0b);
|
||||
filter: blur(30px);
|
||||
animation-name: sunspot;
|
||||
animation-name: footerSunspot;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
@keyframes sunspot{
|
||||
@keyframes footerSunspot{
|
||||
from {
|
||||
filter: blur(100px);
|
||||
transform: translate(20%, -10%) skew(0);
|
||||
|
|
@ -551,3 +551,163 @@ nav h3 {
|
|||
}
|
||||
|
||||
/*========== 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){
|
||||
#hero-top{
|
||||
height: 45vh;
|
||||
}
|
||||
#left h3{
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
#right h1{
|
||||
font-size: 120px;
|
||||
line-height: 120px;
|
||||
}
|
||||
#hero-bottom{
|
||||
top: 50vh;
|
||||
}
|
||||
}
|
||||
@media (max-width:750px) {
|
||||
.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%;
|
||||
}
|
||||
nav{
|
||||
padding: 20px 20px;
|
||||
background-color: #EFEAE3;
|
||||
}
|
||||
nav img{
|
||||
width: 130px;
|
||||
}
|
||||
#navbar{
|
||||
display: none;
|
||||
}
|
||||
nav h3{
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #ababab;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
padding-left: 10vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
#hero-top{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: 20px 20px;
|
||||
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;
|
||||
}
|
||||
#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%;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue