InitalCommit
This commit is contained in:
Müller Wayan
@@ -0,0 +1,303 @@
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: min-content 1fr;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
|
||||
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
||||
}
|
||||
|
||||
.flex{
|
||||
display:flex;
|
||||
gap: var(--gap,1rem);
|
||||
}
|
||||
|
||||
/*primary header*/
|
||||
.logo{
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sr-only:not(:focus):not(:active) {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.primary-header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.primary-navigation {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: hsl(0 0% 0% / 0.5);
|
||||
right : 0;
|
||||
}
|
||||
|
||||
.primary-navigation *{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(1rem)) {
|
||||
.primary-navigation {
|
||||
background: hsl(0 0% 100% / 0.1);
|
||||
backdrop-filter: blur(1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.primary-navigation a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.primary-navigation a > [aria-hidden="true"] {
|
||||
font-weight: 700;
|
||||
margin-inline-end: .75em;
|
||||
}
|
||||
|
||||
@media (max-width: 35em){
|
||||
.primary-navigation{
|
||||
--gap: 2em;
|
||||
position: fixed;
|
||||
inset: 0 0 0 30%;
|
||||
z-index: 1000;
|
||||
flex-direction: column;
|
||||
padding: min(30vh, 10rem) 2rem;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.primary-navigation[data-visible="true"]{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
width: 1rem;
|
||||
aspect-ratio: 1;
|
||||
top: 2rem;
|
||||
right: 3rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.bar1, .bar2, .bar3 {
|
||||
width: 35px;
|
||||
height: 4px;
|
||||
background-color: #fff;
|
||||
margin: 6px 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.active .bar1 {
|
||||
-webkit-transform: rotate(-45deg) translate(-7px, 7px);
|
||||
transform: rotate(-45deg) translate(-7px, 7px);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.active .bar2 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.active .bar3 {
|
||||
-webkit-transform: rotate(45deg) translate(-7px, -8px);
|
||||
transform: rotate(45deg) translate(-7px, -8px);
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 35em){
|
||||
.primary-navigation{
|
||||
--gap: clamp(1.5rem, 5vw, 3rem);
|
||||
padding-block: 2rem;
|
||||
padding-inline: clamp(3rem,10vw,10rem);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-bottom: 60px;
|
||||
background-color: darkblue;
|
||||
line-height: 1.5;
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
grid-template-rows: min-content 1fr;
|
||||
overflow-x: hidden;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.main-container {
|
||||
top: 6.5rem;
|
||||
bottom: 50px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer{
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.HomeContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
isolation: isolate;
|
||||
grid-template-rows: 3vh auto auto 3vh auto auto 3vh;
|
||||
grid-template-columns: 3vh auto auto 3vh auto auto 3vh;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
main{
|
||||
height: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.Triangle {
|
||||
display: flex;
|
||||
z-index:0;
|
||||
background-color: red;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 150vh;
|
||||
transition: background 1s ease 0s;
|
||||
box-shadow: black 10px 10px 5px;
|
||||
}
|
||||
|
||||
.Triangle.left {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 7;
|
||||
clip-path: polygon(0 0, 0% 100%, 100% 50%);
|
||||
}
|
||||
|
||||
.Triangle.right {
|
||||
grid-column-start: 5;
|
||||
grid-column-end: 8;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 7;
|
||||
clip-path: polygon(0 50%, 100% 100%, 100% 0);
|
||||
}
|
||||
|
||||
.Triangle.bottom {
|
||||
grid-row-start: 5;
|
||||
grid-row-end: 7;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 7;
|
||||
clip-path: polygon(0 100%, 100% 100%, 50% 0);
|
||||
}
|
||||
|
||||
.Triangle.Wayan{
|
||||
background-image: url("../Inports/Backgrounds/Mountains.jpg");
|
||||
}
|
||||
|
||||
.Triangle.Nomi {
|
||||
background-image: url("../Inports/Backgrounds/Canyon.jpg");
|
||||
}
|
||||
|
||||
.Triangle.Nesi {
|
||||
background-image: url("../Inports/Backgrounds/Ocean.jpg");
|
||||
}
|
||||
|
||||
.Triangle.active {
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.Triangle.right.active {
|
||||
right : 0;
|
||||
}
|
||||
|
||||
.Triangle.left.active, .Triangle.right.active {
|
||||
background-position: 100%;
|
||||
animation: ResizeLR 0.5s ease-in-out 0s forwards;
|
||||
}
|
||||
|
||||
.Triangle.left.in-active, .Triangle.right.in-active {
|
||||
animation-direction: reverse;
|
||||
background-position: 0%;
|
||||
}
|
||||
|
||||
|
||||
.Triangle.bottom.active {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.Triangle.bottom.active {
|
||||
background-position: 100%;
|
||||
animation: ResizeTB 0.5s ease-in-out 0s forwards;
|
||||
}
|
||||
|
||||
.Triangle.bottom.in-active {
|
||||
animation-direction: reverse;
|
||||
background-position: 0%;
|
||||
}
|
||||
|
||||
@keyframes ResizeLR {
|
||||
0% {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: -3vh;
|
||||
width: 150%;
|
||||
z-index: 500;
|
||||
bottom: -3vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes ResizeTB {
|
||||
0% {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -3vh;
|
||||
height: 150%;
|
||||
z-index: 500;
|
||||
right: -3vh;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user