itskp-odense/Frontend/Assets/CSS/main.css

266 lines
5.4 KiB
CSS
Raw Normal View History

body {
font-family: "Fira Sans", sans-serif;
background-color: #ffe53b;
background-image: linear-gradient(147deg, #ffe53b 0%, #fd3838 74%);
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 0;
transform: translateX(0);
}
.blog-slider {
width: 95%;
position: relative;
max-width: 60vw;
margin: auto;
background: #fff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 25px;
border-radius: 25px;
height: 400px;
transition: all 0.3s;
}
@media screen and (max-width: 992px) {
.blog-slider {
max-width: 65vw;
height: 400px;
}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider {
height: 350px;
}
}
.blog-slider__item {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.blog-slider__item {
flex-direction: column;
}
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
opacity: 1;
transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
opacity: 1;
transform: none;
}
.blog-slider__content {
padding-right: 25px;
}
.blog-slider__content > * {
opacity: 0;
transform: translateY(25px);
transition: all 0.4s;
}
.blog-slider__code {
color: #7b7992;
margin-bottom: 15px;
display: block;
font-weight: 500;
}
.blog-slider__title {
font-size: 24px;
font-weight: 700;
color: #0d0925;
margin-bottom: 20px;
}
.blog-slider__text {
color: #4e4a67;
margin-bottom: 30px;
line-height: 1.5em;
}
.blog-slider__button {
display: inline-flex;
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
padding: 15px 35px;
border-radius: 50px;
color: #fff;
box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
text-decoration: none;
font-weight: 500;
justify-content: center;
text-align: center;
letter-spacing: 1px;
}
@media screen and (max-width: 576px) {
.blog-slider__button {
width: 100%;
}
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,
.blog-slider .swiper-pagination-custom,
.blog-slider .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%;
}
.blog-slider__pagination {
margin-left: auto;
margin-right: auto;
flex-direction: row;
z-index: 21;
width: fit-content;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.blog-slider__pagination {
transform: translateX(-50%);
justify-content: center;
align-items: center;
}
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0px 8px;
}
@media screen and (max-width: 768px) {
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
}
.blog-slider__pagination .swiper-pagination-bullet {
width: 11px;
height: 11px;
border-radius: 10px;
background: #062744;
opacity: 0.2;
transition: all 0.3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
opacity: 1;
background: #fd3838;
box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
input[type="checkbox"]#hamburger {
position: fixed;
top: -999%;
left: -999%;
}
label[for="hamburger"] {
display: block;
position: fixed;
top: 5px;
right: 5px;
height: 50px;
width: 50px;
background: #2F9AA9;
z-index: 1030;
cursor: pointer;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
box-shadow: 1px 2px 5px #464647;
}
label[for="hamburger"] > ul {
width: 100%;
height: 60%;
position: Absolute;
top: 20%;
left: 0;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
flex-direction: column;
justify-content: space-around;
}
label[for="hamburger"] > ul > li {
width: 25px;
height: 3px;
background: #464647;
margin: auto;
transition: all .4s ease;
position: relative;
top: 0;
bottom: 0;
}
input[type="checkbox"]:checked#hamburger + label + div > main > div > div > div > .front {
transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(25deg);
}
input[type="checkbox"]:checked#hamburger + label > ul > li:first-child {
transform: rotate(45deg);
top: 30%;
}
input[type="checkbox"]:checked#hamburger + label > ul > li:nth-child(2) {
display: none;
}
input[type="checkbox"]:checked#hamburger + label > ul > li:last-child {
transform: rotate(-45deg);
bottom: 30%;
left: 0;
}
body {
z-index: 10;
}
.layer {
z-index: 3;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .4s;
transform: perspective(800px) scale(1) translateX(0) rotateY(0);
transform-style: preserve-3d;
opacity: 0;
pointer-events: none;
}
.showlayer {
opacity: 1;
pointer-events: all;
}
.transform-none {
transform: none !important;
}
nav {
vertical-align: center;
}
nav ul {
padding-left: 66.66%;
font-size: larger;
line-height: 2;
}
ul li {
list-style-type: none;
}
nav ul li a {
display: Block;
color: White;
cursor: pointer;
padding: 5px;
margin-bottom: 10%;
text-decoration: none;
}
nav ul li a:hover {
color: black;
}
.front {
transition: .4s;
}