<!DOCTYPE html>
<html>
<head>

  <link
  href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
  rel="stylesheet"
/>
<style>


:root {
  font-size: 16px;
  font-family: 'Open Sans';
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
  --transition-speed: 500ms;
  
}


body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: #1e1e24;
}

body::-webkit-scrollbar-thumb {
  background: #50b325;
}

.container {
  
  width:100%;
  
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 150px);
 

  justify-content: center;
  align-items: center;
}

.item{
  
  background-color: #23232e;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  color: var(--text-primary);  border-radius: 4px;
  border: 5px solid #b6b6b6;
  display: grid;
  text-decoration: none;
  text-align: center;
  padding: 30px;
  font-size:2rem;
  margin: 2rem;
}


.heading{
    border-top: 2px solid #141418;
    border-bottom:2px solid #141418;
    /* color: white; */
margin: 10px;
font: 4em sans-serif;
padding: 20px;

}


.item:hover {
    background-image: #50b325;
  }
  
  
  @media only screen and (max-width: 1200px) {
    .container {
  
  width:100%;
  
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 367px);
  
  justify-content: center;
  align-items: center;
}

  }

  i{
    color: #50b325;
  }
</style>
</head>
<body style="background-color: whitesmoke;">


<h1 class="heading" style="text-align: center; color: #23232e;">Student's Information</h1>
<br>

<div class="container">
  <div class="item item1" >
    <h3>About</h3>
     <p>Simplylearn is a learning platform that helps students from all over the world to study and interact with their instructors in a much efficient and easier way.
       Simplylearn helps every students learn faster and efficient even with very low internet connectivity and internet data usage. This platform is open source as well as free to use.
     </p>
</div>
  <div class="item item2" >
    <h3>How to use?</h3>
    <p>
      When your instructor provides you the link to our learning platform. Click on the link. The page would ask you to enter your name. Enter your name and press the "next" button
      in order to enter the class.
          </p>
          <i>
            Tip : The names you enter might be used for the purpose of attendance. So we recommend you to enter genuine names.
          </i>
</div>
 
  <div class="item item4" >
  
    <p>
      Start learning with your instructor. When the teacher changes the slide on her page,
      the slide on your page will also change. If you wanted to change and view any slides, you could change it using arrow keys provided on the page or by selecting from the 
      thumbnails of slides shown below the presented page. 
    </p>
</div>
<div class="item item3" >
  <h3>Chat session</h3>
  <p>
    The students could use the chat box, to propose your doubts to the instructor during the class. 
  </p>
</div>
</div>

</body>
</html>