Styled my homepage with CSS.

mumt301 · Oct 15, 2023 · b05f860 · b05f860
1 parent 3cb3cbb
commit b05f860
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/assignments.html b/assignments.html
@@ -2,10 +2,11 @@
 
     <head>
         <title>Assignments Mumt301</title>
+        <link rel="stylesheet" href="style.css">
     </head>
     <body>
-            <a href="index.html">Intro</a>
-        <p><a href="questionnaire.txt">Questionnaire</a></p>
+        <div class="Assignments"><a href="index.html">Intro</a></div>
+        <div class="Assignments"><p><a href="questionnaire.txt">Questionnaire</a></p></div>
     </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -1,25 +1,36 @@
 <html>
-    <head><b>The greatest webpage.</b></head>
-    <h2>Who am I?</h2>
-    <p>My name is Adam Motaouakkil. I study Computer Science and I am in my last semester of undergrad.</p>
-    <p>I love playing and listening to music, running, and spending quality time with people.</p>
-    <p>I love Robotics and general computer vision, I love travelling, and I don't know, what is there not to love about the world.</p>
-    <h2>Cool Pic of Me:</h2>
-    <img src="Cool_Pic.jpg" width="350" height="486">
+    <head>
+        <b>The greatest webpage.</b>
+        <link rel="stylesheet" href="style.css">
+    </head>
 
-    <h2>My classes for this semester</h2>
-        <p>
-            <a href="https://www.mcgill.ca/study/2023-2024/courses/comp-558"> COMP 558:</a> Computer Vision <br>
-            <a href="https://www.mcgill.ca/study/2023-2024/courses/musr-232"> MUSR 232:</a> Music Electronics <br>
-            <a href="https://www.mcgill.ca/study/2022-2023/courses/mumt-301"> MUMT 301:</a> Music and the Internet <br>
-        </p>
-
-    <h2>Classmates' Repositories</h2>
-        <a href="https://github.com/mumt301/Isaacluther"> Issac's Repo </a><br>
-        <a href="https://github.com/mumt301/MaxBP"> Max's Repo </a><br>
-        <a href="https://github.com/mumt301/peter-bullard"> Peter's Repo </a><br>
+    <body>
 
-        <h2>My Work!</h2>
-            <a href="./assignments.html"> Assignments </a><br>
+        <h2>Who am I?</h2>
+        <p>My name is Adam Motaouakkil. I study Computer Science and I am in my last semester of undergrad.</p>
+        <p>I love playing and listening to music, running, and spending quality time with people.</p>
+        <p>I love Robotics and general computer vision, I love travelling, and I don't know, what is there not to love about the world.</p>
+        <h2>Cool Pic of Me:</h2>
+        <img src="Cool_Pic.jpg" width="350" height="486">
+
+        <h2>My classes for this semester</h2>
+            <p>
+                <a href="https://www.mcgill.ca/study/2023-2024/courses/comp-558"> COMP 558:</a> Computer Vision <br>
+                <a href="https://www.mcgill.ca/study/2023-2024/courses/musr-232"> MUSR 232:</a> Music Electronics <br>
+                <a href="https://www.mcgill.ca/study/2022-2023/courses/mumt-301"> MUMT 301:</a> Music and the Internet <br>
+            </p>
+
+        <h2>Classmates' Repositories</h2>
+            <div class="Repos">
+                <a href="https://github.com/mumt301/Isaacluther"> Issac's Repo </a><br>
+                <a href="https://github.com/mumt301/MaxBP"> Max's Repo </a><br>
+                <a href="https://github.com/mumt301/peter-bullard"> Peter's Repo </a><br>
+                <a href="https://mumt301.github.io/Jeff_Leon_MUMT_301"> Jeff's Repo </a><br>
+                <a href="https://mumt301.github.io/MUMT301Assignment1Burns"> MUMT301Assignment1Burns' Repo </a><br>
+            </div>
+
+            <h2>My Work!</h2>
+            <div class="Assignments"><a href="./assignments.html"> Assignments </a><br></div>>
+    </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,9 @@
+body {background-color: lightblue;}
+a:link {color:darkgoldenrod;}
+a:visited {color:rebeccapurple}
+.Assignments {background-color: bisque;
+    padding:12px;
+} 
+.Repos {background-color: lightcoral;
+    padding:12px;
+}