positioning.css

/* CSS - Name: "positionstyles.css" */
/* Activity 1 styles */
.content1 {
    /* This is the parent of the activity 1 boxes. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    grid-gap: 20px;
    
  }
  .red1 {
    width: 100%;
    height: 100px;
    background-color: red;
    grid-column: 1/3;
  }
  .green1 {
    width: 200px;
    height: 200px;
    background-color: green;
  }
  .yellow1 {
    width: 200px;
    height: 200px;
    background-color: gold;
    
  }
  .blue1 {
    width: 100%;
    height: 100px;
    background-color: blue;
    grid-column: 1/3;
  }
  /* Activity 2 styles */
  .content2 {
    /* This is the parent of the activity 2 boxes. */
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px; 
    
  }
  
  .red2 {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .green2 {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 50px;
  }
  .yellow2 {
    width: 100px;
    height: 100px;
    background-color: gold;
    margin-top: 100px;
  }
  .blue2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 150px;
  }
  /* Activity 3 styles */
  .content3 {
    /* This is the parent of the activity 3 boxes. */
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
    grid-column-gap: 1rem;
    height: 400px;
  }
  .red3 {
    width: 100%; 
    height: 100px; 
    background-color: red; 
    grid-column: 1/ -1;
  } 
  .green3 {
    width: 100%; 
    height: 200px; 
    background-color: green;
  
  } 
  .yellow3 {
    width: 100%; 
    height: 200px; 
    background-color: gold;
    grid-column: 3/ -1;
    
  } 
  .blue3 {
    width: 100%;
    height: 100px; 
    background-color: blue; 
    grid-column: 1/ -1;
  } 
  /* Activity 4 styles */
  .content4 {
    /* This is the parent of the activity 4 boxes. */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 400px;
  }
  .red4 {
    width: 100%;
    height: 100%;
    background-color: red;
    grid-row: 1/ 4;
    grid-column: 1/ 3;
  }
  .green4 {
    width: 100%;
    height: 140px;
    background-color: green;
    grid-column: 3/ span 2;
  }
  .yellow4 {
    width: 100%;
    height: 140px;
    background-color: gold;
    grid-column: 3/ span2;
  }
  .blue4 {
    width: 100%;
    height: 140px;
    background-color: blue;
    grid-column: 3/ span 2;
  }
  /* Activity 5 styles */
  .content5 {
    /* This is the parent of the activity 5 boxes. */
    
    height: 400px;
  }
  .red5 {
    width: 100%;
    height: 100px;
    background-color: red;
  }
  .green5 {
    width: 200px;
    height: 200px;
    background-color: green;
    float: left;
  }
  .yellow5 {
    width: 100%;
    height: 230px;
    background-color: gold;
  }
  .blue5 {
    width: 100%;
    height: 100px;
    background-color: blue;
  }
  /* Activity 6 styles */
  .content6 {
    /* This is the parent of the activity 6 boxes. */
    
    display: grid;
    grid-template-columns: repeat(6, 100px);
    grid-template-rows: repeat(6, 100px);
    
      
  }
  .red6 {
    width: 400px;
    height: 200px;
    background-color: red;
    grid-column: 1/ 6;
    grid-row: 1/ 3;
  }
  .green6 {
    width: 200px;
    height: 200px;
    background-color: green;
    grid-column: 1/ 3;
    grid-row: 5/ -1;
    z-index: 2;
  }
  .yellow6 {
    width: 200px;
    height: 100%;
    background-color: gold;
    grid-column: 5/ 7;
    grid-row: 3/ -1;
    z-index: 2;
  }
  .blue6 {
    width: 400px;
    height: 400px;
    background-color: blue;
    grid-column: 2/ 6;
    grid-row: 2/ 7;
  }
  
  /* Do not make any changes below here */
  .activity {
    width: 70%;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    border: 1px solid black;
    padding: 10px;
    clear: both;
    overflow: auto;
  }
  
  .hint {
    border: 1px solid grey;
    background: #e0e0e0;
    padding: 0.5em;
    position: relative;
    margin: 1em 0;
  }
  .hint h3 {
    margin: 0;
  }
  .hint:hover {
    background: #d0d0d0;
  }
  .hint > div {
    display: none;
  }
  
  .hint input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
  }
  
  .hint input[type="checkbox"]:checked ~ div {
    display: block;
  }
  
  .hint i {
    position: absolute;
    transform: translate(-6px, 0);
    margin-top: 16px;
    right: 10px;
    top: -3px;
  }
  .hint i:before,
  .hint i:after {
    content: "";
    position: absolute;
    background-color: black;
    width: 3px;
    height: 9px;
  }
  .hint i:before {
    transform: translate(2px, 0) rotate(45deg);
  }
  .hint i:after {
    transform: translate(-2px, 0) rotate(-45deg);
  }
  
  .hint input[type="checkbox"]:checked ~ i:before {
    transform: translate(-2px, 0) rotate(45deg);
  }
  .hint input[type="checkbox"]:checked ~ i:after {
    transform: translate(2px, 0) rotate(-45deg);
  }
  .hint a {
    position: relative;
    z-index: 1;
  }