Я сделал карточку входа / регистрации поверх карусели. Но мои поля жестко закодированы, и все кажется действительно сложным. На настольных компьютерах выглядит хорошо, но на телефонах / планшетах не реагирует. Я совершенно новичок в Webdev и только что научился в течение двух недель, так что извините за недостаток знаний.
Это мой html код:
Это мой CSS код:
#logo:hover {
cursor: pointer;
animation: updown 1.5s ease infinite;
@keyframes updown {
0% {
transform: translateY(-10%);
}
50% {
transform: translateY(10%);
}
100% {
transform: translateY(-10%);
}
}
}
#carouselFinal {
position: relative;
height: auto;
}
.carousel-inner {
z-index: 0;
height: 577px;
}
// .card {
// width: 1000px;
// height: 1000px;
// z-index: 1;
// margin-top: 130px;
// margin-left: 150px;
// color: black;
// background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
// border-color: transparent;
// }
.tab-card,
.carousel-inner {
position: absolute;
}
.tab-card {
z-index: 1;
height: 400px;
width: 600px;
top: 100px;
left: 250px;
color: white;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
border-color: transparent;
}
.tab-card-header {
background: none;
}
/* Default mode */
.tab-card-header>.nav-tabs {
border: none;
margin: 0px;
}
.tab-card-header>.nav-tabs>li {
margin-right: 2px;
}
.tab-card-header>.nav-tabs>li>a {
border: 0;
border-bottom: 2px solid transparent;
margin-right: 0;
color: #737373;
padding: 2px 15px;
}
.tab-card-header>.nav-tabs>li>a.show {
border-bottom: 2px solid #007bff;
color: #007bff;
}
.tab-card-header>.nav-tabs>li>a:hover {
color: #007bff;
}
.tab-card-header>.tab-content {
padding-bottom: 0;
}
::ng-deep.mat-form-field-label {
/*change color of label*/
color: white !important;
}
::ng-deep.mat-form-field-underline {
/*change color of underline*/
background-color: white !important;
}
::ng-deep.mat-form-field-ripple {
/*change color of underline when focused*/
background-color: white !important;
}
::ng-deep.mat-select-value {
/*change color of underline*/
color: white !important;
}
::ng-deep.mat-select-arrow {
color: white !important;
}
::ng-deep.mat-radio-outer-circle {
border-color: white !important;
}
::ng-deep.mat-datepicker-toggle-default-icon {
color: white !important;
}
.content-main {
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: -1;
}
.fh5co-bg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
}
.fh5co-bg {
background-size: cover;
background-position: center center;
position: relative;
width: 100%;
float: left;
}
.fh5co-bg .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.fh5co-bg-section {
background: rgba(0, 0, 0, 0.05);
}
#fh5co-footer {
padding: 7em 0;
clear: both;
}
@media screen and (max-width: 768px) {
#fh5co-footer {
padding: 3em 0;
}
}
#fh5co-footer {
position: relative;
}
#fh5co-footer .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#fh5co-footer h3 {
margin-bottom: 15px;
font-weight: bold;
font-size: 15px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
}
#fh5co-footer .fh5co-footer-links {
padding: 0;
margin: 0;
}
#fh5co-footer .fh5co-footer-links li {
padding: 0;
margin: 0;
list-style: none;
}
#fh5co-footer .fh5co-footer-links li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
#fh5co-footer .fh5co-footer-links li a:hover {
text-decoration: underline;
}
#fh5co-footer .fh5co-widget {
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
#fh5co-footer .fh5co-widget {
text-align: left;
}
}
#fh5co-footer .fh5co-widget h3 {
margin-bottom: 15px;
font-weight: bold;
font-size: 15px;
letter-spacing: 2px;
text-transform: uppercase;
}
#fh5co-footer .copyright .block {
display: block;
color: cornsilk;
}
.btn-primary {
background: #F85A16;
color: #fff;
border: 2px solid #F85A16;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background: #f96c2f !important;
border-color: #f96c2f !important;
}
.btn-primary.btn-outline {
background: transparent;
color: #F85A16;
border: 1px solid #F85A16;
}
.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus,
.btn-primary.btn-outline:active {
background: #F85A16;
color: #fff;
}
#memberalready {
margin-left: 5px;
}
@media screen and (max-width: 768px) {
.card {
width: 100%;
background: transparent;
margin-left: -250px;
// margin-top: -100px;
// margin-top: 100px;
// display: flex;
}
.tab-card-header {
margin-top: 300px;
margin-right: 120px;
}
#imagerpager {
margin-left: 80px;
margin-top: -320px;
color: transparent;
position: absolute;
flex-wrap: wrap;
}
#myTab {
position: absolute;
top: 320px;
right: -160px;
}
#memberalready {
position: absolute;
right: -68px;
top: 633px;
}
#skeeverweever {
margin-left: 0px;
}
.p-3 {
float: left;
}
}
Как мне выполнить адаптивную часть? Этот код ведет себя очень странно.
Я развернул его на Firebase: https://shopping-cart-client-23081997.web.app/, если вы хотите проверить его.
Спасибо!