Merge remote-tracking branch 'origin/master' into Mason-Test-1

osu-cs290-f20 · Nov 30, 2020 · ef51305 · ef51305
2 parents c93a4be + fd61b85
commit ef51305
Show file tree

Hide file tree

Showing 4 changed files with 266 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <!DOCTYPE html>
 <html>
   <head>
@@ -26,3 +27,33 @@ <h1 class="site-title"><a href="#">OSU Tutors</a></h1>
     </main>
   </body>
 </html>
+=======
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>OSU Tutors</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <header>
+      <div class="header-container">
+
+      </div>
+      <h1 class="site-title"><a href="#">OSU Tutors</a></h1>
+      <div class="navbar">
+        <a class="active" href="#home">Home</a>
+        <a href="tutors.html">Tutors</a>
+        <a href="#Contact">Contact</a>
+        <a href="#About">About</a>
+      </div>
+    </header>
+
+    <main class="content">
+
+
+    </main>
+  </body>
+</html>
+>>>>>>> origin/master
diff --git a/index.js b/index.js
@@ -1,6 +1,26 @@
+<<<<<<< HEAD
 var tutorModal = document.getElementById("book-tutor-button");
 tutorModal.addEventListener('click', function(){
   console.log("== the modal was clicked");
   document.getElementById('tutor-modal').style.display = "block";
   document.getElementById('tutor-modal-backdrop').style.display = "block";
 });
+=======
+var tutorModal = document.getElementById("book-tutor-button");
+var modalBackdrop = document.getElementById('tutor-modal-backdrop');
+var modal = document.getElementById('tutor-modal');
+
+tutorModal.addEventListener('click', function(){
+  console.log("== the modal was clicked");
+  modalBackdrop.classList.toggle('hidden');
+  modal.classList.toggle('hidden');
+});
+
+var tutorCloseButton = document.getElementById("modal-close");
+
+tutorCloseButton.addEventListener('click', function() {
+    console.log("x button was clicked");
+    modalBackdrop.classList.toggle('hidden');
+    modal.classList.toggle('hidden');
+});
+>>>>>>> origin/master
diff --git a/style.css b/style.css
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 /*
   * Name: Mason Crawford
   * First Draft of style.css
@@ -157,3 +158,160 @@ header {
 .modal-body {
   padding: 20px;
 }
+=======
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+p {
+    font-family: "Courier New", Courier, monospace;
+};
+
+header {
+    background-color: #dc4405;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.site-title {
+    font-family: "Courier New", Courier, monospace;
+    font-size: 80px;
+    font-weight: 100;
+    margin: 0 0 0 20px;
+    padding-top: 30px;
+}
+
+.site-title a:hover{
+    text-decoration: none;
+}
+
+.navbar {
+    background-color: #dc4405;
+    overflow: hidden;
+}
+
+.navbar a{
+    float: left;
+    color: black;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 30px;
+}
+
+.navbar a:hover{
+    text-decoration: underline;
+    color: #f7f7f7;
+    background-color: #000000;
+}
+
+.navbar a.active {
+    text-decoration: none;
+    color: #000000;
+    background-color: #f7f7f7;
+}
+
+.tutor-img-container img {
+    max-height: 240px;
+    max-width: 300px;
+}
+
+.tutor-info-container {
+    width: 100%;
+    margin-top: 20px;
+}
+
+.tutor-contents {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.tutor {
+    display: inline-block;
+    vertical-align: top;
+    height: 400px;
+    width: 400px;
+    margin: 10px;
+    padding: 10px;
+    border: 2px solid #dadada;
+    border-radius: 3px;
+}
+
+/*.tutor-major {
+    display: inline-block;
+    font-size: 80%;
+    padding: 3px;
+    margin: 3px 5px;
+    border: 1px solid #ababab;
+    border-radius: 3px;
+    background: #efefef;
+}*/
+
+#tutor-modal-backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0.85);
+}
+
+#tutor-modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1010;
+    overflow: scroll;
+}
+
+.hidden {
+    display: none;
+}
+
+.modal-dialog {
+    width: auto;
+    max-width: 600px;
+    min-width: 350px;
+    min-height: 300px;
+    margin: 40px auto;
+    background-color: #fff;
+    border-radius: 15px;
+}
+
+.modal-header {
+    position: relative;
+    padding: 10px 20px;
+}
+
+.modal-header h3 {
+    margin: 0;
+    font-size: 28px;
+}
+
+#modal-close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    font-size: 24px;
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+.modal-body {
+    padding: 20px;
+}
+>>>>>>> origin/master
diff --git a/tutors.html b/tutors.html
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <!DOCTYPE html>
 <html>
   <head>
@@ -51,3 +52,59 @@ <h3>Sandy Cheeks</h3>
   </body>
 
 </html>
+=======
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>OSU Tutors</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="index.js" charset="utf-8" defer></script>
+  </head>
+
+  <body>
+    <header>
+      <div class="header-container">
+
+      </div>
+      <h1 class="site-title"><a href="#">OSU Tutors</a></h1>
+      <div class="navbar">
+        <a href="index.html">Home</a>
+        <a class="active" href="tutors.html">Tutors</a>
+        <a href="#Contact">Contact</a>
+        <a href="#About">About</a>
+      </div>
+    </header>
+
+    <main class="content">
+      <section id="tutors">
+
+        <div class="tutor" data-name="Sandy Cheeks" data-year="Senior" data-major="Engineering">
+          <div class="tutor-contents">
+            <div class="tutor-img-container">
+              <img src="https://m.media-amazon.com/images/M/MV5BMjE5MzQ2MzM3MV5BMl5BanBnXkFtZTgwMjc2MzIzMjE@._V1_.jpg" alt="Sandy Cheeks">
+            </div>
+            <div class="tutor-info-container">
+              <a href="#" class="tutor-title">Sandy Cheeks</a> <span class="tutor-year">Senior</span> <span class="tutor-major">Engineering</span>
+              <button type="button" id="book-tutor-button" class="action-button">Book Session</button>
+            </div>
+          </div>
+
+      </section>
+      <div id="tutor-modal-backdrop" class="hidden"></div>
+      <div id="tutor-modal" class="hidden">
+        <div class="modal-dialog">
+          <div class="modal-header">
+            <h3>Sandy Cheeks</h3>
+            <button type="button" id="modal-close" class="modal-hide-button">&times;</button>
+          </div>
+          <div class="modal-body">
+            <p>Sandy Cheeks</p>
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+
+</html>
+>>>>>>> origin/master