css Grid and Flex

css-grid-and-flex.markdown

css Grid and Flex

A Pen by ryan_james_developer on CodePen.

License.

index.html

<div class="modal-background">
  <div class="modal-content">
     <div class="modal">
      <button class="btn-close">close</button>
      <div class="btn-x">&#10005;</div>
    </div>
  </div>
</div>
<div class="container">
  <div class="item tile"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="footer">
  <ul>
     <div class="footer-column-header">
      homebody
    </div>
    <a href="">
      <li>home</li>
    </a>
    <a href="">
      <li>about</li>
    </a>
    <a href="">
      <li>contact us</li>
    </a>
    <a href="">
      <li>support</li>
    </a> 
  </ul>
  
  <ul>
    <div class="footer-column-header">
      getaways
    </div>
    <a href="">
      <li>terms of service</li>
    </a>
    <a href="">
      <li>returns</li>
    </a>
    <a href="">
      <li>careers</li>
    </a>
    <a href="">
      <li>blog</li>
    </a> 
  </ul>
  
  <ul>
     <div class="footer-column-header">
      takeaways
    </div>
    <a href="">
      <li>privacy policy</li>
    </a>
    <a href="">
      <li>become a driver</li>
    </a>
    <a href="">
      <li>affiliate</li>
    </a>
    <a href="">
      <li>partners</li>
    </a> 
  </ul>
</div>

script.js

let tile = document.querySelector('.tile');
let modal = document.querySelector('.modal-background');
let modal_content = document.querySelector('.modal');
let btn_close = document.querySelector('.btn-close');
let btn_x = document.querySelector('.btn-x');

const open = () => {
  modal.style.display = 'block';
  modal_content.style.animation = 'slideup 220ms forwards';
}

const close = () => {
  modal.style.animation = 'fadeout 240ms forwards';
  modal_content.style.animation = 'slidedown 200ms forwards';
}

tile.addEventListener('click', open)
btn_close.addEventListener('click', close);
btn_x.addEventListener('click', close);

window.onclick = event => {
  if(event.target == modal){
    modal.style.display = 'none';
  }
}

style.scss

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  letter-spacing: 0.5px;
}

a,
a.active,
a:visited{
  color: lighten(#0c0c0c, 40%);  
}

.footer ul{
  padding-right: 4rem;
  padding-bottom: 1rem;
}

.footer ul li{
/*   background: #fa6446; */
   list-style-type: none;
  padding: 0.825em 0;
  font-size: 0.7rem;
  font-weight: lighter;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.footer {
  background: #fa6446;
  background: #f8f8f8;
  // display: flex;
  // justify-content: flex-start;
  padding: 2rem 4rem;
  a {
   transition: 260ms ease-in-out;
   text-decoration: none; 
    &:hover{
    color: black;
    }
  }
}

.container{
/*   justify-content: center;
  margin: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem;
  justify-content: center;
}

.item{
  display: flex;
  background: #2bb0a7;
  padding: 6.25rem 4rem;
  transition: 260ms ease-in-out;
}

.item:hover{
  box-shadow: 0 50px 140px -20px rgba(0, 0, 0, 0.35);
  background: steelblue;
  transform: scale(1.01);
  cursor: pointer;
}

.footer-column-header{
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.825rem;
  margin-bottom: 0.425rem;
  letter-spacing: 1.5px;
}

@media (min-width: 768px){
  .container{
    grid-template-columns: repeat(auto-fit, minmax(12rem, 2fr));
    margin: 1em;
    gap: 1em;
    margin: 3rem 6rem;
    justify-content: center;
    align-content: center;
  }
  
  .item{
    height: 6rem;
    border-radius: 3px;
  }
  
  .footer{
    display: flex;
    flex-direction: row;
  }
  
  .modal-background{
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 90;
    top: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0.8;
  }
  
  .modal{
    display: flex;
    align-items: center;
    margin: 8rem auto;
    justify-content: center;
    // opacity: 1;
    height: 18rem;
    width: 32rem;
    border: 0.75rem solid white;
    background: #fa6446;
    z-index: 99;
  }
  
  .btn-close{
    align-items: center;
    margin-top: 2rem;
    left: auto;
    right: auto;
    padding: 0.825em 2.25em;
    text-transform: uppercase;
    color: white;
    background: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .btn-x{
    position: absolute;
    top: 0;
    right: 5px;
    cursor: pointer;
  }
  
  @keyframes fadeout{
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    75% { opacity: 0.25; }
    100% {opacity: 0; }
  }
  
  @keyframes slideup{
    from { transform: translateY(100%); }
    to { transform: translateY(0%); }
  }
  
  @keyframes slidedown{
    from { transform: translateY(0%); } 
    to{ transform: translateY(200%); }
  }
}