Student portal

In this example below you will see how to do a Student portal with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ourpathway, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ourpathway ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <!-- link to fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet">
<!-- link to icons -->
<link href="//cdn.pathwaysupport.org/pw/fonts/styles.css" rel="stylesheet" type="text/css"/>
<!-- student portal -->
<div style="font-family:'Open Sans',sans-serif; max-width: 500px;">
  <h2 style="font-weight: 300; font-size: 36px; padding: 10px 0;">Student Portal</h2>
<!--   to do list -->
  <h3 style="background-color:#BBBF39; color: white; font-weight: 300; padding: 3px 10px; font-size: 36px; margin-bottom: 10px;">To Do List</h3>
  <div style="border: 10px solid #E2EEF1; padding: 0px 10px;">
    <p style="font-size:20px;">You have completed all current items. Please check back later.</p>
  </div>
<!--   my group -->
  <h3 style="background-color:#BBBF39; color: white; font-weight: 300; padding: 3px 10px; font-size: 36px; margin-bottom: 10px;">My Group</h3>
  <p style="font-size: 20px;color: #3793A8; padding-left: 5px;">Idaho Rexburg</p>
  <span class="icon-sversion" style="font-size: 20px;color: #AC4024; font-size: 35px;"></span><h4 style="display:inline; margin-left:5px; position: relative; top: -10px;">Winter 2016 Standard Age 18-30 Group B</h4>
  <p style="font-size: 20px;margin-left: 40px;">Room 383 in Hinkley Building on BYU-I campus<br>
    <span class="icon-map" style="color: #3793A8; font-size: 22px;"></span><span style="color: #3793A8; margin-left: 10px;">large building on campus on 2nd East near 5th South</span><br>
    <span class="icon-clock" style="font-size: 22px; color: #58595B"></span><span style="margin-left: 10px;">7:00 PM, Thursday</span></p>
</div>
<!-- my path -->
<!-- can be used seperately, but must include the font piece above -->
<div style="font-family:'Open Sans', sans-serif; max-width: 500px;">
  <h3 style="background-color:#BBBF39; color: white; font-weight: 300; padding: 3px 10px; font-size: 36px; margin-bottom: 10px;">My Path</h3>
  <h4 style="font-size: 20px;margin-left: 5px;">Sep 2015 - Fall Semester</h4>
  <table style="font-size: 20px;margin-left: 40px; width: 130px;">
    <tr>
      <td>GS 120</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Institute</td>
    </tr>
  </table>
  <h4 style="font-size: 20px;margin-left: 5px;">Jan 2016 - Winter Semester</h4>
  <table style="font-size: 20px;margin-left: 40px; width: 130px;">
    <tr>
      <td>ENG 106</td>
    </tr>
    <tr>
      <td>Institute</td>
    </tr>
  </table>
  <h4 style="font-size: 20px;margin-left: 5px;">Apr 2016 - Spring Semester</h4>
  <table style="font-size: 20px;margin-left: 40px; width: 130px;">
    <tr>
      <td>Math 100G</td>
    </tr>
    <tr>
      <td>Institute</td>
    </tr>
  </table>
</div>
<div style="font-family:'Open Sans',sans-serif; max-width: 500px;">
  <h2 style="font-weight: 300; font-size: 36px; padding: 10px 0;">Student Portal</h2>
  <!--   to do list filled -->
  <!-- can be used seperately, but must include the font piece above -->
  <h3 style="background-color:#BBBF39; color: white; font-weight: 300; padding: 3px 10px; font-size: 36px; margin-bottom: 10px;">To Do List</h3>
  <h4 style="font-size: 20px;">Enroll in Next Semester</h4>
  <p style="font-size: 20px;">If you plan on continuing Pathway for the next semester, please confirm by clicking the button below.</p>
  <div style="font-size: 20px;background-color:#0D3354; color:white; padding: 5px 8px; border-radius: 3px; display: inline-block; font-weight: bold;">Continue</div>
  <h4 style="font-size: 20px;">Complete Advising Profile</h4>
  <p style="font-size: 20px;">Tell us why you are joining Pathway Connect and what your plans are after you finish. This information will help our Advising team better serve you.</p>
  <div style="font-size: 20px;background-color:#0D3354; color:white; padding: 5px 8px; border-radius: 3px; display: inline-block; font-weight: bold;">Take the Survey</div>
  <h4 style="font-size: 20px;">Register for Institute</h4>
  <div style="font-size: 20px;background-color:#0D3354; color:white; padding: 5px 8px; border-radius: 3px; display: inline-block; margin-right: 5px; font-weight: bold;">Register</div><div style="font-size: 20px;background-color:#0D3354; color:white; padding: 5px 8px; border-radius: 3px; display: inline-block; font-weight: bold;">Mark as Complete</div>
</div>

/*Downloaded from https://www.codeseek.co/ourpathway/student-portal-padjmW */
    


/*Downloaded from https://www.codeseek.co/ourpathway/student-portal-padjmW */
    

Comments