CSS - CONCLUÍDO

css-concluido.markdown

CSS - CONCLUÍDO

A Pen by Fabiana Ivo Souza on CodePen.

License.

index.html

 <div class="container">
    <nav>
      <ul>
        <li class="active">Home</li>
        <li>Old models</li>
        <li>New</li>
        <li>About</li>
      </ul>
      <ul>
        <li><i data-feather="shopping-cart"></i></li>
        <li><i data-feather="search"></i></li>
        <li><i data-feather="user"></i></li>
  
      </ul>
    </nav>
    <div class="content">
      <div class="social-media">
        <i data-feather="facebook"></i>
        <i data-feather="twitter"></i>
        <i data-feather="instagram"></i>
      </div>
      <div class="content-text left ">
        <h3> THE BEST OF THE YEAR</h3>
        <h1> IT'S COMING </h1>
  
      </div>
      <div class="content-text right ">
        <h3> MAKE SURE YOU DID A PRE-ORDER</h3>
        <h1> NEXT WEEK</h1>
     
      </div>
      <img src="https://i.imgur.com/GsBNEtU.png">
    </div>
    <div class="pre-order"> 
    <i data-feather="shopping-bag"></i>
      <p>Pre-order</p>
    </div>
  </div>
  
  <script src="https://unpkg.com/feather-icons"></script>
  <script>
    feather.replace()
  </script>
 
  <a href="style.less"></a>
 
 

style.less

    * {
        box-sizing: border-box;
      }
      body {
        background: #fbb9de;
        background: linear-gradient(112deg, #fbb9de 0%, #8bf7f9 100%);
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: sans-serif;
      }
      .container {
        width: 80%;
        height: 90%;
        box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        position: relative;
        z-index: 1;
        background: inherit;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .container:before {
        content: "";
        position: absolute;
        background: inherit;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
        filter: blur(10px);
        margin: -20px;
      }
      nav {
        display: flex;
        justify-content: space-between;
        padding: 15px 30px;
        font-weight: bold;
      }
      nav ul {
        list-style: none;
        display: flex;
        color: white;
        padding: 0;
      }
      nav ul li {
        margin: 0 10px;
        display: flex;
        align-items: center;
      }
      nav ul li.active {
        background: #fc8828;
        padding: 3px 10px;
        border-radius: 8px;
        
        
      }
      .content {
        display: flex;
        height: 100%;
        align-items: center;
        position: relative;
      }
      .content img {
        position: absolute;
        width: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-25deg);
        animation: move 2s infinite alternate ease-in-out;
      }
      .content .social-media {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: fit-content;
        height: 100%;
        color: white;
      }
      .content .social-media svg {
        margin: 15px 30px;
      }
      .content-text {
        color: white;
        width: 100%;
        padding: 0 30px;
      }
      .content-text h1,
      .content-text h3 {
        margin: 0;
      }
      .content-text h1 {
        font-size: 30px;
      }
      .content-text.right {
        text-align: right;
        margin-top: 175px;
      }
      .content-text.left {
        margin-top: -20px;
      }
      .pre-order {
        background: #F85A26;
        margin-left: auto;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        border-radius: 8px 0 0 0;
      }
      .pre-order svg {
        margin-right: 15px;
      }
      @keyframes move {
        from {
          transform: translate(-50%, -55%) rotate(-25deg);
        }
      }
     

Página elaborada em CSS e HTML