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>

style.less

 * {
  box-sizing: border-box;
}
body {
  background: rgb(251, 185, 222);
  background: linear-gradient(
    112deg,
    rgba(251, 185, 222, 1) 0%,
    rgba(139, 247, 249, 1) 100%
  );
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-family: sans-serif;
}

.container{
  width:80%;
  height:70%;
  box-shadow: 0 0 1rem 0 rgba(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, .5);
  filter: blur(10px);
  margin: -20px;
}

nav{
  display:flex;
  justify-content: space-between;
  padding: 15px 30px;
  font-weight:bold;
  
  ul{
    list-style:none;
    display:flex;
    color:white;
    padding:0;
    li{
      margin: 0 10px;
      display: flex;
      align-items: center;
      
      &.active{
        background:#fc8828;
        padding: 3px 10px;
        border-radius:8px;
      }
    }
  }
  
}

.content{
  display:flex;
  height: 100%;
  align-items:center;
  position:relative;
  
  img {
    position:absolute;
    width:50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg); //para deixar animado.
    animation: move 2s infinite alternate ease-in-out;
    
    
  }
  
  .social-media{
  display:flex;
  flex-direction:column; //faz ficar um abaixo do outro
  justify-content:center;
  width:fit-content;
  height:100%;
  
  color:white;
  
  svg{
    margin:15px 30px; //margem do icone vermelho
  }
}
  
  &-text{
    color:white;
    width: 100%;
    //height:100%;
    padding: 0 30px;
    
    //background:blue;
    
    
    h1,h3 {
      margin:0;      
    }
    
    h1{
      font-size:30px;
    }
    
    &.right{
      text-align:right;
      margin-top:175px;
    }
    
    &.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;
  svg{
    
    margin-right: 15px;
  }
}

@keyframes move {
  from{
     transform: translate(-50%, -55%) rotate(-25deg);
  }
}