index.html

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="css/normalise.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Quattrocento|Quattrocento+Sans" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="js/responsiveNavbar.js"></script>
  <title>University of PontyBridge - Home</title>
</head>

<body>
  <!-- Header and Navbar -->
  <div class="headerGridContainer">
    <header class="header">
      <h1 id="headerLogo">University of PontyBridge</h1>
      <a href="#" class="hamburgerNav">☰</a>
    </header>

    <nav class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="study.html">Study</a></li>
        <li><a href="research.html">Research</a></li>
      </ul>
    </nav>
  </div>

  <!-- Main Content -->
  <section class="mainContent">

    <!-- Subcontents -->
    <div class="inspirationalContent">

      <img class="inspirationalImage"
        sizes="(max-width: 1530px) 100vw, 1530px"
        srcset="
          Images/Uni_bh2qgv_c_scale,w_300.jpg 300w,
          Images/Uni_bh2qgv_c_scale,w_674.jpg 674w,
          Images/Uni_bh2qgv_c_scale,w_939.jpg 939w,
          Images/Uni_bh2qgv_c_scale,w_1154.jpg 1154w,
          Images/Uni_bh2qgv_c_scale,w_1387.jpg 1387w,
          Images/Uni_bh2qgv_c_scale,w_1530.jpg 1530w"
        src="Images/Uni_bh2qgv_c_scale,w_1530.jpg"
        alt="University of PontyBridge - School of Computer Science">
        <!-- img ref:
            title: Legoland Resort Windsor 04-05-2012
            licence: CC BY 2.0
            author: Karen Roe
            author_link: https://www.flickr.com/photos/karen_roe/
            image_link: https://www.flickr.com/photos/karen_roe/7615945272/
        -->
      <div class="overlaidSlogan">
        <h2>Welcome to a desirable locally global University...</h2>
      </div>
    </div>

    <div class="study">
      <a href="study.html">
        <img class="otherImage"
          sizes="(max-width: 1530px) 100vw, 1530px"
          srcset="
            Images/Study_lkycyy_c_scale,w_300.jpg 300w,
            Images/Study_lkycyy_c_scale,w_827.jpg 827w,
            Images/Study_lkycyy_c_scale,w_1179.jpg 1179w,
            Images/Study_lkycyy_c_scale,w_1461.jpg 1461w,
            Images/Study_lkycyy_c_scale,w_1530.jpg 1530w"
          src="Images/Study_lkycyy_c_scale,w_1530.jpg"
          alt="A happy PontyBridge student">
          <!-- img ref:
            title: 170/366
            licence: CC BY-NC-ND 2.0
            author: Nuwandalice
            author_link: https://www.flickr.com/photos/nuwandalice/
            image_link: https://www.flickr.com/photos/nuwandalice/7395786858
          -->
        <h2>Pushing the boundaries of Higher Education</h2>
      </a>
        <p>We teach many students each year, and almost all of them achieve some level of qualification.</p>
    </div>

    <div class="research">
      <a href="research.html">
        <img class="otherImage"
          sizes="(max-width: 1580px) 100vw, 1580px"
          srcset="
            Images/Research_zc1qdz_c_scale,w_250.jpg 250w,
            Images/Research_zc1qdz_c_scale,w_978.jpg 978w,
            Images/Research_zc1qdz_c_scale,w_1350.jpg 1350w,
            Images/Research_zc1qdz_c_scale,w_1580.jpg 1580w"
          src="Images/Research_zc1qdz_c_scale,w_1580.jpg"
          alt="PhD Computer Science researcher at the University of PontyBridge">
          <!-- img ref:
            title: MOC: Mill's Introduction
            licence: CC BY 2.0
            author: Brixelated
            author_link: https://www.flickr.com/photos/156159384@N02/
            image_link: https://www.flickr.com/photos/156159384@N02/35615946535/
          -->
        <h2>Research where it matters almost</h2>
      </a>
        <p>With over 1 breakthrough each year, our estimate is that we'll have a Nobel prize sometime in 2345.</p>
    </div>


    <!-- Student Quote Section -->
    <div class="studentQuote">
      <hr/>
      <blockquote>
        "I look back on my time here fondly as a time when I could afford to buy things."
      </blockquote>
      <cite>Evelyn Q. Dot, Class of 2018</cite>
      <hr/>
    </div>
    <div class="studentImage">
      <img class="otherImage"
        sizes="(max-width: 600px) 100vw, 600px"
        srcset="
          Images/Student_eki7g1_c_scale,w_220.jpg 220w,
          Images/Student_eki7g1_c_scale,w_594.jpg 594w,
          Images/Student_eki7g1_c_scale,w_600.jpg 600w"
        src="Images/Student_eki7g1_c_scale,w_600.jpg"
        alt="Evelyn Q. Dot, Class of 2018">
        <!-- img ref:
          title: OMGWTFSIGFIG
          licence: CC BY-NC 2.0
          author: nolnet
          author_link: https://www.flickr.com/photos/nolnet/
          image_link: https://www.flickr.com/photos/nolnet/4430159155/
        -->
    </div>


    <!-- News Section -->
    <div class="news news1">
      <a href="#">
        <img
          sizes="(max-width: 1480px) 100vw, 1480px"
          srcset="
            Images/News1_fmbrse_c_scale,w_300.jpg 300w,
            Images/News1_fmbrse_c_scale,w_1070.jpg 1070w,
            Images/News1_fmbrse_c_scale,w_1447.jpg 1447w,
            Images/News1_fmbrse_c_scale,w_1480.jpg 1480w"
          src="Images/News1_fmbrse_c_scale,w_1480.jpg"
          alt="New Vice Chancellor of the University of PontyBridge Appointed">
          <!-- img ref:
            title: Science Staff
            licence: CC BY-NC 2.0
            author: Lonnon Foster
            author_link: https://www.flickr.com/photos/lonnon/
            image_link: https://www.flickr.com/photos/lonnon/460865053/
          -->
        <h4>New Vice Chancellor of the University of PontyBridge Appointed</h4>
      </a>
    </div>

    <div class="news news2">
      <a href="#">
        <img
          sizes="(max-width: 1480px) 100vw, 1480px"
          srcset="
            Images/News2_vovzil_c_scale,w_300.jpg 300w,
            Images/News2_vovzil_c_scale,w_1174.jpg 1174w,
            Images/News2_vovzil_c_scale,w_1480.jpg 1480w"
          src="Images/News2_vovzil_c_scale,w_1480.jpg"
          alt="New Flying Suit Developed at University of PontyBridge Mechanical Engineering Department">
          <!-- img ref:
            title: GRU - Melee 333: Dragoon Jumping and Double Spears Technique
            licence: CC BY-ND 2.0
            author: Kevin Thai
            author_link: https://www.flickr.com/photos/kthai/
            image_link: https://www.flickr.com/photos/kthai/4381948277/
          -->
        <h4>New Flying Suit Developed at University of PontyBridge</h4>
      </a>
    </div>

    <div class="news news3">
      <a href="#">
        <img
          sizes="(max-width: 1480px) 100vw, 1480px"
          srcset="
            Images/News3_lggyz2_c_scale,w_300.jpg 300w,
            Images/News3_lggyz2_c_scale,w_869.jpg 869w,
            Images/News3_lggyz2_c_scale,w_1267.jpg 1267w,
            Images/News3_lggyz2_c_scale,w_1480.jpg 1480w"
          src="Images/News3_lggyz2_c_scale,w_1480.jpg"
          alt="Construction Underway for New Halls of Residence in PontyBridge">
          <!-- img ref:
            title: Hari Patel & James Talbot: Building on Springs, Lego Outreach
            licence: CC BY-NC-ND 2.0
            author: Engineering at Cambridge
            author_link: https://www.flickr.com/photos/cambridgeuniversity-engineering/
            image_link: https://www.flickr.com/photos/cambridgeuniversity-engineering/36882682751/
          -->
        <h4>Construction Underway for New Halls of Residence in PontyBridge</h4>
      </a>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="study.html">Study</a></li>
      <li><a href="research.html">Research</a></li>
    </ul>
    <h4>University of <br>PontyBridge</h4>
  </footer>
</body>
</html>