Ideia para página 2

ideia-para-pagina-2.markdown

Ideia para página 2

A Pen by Fabiana Ivo Souza on CodePen.

License.

index.html

<div class="container">
  <div class="card">
    <img class="shoes" src="https://i.ibb.co/W0YCpZj/TENIS-1.png">

    <div class="shadow"> </div>
    <div class="card-content">
      <p class="subititle"> Nike</p>
      <h3 class="title"> Epic React Flyknit 2 </h3>
      <h4 class="price"> <span> R$ </span>359,00</h4>

      <div class="actions-container">
        <div class="shoes-options">

          <p>Cores</p>
          <div class="color-options">
            <div class="color selected"></div>
            <div class="color"></div>
            <div class="color"></div>

          </div>
          <p>Tamanhos</p>

          <div class="size-options">
            <div class="size selected"> 38 </div>
            <div class="size"> 37 </div>
            <div class="size"> 36 </div>
            <div class="size"> 35 </div>
          </div>
        </div>
        <div class="cart">
          <button> <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.59 0.294937L6 4.87494L1.41 0.294937L0 1.70494L6 7.70494L12 1.70494L10.59 0.294937Z" fill="white" fill-opacity="0.2" />
            </svg>
            <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.59 0.294937L6 4.87494L1.41 0.294937L0 1.70494L6 7.70494L12 1.70494L10.59 0.294937Z" fill="white" fill-opacity="0.4" />
            </svg>
            <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.59 0.294937L6 4.87494L1.41 0.294937L0 1.70494L6 7.70494L12 1.70494L10.59 0.294937Z" fill="white" fill-opacity="0.6" />
            </svg>

            <div class="shop-cart"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5463 12.9999C17.2963 12.9999 17.9563 12.5899 18.2963 11.9699L21.8763 5.47994C22.2463 4.81994 21.7663 3.99994 21.0063 3.99994H6.20628L5.26628 1.99994H1.99628V3.99994H3.99628L7.59628 11.5899L6.24628 14.0299C5.51628 15.3699 6.47628 16.9999 7.99628 16.9999H19.9963V14.9999H7.99628L9.09628 12.9999H16.5463ZM6.00628 19.9999C6.00628 18.8999 6.89628 17.9999 7.99628 17.9999C9.09628 17.9999 9.99628 18.8999 9.99628 19.9999C9.99628 21.0999 9.09628 21.9999 7.99628 21.9999C6.89628 21.9999 6.00628 21.0999 6.00628 19.9999ZM16.0063 19.9999C16.0063 18.8999 16.8963 17.9999 17.9963 17.9999C19.0963 17.9999 19.9963 18.8999 19.9963 19.9999C19.9963 21.0999 19.0963 21.9999 17.9963 21.9999C16.8963 21.9999 16.0063 21.0999 16.0063 19.9999ZM19.3063 5.99994H7.15628L9.52628 10.9999H16.5463L19.3063 5.99994Z" fill="white" />
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>

style.less

//lass serve para formatar
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100vh;
  background: #e5e5e5;

  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center; //alinhamento horizontal
  align-items: center; //alinhamento verical

  .card {
    width: 263px;
    height: 386px;
    border-radius: 16px 50px 16px 16px;
    background: radial-gradient(
      100% 100% at 0% 0%,
      rgba(255, 255, 255, 0.33) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    box-shadow: 0px 4px 42px rgba(0, 0, 0, 0.25);
    position: relative;

    .shoes {
      position: absolute;
      top: -200px;
      right: -120px;
      z-index: 99; //define prioridade
    }

    .shadow {
      width: 100%;
      height: 100%;
      border-radius: 16px 50px 16px 16px;
      position: absolute;

      overflow: hidden;
      &:after {
        content: "";
        width: 400px;
        height: 300px;
        position: absolute;
        background: linear-gradient(
          114.61deg,
          rgba(196, 196, 196, 0.3) -19.56%,
          rgba(196, 196, 196, 0) 120%
        );

        border-radius: 50%;
        transform: rotate(20deg);
        top: -160px;
        right: -20px;
      }
    }

    .card-content {
      width: 100%;
      height: 100%;

      padding: 110px 20px 0;
      font-family: "Montserrat", sans-serif;

      .subititle {
        font-weight: 700;
        color: #8f8f8f;
        font-siza: 14px;
      }
      .title {
        margin-top: 10px;
        font-weight: bold;
        font-size: 26px;
        line-height: 32px;

        color: #29455f;
      }

      .price {
        margin: 10px 0;
        text-align: right;
        font-family: Open Sans;
        font-weight: bold;
        font-size: 22px;
        line-height: 30px;
        color: #29455f;

        span {
          font-size: 14px;
          color: #808080;
          margin-right: 5px;
        }
      }

      .actions-container {
        display: flex;

        .shoes-options {
          flex-grow: 1; // cart vai usar tamanho e o resto é do outro.

          p {
            font-family: Open Sans;
            font-style: normal;
            font-weight: 600;
            font-size: 12px;
            color: #808080;
          }

          .color-options {
            display: flex;
            align-items: center;
            margin: 10px 0;

            .color {
              width: 18px;
              height: 18px;
              background: #b5db48;
              border-radius: 50%;

              &.selected {
                width: 21px;
                height: 21px;
                position:relative;

                &:after {
                  content: "";
                  position: absolute;
                  width: 25px;
                  height: 25px;
                  border-radius: 50%;
                  border: 1px solid rgba(0, 0, 0, 0.06);
                  top: -3px;
                  left:-2.5px;
                  
                }
              }

              + .color {
                margin-left: 25px;
                //background: #ff3838;
              }

              &:nth-child(2) {
                background: red;
              } //para mudar a cor
              &:nth-child(3) {
                background: blue;
              }

              .cart {
              }
            }
          }
          
          .size-options{
           display: flex;
           mnargin:10px 0;
            
            .size{
            width: 23px;
            height: 23px;
            border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 8px;           
            font-family: Montserrat;
            font-weight: 500;  
            color:#808080;
            display:flex;
            align-items:center;
            justify-content: center;
            //font-size:90%;
              
              &.selected{
                background:#B5DB48;
                color:white;
                border:0px;
                font-weight:bold;
     
              }
              

              +.size{
                margin-left:10px;
               
              }
            }
           
            
            
            
          }
          
          
        }
        
        .cart{
          display:flex;
          justify-content:center;
          align-items:center;
          }
                   button{           
           width: 49px;
           height: 80px;
            background: #B5DB48;
           border-radius: 16px;
           border:0;  
           display:flex;
           flex-direction:column;
           justify-content:center;
           align-items:center;
                     
                     .shop-cart{
                       margin-top:8px;
                     }
 
          }
        }
      }
    }
  }