css3 grid test

css3-grid-test.markdown

css3 grid test

started learning css grid today. Decided to mess around a try to make something simple with it and I ended up getting inspired by: https://dribbble.com/shots/4567055-By-Two-Creatives-Platform-Animation

so far the grid is awesome. planning to use it for many future pens and projects.

A Pen by Kassandra escoe on CodePen.

License.

index.html

<link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet'>
<div id="container">
  
  <div id="bg">
    <p id="title"></p>
    <p id="info">HTML<br>CSS<br>JS</p>
  </div>
  <div id="img_1"></div>
  <div id="img_2">
    <p id="contact">CONTACT</p>
  </div>
</div>

script.js

$(document).ready(function(){
 var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}
     $(function () {
      showText("#title", "DOM", 0, 400);   
    });
  
  $("#contact").mouseover(function(){
    $("#contact").html("inspired by<br><a href='https://dribbble.com/shots/4567055-By-Two-Creatives-Platform-Animation'>dribbble</a>");
    $("#contact").css("font-size", "12px");
  });
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.scss

$smokey_gray: #262727;
$gray: #4B4B4A;
$white: white;
$width: 200px;

body{
  background-color: $gray;
}
p,h1{
  font-family: 'Anton';
}
p{
  font-size:100px;
  z-index:100px;
  position: relative;
  color:$white;
  top:-80px;
  padding:10px;
}
#info{
  font-size:13px;
  margin-top:-70px;
}
div{
  height:300px;
  width:$width;
  background-color:$smokey_gray;
  background-size: cover;
  background-repeat: no-repeat;
}
#container{
  position:fixed;
  top:50%;
  left:27%;
  transform: translate(-70%, -50%);
  display:grid;
  grid-template-columns:auto 250px auto;
  
}
#img_1{
  background-image: url("http://1.bp.blogspot.com/_qfpatBHrQlk/TRRd9PMZ3GI/AAAAAAAAA8U/3sXSmYFYVl0/s1600/ataui4.png");
  width: $width + 70;
  background-position:0px;
}
#img_2{
  background-image: url("http://placeimg.com/640/480/people?t=1533253343091");
  background-position:0px;
  background-size:400%;
  width: $width - 10px;
  overflow:hidden;
  #contact{
    color:black;
    font-size:20px;
    background-color:$white;
    text-align:center;
    height:30px;
    width:170px;
    top:230px;
  }
}

@keyframes slidein {
    from {background-position: 200px;}
    to {background-position: 0px;}
}
@keyframes slideup {
    0% {top: 270px;}
    100% {top: 230px;}
}
#contact{
  animation-name: slideup;
  animation-duration: 1.2s;
}
#img_1, #img_2{
  animation-name: slidein;
  animation-duration: 1s;
}