Bootstrap v5 Migration, Style Cleanups, Formular-Umgestaltung, Layout-Verbesserungen (schließt #222)
This commit is contained in:
@ -42,7 +42,7 @@
|
||||
});
|
||||
|
||||
//Hero Slider
|
||||
$('.hero-slider-items').slick({
|
||||
$('.hero-slider').slick({
|
||||
autoplay: true,
|
||||
autoplaySpeed: 5000,
|
||||
pauseOnFocus: false,
|
||||
|
||||
@ -122,14 +122,6 @@ a h4 {
|
||||
}
|
||||
}
|
||||
|
||||
.outline-0 {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.d-unset {
|
||||
display: unset !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background: $primary-color !important;
|
||||
}
|
||||
@ -170,60 +162,6 @@ a h4 {
|
||||
font-family: $secondary-font;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.mb-30 {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.mb-40 {
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.mb-50 {
|
||||
margin-bottom: 50px !important;
|
||||
}
|
||||
|
||||
.mb-60 {
|
||||
margin-bottom: 60px !important;
|
||||
}
|
||||
|
||||
.mb-70 {
|
||||
margin-bottom: 70px !important;
|
||||
}
|
||||
|
||||
.mb-80 {
|
||||
margin-bottom: 80px !important;
|
||||
}
|
||||
|
||||
.mb-90 {
|
||||
margin-bottom: 90px !important;
|
||||
}
|
||||
|
||||
.mb-100 {
|
||||
margin-bottom: 100px !important;
|
||||
}
|
||||
|
||||
.pl-150 {
|
||||
padding-left: 150px;
|
||||
}
|
||||
|
||||
.zindex-1 {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.overflow-md-hidden {
|
||||
@include desktop {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -464,101 +402,4 @@ details[open] summary {
|
||||
|
||||
.fb-tile-icon {
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
.img-slider{
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
width: 95%;
|
||||
height: 500px;
|
||||
background: #1D212B;
|
||||
}
|
||||
|
||||
.img-slider .is-slide{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
clip-path: circle(0% at 0 50%);
|
||||
}
|
||||
|
||||
.img-slider .is-slide.active{
|
||||
clip-path: circle(150% at 0 50%);
|
||||
transition: 2s;
|
||||
transition-property: clip-path;
|
||||
}
|
||||
|
||||
.img-slider .is-slide img{
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.img-slider .is-navigation{
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
border-radius: 10px;
|
||||
transform: translateX(-50%);
|
||||
background-color: #1a1a37;
|
||||
}
|
||||
|
||||
.img-slider .is-navigation .is-btn{
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 10px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img-slider .is-navigation .is-btn.active{
|
||||
background: #2696E9;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 820px){
|
||||
.img-slider{
|
||||
width: 600px;
|
||||
height: 375px;
|
||||
}
|
||||
|
||||
.img-slider .is-navigation{
|
||||
bottom: 25px;
|
||||
}
|
||||
|
||||
.img-slider .is-navigation .is-btn{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px){
|
||||
.img-slider{
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.img-slider .is-navigation{
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.img-slider .is-navigation .is-btn{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px){
|
||||
.img-slider{
|
||||
width: 320px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.img-slider .is-navigation{
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,3 @@
|
||||
/* banner feature */
|
||||
.feature-icon {
|
||||
font-size: 60px;
|
||||
color: $secondary-color;
|
||||
@ -41,18 +40,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* /banner feature */
|
||||
|
||||
/* course */
|
||||
.card-btn {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.flex-basis-33 {
|
||||
flex-basis: 33.3333%;
|
||||
}
|
||||
|
||||
.hover-shadow {
|
||||
transition: .3s ease;
|
||||
|
||||
@ -61,9 +48,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* /course */
|
||||
|
||||
/* success story */
|
||||
.success-video {
|
||||
min-height: 300px;
|
||||
|
||||
@ -138,57 +122,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* /success story */
|
||||
|
||||
/* events */
|
||||
.card-date {
|
||||
position: absolute;
|
||||
background: $primary-color;
|
||||
font-family: $secondary-font;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: $white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
span {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* /events */
|
||||
|
||||
/* footer */
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 60px;
|
||||
background: $white;
|
||||
border-radius: 0;
|
||||
padding-left: 25px;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-block {
|
||||
.form-control {
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-footer {
|
||||
background-color: #182b45;
|
||||
}
|
||||
@ -202,5 +135,3 @@
|
||||
border-color: #494a43 !important;
|
||||
padding-top: 75px;
|
||||
}
|
||||
|
||||
/* /footer */
|
||||
|
||||
Reference in New Issue
Block a user