diff --git a/.DS_Store b/.DS_Store index e29a3b4..0014b62 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/labs/.DS_Store b/labs/.DS_Store index b6b7a75..418cdcc 100644 Binary files a/labs/.DS_Store and b/labs/.DS_Store differ diff --git a/labs/lab5/.DS_Store b/labs/lab5/.DS_Store new file mode 100644 index 0000000..2bfc78b Binary files /dev/null and b/labs/lab5/.DS_Store differ diff --git a/labs/lab5/assets/.DS_Store b/labs/lab5/assets/.DS_Store new file mode 100644 index 0000000..0262f95 Binary files /dev/null and b/labs/lab5/assets/.DS_Store differ diff --git a/labs/lab5/assets/css/style.css b/labs/lab5/assets/css/style.css new file mode 100644 index 0000000..0f46767 --- /dev/null +++ b/labs/lab5/assets/css/style.css @@ -0,0 +1,162 @@ + +body { + margin: 0; + background: #eeeeee; + font-family: 'Raleway', sans-serif; +} + +/************/ +/*question 1*/ +/************/ + +/*Edit and add the necessary code for all of question 1, Navbar Madness, below */ + +#q1-navbar { + background: #364156; + color: white; +} + +#q1-navbar a{ + text-decoration: none; + color: white; + text-align: column; +} +.nav--button { + display: inline-block; + margin-left: 10px; + margin-right: 10px; +} + + + +/************/ +/*question 2*/ +/************/ + +/* No selectors given :o */ + +/* Add the necessary code for all of question 2, flexbox-ception, below */ +#q2-container { + display: flex; + flex-direction: center; + align-items: center; + text-align: center; + justify-content:space-around; +} +.q2-big-box { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} +.q2-tiny-box { + width:50px; +} + + + + + + +/*************************/ +/*OTHER CODE THAT WE USED*/ +/*************************/ + +/*Question 1 stuff*/ +#q1-navbar { + position: fixed; + width: 100%; + z-index: 1; +} + +.q1-section { + width: 100%; + height: 400px; + opacity: 0.5; +} +.q1-section:nth-child(odd) { + background-color: #EE6352; +} +.q1-section:nth-child(even) { + background-color: #F79D84; +} + +/*Question 2 stuff*/ +#q2-body { + background-color: #C7EAE4; +} +#q2-container { + width: 100vw; + height:100vh; +} + +.q2-big-box { + background-color: #A7E8BD; + border: 4px solid white; + border-radius: 4px; + width: 200px; + height: 200px; +} + +.q2-tiny-box { + border: 2px solid white; + border-radius: 4px; + background-color: #FCBCB8; + font-size: 0.5em; + padding: 8px 4px; + margin: 2px; +} + + +/*index*/ + + +#index { + display: grid; + grid-template-columns: 240px; + grid-template-rows: 200px; + justify-content: center; + align-items: content; + font-weight: 700; +} + +#index a { + text-decoration: none; +} + +.question { + background: #62C370; + padding: 18px; + font-size: 16px; + margin-bottom: 6px; + border-radius: 2px; + text-align: center; + font-weight: 700; + color: #4a4a4a; + cursor: pointer; + box-shadow: 2px 2px 10px -3px black; + color: white; +} + +.question:hover { + box-shadow: 2px 2px 10px -5px black; + opacity: 0.8; +} + +.title { + color: #333333; + background: #eeeeee; + box-shadow: none; + display: grid; + justify-self: center; + font-size: 36px; + width: 400px; + height: 100px; + margin-top: 24px; + cursor: auto !important; +} + +.title:hover { + box-shadow: none !important; + opacity: 1 !important; +} diff --git a/labs/lab5/index.html b/labs/lab5/index.html index bf6125b..d2b1990 100644 --- a/labs/lab5/index.html +++ b/labs/lab5/index.html @@ -1,6 +1,14 @@ - - - Lab 1 - - \ No newline at end of file + +Lab 5 Contents + + + + +
+
Lab 5: Flexbox Your Flexbox!
+
Question 1
 +
Question 2
 +
+ + diff --git a/labs/lab5/q1.html b/labs/lab5/q1.html new file mode 100644 index 0000000..5a082e2 --- /dev/null +++ b/labs/lab5/q1.html @@ -0,0 +1,35 @@ + + + + + Lab 5 | Q1 + + + + +
+ +
+
+ + Home + +
+
+ + About + +
+
+ + Contact + +
+
+
+
+
+
+
+ + diff --git a/labs/lab5/q2.html b/labs/lab5/q2.html new file mode 100644 index 0000000..69845fb --- /dev/null +++ b/labs/lab5/q2.html @@ -0,0 +1,28 @@ + + + + + Lab 5 | Q2 + + + + +
+
+
flexbox
+
flexbox
+
flexbox
+
+
+
flexbox
+
flexbox
+
flexbox
+
+
+
flexbox
+
flexbox
+
flexbox
+
+
+ + diff --git a/midterm/.DS_Store b/midterm/.DS_Store index 759562a..addb397 100644 Binary files a/midterm/.DS_Store and b/midterm/.DS_Store differ diff --git a/midterm/css/style.css b/midterm/css/style.css index 72a84bf..f582908 100644 --- a/midterm/css/style.css +++ b/midterm/css/style.css @@ -20,18 +20,18 @@ html { color:#fff; } .navbar-item { - margin-right: 20px; /*Add margin between navbar items */ + margin-right: 20px; margin-left: 20px; - text-decoration: none; /* Remove underline from links */ - color: black; /* Set text color for links */ + text-decoration: none; + color: black; } /* .navbar-item:hover { transform: scale(1.25); } */ #title{ - display: flex; /* Use flexbox to center horizontally */ - justify-content: center; /* Center content horizontally */ - align-items: center; /* Center content vertically */ + display: flex; + justify-content: center; + align-items: center; } .content { width:100%; @@ -93,7 +93,7 @@ html { justify-content: center; } .bottom--button img { - display: block; /* Make the image a block element to stack text below it */ + display: block; margin: 10px; } .bottom--button:hover {