141 lines
2.2 KiB
CSS
141 lines
2.2 KiB
CSS
.me-section {
|
|
background: rgb(46,46,46);
|
|
background: linear-gradient(180deg, rgba(46,46,46,1) 35%, rgba(51,51,51,1) 100%);
|
|
height: 90vh;
|
|
}
|
|
|
|
.intro {
|
|
height: 60%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.intro h1 {
|
|
font-weight: 600;
|
|
font-size: 2.5rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.intro p {
|
|
font-family: "Poppins", sans-serif;
|
|
|
|
font-size: 1rem;
|
|
font-weight: 100;
|
|
color: #f1f1f1;
|
|
}
|
|
|
|
.intro br {
|
|
display: block;
|
|
margin: 10px 0;
|
|
content: " ";
|
|
}
|
|
|
|
|
|
/* SCROLL BUTTON*/
|
|
.scroll-btn-container {
|
|
display: flex;
|
|
}
|
|
|
|
.scroll-btn span {
|
|
position: relative;
|
|
display: block;
|
|
content: "";
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
border-left: 1px solid #fff;
|
|
border-bottom: 1px solid #fff;
|
|
|
|
cursor: pointer;
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
-webkit-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
-webkit-animation: scbt 2s infinite;
|
|
animation: scbt 2s infinite;
|
|
}
|
|
.scroll-btn span:nth-of-type(1) {
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s;
|
|
}
|
|
.scroll-btn span:nth-of-type(2) {
|
|
-webkit-animation-delay: .15s;
|
|
animation-delay: .15s;
|
|
}
|
|
.scroll-btn span:nth-of-type(3) {
|
|
-webkit-animation-delay: .3s;
|
|
animation-delay: .3s;
|
|
}
|
|
@-webkit-keyframes scbt {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes scbt {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* STACK SECTION*/
|
|
.stack-section {
|
|
background: rgb(241,241,241);
|
|
/*background: linear-gradient(0deg, rgba(241,241,241,1) 80%, rgba(51,51,51,1) 100%);*/
|
|
height: 80vh;
|
|
}
|
|
.stack {
|
|
height: 35%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stack h2 {
|
|
font-weight: 600;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.stack p {
|
|
font-family: "Poppins", sans-serif;
|
|
|
|
font-size: 1rem;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.stack-slider {
|
|
height: 65%;
|
|
}
|
|
|
|
|
|
/*ON MOBILE VIEWPORT*/
|
|
@media only screen and (max-width: 400px) {
|
|
.intro {
|
|
height: 75%;
|
|
}
|
|
|
|
.stack-section {
|
|
height: 90vh;
|
|
}
|
|
.stack {
|
|
padding-top: 60px;
|
|
width: 80%;
|
|
height: 30%;
|
|
}
|
|
}
|