Как вложить элементы в контейнер CSS

Рейтинг: 1Ответов: 1Опубликовано: 09.02.2023

В контейнер вложены все элементы, видимо разметка старая, подскажите как исправить это.

     body {
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: "Righteous", cursive;
          min-height: 100vh;
          background-color: #28005c;
        
          .container {
            max-width: 100vw;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-gap: 35px;
            margin: 0 auto;
            padding: 40px 0;
        
            .card {
              position: relative;
              width: 300px;
              height: 400px;
              margin: 0 auto;
              background: url("https://i.pinimg.com/originals/12/e8/a6/12e8a6a547e317524121f7a5d6084036.gif")
                no-repeat;
              background-size: "cover";
              background-position: -150px -50px;
              // background: #000;
              border-radius: 15px;
              box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
        
              .face {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
        
                &.face1 {
                  box-sizing: border-box;
                  padding: 20px;
        
                  h2 {
                    margin: 0;
                    padding: 0;
                  }
        
                  .java {
                    background-color: #ffffff;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }
                }
        
                &.face2 {
                  transition: 0.5s;
        
                  h2 {
                    margin: 0;
                    padding: 0px 15px;
                    font-size: 2em;
                    color: #afde21;
                    background: rgb(12 12 12 / 35%);
                    transition: 0.5s;
                    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                    z-index: 10;
                  }
                }
              }
            }
        
            .card:hover .face.face2 {
              height: 60px;
              h2 {
                font-size: 2em;
              }
            }
        
            .card:nth-child(1) .face.face2 {
              background: url("https://i.pinimg.com/originals/8c/67/04/8c670477b00f29802217064ccad1b390.gif")
                no-repeat;
              background-size: "cover";
              background-position: -100px -0px;
              border-radius: 15px;
            }
          }
        }

css
Источник: Stack Overflow на русском

Ответы

▲ 0

Это не старый код, а используется препроцессор SCSS..

Чтобы перегнать этот код в CSS можно воспользоваться онлайн конвертером, например этим

body {
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: "Righteous", cursive;
     min-height: 100vh;
     background-color: #28005c;
}
 body .container {
     max-width: 100vw;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     grid-gap: 35px;
     margin: 0 auto;
     padding: 40px 0;
}
 body .container .card {
     position: relative;
     width: 300px;
     height: 400px;
     margin: 0 auto;
     background: url("https://i.pinimg.com/originals/12/e8/a6/12e8a6a547e317524121f7a5d6084036.gif") no-repeat;
     background-size: "cover";
     background-position: -150px -50px;
     border-radius: 15px;
     box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
}
 body .container .card .face {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 body .container .card .face.face1 {
     box-sizing: border-box;
     padding: 20px;
}
 body .container .card .face.face1 h2 {
     margin: 0;
     padding: 0;
}
 body .container .card .face.face1 .java {
     background-color: #fff;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 body .container .card .face.face2 {
     transition: 0.5s;
}
 body .container .card .face.face2 h2 {
     margin: 0;
     padding: 0px 15px;
     font-size: 2em;
     color: #afde21;
     background: #000;
     transition: 0.5s;
     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     z-index: 10;
}
 body .container .card:hover .face.face2 {
     height: 60px;
}
 body .container .card:hover .face.face2 h2 {
     font-size: 2em;
}
 body .container .card:nth-child(1) .face.face2 {
     background: url("https://i.pinimg.com/originals/8c/67/04/8c670477b00f29802217064ccad1b390.gif") no-repeat;
     background-size: "cover";
     background-position: -100px 0px;
     border-radius: 15px;
}