index.html



<!DOCTYPE html>
<html>
<head>
  <title>Workshop attendees</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-ios.css">

</head>
<style type="text/css">
  body {
    background-color: lightgray;
    overflow: hidden;
    background-size: contain;
  }
  section {

    background-color: lightgray;
    width:110%;

}
  section div {
    margin-top: 10%;


  }
  div ul li {
    padding: 15px 15px 15px 15px;
    padding-left: 0;
    width: 120%;
    margin-left: -15%;
    background-color: #e3e3e3;
    margin-top: 4px;
    font-size: 1em;
  }
  li
  {
   font-size: 0.8em;
  }

  h1 {
    color: #ffffff;
    margin-top: 10%;
  }


@media only screen and (min-width:768px) {
    div ul li {

    margin-left:0%;
    width: 100%;

    background-color: #e3e3e3;
    margin-top: 4px;
    font-size: 1em;
  }

}
</style>
<body>
<center><h1 style="font-size: 2em; color: black;font-weight: 1000">Git Workshop Attendees</h1></center>
    <br>

<div class="w3-container" id="menu">
  <div class="w3-content" style="max-width:700px">

<!--  -->

    <div class="w3-row w3-center w3-card w3-padding">
      <a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">
        <div class="w3-col s6 tablink">CSE</div>
      </a>
      <a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">
        <div class="w3-col s6 tablink">ISE</div>
      </a>
    </div>

    <div id="Eat" class="w3-container menu w3-padding-48 w3-card w3-padding-large w3-center">
    <h5 class="w3-center w3-padding-48"><span class="" style="font-size: 1.5em;font-weight: 900">CSE</span></h5>

      <ul style="list-style: none;">
      <li>Suhasm.18cs@saividya.ac.in</li>
      <li>deepakjaiswal.18cs@saividya.ac.in</li>
      <li>nehaharish.18cs@saividya.ac.in</li>
      <li>shobhitham.18cs@saividya.ac.in</li>
      <li>kavyasreedoddam.18cs@saividya.ac.in</li>
      <li>santhoshk.18cs@saividya.ac.in</li>
      <li>eshanyab.18cs@saividya.ac.in</li>
      <li>vinaydattatraybhat.18cs@saividya.ac.in</li>
      <li>tejasmanumanus.18cs@saividya.ac.in</li>
      <li>ashwinir.18cs@saividya.ac.in</li>
      <li>nithinsinghe.18cs@saividya.ac.in</li>
      <li>ramyashrees.18cs@saividya.ac.in</li>
      <li>gowthamin.18cs@saividya.ac.in</li>
      <li>sharathgowdap.18cs@saividya.ac.in</li>
      <li>yashwanthgundala.18cs@saividya.ac.in</li>
      <li>srirakshak.18cs@saividya.ac.in</li>
      <li>priyankadr.18cs@saividya.ac.in</li>
      <li>vihaaharishshetty.18cs@saividya.ac.in</li>
      <li>sumanjalisatveli.18cs@saividya.ac.in</li>
      <li>ganeshshankarhegde.18cs@saividya.ac.in</li>
      <li>chandanatadimarri.18cs@saividya.ac.in</li>
      <li>Keerthitha18cse.18cs@saividya.ac.in</li>
      <li>mamathan.18cs@saividya.ac.in</li>
      <li>amruthap.18cs@saividya.ac.in</li>
      <li>kavyab.18cs@saividya.ac.in</li>
      <li>keerthisrikari.18cs@saividya.ac.in</li>
      <li>madhushreed.18cs@saividya.ac.in</li>
      <li>arpithap.18cs@saividya.ac.in</li>
      <li>nachikethn.18cs@saividya.ac.in</li>
      <li>manishas.18cs@saividya.ac.in</li>
      <li style="font-size: 0.9em">harshithanarasimhagari.18cs@saividya.ac.in</li>
      <li>sushmithas.18cs@saividya.ac.in</li>
      <li>ruchithapv.18cs@saividya.ac.in</li>
      <li>aishwaryal.18cs@saividya.ac</li>
      <li>vaishnavijaiswal.18cs@saividya.ac.in</li>
      <li>darshikab.18cs@saividya.ac.in</li>
      <li>sachingowda96111@gmail.com</li>
    </ul>
    </div>

    <div id="Drinks"  class="w3-container menu w3-padding-48 w3-card w3-padding-large w3-center">
      <h5 class="w3-center w3-padding-48"><span class="" style="font-size: 1.5em;font-weight: 900">ISE</span></h5>
      <ul style="list-style: none;">
      <li>nikhilgb.16is@saividya.ac.in</li>
      <li>pranathibsai.18is@saividya.ac.in</li>
      <li>tejasvinayp.18is@saividya.ac.in</li>
      <li>sharanyags.18is@saividya.ac.in</li>
      <li>revathir.18is@saividya.ac.in</li>
      <li style="font-size: 0.9em">nithishbaradwajbaradwajv.18is@saividya.ac.in</li>
      <li>manaswiinturi.18is@saividya.ac.in</li>
      <li>saichandanal.18is@saividya.ac.in</li>
      <li>sahanasm.18is@saividya.ac.in</li>
      <li>sharanyats.18is@saividya.ac.in</li>
      <li>sahanadn.18is@saividya.ac.in</li>
      <li>vandanabt.18is@saividya.ac.in</li>
      <li>vinuthan.18is@saividya.ac.in</li>
      <li>arathic.18is@saividya.ac.in</li>
      <li>sahanas.18is@saividya.ac.in</li>
      <li>snehad.18is@saividya.ac.in</li>
      <li>manojbhat.18is@saividya.ac.in</li>
      <li>sharanyaddesai.18is@saividya.ac.in</li>
      <li>mohammedimran.18is@saividya.ac.in</li>
      <li>rakshithreddya.18is@saividya.ac.in</li>
      <li>jyotsnab.18is@saividya.ac.in</li>
      <li>poojaguttal.18is@saividya.ac.in</li>
    <ul>
    </div>

  </div>
</div>

</section>
</body>
<script type="text/javascript">

// Tabbed Menu
function openMenu(evt, menuName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("menu");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
  }
  document.getElementById(menuName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-dark-grey";
}
document.getElementById("myLink").click();
</script>

</html>