Line 136: | Line 136: | ||
} | } | ||
.dropdown > li { | .dropdown > li { | ||
− | display: | + | display: flex; |
} | } | ||
.dropdown > li > div { | .dropdown > li > div { |
Revision as of 16:59, 23 August 2019
- top_title, .logo_2019, #firstHeading{
display: none !important; }
- content{
width: 100vw !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: absolute !important; left: 0 !important; }
/*fonts*/ @font-face {
src: url("../fonts/Quesha.ttf"); font-family: que;
} @font-face {
src: url("../fonts/Rabelo.otf"); font-family: eav;
} @font-face {
src: url("../fonts/Vollkorn.ttf"); font-family: vol;
} @font-face {
src: url("../fonts/Wallington.ttf"); font-family: wal;
} @font-face {
src: url("../fonts/social.ttf"); font-family: social;
}
/*body*/
- {
margin: 0; padding: 0; box-sizing: border-box;
} body {
overflow-y: scroll; overflow-x: hidden;
}
/*navbar*/
- navbar {
width: 100vw; height: 6vmax; background-color: black; display: flex; flex-wrap: wrap; align-items: center; position: fixed; top: 16px; left: 0vw; z-index: 10; box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);
}
- navbar #mobdiv {
display: flex; align-items: center; justify-content: space-between; width: auto; height: 6vmax;
}
- mobdiv #logo {
margin-left: 2vmax; display: flex; height: 100%; width: 14vmax;
}
- logo > a {
width: 100%; padding: 0.2vmin 0.5vmin 0.2vmin 0.5vmin;
}
- logo > a > img {
height: 100%;
}
- mobdiv #menuicon {
display: none;
}
- navbar ul {
list-style: none; display: flex;
}
- navbar > ul > li {
position: relative; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear;
}
- navbar ul li div {
display: flex; align-items: center;
}
- navbar ul li div a {
width: 100%; text-decoration: none; font-family: ; font-size: 1.5vmax; cursor: pointer; padding: 1vmax; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear;
}
- navbar > ul > li > div {
width: auto; height: 6vmax;
}
- navbar > ul > li > div > a {
color: white;
}
- navbar > ul > li:hover > div > a {
color: black;
}
- navbar > ul > li:hover {
background-color: rgb(101,206,69);
}
- navbar > ul > li:hover .dropdown li {
display: flex; -webkit-animation: fade 2s linear; -moz-animation: fade 0.2s linear; -o-animation: fade 0.2s linear; animation: fade 0.2s linear;
} .dropdown {
position: absolute; display: flex; flex-direction: column; background-color: rgb(116,237,70); box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50);
} .dropdown > li {
display: flex;
} .dropdown > li > div {
height: 3.5vmax; width: 100%;
} .dropdown > li > div > a {
color: black;
} .dropdown li:hover > div > a {
color: black;
} .dropdown li:hover {
background-color: rgb(101,206,69);
} @-webkit-keyframes fade {
0% { opacity: 0;} 100% { opacity: 1;}
} @-moz-keyframes fade {
0% { opacity: 0;} 100% { opacity: 1;}
}
/*mobile mode*/ @media screen and (orientation: portrait) {
#navbar { flex-direction: column; height: auto; background: none; box-shadow: none; } #navbar { flex-direction: column; height: auto; } #navbar #mobdiv { width: 100%; height: 10vmax; display: flex; flex-direction: row; } #mobdiv #logo { width: 30%; height: 100%; } #logo a img { height: 100%; width: auto; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; } #mobdiv #menuicon { display: flex; height: 3.5vmax; width: 3.7vmax; cursor: pointer; margin-right: 5vmax; flex-direction: column; align-items: center; justify-content: center; } #bar1, #bar2, #bar3 { margin: 0.3vmax 0vh 0.3vmax 0vh; width: 3.7vmax; height: 0.3vmax; background-color: white; border-radius: 25%; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; } .change #bar1 { margin: 0vw; -webkit-transform: rotate(-45deg) translateY(0.35vmax); -moz-transform: rotate(-45deg) translateY(0.35vmax); -o-transform: rotate(-45deg) translateY(0.35vmax); transform: rotate(-45deg) translateY(0.35vmax); } .change #bar2 { margin: 0vw; opacity: 0; } .change #bar3 { margin: 0vw; -webkit-transform: rotate(45deg) translateY(-0.35vmax); -moz-transform: rotate(45deg) translateY(-0.35vmax); -o-transform: rotate(45deg) translateY(-0.35vmax); transform: rotate(45deg) translateY(-0.35vmax); } #navbar > ul { width: auto; height: auto; display: none; align-self: flex-end; flex-direction: column; background-color: rgb(116,237,70); box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50); } #navbar > ul > li { width: 25vw; height: 6vmax; display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; } #navbar > ul > li > div { height: 6vmax; } #navbar > ul > li > div > a { text-align: center; width: 25vw; color: black; font-size: 2.5vmax; } #navbar > ul.visible { display: flex; } #navbar > ul > li:hover .dropdown { display: flex; -webkit-animation: fade 2s linear; -moz-animation: fade 0.2s linear; -o-animation: fade 0.2s linear; animation: fade 0.2s linear; } #navbar .dropdown { width: auto; position: relative; display: none; flex-direction: column; align-self: flex-start; box-shadow: 0vw 0.2vw 0.5vw 0.1vw rgb(50,50,50); } #navbar .dropdown > li { display: flex; width: 30vw; height: 6vmax; justify-content: center; align-items: center; } #navbar .dropdown > li > div { height: 6vmax; } #navbar .dropdown > li > div > a { text-align: center; width: 30vw; font-size: 2.5vmax; }
}