Informatietechnologie 3: 0pdracht 2: Grid Layout

In this example below you will see how to do a Informatietechnologie 3: 0pdracht 2: Grid Layout with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JeroenVanGrootel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JeroenVanGrootel ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Informatietechnologie 3: 0pdracht 2: Grid Layout</title>
  <style>
@import 'https://fonts.googleapis.com/css?family=Bungee';
</style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="grid"> 
      <div id="score">Mario <br> 001323</div>                   <div id="coins">coins: X 10</div> 
      <div id="world">world <br> 1-1</div> 
      <div id="time">time <br> 124</div> 
      <div id="board"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/JeroenVanGrootel/informatietechnologie-3-0pdracht-2-grid-layout-ALxXNm */
#grid { 
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr; 
      grid-template-rows: 75px 540px;  
      width: 100%;
      margin:0px auto;
      color:white;
  text-align:center;
  font-size:1.3vw;
  font-family: 'Bungee', cursive;
    text-shadow: -0.3vw 0 black, 0 0.3vw black, 0.3vw 0 black, 0 -0.3vw black;
}

#score { 
      grid-column: 1; 
      grid-row: 1; 
      background-color:#2c98f3;
      padding: 25px;
} 

#coins { 
      grid-column-start: 2; 
      grid-column-end: 3; 
      grid-row: 1; 
      background-color: #2c98f3;
      padding: 25px;
} 

#world { 
      grid-column: 3; 
      grid-row: 1; 
      background-color: #2c98f3;
      padding: 25px;
} 
#time { 
      grid-column: 4; 
      grid-row: 1; 
      background-color: #2c98f3;
      padding: 25px;
      text-align:center;
} 

#board { 
      grid-column-start: 1; 
      grid-column-end: 5; 
      grid-row-start: 2;
      grid-row-end:3 ;
      background:url("http://jeroenvangrootel.be/bg-mario.jpg");
      background-size:cover;
      padding: 15px;
  

} 

Comments