Skip to content

Instantly share code, notes, and snippets.

@ryancheta
Created April 21, 2020 07:26
Show Gist options
  • Save ryancheta/abb194146622367f6dc6a8a18eaaee16 to your computer and use it in GitHub Desktop.
Save ryancheta/abb194146622367f6dc6a8a18eaaee16 to your computer and use it in GitHub Desktop.
css Grid and Flex
<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>
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';
}
}
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%); }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment