profile.html

<!DOCTYPE html>
<html>
<head>
	<title>PolarPals</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="profile.css"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

 <!-- Navbar -->
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <img src="logo.jpg" width="35" height="40" class="nav navbar-nav navbar-logo mx-auto rounded" alt="">
    <a class="navbar-brand" href="index.html">
        &nbsp&nbsp POLARPALS
    </a>
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group" role="group" aria-label="First group">
            <a href="index.html" class="btn btn-secondary" role="button" aria-pressed="true">
            <svg class="bi bi-house" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V7h1v6.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5zm11-11V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z" clip-rule="evenodd"/>
                <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z" clip-rule="evenodd"/>
            </svg>
            </a>
        </div>
        <div class="btn-group mr-2" role="group" aria-label="Second group">
            <a href="studygA.html" class="btn btn-secondary" role="button" aria-pressed="true">
            <svg class="bi bi-people" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.995-.944v-.002.002zM7.022 13h7.956a.274.274 0 00.014-.002l.008-.002c-.002-.264-.167-1.03-.76-1.72C13.688 10.629 12.718 10 11 10c-1.717 0-2.687.63-3.24 1.276-.593.69-.759 1.457-.76 1.72a1.05 1.05 0 00.022.004zm7.973.056v-.002.002zM11 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0zM6.936 9.28a5.88 5.88 0 00-1.23-.247A7.35 7.35 0 005 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 015 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10c-1.668.02-2.615.64-3.16 1.276C1.163 11.97 1 12.739 1 13h3c0-1.045.323-2.086.92-3zM1.5 5.5a3 3 0 116 0 3 3 0 01-6 0zm3-2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd"/>
            </svg>
            </a>
            <a href="textbA.html" class="btn btn-secondary" role="button" aria-pressed="true">
            <svg class="bi bi-book" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M3.214 1.072C4.813.752 6.916.71 8.354 2.146A.5.5 0 018.5 2.5v11a.5.5 0 01-.854.354c-.843-.844-2.115-1.059-3.47-.92-1.344.14-2.66.617-3.452 1.013A.5.5 0 010 13.5v-11a.5.5 0 01.276-.447L.5 2.5l-.224-.447.002-.001.004-.002.013-.006a5.017 5.017 0 01.22-.103 12.958 12.958 0 012.7-.869zM1 2.82v9.908c.846-.343 1.944-.672 3.074-.788 1.143-.118 2.387-.023 3.426.56V2.718c-1.063-.929-2.631-.956-4.09-.664A11.958 11.958 0 001 2.82z" clip-rule="evenodd"/>
                <path fill-rule="evenodd" d="M12.786 1.072C11.188.752 9.084.71 7.646 2.146A.5.5 0 007.5 2.5v11a.5.5 0 00.854.354c.843-.844 2.115-1.059 3.47-.92 1.344.14 2.66.617 3.452 1.013A.5.5 0 0016 13.5v-11a.5.5 0 00-.276-.447L15.5 2.5l.224-.447-.002-.001-.004-.002-.013-.006-.047-.023a12.582 12.582 0 00-.799-.34 12.96 12.96 0 00-2.073-.609zM15 2.82v9.908c-.846-.343-1.944-.672-3.074-.788-1.143-.118-2.387-.023-3.426.56V2.718c1.063-.929 2.631-.956 4.09-.664A11.956 11.956 0 0115 2.82z" clip-rule="evenodd"/>
            </svg>
            </a>
        </div>
    </div>
  

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav ml-auto">

      <li class="nav-item dropdown active">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Polar Bear
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="profile.html">Manage Profile</a>
          </div>
      </li>
    </ul>
  </div>
</nav>

<br><br>
<!--Middle-->
<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="card bg-light text-dark">
                <div class="card-header">
                    <ul class="nav">
                        <li class="nav-item">
                          <a class="nav-link text-dark" style="font-size: large;">My Personal Profile</a>
                        </li>
                        <li class="nav-item ml-auto">
                            <a class="nav-link text-primary" href="#">Edit</a>
                        </li>
                    </ul>    
                </div>
                <div class="card-body scroll">
                    <img src="polarbear.jpeg" class="rounded mx-auto d-block" width="210" height="170" alt="">
                    <table class="table">
                        <br>
                        <tbody>
                            <tr>
                              <th scope="row">Name:</th>
                              <td>Polar Bear</td>
                            </tr>
                            <tr>
                                <th scope="row">Preferred Name:</th>
                                <td>Bear</td>
                            </tr>
                            <tr>
                                <th scope="row">Pronouns:</th>
                                <td>They/them/theirs</td>
                            </tr>
                            <tr>
                                <th scope="row">Student ID:</th>
                                <td>123456</td>
                            </tr>
                            <tr>
                                <th scope="row">Class Year:</th>
                                <td>2022</td>
                            </tr>
                            <tr>
                                <th scope="row">Major(s):</th>
                                <td>Computer Science</td>
                            </tr>
                            <tr>
                                <th scope="row">Minor(s):</th>
                                <td>N/A</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>    
        </div>
        <div class="col">
            <div class="card bg-light text-dark">
                <div class="card-header">
                    <ul class="nav">
                        <li class="nav-item">
                          <a class="nav-link text-dark" style="font-size: large;">My Courses</a>
                        </li>
                        <li class="nav-item ml-auto">
                            <a class="nav-link text-primary" href="#">Edit</a>
                        </li>
                    </ul>         
                </div>
                <div class="card-body scroll">
                    <div class="card mb-3">
                        <a class="btn btn-outline-secondary" data-toggle="collapse" href="#econ" role="button" aria-expanded="false" aria-controls="collapseExample">
                            ECON 1101: Principles of Microeconomics 
                        </a>
                        <div class="collapse" id="econ">
                            <div class="card card-body">
                                <a class="btn btn-link" href="studygA.html" aria-expanded="false">
                                   Study Groups
                                </a> 
                                <a class="btn btn-link" href="textbA.html" aria-expanded="false">
                                    Textbooks
                                </a> 
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <a class="btn btn-outline-secondary" data-toggle="collapse" href="#cs" role="button" aria-expanded="false" aria-controls="collapseExample">
                            CSCI 3715: Human-Computer Interaction    
                        </a>
                        <div class="collapse" id="cs">
                            <div class="card card-body">
                                <a class="btn btn-link" href="studygB.html" aria-expanded="false">
                                   Study Groups
                                </a> 
                                <a class="btn btn-link" href="textbB.html" aria-expanded="false">
                                    Textbooks
                                </a> 
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <a class="btn btn-outline-secondary" data-toggle="collapse" href="#soc" role="button" aria-expanded="false" aria-controls="collapseExample">
                            SOC 1101: Introduction to Sociology   
                        </a>
                        <div class="collapse" id="soc">
                            <div class="card card-body">
                                <a class="btn btn-link" href="studygC.html" aria-expanded="false">
                                   Study Groups
                                </a> 
                                <a class="btn btn-link" href="textbC.html" aria-expanded="false">
                                    Textbooks
                                </a> 
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <a class="btn btn-outline-secondary" data-toggle="collapse" href="#vart" role="button" aria-expanded="false" aria-controls="collapseExample">
                            VART 2101: Drawing II   
                        </a>
                        <div class="collapse" id="vart">
                            <div class="card card-body">
                                <a class="btn btn-link" href="studygD.html" aria-expanded="false">
                                   Study Groups
                                </a> 
                                <a class="btn btn-link" href="textbD.html" aria-expanded="false">
                                    Textbooks
                                </a> 
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>    
        </div>
        <div class="col">
            <div class="card bg-light text-dark">
                <div class="card-header">
                    <ul class="nav">
                        <li class="nav-item">
                          <a class="nav-link text-dark" style="font-size: large;">My Saved Posts</a>
                        </li>
                        <li class="nav-item ml-auto">
                            <a class="nav-link text-primary" href="#">Edit</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body scroll">
                    <div class = "card mb-3">
                        <a class="btn btn-outline-secondary" data-toggle="collapse" href="#clarissa" role="button" aria-expanded="false" aria-controls="collapseExample">
                            "Principles of Microeconomics, 12th Edition"
                            <br>Author: Clarissa Mayes
                        </a>                     
                        <div class="collapse" id="clarissa">
                            <div class="card card-body">
                                <p class="card-text">
                                    Authors: Case, Karl E.; Fair, Ray C.; Oster, Sharon E.
                                    <br><br>For rent
                                    <br>Price: FREE
                                    <br>Status: No longer avaible
                                </p>
                                <p class="card-text"><small class="text-muted">Last updated 10 mins ago</small></p>
                                <a href="studyPostClarissa.html" class="card-link ml-auto">View Post</a>
                            </div>
                        </div>       
                    </div>
                    <div class = "card mb-3">
                        <a class="btn btn-outline-secondary" data-toggle="collapse" href="#phuong" role="button" aria-expanded="false" aria-controls="collapseExample">
                            "HCI study group anyone?"
                            <br>Author: Phuong Luong
                        </a>                     
                        <div class="collapse" id="phuong">
                            <div class="card card-body">
                                <p class="card-text">
                                    So we have a midterm coming up for this class, and idk about you guys but I'm not ready.
                                </p>
                                <p class="card-text"><small class="text-muted">Last updated 5 mins ago</small></p>
                                <a href="studyPostPhuong.html" class="card-link ml-auto">View Post</a>
                            </div>
                        </div>       
                    </div> 
                    <div class = "card mb-3">
                        <a class="btn btn-outline-secondary" data-toggle="collapse" href="#jack" role="button" aria-expanded="false" aria-controls="collapseExample">
                            "Fast Food Nation : The Dark Side of the All-American Meal"
                            <br>Author: Jack Pearson
                        </a>                     
                        <div class="collapse" id="jack">
                            <div class="card card-body">
                                <p class="card-text">
                                    Author: Schlosser, Eric 
                                    <br><br>For sale 
                                    <br>Price: $7 
                                    <br>Edition: Reprint 
                                    <br>Status: No Longer Available.
                                </p>
                                <p class="card-text"><small class="text-muted">Last updated 13 mins ago</small></p>
                                <a href="#" class="card-link ml-auto">View Post</a> <!--need post link-->
                            </div>
                        </div>       
                    </div>                       
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer -->
<div class="container-fluid">
    <div class="card bg-dark text-light fixed-bottom">
        <div class="card-body">
  
            <ul class="nav">
                <li class="nav-item">
                  <a class="nav-link text-white" href="about.html">About Us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="alpha.html">Contact Us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="alpha.html">FAQs</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="alpha.html">Help</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="https://www.bowdoin.edu/">Bowdoin Resources</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="https://www.bowdoin.edu/covid-19/index.html">COVID-19 FAQs</a>
                </li>
                <li class="nav-item ml-auto">
                  <a class="nav-link disabled text-muted">TechTelligence Co.</a>
                </li>
            </ul>
  
        </div>
    </div>
  </div>
  
  </body>
  </html>