Btech Notes.html

<!DOCTYPE html>
<html>
<head>
    <title>B.Tech Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
  <style>
      .heading{
          text-align: center;
      }
      .subhead1{
          text-align: center;
          background-color: lightblue;
          color: aliceblue;
          font-size: 1.5em;
      }
      .container {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
      }
      
      .section {
          width: 30%;
          margin-bottom: 30px;
          background-color: #f2f2f2;
          padding: 20px;
          box-sizing: border-box;
          text-align: center;
      }
      
      @media only screen and (max-width: 768px) {
          .section {
          width: 45%;
          }
      }
      
      @media only screen and (max-width: 480px) {
          .section {
          width: 100%;
          }
      }
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
.pdf-preview {
  display: flex;
  background-image: url("pdf image.png");
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin-left: 98px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.pdf-preview:hover {
  box-shadow: 0px 0px 5px #ccc;
}

.pdf-preview i {
  font-size: 50px;
  color: #ff0000;
  margin-bottom: 10px;
}

.pdf-preview p {
  margin: 0;
  font-size: 14px;
}
</style>
</head>
<body>
  <h1 class="heading">B.Tech Notes</h1>
<button type="button" class="collapsible">Discrete Mathematics</button>
<div class="content">
    <div class="container">
        <div class="section">
          <h2>Video</h2>
          <p>Video Format Link Here.</p>
        </div>
        <div class="section">
          <h2>Notes</h2>
          <p>Text/PDF Format Link Here.</p>
        </div>
        <div class="section">
          <h2>PYQs</h2>
          <p>PYQS PDF Format Here.</p>
        </div>
      </div>
</div>
<button type="button" class="collapsible">Operating System</button>
<div class="content">
  <div class="container">
    <div class="section">
        <h2>Video</h2>
        <p>Video Format Link Here.</p>
      </div>
      <div class="section">
        <h2>Notes</h2>
        <!--<iframe src="https://drive.google.com/file/d/1SWDOp2LgFNZGMMZfovTp-pKDpDTw3xxe/preview" width="640" height="480" allow="autoplay"></iframe>-->
        <a href="https://drive.google.com/file/d/1SWDOp2LgFNZGMMZfovTp-pKDpDTw3xxe/preview" width="640" height="480" allow="autoplay" target="_blank">
          <div class="pdf-preview">
            <i class="fa fa-file-pdf-o"></i>
            <p>Click to view PDF</p>
          </div>
        </a>        
        <p>Text/PDF Format Link Here.</p>
      </div>
      <div class="section">
        <h2>PYQs</h2>
        <p>PYQS PDF Format Here.</p>
      </div>
    </div>
  </div>
</div>
<button type="button" class="collapsible">Python Programming</button>
<div class="content">
  <div class="container">
    <div class="section">
        <h2>Video</h2>
        <p>Video Format Link Here.</p>
      </div>
      <div class="section">
        <h2>Notes</h2>
        <p>Text/PDF Format Link Here.</p>
      </div>
      <div class="section">
        <h2>PYQs</h2>
        <p>PYQS PDF Format Here.</p>
      </div>
    </div>
  </div>
</div>
<button type="button" class="collapsible">Data Structure and Algorithm</button>
<div class="content">
  <div class="container">
    <div class="section">
        <h2>Video</h2>
        <p>Video Format Link Here.</p>
      </div>
      <div class="section">
        <h2>Notes</h2>
        <p>Text/PDF Format Link Here.</p>
      </div>
      <div class="section">
        <h2>PYQs</h2>
        <p>PYQS PDF Format Here.</p>
      </div>
    </div>
  </div>
</div>
<button type="button" class="collapsible">Digital Electronics</button>
<div class="content">
  <div class="container">
    <div class="section">
        <h2>Video</h2>
        <p>Video Format Link Here.</p>
      </div>
      <div class="section">
        <h2>Notes</h2>
        <p>Text/PDF Format Link Here.</p>
      </div>
      <div class="section">
        <h2>PYQs</h2>
        <p>PYQS PDF Format Here.</p>
      </div>
    </div>
  </div>
</div>
<button type="button" class="collapsible">Database Management System</button>
<div class="content">
  <div class="container">
    <div class="section">
        <h2>Video</h2>
        <p>Video Format Link Here.</p>
      </div>
      <div class="section">
        <h2>Notes</h2>
        <p>Text/PDF Format Link Here.</p>
      </div>
      <div class="section">
        <h2>PYQs</h2>
        <p>PYQS PDF Format Here.</p>
      </div>
    </div>
  </div>
</div>
<button type="button" class="collapsible">Computer Architecture and Organization</button>
<div class="content">
  <div class="container">
    <div class="section">
        <h2>Video</h2>
        <p>Video Format Link Here.</p>
      </div>
      <div class="section">
        <h2>Notes</h2>
        <p>Text/PDF Format Link Here.</p>
      </div>
      <div class="section">
        <h2>PYQs</h2>
        <p>PYQS PDF Format Here.</p>
      </div>
    </div>
  </div>
</div>
<button type="button" class="collapsible">Object Oriented Programming using C++</button>
<div class="content">
  <div class="container">
    <div class="section">
        <h2>Video</h2>
        <p>Video Format Link Here.</p>
      </div>
      <div class="section">
        <h2>Notes</h2>
        <p>Text/PDF Format Link Here.</p>
      </div>
      <div class="section">
        <h2>PYQs</h2>
        <p>PYQS PDF Format Here.</p>
      </div>
    </div>
  </div>
</div>
<button type="button" class="collapsible">Object Oriented Programming using Java</button>
<div class="content">
  <div class="container">
    <div class="section">
        <h2>Video</h2>
        <p>Video Format Link Here.</p>
      </div>
      <div class="section">
        <h2>Notes</h2>
        <p>Text/PDF Format Link Here.</p>
      </div>
      <div class="section">
        <h2>PYQs</h2>
        <p>PYQS PDF Format Here.</p>
      </div>
    </div>
  </div>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>