Styling the Front Page

<!--templates/index.html-->
{% extends "base.html" %}

{% block head %}
{{ super() }}
<link href="/static/styles/index.css" rel="stylesheet" >
{% endblock %}

{% block main %}
<div id="front-panel">
  <div class='wrapper1'>
    <div  style="position:relative;padding-top:57.25%;">
      <iframe src="https://www.youtube.com/embed/OOSl2jeAA5U" 
      frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
    </div>
  </div>

  <div class='wrapper'>
    <div  style="position:relative;padding-top:56.25%;">
      <iframe src="https://www.youtube.com/embed/5FKL_voZuFw" 
      frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
    </div>
  </div>

  <div class='wrapper'>
    <div  style="position:relative;padding-top:56.25%;">
      <iframe src="https://www.youtube.com/embed/7lmCu8wz8ro" 
      frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
    </div>
  </div>

  <div class='wrapper'>
    <div  style="position:relative;padding-top:56.25%;">
      <iframe src="https://www.youtube.com/embed/SnL5L7RbnJ4" 
      frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
    </div>
  </div>

  <div class='wrapper'>
    <div  style="position:relative;padding-top:56.25%;">
      <iframe src="https://www.youtube.com/embed/yKHJsLUENl0" 
      frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
    </div>
  </div>
</div>

<div id='front-nav'>
  <img class="left" src="/static/images/left.png" />
  <img class="home" src="/static/images/home.png" />
  <img class="right" src="/static/images/right.png" />
</div>

<div id="books">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePWgSiT058vZ78FAZiU6dBG0cXgaTpvySwrEyARzMzBVe3yzD8O6T3bqd7WqwLed7Twk2bklidnpbbxsUZE6sGiErM_3CCfixvWMgSn4WAo6uGWMQa1PMDJZUkeWccV2FXnqiydCr7us/s0/JS.jpg" />
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv2s-eEHUTsbl3jFNPSYggmfYZWOqYTN5-SO6IEQjxKpuQc9erM048A7Svug6ykGwjc4nysMd4p2GZYaHsFVfRKkaBkyMK9kLu5XoknwmKvFrg8sQ_l5IwHHrTgrU2u154dgI4b9xd32s/s0/database.jpg" />
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsMirzUM8_vz2_Mw6UURKL7i9pFOqzi-LIIWz1tVzIF3SlCvf6CPM1wvDrBOZOZ4H8EgxQOIxBv54qIk4zRk3shyphenhyphenn77tcrWY-70RwBwjz9WTKrlffe0IEnRdgehQTps56vBrt96XnMDY/s0/Express.jpg" />
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vZfQmva49PGebBC7NlGsdcIGrg377UgettQD0ng5NhR7mZjvoxim_HbIoZncxaoJclQcx-8ML4K9PtZ31EuKFECR7ypLBH6dIN_0bu6ZNpC3yEl3_CTl4HlMl10ggNOzZXIuhUY85Msg/s0/appjs.jpg" />
</div>

{% endblock %}

/*static/styles/insex.css*/
#front-panel{
  background:lightgrey; 
  margin-top: 1px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px 10px;
  padding: 10px;
}
#front-panel .wrapper1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
#front-nav{
  text-align: center;
  background: lightgrey;
  margin-top: 1px;
  padding: 5px 0 0;
}
#front-nav img{
  height: 25px;
}
#front-nav img:hover{
  opacity: .7;
  cursor: pointer;
}
@media only screen and (max-width: 600px){
  #front-panel{
    grid-template-columns: 100%;
  }
}
#books{
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 15px;
  margin-top: 20px;
}
#books img{
  width: 100%;
  border: 1px solid grey;
}
@media only screen and (max-width: 600px){
  #books{
    grid-template-columns: 100%;
    padding: 10px;
  }
}

GitHub: "https://github.com/Sokhavuth/E-Learning
Heroku: https://khmerweb-elearning.herokuapp.com/